@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Table/Table-story.js

@@ -0,0 +1,428 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _tableData = require("../../../.storybook/data/tableData");
+
+var _formik = require("formik");
+
+var _index = _interopRequireWildcard(require("./index"));
+
+var _Layout = _interopRequireWildcard(require("../Layout"));
+
+var _Card = _interopRequireWildcard(require("../Card"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _Tabs = _interopRequireDefault(require("../Tabs/Tabs"));
+
+var _Forms = require("../Forms");
+
+var stories = (0, _react2.storiesOf)('Table', module);
+stories.addDecorator(_react3.withKnobs);
+var staticLocations = (0, _tableData.generateLocations)({
+  amount: 149
+});
+var columns = [{
+  Header: 'Public Name',
+  accessor: 'publicName',
+  // NOTE: It looks like with has to be passed here to override built-in inline styles
+  minWidth: 300,
+  maxWidth: 400,
+  Cell: function PublicNameCell(row) {
+    return _react["default"].createElement("a", {
+      href: "#"
+    }, row.value);
+  }
+}, {
+  Header: 'Store',
+  accessor: 'storeNumber',
+  minWidth: 80,
+  maxWidth: 100
+}, {
+  Header: 'Status',
+  accessor: 'status',
+  minWidth: 80,
+  maxWidth: 100
+}, {
+  Header: 'Address',
+  accessor: 'address',
+  minWidth: 420,
+  maxWidth: 500
+}];
+
+var ExpandableEditableTable =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2["default"])(ExpandableEditableTable, _React$Component);
+
+  function ExpandableEditableTable(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ExpandableEditableTable);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ExpandableEditableTable).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChangeHours", function (e, location, dayId) {
+      var locations = _this.state.locations;
+      locations.forEach(function (l) {
+        if (l.id === location.id) {
+          var updatedSchedule = l.schedule.map(function (day) {
+            var updatedDay = day;
+
+            if (day.id === dayId) {
+              l.isDirty = true;
+              updatedDay.hours = e.target.value;
+              updatedDay.isDirty = true;
+            }
+
+            return updatedDay;
+          });
+          l.schedule = updatedSchedule;
+        }
+      });
+
+      _this.setState({
+        locations: locations
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleValidation",
+    /*#__PURE__*/
+    function () {
+      var _ref = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee(location, dayId) {
+        var errors, locations, updatedLocation, updatedScheduleDay;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                errors = {};
+                locations = _this.state.locations;
+                updatedLocation = locations.find(function (l) {
+                  return l.id === location.id;
+                });
+                updatedScheduleDay = updatedLocation && updatedLocation.schedule.find(function (day) {
+                  return day.id === dayId;
+                });
+
+                if (updatedLocation && updatedScheduleDay && !updatedScheduleDay.isDirty) {
+                  updatedLocation.isDirty = true;
+                  updatedScheduleDay.isDirty = true;
+
+                  _this.setState({
+                    locations: locations
+                  });
+                }
+
+                return _context.abrupt("return", errors);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSaveHours",
+    /*#__PURE__*/
+    function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee2(location, dayId, values) {
+        var locations, updatedLocation, updatedScheduleDay;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                locations = _this.state.locations;
+                updatedLocation = locations.find(function (l) {
+                  return l.id === location.id;
+                });
+                updatedScheduleDay = updatedLocation && updatedLocation.schedule.find(function (day) {
+                  return day.id === dayId;
+                });
+
+                if (updatedLocation && updatedScheduleDay) {
+                  updatedScheduleDay.hours = values.hours || '';
+                  updatedLocation.isDirty = false;
+                  updatedScheduleDay.isDirty = false;
+
+                  _this.setState({
+                    locations: locations
+                  });
+                }
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x3, _x4, _x5) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderStoreScheduleForRow", function (row) {
+      var location = _this.state.locations[row.index];
+      var schedule = location && location.schedule;
+      return schedule ? _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Card.CardHeader, {
+        title: 'Store Schedule'
+      }), _react["default"].createElement(_index["default"], {
+        isSelectable: true,
+        className: "store-schedule-table",
+        data: schedule,
+        columns: [{
+          Header: 'Day',
+          accessor: 'day',
+          minWidth: 100,
+          maxWidth: 300
+        }, {
+          Header: 'Hours',
+          accessor: 'hours',
+          minWidth: 100,
+          maxWidth: 500
+        }],
+        collapseOnDataChange: false,
+        loading: false,
+        pageSize: schedule.length,
+        showPagination: false,
+        subComponentForRow: function subComponentForRow(row) {
+          return _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(_formik.Formik, {
+            initialValues: row.original,
+            validate: function validate(values) {
+              return _this.handleValidation(location, row.original.id, values);
+            },
+            render: function render(formikProps) {
+              var handleChange = formikProps.handleChange,
+                  values = formikProps.values;
+              return _react["default"].createElement("form", {
+                onSubmit: formikProps.handleSubmit
+              }, _react["default"].createElement(_Forms.FormLayout, null, _react["default"].createElement(_Forms.FormLayoutGroup, null, _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+                label: "".concat(row.original.day, " Store Hours"),
+                onChange: handleChange,
+                name: "hours",
+                value: values.hours || ''
+              })), _react["default"].createElement(_Forms.FormLayoutItem, {
+                spacerTop: true
+              }, _react["default"].createElement(_Button["default"], {
+                kind: "primary",
+                onClick: function onClick() {
+                  return _this.handleSaveHours(location, row.original.id, values);
+                },
+                disabled: !row.original.isDirty,
+                text: "Save"
+              })))));
+            }
+          }));
+        },
+        rowIsDirty: function rowIsDirty(row) {
+          return row.original.isDirty;
+        },
+        keyField: "id"
+      })) : null;
+    });
+    _this.state = {
+      locations: (0, _tableData.generateLocations)({
+        amount: 149
+      })
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ExpandableEditableTable, [{
+    key: "render",
+    value: function render() {
+      var locations = this.state.locations;
+      return _react["default"].createElement(_index["default"], {
+        className: "store-locations-table",
+        data: locations,
+        columns: columns,
+        sortable: true,
+        defaultPageSize: 50,
+        defaultSorted: [{
+          id: 'publicName',
+          desc: false
+        }],
+        loading: false,
+        collapseOnDataChange: false,
+        paginationProps: {
+          showPages: true,
+          onPageButtonClick: function onPageButtonClick() {
+            return console.log('onPageButtonClick');
+          },
+          totalPages: Math.ceil(locations.length / 50),
+          currentPage: 0
+        },
+        rowIsDirty: function rowIsDirty(row) {
+          return row.original.isDirty;
+        },
+        subComponentForRow: this.renderStoreScheduleForRow,
+        keyField: "id"
+      });
+    }
+  }]);
+  return ExpandableEditableTable;
+}(_react["default"].Component);
+
+stories.add('Table', function () {
+  return _react["default"].createElement(_Layout["default"], {
+    width: "full-width"
+  }, _react["default"].createElement(_Layout.LayoutSection, null, _react["default"].createElement(_Card["default"], null, (0, _react3["boolean"])('Show Title', false) && _react["default"].createElement(_Card.CardHeader, {
+    title: (0, _react3.text)('Title', 'Locations')
+  }), (0, _react3["boolean"])('Show Tabs', false) && _react["default"].createElement(_Tabs["default"], {
+    tabs: [{
+      text: 'All locations',
+      isCurrent: true
+    }, {
+      text: 'Midwest'
+    }, {
+      text: 'Northeast'
+    }],
+    isPadded: true
+  }), _react["default"].createElement(_index.TableSearch, {
+    placeholder: "Search locations\u2026"
+  }), (0, _react3["boolean"])('Is Filtered', false) && _react["default"].createElement(_index.TableFilters, {
+    filters: [{
+      text: 'State: IL'
+    }, {
+      text: 'Status: Published'
+    }, {
+      text: 'City: Bolingbrook'
+    }, {
+      text: 'City: Chicago'
+    }, {
+      text: 'Chimera Hair Salon'
+    }]
+  }), _react["default"].createElement(_index["default"], {
+    className: "services-table",
+    data: staticLocations,
+    columns: columns,
+    sortable: true,
+    defaultPageSize: 50,
+    defaultSorted: [{
+      id: 'publicName',
+      desc: false
+    }],
+    loading: false,
+    paginationProps: {
+      showPages: true,
+      onPageButtonClick: function onPageButtonClick() {
+        return console.log('onPageButtonClick');
+      },
+      totalPages: Math.ceil(staticLocations.length / 50),
+      currentPage: 0
+    },
+    keyField: "id"
+  }))));
+}).add('Expandable Table', function () {
+  return _react["default"].createElement(_Layout["default"], {
+    width: "full-width"
+  }, _react["default"].createElement(_Layout.LayoutSection, null, _react["default"].createElement(_Card["default"], null, _react["default"].createElement(ExpandableEditableTable, null))));
+}).add('Selectable Table', function () {
+  return _react["default"].createElement(_Layout["default"], {
+    width: "full-width"
+  }, _react["default"].createElement(_Layout.LayoutSection, null, _react["default"].createElement(_Card["default"], null, (0, _react3["boolean"])('Show Title', false) && _react["default"].createElement(_Card.CardHeader, {
+    title: (0, _react3.text)('Title', 'Locations')
+  }), (0, _react3["boolean"])('Show Tabs', false) && _react["default"].createElement(_Tabs["default"], {
+    tabs: [{
+      text: 'All locations',
+      isCurrent: true
+    }, {
+      text: 'Midwest'
+    }, {
+      text: 'Northeast'
+    }],
+    isPadded: true
+  }), _react["default"].createElement(_index.TableSearch, {
+    placeholder: "Search locations\u2026"
+  }), (0, _react3["boolean"])('Is Filtered', false) && _react["default"].createElement(_index.TableFilters, {
+    filters: [{
+      text: 'State: IL'
+    }, {
+      text: 'Status: Published'
+    }, {
+      text: 'City: Bolingbrook'
+    }, {
+      text: 'City: Chicago'
+    }, {
+      text: 'Chimera Hair Salon'
+    }]
+  }), _react["default"].createElement(_index["default"], {
+    className: "services-table-selectable",
+    data: staticLocations,
+    columns: columns,
+    sortable: true,
+    defaultPageSize: 50,
+    defaultSorted: [{
+      id: 'publicName',
+      desc: false
+    }],
+    loading: false,
+    paginationProps: {
+      showPages: true,
+      onPageButtonClick: function onPageButtonClick() {
+        return console.log('onPageButtonClick');
+      },
+      totalPages: Math.ceil(staticLocations.length / 50),
+      currentPage: 0
+    },
+    isSelectable: true,
+    kind: "location",
+    selectType: "checkbox",
+    bulkActions: [{
+      text: 'Add to location group',
+      onClick: function onClick() {
+        return console.log('Click');
+      }
+    }, {
+      text: 'Make locations live',
+      onClick: function onClick() {
+        return console.log('Click');
+      }
+    }, {
+      text: 'Hide locations',
+      onClick: function onClick() {
+        return console.log('Click');
+      }
+    }, {
+      text: 'Delete locations',
+      onClick: function onClick() {
+        return console.log('Click');
+      }
+    }],
+    keyField: "id"
+  }))));
+});
+//# sourceMappingURL=Table-story.js.map

