bulkController.stories.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import React from 'react';
  2. import {withInfo} from '@storybook/addon-info';
  3. import styled from '@emotion/styled';
  4. import {PanelTable} from 'app/components/panels';
  5. import Checkbox from 'app/components/checkbox';
  6. import BulkController from 'app/components/bulkController';
  7. const dummy = [
  8. {
  9. id: 1,
  10. text:
  11. '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.',
  12. },
  13. {
  14. id: 2,
  15. text:
  16. '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.',
  17. },
  18. {
  19. id: 3,
  20. text:
  21. '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.',
  22. },
  23. {
  24. id: 4,
  25. text:
  26. '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.',
  27. },
  28. {
  29. id: 5,
  30. text:
  31. '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.',
  32. },
  33. ];
  34. export default {
  35. title: 'UI/BulkController',
  36. };
  37. export const _BulkController = withInfo({
  38. text: 'Component for working with bulk actions.',
  39. })(() => (
  40. <BulkController
  41. pageIds={dummy.map(d => d.id)}
  42. allRowsCount={23}
  43. columnsCount={3}
  44. bulkLimit={1000}
  45. >
  46. {({selectedIds, onPageRowsToggle, onRowToggle, isPageSelected, renderBulkNotice}) => (
  47. <PanelTable
  48. headers={[
  49. <StyledCheckbox
  50. key="bulk-checkbox"
  51. checked={isPageSelected}
  52. onChange={e => onPageRowsToggle(e.target.checked)}
  53. />,
  54. 'Id',
  55. 'Text',
  56. ]}
  57. >
  58. {renderBulkNotice()}
  59. {dummy.map(d => (
  60. <React.Fragment key={d.id}>
  61. <div>
  62. <StyledCheckbox
  63. checked={selectedIds.includes(d.id)}
  64. onChange={() => onRowToggle(d.id)}
  65. />
  66. </div>
  67. <div>{d.id}</div>
  68. <div>{d.text}</div>
  69. </React.Fragment>
  70. ))}
  71. </PanelTable>
  72. )}
  73. </BulkController>
  74. ));
  75. const StyledCheckbox = styled(Checkbox)`
  76. margin-top: 0 !important;
  77. `;