@lieberweiss/react-offers
v0.0.1
Published
Downloads
1
Readme
TODO
Usage
import {Offers, OffersProvider, useOffersContext, useEventBus } from "@fasstech/react-offers";
import styles from './styles'
const App = () => {
const {
data, // entry data
setData, // set data
styles, // entry styles
setStyles, // set styles
setCellClassName, // setCellClassName(styleType, cellIndex, className || (classes) => {}, merge = false)
setRowClassName, // setRowClassName(rowIndex, className || (classes) => {}, merge = false)
setOverlayColumnClassName, // setOverlayColumnClassName(index, className || (classes) => {}, merge = false)
showRow, // showRow(row index)
hideRow, // hideRow(row index)
showColumn, // showColumn(column index)
hideColumn, // hideColumn(column index)
offerInfo // offerInfo()
} = useOffersContext()
return <Offers/>;
};
const WrapperApp = () => {
const data = fetch('/data...');
return (
<OffersProvider styles={offerStyles} data={data}>
<App/>
</OffersProvider>
);
};
définition des styles
export const offerStyles = {
// Required
default: {
containerClassName: 'relative w-full pt-5',
hideClassName: 'hidden',
overlayClassName: 'absolute top-0 left-0 bottom-0 right-0 min-w-max',
tableClassName: 'relative min-w-max pb-10'
},
columns: {
rowClassName: 'flex flex-row h-full relative',
defaultCell: {
commonClassName: 'w-48 mr-1 flex',
className: 'border rounded-t-lg bg-yellow-500'
},
cells: [
{ commonClassName: 'w-64 mr-1 flex', className: '' },
{ commonClassName: 'w-44 mr-1 flex', className: 'border bg-gray-100 rounded-t-lg' },
{ commonClassName: 'w-48 mr-1 flex', className: 'border bg-gray-100 rounded-t-lg' },
{ },
{ commonClassName: 'w-48 mr-1 flex', className: 'border bg-blue-400 rounded-t-lg' }
]
},
body: {
rowClassName: 'flex flex-row items-stretch py-2',
defaultCell: {
className: 'w-full font-bold text-xs bg-green-100 border-x border-red-900 text-center'
},
cells: [
{ className: 'font-bold text-red-900', component: <OffersButton/> },
{ className: 'w-full font-bold text-xs bg-green-400 border border-blue-300', component: <OffersButton/> }
]
},
body2: {
rowClassName: 'flex flex-row items-stretch py-2 -ml-10 pl-[calc(2.5rem-1px)] border rounded',
defaultCell: {
className: 'w-full font-bold text-xs bg-green-100 border-x__ border-red-900 text-center'
},
cells: [
{ className: 'font-bold text-red-900' },
{ className: 'w-full font-bold text-xs bg-green-400 border border-blue-300' },
{ className: 'w-full font-bold text-xs text-red-200 border-x bg-blue-200' }
]
}
};
Définition de la données
export const data = [
{
description: 'Tarifs entête',
styleType: 'body',
cells: [
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs' },
{ label: 'Tarifs fdlmfkdsmfkdslmkflmdskmdls fmldk fmldskfl mdskf kdslmfk dlsmkfmldsk fmldsklmf dksmfkdsmfk mldskfmlds kfmldskflmdsk mlfkdsmlk fmdlkf mdlskflmdskfl mdslkm ' }
]
},
{
description: 'Structures Tarifaires ligne 1',
styleType: 'body2',
cells: [
{ label: 'Structures tarifaires' },
{ label: '2000€' },
{ label: 'Other' }
]
},
{
description: 'Structures Tarifaires ligne 2',
styleType: 'body',
cells: [
{ label: 'Tarifs' },
{},
{ label: '40 € / 50 €' },
{ label: '40 € / 50 €' },
{ label: '40 € / 50 €' }
]
},
{
description: 'Tarifs ligne 1',
styleType: 'body',
cells: [
{ label: 'Salarié seul' },
{},
{ label: '74,04 € / mois' },
{ label: '13,36 € / mois' },
{ label: '80,22 € / mois' }
]
},
{
description: 'Tarifs ligne 2',
styleType: 'body',
cells: [
{ label: 'Salarié + conjoint' },
{},
{ label: '157,69 € / mois' },
{ label: '145,35 € / mois' },
{ label: '158,72 € / mois' }
]
},
{
description: 'Tarifs ligne 3',
styleType: 'body',
cells: [
{ label: 'Salarié + 1 enfant (sans conjoint)' },
{},
{ label: '98,38 € / mois' },
{ label: '73,36 € / mois' },
{ label: '80,22 € / mois' }
]
},
{
description: 'Tarifs ligne 4',
styleType: 'body',
cells: [
{ label: 'Salarié + 2 enfants (sans conjoint)' },
{},
{ label: '98,38 € / mois' },
{ label: '73,36 € / mois' },
{ label: '80,22 € / mois' }
]
},
{
description: 'Tarifs ligne 5',
styleType: 'body',
cells: [
{ label: 'Salarié + conjoint + 1 enfants' },
{},
{ label: '98,38 € / mois' },
{ label: '73,36 € / mois' },
{ label: '80,22 € / mois' }
]
},
{
description: 'Tarifs ligne 6',
styleType: 'body',
cells: [
{ label: 'Salarié + conjoint + 2 enfants' },
{},
{ label: '98,38 € / mois' },
{ label: '73,36 € / mois' },
{ label: '80,22 € / mois' }
]
},
{
description: 'Prise en charge employeur',
styleType: 'body',
cells: [
{ label: 'Prise en charge employeur' },
{},
{ label: '1000 €/an' },
{ label: '1400 €/an' },
{ label: '2200 €/an' }
]
},
{
description: 'Budget total',
styleType: 'body',
cells: [
{ label: 'Budget total' },
{},
{ label: '2800 €/an' },
{ label: '2800 €/an' },
{ label: '4400 €/an' }
]
}
];