@lieberweiss/react-offers v0.0.1

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' }
    ]
  }
];