gridEditable.stories.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import {withInfo} from '@storybook/addon-info';
  4. import Button from 'app/components/button';
  5. import GridEditable from 'app/components/gridEditable';
  6. const COLUMN_ORDER = [
  7. {
  8. key: 'farm',
  9. name: 'farm',
  10. width: -1,
  11. },
  12. {
  13. key: 'count(apple)',
  14. name: 'apples sold',
  15. width: -1,
  16. },
  17. {
  18. key: 'count(banana)',
  19. name: 'banana sold',
  20. width: -1,
  21. },
  22. ];
  23. const COLUMN_SORT_BY = [
  24. {
  25. key: 'count(apple)',
  26. order: -1,
  27. },
  28. ];
  29. const DATA = [
  30. {
  31. farm: 'Old McDonalds',
  32. 'count(apple)': 100,
  33. 'count(banana)': 500,
  34. 'count(cherry)': 200,
  35. 'count(date)': 400,
  36. 'count(eggplant)': 600,
  37. },
  38. {
  39. farm: 'Animal Farm',
  40. 'count(apple)': 900,
  41. 'count(banana)': 600,
  42. 'count(cherry)': 200,
  43. 'count(date)': 500,
  44. 'count(eggplant)': 700,
  45. },
  46. {
  47. farm: 'Avocado Toast Farm',
  48. 'count(apple)': 700,
  49. 'count(banana)': 600,
  50. 'count(cherry)': 500,
  51. 'count(date)': 400,
  52. 'count(eggplant)': 500,
  53. },
  54. ];
  55. class GridParent extends React.Component {
  56. static propTypes = {
  57. withHeader: PropTypes.bool,
  58. title: PropTypes.string,
  59. };
  60. state = {
  61. columnOrder: [...COLUMN_ORDER],
  62. columnSortBy: [...COLUMN_SORT_BY],
  63. };
  64. handleResizeColumn = (index, newColumn) => {
  65. const columnOrder = [...this.state.columnOrder];
  66. columnOrder[index] = {...columnOrder[index], width: newColumn.width};
  67. this.setState({columnOrder});
  68. };
  69. render() {
  70. const {withHeader, title} = this.props;
  71. const headerButtons = withHeader
  72. ? () => <Button size="small">Action Button</Button>
  73. : null;
  74. return (
  75. <GridEditable
  76. headerButtons={headerButtons}
  77. isLoading={false}
  78. error={null}
  79. data={DATA}
  80. columnOrder={this.state.columnOrder}
  81. columnSortBy={this.state.columnSortBy}
  82. title={title}
  83. grid={{
  84. onResizeColumn: this.handleResizeColumn,
  85. }}
  86. />
  87. );
  88. }
  89. }
  90. export default {
  91. title: 'UI/GridEditable',
  92. };
  93. export const Default = withInfo('Render a simple resizable table')(() => (
  94. <React.Fragment>
  95. <div className="section">
  96. <h2>Basic Table</h2>
  97. <GridParent />
  98. </div>
  99. </React.Fragment>
  100. ));
  101. Default.story = {
  102. name: 'default',
  103. };
  104. export const WithAHeader = withInfo('Include a header and action buttons')(() => (
  105. <div className="section">
  106. <h2>Table with title & header buttons</h2>
  107. <GridParent withHeader title="Results" />
  108. </div>
  109. ));
  110. WithAHeader.story = {
  111. name: 'with a header',
  112. };
  113. export const IsLoading = withInfo('')(() => (
  114. <div className="section">
  115. <h2>Loading</h2>
  116. <GridEditable
  117. isEditable={false}
  118. isLoading
  119. error={null}
  120. data={DATA}
  121. columnOrder={COLUMN_ORDER}
  122. columnSortBy={COLUMN_SORT_BY}
  123. grid={{}}
  124. />
  125. </div>
  126. ));
  127. IsLoading.story = {
  128. name: 'isLoading',
  129. };
  130. export const IsError = withInfo('')(() => (
  131. <div className="section">
  132. <h2>Error</h2>
  133. <GridEditable
  134. isEditable={false}
  135. isLoading
  136. error="These aren't the droids you're looking for."
  137. data={DATA}
  138. columnOrder={COLUMN_ORDER}
  139. columnSortBy={COLUMN_SORT_BY}
  140. grid={{}}
  141. />
  142. </div>
  143. ));
  144. IsError.story = {
  145. name: 'isError',
  146. };