package/lib/components/Table/Table-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/Table-story.js"],"names":["stories","module","addDecorator","withKnobs","staticLocations","amount","columns","Header","accessor","minWidth","maxWidth","Cell","PublicNameCell","row","value","ExpandableEditableTable","props","e","location","dayId","locations","state","forEach","l","id","updatedSchedule","schedule","map","day","updatedDay","isDirty","hours","target","setState","errors","updatedLocation","find","updatedScheduleDay","values","index","length","original","handleValidation","formikProps","handleChange","handleSubmit","handleSaveHours","desc","showPages","onPageButtonClick","console","log","totalPages","Math","ceil","currentPage","renderStoreScheduleForRow","React","Component","add","text","isCurrent","onClick"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs/react'\nimport { generateLocations } from '../../../.storybook/data/tableData'\nimport { Formik } from 'formik'\nimport Table, { TableSearch, TableFilters } from './index'\nimport Layout, { LayoutSection } from '../Layout'\nimport Card, { CardHeader, CardBody } from '../Card'\nimport Button from '../Button/Button'\nimport Tabs from '../Tabs/Tabs'\nimport {\n\tTextInput,\n\tFormLayout,\n\tFormLayoutGroup,\n\tFormLayoutItem\n} from '../Forms'\n\nconst stories = storiesOf('Table', module)\n\nstories.addDecorator(withKnobs)\n\nconst staticLocations = generateLocations({ amount: 149 })\n\nconst columns = [\n\t{\n\t\tHeader: 'Public Name',\n\t\taccessor: 'publicName',\n\t\t// NOTE: It looks like with has to be passed here to override built-in inline styles\n\t\tminWidth: 300,\n\t\tmaxWidth: 400,\n\t\tCell: function PublicNameCell(row) {\n\t\t\treturn <a href=\"#\">{row.value}</a>\n\t\t}\n\t},\n\t{\n\t\tHeader: 'Store',\n\t\taccessor: 'storeNumber',\n\t\tminWidth: 80,\n\t\tmaxWidth: 100\n\t},\n\t{\n\t\tHeader: 'Status',\n\t\taccessor: 'status',\n\t\tminWidth: 80,\n\t\tmaxWidth: 100\n\t},\n\t{\n\t\tHeader: 'Address',\n\t\taccessor: 'address',\n\t\tminWidth: 420,\n\t\tmaxWidth: 500\n\t}\n]\n\ntype State = {\n\tlocations: Array<Object>\n}\n\ntype Props = {}\n\nclass ExpandableEditableTable extends React.Component<Props, State> {\n\tconstructor(props) {\n\t\tsuper(props)\n\t\tthis.state = {\n\t\t\tlocations: generateLocations({ amount: 149 })\n\t\t}\n\t}\n\n\thandleChangeHours = (e, location, dayId) => {\n\t\tconst { locations } = this.state\n\n\t\tlocations.forEach(l => {\n\t\t\tif (l.id === location.id) {\n\t\t\t\tconst updatedSchedule = l.schedule.map(day => {\n\t\t\t\t\tconst updatedDay = day\n\t\t\t\t\tif (day.id === dayId) {\n\t\t\t\t\t\tl.isDirty = true\n\t\t\t\t\t\tupdatedDay.hours = e.target.value\n\t\t\t\t\t\tupdatedDay.isDirty = true\n\t\t\t\t\t}\n\t\t\t\t\treturn updatedDay\n\t\t\t\t})\n\n\t\t\t\tl.schedule = updatedSchedule\n\t\t\t}\n\t\t})\n\n\t\tthis.setState({ locations })\n\t}\n\n\thandleValidation = async (location: Object, dayId) => {\n\t\tlet errors = {}\n\n\t\tconst { locations } = this.state\n\n\t\tconst updatedLocation = locations.find(l => l.id === location.id)\n\t\tconst updatedScheduleDay =\n\t\t\tupdatedLocation && updatedLocation.schedule.find(day => day.id === dayId)\n\n\t\tif (updatedLocation && updatedScheduleDay && !updatedScheduleDay.isDirty) {\n\t\t\tupdatedLocation.isDirty = true\n\t\t\tupdatedScheduleDay.isDirty = true\n\t\t\tthis.setState({ locations })\n\t\t}\n\n\t\treturn errors\n\t}\n\n\thandleSaveHours = async (location: Object, dayId, values) => {\n\t\tconst { locations } = this.state\n\n\t\tconst updatedLocation = locations.find(l => l.id === location.id)\n\t\tconst updatedScheduleDay =\n\t\t\tupdatedLocation && updatedLocation.schedule.find(day => day.id === dayId)\n\n\t\tif (updatedLocation && updatedScheduleDay) {\n\t\t\tupdatedScheduleDay.hours = values.hours || ''\n\t\t\tupdatedLocation.isDirty = false\n\t\t\tupdatedScheduleDay.isDirty = false\n\t\t\tthis.setState({ locations })\n\t\t}\n\t}\n\n\trenderStoreScheduleForRow = (row: Object) => {\n\t\tconst location = this.state.locations[row.index]\n\t\tconst schedule = location && location.schedule\n\t\treturn schedule ? (\n\t\t\t<Fragment>\n\t\t\t\t<CardHeader title={'Store Schedule'} />\n\t\t\t\t<Table\n\t\t\t\t\tisSelectable\n\t\t\t\t\tclassName=\"store-schedule-table\"\n\t\t\t\t\tdata={schedule}\n\t\t\t\t\tcolumns={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tHeader: 'Day',\n\t\t\t\t\t\t\taccessor: 'day',\n\t\t\t\t\t\t\tminWidth: 100,\n\t\t\t\t\t\t\tmaxWidth: 300\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tHeader: 'Hours',\n\t\t\t\t\t\t\taccessor: 'hours',\n\t\t\t\t\t\t\tminWidth: 100,\n\t\t\t\t\t\t\tmaxWidth: 500\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tcollapseOnDataChange={false}\n\t\t\t\t\tloading={false}\n\t\t\t\t\tpageSize={schedule.length}\n\t\t\t\t\tshowPagination={false}\n\t\t\t\t\tsubComponentForRow={row => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t\t<Formik\n\t\t\t\t\t\t\t\t\tinitialValues={row.original}\n\t\t\t\t\t\t\t\t\tvalidate={values =>\n\t\t\t\t\t\t\t\t\t\tthis.handleValidation(location, row.original.id, values)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trender={(formikProps: Object) => {\n\t\t\t\t\t\t\t\t\t\tconst { handleChange, values } = formikProps\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<form onSubmit={formikProps.handleSubmit}>\n\t\t\t\t\t\t\t\t\t\t\t\t<FormLayout>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FormLayoutGroup>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={`${row.original.day} Store Hours`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"hours\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={values.hours || ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<FormLayoutItem spacerTop={true}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkind=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.handleSaveHours(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlocation,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trow.original.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalues\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={!row.original.isDirty}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext=\"Save\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</FormLayoutGroup>\n\t\t\t\t\t\t\t\t\t\t\t\t</FormLayout>\n\t\t\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t)\n\t\t\t\t\t}}\n\t\t\t\t\trowIsDirty={row => {\n\t\t\t\t\t\treturn row.original.isDirty\n\t\t\t\t\t}}\n\t\t\t\t\tkeyField=\"id\"\n\t\t\t\t/>\n\t\t\t</Fragment>\n\t\t) : null\n\t}\n\n\trender() {\n\t\tconst { locations } = this.state\n\n\t\treturn (\n\t\t\t<Table\n\t\t\t\tclassName=\"store-locations-table\"\n\t\t\t\tdata={locations}\n\t\t\t\tcolumns={columns}\n\t\t\t\tsortable={true}\n\t\t\t\tdefaultPageSize={50}\n\t\t\t\tdefaultSorted={[\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'publicName',\n\t\t\t\t\t\tdesc: false\n\t\t\t\t\t}\n\t\t\t\t]}\n\t\t\t\tloading={false}\n\t\t\t\tcollapseOnDataChange={false}\n\t\t\t\tpaginationProps={{\n\t\t\t\t\tshowPages: true,\n\t\t\t\t\tonPageButtonClick: () => console.log('onPageButtonClick'),\n\t\t\t\t\ttotalPages: Math.ceil(locations.length / 50),\n\t\t\t\t\tcurrentPage: 0\n\t\t\t\t}}\n\t\t\t\trowIsDirty={row => {\n\t\t\t\t\treturn row.original.isDirty\n\t\t\t\t}}\n\t\t\t\tsubComponentForRow={this.renderStoreScheduleForRow}\n\t\t\t\tkeyField=\"id\"\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories\n\t.add('Table', () => {\n\t\treturn (\n\t\t\t<Layout width=\"full-width\">\n\t\t\t\t<LayoutSection>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t{boolean('Show Title', false) && (\n\t\t\t\t\t\t\t<CardHeader title={text('Title', 'Locations')} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{boolean('Show Tabs', false) && (\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\ttabs={[\n\t\t\t\t\t\t\t\t\t{ text: 'All locations', isCurrent: true },\n\t\t\t\t\t\t\t\t\t{ text: 'Midwest' },\n\t\t\t\t\t\t\t\t\t{ text: 'Northeast' }\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\tisPadded\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TableSearch placeholder=\"Search locations…\" />\n\t\t\t\t\t\t{boolean('Is Filtered', false) && (\n\t\t\t\t\t\t\t<TableFilters\n\t\t\t\t\t\t\t\tfilters={[\n\t\t\t\t\t\t\t\t\t{ text: 'State: IL' },\n\t\t\t\t\t\t\t\t\t{ text: 'Status: Published' },\n\t\t\t\t\t\t\t\t\t{ text: 'City: Bolingbrook' },\n\t\t\t\t\t\t\t\t\t{ text: 'City: Chicago' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\ttext: 'Chimera Hair Salon'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Table\n\t\t\t\t\t\t\tclassName=\"services-table\"\n\t\t\t\t\t\t\tdata={staticLocations}\n\t\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\t\tsortable={true}\n\t\t\t\t\t\t\tdefaultPageSize={50}\n\t\t\t\t\t\t\tdefaultSorted={[\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: 'publicName',\n\t\t\t\t\t\t\t\t\tdesc: false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\tloading={false}\n\t\t\t\t\t\t\tpaginationProps={{\n\t\t\t\t\t\t\t\tshowPages: true,\n\t\t\t\t\t\t\t\tonPageButtonClick: () => console.log('onPageButtonClick'),\n\t\t\t\t\t\t\t\ttotalPages: Math.ceil(staticLocations.length / 50),\n\t\t\t\t\t\t\t\tcurrentPage: 0\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkeyField=\"id\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Card>\n\t\t\t\t</LayoutSection>\n\t\t\t</Layout>\n\t\t)\n\t})\n\t.add('Expandable Table', () => {\n\t\treturn (\n\t\t\t<Layout width=\"full-width\">\n\t\t\t\t<LayoutSection>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<ExpandableEditableTable />\n\t\t\t\t\t</Card>\n\t\t\t\t</LayoutSection>\n\t\t\t</Layout>\n\t\t)\n\t})\n\t.add('Selectable Table', () => (\n\t\t<Layout width=\"full-width\">\n\t\t\t<LayoutSection>\n\t\t\t\t<Card>\n\t\t\t\t\t{boolean('Show Title', false) && (\n\t\t\t\t\t\t<CardHeader title={text('Title', 'Locations')} />\n\t\t\t\t\t)}\n\t\t\t\t\t{boolean('Show Tabs', false) && (\n\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\ttabs={[\n\t\t\t\t\t\t\t\t{ text: 'All locations', isCurrent: true },\n\t\t\t\t\t\t\t\t{ text: 'Midwest' },\n\t\t\t\t\t\t\t\t{ text: 'Northeast' }\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\tisPadded\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<TableSearch placeholder=\"Search locations…\" />\n\t\t\t\t\t{boolean('Is Filtered', false) && (\n\t\t\t\t\t\t<TableFilters\n\t\t\t\t\t\t\tfilters={[\n\t\t\t\t\t\t\t\t{ text: 'State: IL' },\n\t\t\t\t\t\t\t\t{ text: 'Status: Published' },\n\t\t\t\t\t\t\t\t{ text: 'City: Bolingbrook' },\n\t\t\t\t\t\t\t\t{ text: 'City: Chicago' },\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttext: 'Chimera Hair Salon'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<Table\n\t\t\t\t\t\tclassName=\"services-table-selectable\"\n\t\t\t\t\t\tdata={staticLocations}\n\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\tsortable={true}\n\t\t\t\t\t\tdefaultPageSize={50}\n\t\t\t\t\t\tdefaultSorted={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: 'publicName',\n\t\t\t\t\t\t\t\tdesc: false\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]}\n\t\t\t\t\t\tloading={false}\n\t\t\t\t\t\tpaginationProps={{\n\t\t\t\t\t\t\tshowPages: true,\n\t\t\t\t\t\t\tonPageButtonClick: () => console.log('onPageButtonClick'),\n\t\t\t\t\t\t\ttotalPages: Math.ceil(staticLocations.length / 50),\n\t\t\t\t\t\t\tcurrentPage: 0\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisSelectable\n\t\t\t\t\t\tkind=\"location\"\n\t\t\t\t\t\tselectType=\"checkbox\"\n\t\t\t\t\t\tbulkActions={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttext: 'Add to location group',\n\t\t\t\t\t\t\t\tonClick: () => console.log('Click')\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttext: 'Make locations live',\n\t\t\t\t\t\t\t\tonClick: () => console.log('Click')\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttext: 'Hide locations',\n\t\t\t\t\t\t\t\tonClick: () => console.log('Click')\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttext: 'Delete locations',\n\t\t\t\t\t\t\t\tonClick: () => console.log('Click')\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]}\n\t\t\t\t\t\tkeyField=\"id\"\n\t\t\t\t\t/>\n\t\t\t\t</Card>\n\t\t\t</LayoutSection>\n\t\t</Layout>\n\t))\n"],"file":"Table-story.js"}

