import React from 'react'; import {withInfo} from '@storybook/addon-info'; import styled from '@emotion/styled'; import {PanelTable} from 'app/components/panels'; import Checkbox from 'app/components/checkbox'; import BulkController from 'app/components/bulkController'; const dummy = [ { id: 1, text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium autem placeat corrupti sapiente optio. Sapiente, aut exercitationem nisi nesciunt molestiae perspiciatis ad illo at officiis porro quam voluptas explicabo quod.', }, { id: 2, text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium autem placeat corrupti sapiente optio. Sapiente, aut exercitationem nisi nesciunt molestiae perspiciatis ad illo at officiis porro quam voluptas explicabo quod.', }, { id: 3, text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium autem placeat corrupti sapiente optio. Sapiente, aut exercitationem nisi nesciunt molestiae perspiciatis ad illo at officiis porro quam voluptas explicabo quod.', }, { id: 4, text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium autem placeat corrupti sapiente optio. Sapiente, aut exercitationem nisi nesciunt molestiae perspiciatis ad illo at officiis porro quam voluptas explicabo quod.', }, { id: 5, text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium autem placeat corrupti sapiente optio. Sapiente, aut exercitationem nisi nesciunt molestiae perspiciatis ad illo at officiis porro quam voluptas explicabo quod.', }, ]; export default { title: 'UI/BulkController', }; export const _BulkController = withInfo({ text: 'Component for working with bulk actions.', })(() => ( d.id)} allRowsCount={23} columnsCount={3} bulkLimit={1000} > {({selectedIds, onPageRowsToggle, onRowToggle, isPageSelected, renderBulkNotice}) => ( onPageRowsToggle(e.target.checked)} />, 'Id', 'Text', ]} > {renderBulkNotice()} {dummy.map(d => (
onRowToggle(d.id)} />
{d.id}
{d.text}
))}
)}
)); const StyledCheckbox = styled(Checkbox)` margin-top: 0 !important; `;