@eureca/eureca-ui/src/components/Table/stories/table.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import { basicColumns, basicContent } from '../mock/basic.mock';
import { fixedColumns, fixedContent } from '../mock/fixed.mock';

import { Table } from '../';

export default { title: 'Material/Table', decorators: [withKnobs], includeStories: [] };

export function BasicTable() {
  const checkboxes = boolean('Checkboxes', true);

  const [selected, setSelected] = React.useState([]);

  const handleCheckRow = id => {
    const selectedIndex = selected.indexOf(id);

    if (selectedIndex === -1) {
      setSelected([...selected, id]);
    } else {
      const newSelected = [...selected];
      newSelected.splice(selectedIndex, 1);
      setSelected(newSelected);
    }
  };

  const handleCheckHeader = isSelected => {
    if (isSelected) {
      const newSelecteds = basicContent.map(n => n.id);
      return setSelected(newSelecteds);
    }
    return setSelected([]);
  };

  return (
    <Table
      initialSelected={selected}
      tableColumns={basicColumns}
      tableContent={basicContent}
      selectedRows={value => setSelected(value)}
      emptyTableText={`Nenhum candidato se inscreveu nessa oportunidade por enquanto.
    Volte mais tarde para conferir novamente`}
      checkboxes={checkboxes}
      onCheckRow={handleCheckRow}
      onCheckHeader={handleCheckHeader}
    />
  );
}

export function FixedColumnTable() {
  return (
    <Table
      tableColumns={fixedColumns}
      tableContent={fixedContent}
      rowHandler={action('row-click')}
      selectedRows={action('selected-rows')}
      emptyTableText={`Nenhum candidato se inscreveu nessa oportunidade por enquanto.
    Volte mais tarde para conferir novamente`}
    />
  );
}