package/lib/components/Table/Table.d.ts

@@ -0,0 +1,63 @@
+import { Component, ReactElement } from 'react';
+import { TableProps } from 'react-table';
+import { IButtonProps } from '../Button/Button';
+export interface ITableProps extends Partial<TableProps> {
+    /** Table data */
+    data: Record<string, any>[];
+    /** The total number of rows which this table can access */
+    totalRows: number;
+    /** Columns of the table */
+    columns: Record<string, any>[];
+    /** Set true if the table rows can be selected */
+    isSelectable?: boolean;
+    /** any Id's that are selected by default when the page loads */
+    initialSelectedIds?: (string | number)[];
+    /** The kind of data this table displays. This will affect the text shown when at least one row is selected. */
+    kind?: string;
+    /** Optional text for pluralization when multiple rows are selected */
+    pluralKind?: string;
+    /** Pagination component props */
+    paginationProps?: any;
+    /** Enable bulk actions for selectable tables */
+    bulkActions?: IButtonProps[];
+    /** Handle clicking on a row */
+    onClickRow?: (e: MouseEvent, meta: {
+        idx: number;
+        item: Record<string, any>;
+    }) => void;
+    /** Callback when selection changes */
+    onSelection?: (options: {
+        selectedIds: (string | number)[];
+    }) => void;
+    /** No data available */
+    noDataIcon?: string;
+    noDataHeadline?: string;
+    noDataSubheadline?: string;
+    noDataPrimaryAction?: IPrimaryAction;
+    noDataPrimaryActionButtonKind?: string;
+    noDataPrimaryActionButtonIcon?: string;
+    /** Return a nested sub-component to be added as an expansion level for designated row. */
+    subComponentForRow?: (row: Record<string, any>) => any;
+    /** Called any time row props are updated. Return true if the given row should appear dirty. */
+    rowIsDirty?: (row: Record<string, any>) => boolean;
+}
+interface IPrimaryAction {
+    text: string;
+    onClick: (e: MouseEvent) => void;
+    type: string;
+}
+interface ITableState {
+    selectedIds: (string | number)[];
+    allRowsSelected: boolean;
+}
+export default class Table extends Component<ITableProps, ITableState> {
+    private static defaultProps;
+    private table;
+    constructor(props: ITableProps);
+    render(): ReactElement;
+    private handleChange;
+    private handleSelectAll;
+    private handleClickRow;
+}
+export {};
+//# sourceMappingURL=Table.d.ts.map

package/lib/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,SAAS,EAAY,YAAY,EAAE,MAAM,OAAO,CAAA;AAChE,OAAmB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AASpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,MAAM,WAAW,WAAY,SAAQ,OAAO,CAAC,UAAU,CAAC;IACvD,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAA;IAE3B,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAA;IAEjB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAA;IAE9B,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAExC,+GAA+G;IAC/G,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,iCAAiC;IACjC,eAAe,CAAC,EAAE,GAAG,CAAA;IAErB,gDAAgD;IAChD,WAAW,CAAC,EAAE,YAAY,EAAE,CAAA;IAE5B,+BAA+B;IAC/B,UAAU,CAAC,EAAE,CACZ,CAAC,EAAE,UAAU,EACb,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAE,KAC5C,IAAI,CAAA;IAET,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;IAErE,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mBAAmB,CAAC,EAAE,cAAc,CAAA;IACpC,6BAA6B,CAAC,EAAE,MAAM,CAAA;IACtC,6BAA6B,CAAC,EAAE,MAAM,CAAA;IAEtC,0FAA0F;IAC1F,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAA;IAEtD,+FAA+F;IAC/F,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAA;CAClD;AAED,UAAU,cAAc;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IAChC,IAAI,EAAE,MAAM,CAAA;CACZ;AAED,UAAU,WAAW;IACpB,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChC,eAAe,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC;IACrE,OAAO,CAAC,MAAM,CAAC,YAAY,CAS1B;IAED,OAAO,CAAC,KAAK,CAAK;gBAEC,KAAK,EAAE,WAAW;IAS9B,MAAM,IAAI,YAAY;IAgQ7B,OAAO,CAAC,YAAY,CAwBnB;IAED,OAAO,CAAC,eAAe,CAsBtB;IAED,OAAO,CAAC,cAAc,CAarB;CACD"}