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

package/lib/components/RecordTable/RecordTable.js

@@ -0,0 +1,523 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+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 _Table = _interopRequireDefault(require("../Table/Table"));
+
+var _TableSearch = _interopRequireDefault(require("../Table/components/TableSearch/TableSearch"));
+
+var _Tabs = _interopRequireDefault(require("../Tabs/Tabs"));
+
+var _Forms = require("../Forms");
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _EmptyState = _interopRequireDefault(require("../EmptyState/EmptyState"));
+
+var _Loader = _interopRequireDefault(require("../Loader/Loader"));
+
+var RECORD_TABLE_INITIAL_LIMIT = 50;
+
+var RecordTable =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(RecordTable, _Component);
+
+  function RecordTable(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RecordTable);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(RecordTable).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refresh",
+    /*#__PURE__*/
+    (0, _asyncToGenerator2["default"])(
+    /*#__PURE__*/
+    _regenerator["default"].mark(function _callee() {
+      var _ref2, visibleRows, totalRows;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _this.setState({
+                loading: true
+              });
+
+              _context.next = 3;
+              return _this.fetchRecords({
+                page: _this.state.currentPage
+              });
+
+            case 3:
+              _ref2 = _context.sent;
+              visibleRows = _ref2.visibleRows;
+              totalRows = _ref2.totalRows;
+
+              _this.setState({
+                loading: false,
+                visibleRows: visibleRows,
+                totalRows: totalRows
+              });
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "navigateToPage",
+    /*#__PURE__*/
+    function () {
+      var _ref4 = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee2(_ref3) {
+        var search, page, _this$props$onNavigat, onNavigateToPage, _ref5, visibleRows, totalRows;
+
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                search = _ref3.search, page = _ref3.page;
+                _this$props$onNavigat = _this.props.onNavigateToPage, onNavigateToPage = _this$props$onNavigat === void 0 ? function () {} : _this$props$onNavigat;
+                _context2.prev = 2;
+                _context2.next = 5;
+                return _this.fetchRecords({
+                  search: search,
+                  page: page
+                });
+
+              case 5:
+                _ref5 = _context2.sent;
+                visibleRows = _ref5.visibleRows;
+                totalRows = _ref5.totalRows;
+                onNavigateToPage({
+                  currentPage: page
+                });
+
+                _this.setState({
+                  currentPage: page,
+                  visibleRows: visibleRows,
+                  totalRows: totalRows,
+                  expandedRows: {}
+                });
+
+                _context2.next = 14;
+                break;
+
+              case 12:
+                _context2.prev = 12;
+                _context2.t0 = _context2["catch"](2);
+
+              case 14:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[2, 12]]);
+      }));
+
+      return function (_x) {
+        return _ref4.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateFilter", function (filter) {
+      _this.setState({
+        currentPage: 0,
+        currentFilter: filter
+      }, function () {
+        _this.refresh();
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentDidMount", function () {
+      if (_this.props.fetchOnMount) {
+        _this.refresh();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickTab", function (e, tab) {
+      var onClickTab = _this.props.onClickTab;
+      var cancel = false;
+
+      if (onClickTab) {
+        cancel = onClickTab(e, {
+          payload: tab.payload,
+          key: tab.key
+        }) === false;
+      }
+
+      if (!cancel) {
+        _this.setState({
+          currentPage: 0,
+          selectedTab: tab.key,
+          expandedRows: {}
+        }, _this.refresh);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "fetchRecords",
+    /*#__PURE__*/
+    function () {
+      var _ref7 = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee3(_ref6) {
+        var search, page, _this$state, sortDirection, sortColumn, limit, selectedTab, currentFilter, offset, data;
+
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                search = _ref6.search, page = _ref6.page;
+                _this$state = _this.state, sortDirection = _this$state.sortDirection, sortColumn = _this$state.sortColumn, limit = _this$state.limit, selectedTab = _this$state.selectedTab, currentFilter = _this$state.currentFilter;
+                offset = limit * page;
+                _context3.next = 5;
+                return _this.props.fetchRecords({
+                  sortColumn: sortColumn,
+                  sortDirection: sortDirection,
+                  limit: limit,
+                  offset: offset,
+                  selectedTab: selectedTab,
+                  search: search || currentFilter
+                });
+
+              case 5:
+                data = _context3.sent;
+                return _context3.abrupt("return", data);
+
+              case 7:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      return function (_x2) {
+        return _ref7.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSortChanged", function (sorted) {
+      var sort = {
+        sortColumn: sorted[0].id,
+        sortDirection: sorted[0].desc ? 'desc' : 'asc'
+      };
+
+      _this.setState(sort, _this.refresh);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSearchSuggestions",
+    /*#__PURE__*/
+    function () {
+      var _ref8 = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee4(value) {
+        var currentPage, _ref9, visibleRows, suggestions;
+
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                currentPage = _this.state.currentPage;
+                _context4.next = 3;
+                return _this.fetchRecords({
+                  page: currentPage,
+                  search: value
+                });
+
+              case 3:
+                _ref9 = _context4.sent;
+                visibleRows = _ref9.visibleRows;
+                suggestions = visibleRows.length > 0 ? visibleRows.map(function (record) {
+                  return {
+                    text: record.name,
+                    record: record
+                  };
+                }) : [{
+                  text: 'NO RESULTS',
+                  isEmptyMessage: true,
+                  value: value
+                }];
+                return _context4.abrupt("return", suggestions);
+
+              case 7:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x3) {
+        return _ref8.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSuggestion", function (suggestion) {
+      var _this$props$searchSug = _this.props.searchSuggestionAccessor,
+          searchSuggestionAccessor = _this$props$searchSug === void 0 ? function () {
+        return (
+          /* record */
+          _react["default"].createElement(_Button["default"], {
+            isSmall: true,
+            className: "autosuggest__list-item-inner",
+            text: suggestion.text
+          })
+        );
+      } : _this$props$searchSug;
+
+      if (suggestion.isEmptyMessage && suggestion.value) {
+        return _react["default"].createElement("div", {
+          className: "autosuggest__no-results"
+        }, _react["default"].createElement("p", {
+          className: "autosuggest__no-results-title"
+        }, "No matches found."), _react["default"].createElement("p", {
+          className: "autosuggest__no-results-subtitle"
+        }, "Please adjust your search and try again."));
+      }
+
+      if (suggestion.isEmptyMessage && !suggestion.value) {
+        return _react["default"].createElement("div", {
+          className: "autosuggest__no-results"
+        }, _react["default"].createElement("p", {
+          className: "autosuggest__no-results-title"
+        }, "Type to search."), _react["default"].createElement("p", {
+          className: "autosuggest__no-results-subtitle"
+        }, "I'll find whataver I can as fast as I can."));
+      }
+
+      return searchSuggestionAccessor(suggestion.record);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isFiltered", function () {
+      var enableFilter = _this.props.enableFilter;
+      var currentFilter = _this.state.currentFilter;
+      return currentFilter && currentFilter.length > 0 && enableFilter;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNoDataIcon", function () {
+      var _this$props = _this.props,
+          noDataIcon = _this$props.noDataIcon,
+          noFilteredMatchesIcon = _this$props.noFilteredMatchesIcon,
+          fetchError = _this$props.fetchError;
+      return fetchError ? 'caution' : _this.isFiltered() ? noFilteredMatchesIcon : noDataIcon;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNoDataHeadline", function () {
+      var _this$props2 = _this.props,
+          noDataHeadline = _this$props2.noDataHeadline,
+          noFilteredMatchesHeadline = _this$props2.noFilteredMatchesHeadline,
+          fetchError = _this$props2.fetchError;
+      return fetchError ? 'Data not available' : _this.isFiltered() ? noFilteredMatchesHeadline : noDataHeadline;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNoDataSubheadline", function () {
+      var _this$props3 = _this.props,
+          noDataSubheadline = _this$props3.noDataSubheadline,
+          noFilteredMatchesSubheadline = _this$props3.noFilteredMatchesSubheadline,
+          fetchError = _this$props3.fetchError;
+      return fetchError ? 'It looks like something went wrong.' : _this.isFiltered() ? noFilteredMatchesSubheadline : noDataSubheadline;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNoDataPrimaryAction", function () {
+      var _this$props4 = _this.props,
+          noDataPrimaryAction = _this$props4.noDataPrimaryAction,
+          noFilteredMatchesPrimaryActionText = _this$props4.noFilteredMatchesPrimaryActionText,
+          fetchError = _this$props4.fetchError;
+      return fetchError ? {
+        text: 'Try again',
+        onClick: function onClick() {
+          return window.location.reload();
+        }
+      } : _this.isFiltered() ? {
+        text: noFilteredMatchesPrimaryActionText,
+        onClick: function onClick() {
+          _this.updateFilter('');
+        },
+        type: 'submit'
+      } : noDataPrimaryAction;
+    });
+    _this.state = {
+      loading: false,
+      currentPage: 0,
+      limit: props.initialLimit || RECORD_TABLE_INITIAL_LIMIT,
+      selectedTab: props.initialSelectedTab,
+      sortColumn: props.initialSortColumn,
+      sortDirection: props.initialSortDirection || 'desc',
+      visibleRows: props.initialVisibleRows,
+      totalRows: props.totalRows,
+      currentFilter: '',
+      expandedRows: {}
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RecordTable, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props5 = this.props,
+          tabs = _this$props5.tabs,
+          columns = _this$props5.columns,
+          isSelectable = _this$props5.isSelectable,
+          handleClickRow = _this$props5.handleClickRow,
+          enableSearch = _this$props5.enableSearch,
+          enableFilter = _this$props5.enableFilter,
+          searchPlaceholder = _this$props5.searchPlaceholder,
+          noDataPrimaryActionButtonKind = _this$props5.noDataPrimaryActionButtonKind,
+          noDataPrimaryActionButtonIcon = _this$props5.noDataPrimaryActionButtonIcon,
+          tableSearchProps = _this$props5.tableSearchProps,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props5, ["tabs", "columns", "isSelectable", "handleClickRow", "enableSearch", "enableFilter", "searchPlaceholder", "noDataPrimaryActionButtonKind", "noDataPrimaryActionButtonIcon", "tableSearchProps"]);
+      var _this$state2 = this.state,
+          currentPage = _this$state2.currentPage,
+          sortColumn = _this$state2.sortColumn,
+          loading = _this$state2.loading,
+          limit = _this$state2.limit,
+          selectedTab = _this$state2.selectedTab,
+          visibleRows = _this$state2.visibleRows,
+          totalRows = _this$state2.totalRows,
+          currentFilter = _this$state2.currentFilter,
+          expandedRows = _this$state2.expandedRows;
+      var defaultTableSearchProps = {
+        getSuggestionValue: function getSuggestionValue(value) {
+          return value.text;
+        },
+        getSuggestions: this.handleSearchSuggestions,
+        renderSuggestion: this.renderSuggestion,
+        onSuggestionSelected: function onSuggestionSelected() {},
+        id: ''
+      };
+      return _react["default"].createElement(_react.Fragment, null, tabs && _react["default"].createElement(_Tabs["default"], {
+        tabs: tabs.map(function (tab) {
+          return (0, _objectSpread2["default"])({}, tab, {
+            isCurrent: selectedTab === tab.key,
+            onClick: function onClick(e) {
+              _this2.handleClickTab(e, tab);
+            }
+          });
+        }),
+        isPadded: true
+      }), enableSearch && _react["default"].createElement(_TableSearch["default"], (0, _extends2["default"])({
+        placeholder: searchPlaceholder
+      }, defaultTableSearchProps, tableSearchProps)), enableFilter && _react["default"].createElement("div", {
+        className: "table-search__wrapper"
+      }, _react["default"].createElement("div", {
+        className: "autosuggest__wrapper"
+      }, _react["default"].createElement(_Forms.TextInput, {
+        id: "record-table-filter",
+        value: currentFilter,
+        placeholder: searchPlaceholder,
+        onChange: function onChange(e) {
+          _this2.updateFilter(e.target.value);
+        },
+        isSmall: true
+      }), _react["default"].createElement(_Button["default"], {
+        isSmall: true,
+        className: "text-input__clear-btn",
+        icon: {
+          name: 'close'
+        },
+        onClick: function onClick() {
+          _this2.updateFilter('');
+        }
+      }))), _react["default"].createElement(_Table["default"], (0, _extends2["default"])({
+        className: "results-table",
+        isSelectable: isSelectable,
+        columns: columns,
+        defaultSorted: [{
+          id: sortColumn,
+          desc: false
+        }],
+        expanded: expandedRows,
+        onExpandedChange: function onExpandedChange(newExpanded) {
+          _this2.setState({
+            expandedRows: newExpanded
+          });
+        },
+        pageSize: Math.min(visibleRows.length, limit),
+        paginationProps: {
+          currentPage: currentPage,
+          showPages: Math.ceil(totalRows / limit) > 1,
+          onClickNext: function onClickNext() {
+            _this2.navigateToPage({
+              page: currentPage + 1
+            });
+          },
+          onClickBack: function onClickBack() {
+            _this2.navigateToPage({
+              page: currentPage - 1
+            });
+          },
+          onPageButtonClick: function onPageButtonClick(pageIdx) {
+            _this2.navigateToPage({
+              page: pageIdx
+            });
+          },
+          totalPages: Math.ceil(totalRows / limit)
+        },
+        manual: true,
+        loading: loading,
+        showPagination: totalRows >= limit,
+        data: visibleRows || [],
+        totalRows: totalRows,
+        onSortedChange: this.handleSortChanged,
+        onClickRow: handleClickRow,
+        key: "id",
+        NoDataComponent: loading && !currentFilter ? function () {
+          return _react["default"].createElement("div", {
+            className: "table__inner__loader"
+          }, _react["default"].createElement(_Loader["default"], null));
+        } : _EmptyState["default"],
+        getNoDataProps: function getNoDataProps() {
+          return {
+            icon: _this2.getNoDataIcon(),
+            headline: _this2.getNoDataHeadline(),
+            subheadline: _this2.getNoDataSubheadline(),
+            primaryAction: _this2.getNoDataPrimaryAction(),
+            primaryActionButtonKind: noDataPrimaryActionButtonKind,
+            primaryActionButtonIcon: noDataPrimaryActionButtonIcon
+          };
+        }
+      }, rest)));
+    } // TODO: Update the table based on the tab that was clicked
+
+  }]);
+  return RecordTable;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(RecordTable, "defaultProps", {
+  enableFilter: false,
+  enableSearch: false,
+  initialLimit: RECORD_TABLE_INITIAL_LIMIT,
+  noFilteredMatchesHeadline: 'No matches found',
+  noFilteredMatchesIcon: 'no_matches',
+  noFilteredMatchesPrimaryActionText: 'Show All',
+  searchPlaceholder: 'Filter table...'
+});
+var _default = RecordTable;
+exports["default"] = _default;
+//# sourceMappingURL=RecordTable.js.map

package/lib/components/RecordTable/RecordTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RecordTable/RecordTable.tsx"],"names":["RECORD_TABLE_INITIAL_LIMIT","RecordTable","props","setState","loading","fetchRecords","page","state","currentPage","visibleRows","totalRows","search","onNavigateToPage","expandedRows","filter","currentFilter","refresh","fetchOnMount","e","tab","onClickTab","cancel","payload","key","selectedTab","sortDirection","sortColumn","limit","offset","data","sorted","sort","id","desc","value","suggestions","length","map","record","text","name","isEmptyMessage","suggestion","searchSuggestionAccessor","enableFilter","noDataIcon","noFilteredMatchesIcon","fetchError","isFiltered","noDataHeadline","noFilteredMatchesHeadline","noDataSubheadline","noFilteredMatchesSubheadline","noDataPrimaryAction","noFilteredMatchesPrimaryActionText","onClick","window","location","reload","updateFilter","type","initialLimit","initialSelectedTab","initialSortColumn","initialSortDirection","initialVisibleRows","tabs","columns","isSelectable","handleClickRow","enableSearch","searchPlaceholder","noDataPrimaryActionButtonKind","noDataPrimaryActionButtonIcon","tableSearchProps","rest","defaultTableSearchProps","getSuggestionValue","getSuggestions","handleSearchSuggestions","renderSuggestion","onSuggestionSelected","isCurrent","handleClickTab","target","newExpanded","Math","min","showPages","ceil","onClickNext","navigateToPage","onClickBack","onPageButtonClick","pageIdx","totalPages","handleSortChanged","EmptyState","icon","getNoDataIcon","headline","getNoDataHeadline","subheadline","getNoDataSubheadline","primaryAction","getNoDataPrimaryAction","primaryActionButtonKind","primaryActionButtonIcon","Component"],"mappings":"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","sourcesContent":["import React, { Component, Fragment } from 'react'\nimport { default as Table, ITableProps } from '../Table/Table'\nimport {\n\tdefault as TableSearch,\n\tITableSearchProps\n} from '../Table/components/TableSearch/TableSearch'\nimport Tabs from '../Tabs/Tabs'\nimport { TextInput } from '../Forms'\nimport Button from '../Button/Button'\nimport EmptyState from '../EmptyState/EmptyState'\nimport Loader from '../Loader/Loader'\nimport { SortingRule } from 'react-table'\n\nconst RECORD_TABLE_INITIAL_LIMIT = 50\n\nexport interface IRecordTableFetchOptions {\n\tsortColumn: string\n\tsortDirection: 'asc' | 'desc'\n\toffset: number\n\tlimit: number\n\tsearch?: string\n\tselectedTab?: string\n}\n\nexport interface IRecordTableFetchResults {\n\tvisibleRows: Record<string, any>[]\n\ttotalRows: number\n}\n\nexport interface IRecordTableProps extends ITableProps {\n\t/** Singular noun describing the contents of this table */\n\tkind?: string\n\n\t/** Plural noun describing the contents of this table */\n\tpluralKind?: string\n\n\t/** for handling when a tab is selected, return false to stop tab form being set */\n\tonClickTab?: (\n\t\te: MouseEvent,\n\t\tdata: { idx?: number; key: string; payload?: Record<string, any> }\n\t) => boolean\n\n\t/** the tabs to render, passed to Tabs component. onClick is ignored */\n\ttabs?: any[]\n\n\t/** Should rows be selectable? */\n\tisSelectable?: boolean\n\n\t/** which tab to select at first */\n\tinitialSelectedTab?: string\n\n\t/** how to sort to start */\n\tinitialSortColumn: string\n\n\t/** direction to start (defaults to desc) */\n\tinitialSortDirection?: 'asc' | 'desc'\n\n\t/** starting limit, defaults to RECORD_TABLE_INITIAL_LIMIT  */\n\tinitialLimit?: number\n\n\t/** The rows that should be visible when the table mounts */\n\tinitialVisibleRows: Record<string, any>[]\n\n\t/** The total possible number of rows this table may contain */\n\ttotalRows: number\n\n\t/** should we enable searching? */\n\tenableSearch?: boolean\n\n\t/** should we enable filtering? */\n\tenableFilter?: boolean\n\n\t/** placeholder to show for search */\n\tsearchPlaceholder?: string\n\n\t/** props to pass through to the table search component */\n\ttableSearchProps?: ITableSearchProps\n\n\t/** when rendering search results, this is how i'll know what to output */\n\tsearchSuggestionAccessor?: (suggestion: Record<string, any>) => any\n\n\t/** called anytime records need to be fetched */\n\tfetchRecords: (\n\t\toptions: IRecordTableFetchOptions\n\t) => Promise<IRecordTableFetchResults>\n\n\t/** table columns to be rendered TODO(TR) import Column interfaces  */\n\tcolumns: Record<string, any>[]\n\n\t/** should I fetch all my data on mount? */\n\tfetchOnMount?: boolean\n\n\t/** Flag for error on fetching data */\n\tfetchError?: boolean\n\n\t/** passthrough to Table component */\n\thandleClickRow?: (\n\t\te: MouseEvent,\n\t\tmeta: { idx: number; item: Record<string, any> }\n\t) => void\n\n\t/** called when search suggestion is selected */\n\tonSelection?: (options: { selectedIds: (string | number)[] }) => void\n\n\t/** called when navigating to page */\n\tonNavigateToPage?: Function\n\n\t/** Icon to show if no results match the current filter */\n\tnoFilteredMatchesIcon?: string\n\t/** Headline to show if no results match the current filter */\n\tnoFilteredMatchesHeadline?: string\n\t/** Subhead to show if no results match the current filter */\n\tnoFilteredMatchesSubheadline?: string\n\t/** CTA Text to show if no results match the current filter */\n\tnoFilteredMatchesPrimaryActionText?: string\n\n\t/** Icon to show if no data is available to be loaded into the table */\n\tnoDataIcon?: string\n\t/** Headline to show if no data is available to be loaded into the table */\n\tnoDataHeadline?: string\n\t/** Subhead to show if no data is available to be loaded into the table */\n\tnoDataSubheadline?: string\n\t/** CTA Text to show if no data is available to be loaded into the table */\n\tnoDataPrimaryAction?: IPrimaryAction\n\t/** CTA Button kind to display if no data is available to be loaded into the table */\n\tnoDataPrimaryActionButtonKind?: string\n\t/** CTA Button Icon to display if no data is available to be loaded into the table */\n\tnoDataPrimaryActionButtonIcon?: string\n}\n\ninterface IPrimaryAction {\n\ttext: string\n\tonClick: (e: MouseEvent) => void\n\ttype: string\n}\n\ninterface IRecordTableState {\n\tselectedTab?: string\n\tcurrentPage: number\n\tlimit: number\n\tsortColumn: string\n\tsortDirection: 'asc' | 'desc'\n\tvisibleRows: Record<string, any>[]\n\ttotalRows: number\n\tloading: boolean\n\tcurrentFilter?: string\n\texpandedRows: Record<string, boolean>\n}\n\nclass RecordTable extends Component<IRecordTableProps, IRecordTableState> {\n\tpublic static defaultProps: Partial<IRecordTableProps> = {\n\t\tenableFilter: false,\n\t\tenableSearch: false,\n\t\tinitialLimit: RECORD_TABLE_INITIAL_LIMIT,\n\t\tnoFilteredMatchesHeadline: 'No matches found',\n\t\tnoFilteredMatchesIcon: 'no_matches',\n\t\tnoFilteredMatchesPrimaryActionText: 'Show All',\n\t\tsearchPlaceholder: 'Filter table...'\n\t}\n\n\tpublic constructor(props: IRecordTableProps) {\n\t\tsuper(props)\n\n\t\tthis.state = {\n\t\t\tloading: false,\n\t\t\tcurrentPage: 0,\n\t\t\tlimit: props.initialLimit || RECORD_TABLE_INITIAL_LIMIT,\n\t\t\tselectedTab: props.initialSelectedTab,\n\t\t\tsortColumn: props.initialSortColumn,\n\t\t\tsortDirection: props.initialSortDirection || 'desc',\n\t\t\tvisibleRows: props.initialVisibleRows,\n\t\t\ttotalRows: props.totalRows,\n\t\t\tcurrentFilter: '',\n\t\t\texpandedRows: {}\n\t\t}\n\t}\n\n\tpublic refresh = async () => {\n\t\tthis.setState({ loading: true })\n\t\tconst { visibleRows, totalRows } = await this.fetchRecords({\n\t\t\tpage: this.state.currentPage\n\t\t})\n\t\tthis.setState({ loading: false, visibleRows, totalRows })\n\t}\n\n\tpublic navigateToPage = async ({\n\t\tsearch,\n\t\tpage\n\t}: {\n\t\tsearch?: string\n\t\tpage: number\n\t}) => {\n\t\tconst { onNavigateToPage = () => {} } = this.props\n\n\t\ttry {\n\t\t\tconst { visibleRows, totalRows } = await this.fetchRecords({\n\t\t\t\tsearch,\n\t\t\t\tpage\n\t\t\t})\n\n\t\t\tonNavigateToPage({\n\t\t\t\tcurrentPage: page\n\t\t\t})\n\n\t\t\tthis.setState({\n\t\t\t\tcurrentPage: page,\n\t\t\t\tvisibleRows,\n\t\t\t\ttotalRows,\n\t\t\t\texpandedRows: {}\n\t\t\t})\n\t\t} catch (e) {\n\t\t\t// Nothing\n\t\t}\n\t}\n\n\tpublic updateFilter = (filter: string) => {\n\t\tthis.setState(\n\t\t\t{\n\t\t\t\tcurrentPage: 0,\n\t\t\t\tcurrentFilter: filter\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tthis.refresh()\n\t\t\t}\n\t\t)\n\t}\n\n\tpublic componentDidMount = () => {\n\t\tif (this.props.fetchOnMount) {\n\t\t\tthis.refresh()\n\t\t}\n\t}\n\n\tpublic render(): React.ReactNode {\n\t\tconst {\n\t\t\ttabs,\n\t\t\tcolumns,\n\t\t\tisSelectable,\n\t\t\thandleClickRow,\n\t\t\tenableSearch,\n\t\t\tenableFilter,\n\t\t\tsearchPlaceholder,\n\t\t\tnoDataPrimaryActionButtonKind,\n\t\t\tnoDataPrimaryActionButtonIcon,\n\t\t\ttableSearchProps,\n\t\t\t...rest\n\t\t} = this.props\n\n\t\tconst {\n\t\t\tcurrentPage,\n\t\t\tsortColumn,\n\t\t\tloading,\n\t\t\tlimit,\n\t\t\tselectedTab,\n\t\t\tvisibleRows,\n\t\t\ttotalRows,\n\t\t\tcurrentFilter,\n\t\t\texpandedRows\n\t\t} = this.state\n\n\t\tconst defaultTableSearchProps: ITableSearchProps = {\n\t\t\tgetSuggestionValue(value) {\n\t\t\t\treturn value.text\n\t\t\t},\n\t\t\tgetSuggestions: this.handleSearchSuggestions,\n\t\t\trenderSuggestion: this.renderSuggestion,\n\t\t\tonSuggestionSelected: () => {},\n\t\t\tid: ''\n\t\t}\n\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t{tabs && (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={tabs.map(tab => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...tab,\n\t\t\t\t\t\t\t\tisCurrent: selectedTab === tab.key,\n\t\t\t\t\t\t\t\tonClick: e => {\n\t\t\t\t\t\t\t\t\tthis.handleClickTab(e, tab)\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\tisPadded\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{enableSearch && (\n\t\t\t\t\t<TableSearch\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\t{...defaultTableSearchProps}\n\t\t\t\t\t\t{...tableSearchProps}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{enableFilter && (\n\t\t\t\t\t<div className=\"table-search__wrapper\">\n\t\t\t\t\t\t<div className=\"autosuggest__wrapper\">\n\t\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\t\tid=\"record-table-filter\"\n\t\t\t\t\t\t\t\tvalue={currentFilter}\n\t\t\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\t\t\tonChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\t\t\t\t\t\tthis.updateFilter(e.target.value)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tclassName=\"text-input__clear-btn\"\n\t\t\t\t\t\t\t\ticon={{\n\t\t\t\t\t\t\t\t\tname: 'close'\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tthis.updateFilter('')\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<Table\n\t\t\t\t\tclassName=\"results-table\"\n\t\t\t\t\tisSelectable={isSelectable}\n\t\t\t\t\tcolumns={columns}\n\t\t\t\t\tdefaultSorted={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: sortColumn,\n\t\t\t\t\t\t\tdesc: false\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\texpanded={expandedRows}\n\t\t\t\t\tonExpandedChange={newExpanded => {\n\t\t\t\t\t\tthis.setState({\n\t\t\t\t\t\t\texpandedRows: newExpanded\n\t\t\t\t\t\t})\n\t\t\t\t\t}}\n\t\t\t\t\tpageSize={Math.min(visibleRows.length, limit)}\n\t\t\t\t\tpaginationProps={{\n\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\tshowPages: Math.ceil(totalRows / limit) > 1,\n\t\t\t\t\t\tonClickNext: () => {\n\t\t\t\t\t\t\tthis.navigateToPage({ page: currentPage + 1 })\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonClickBack: () => {\n\t\t\t\t\t\t\tthis.navigateToPage({ page: currentPage - 1 })\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonPageButtonClick: (pageIdx: number) => {\n\t\t\t\t\t\t\tthis.navigateToPage({ page: pageIdx })\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttotalPages: Math.ceil(totalRows / limit)\n\t\t\t\t\t}}\n\t\t\t\t\tmanual\n\t\t\t\t\tloading={loading}\n\t\t\t\t\tshowPagination={totalRows >= limit}\n\t\t\t\t\tdata={visibleRows || []}\n\t\t\t\t\ttotalRows={totalRows}\n\t\t\t\t\tonSortedChange={this.handleSortChanged}\n\t\t\t\t\tonClickRow={handleClickRow}\n\t\t\t\t\tkey=\"id\"\n\t\t\t\t\tNoDataComponent={\n\t\t\t\t\t\tloading && !currentFilter\n\t\t\t\t\t\t\t? () => (\n\t\t\t\t\t\t\t\t\t<div className=\"table__inner__loader\">\n\t\t\t\t\t\t\t\t\t\t<Loader />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: EmptyState\n\t\t\t\t\t}\n\t\t\t\t\tgetNoDataProps={() => ({\n\t\t\t\t\t\ticon: this.getNoDataIcon(),\n\t\t\t\t\t\theadline: this.getNoDataHeadline(),\n\t\t\t\t\t\tsubheadline: this.getNoDataSubheadline(),\n\t\t\t\t\t\tprimaryAction: this.getNoDataPrimaryAction(),\n\t\t\t\t\t\tprimaryActionButtonKind: noDataPrimaryActionButtonKind,\n\t\t\t\t\t\tprimaryActionButtonIcon: noDataPrimaryActionButtonIcon\n\t\t\t\t\t})}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t</Fragment>\n\t\t)\n\t}\n\n\t// TODO: Update the table based on the tab that was clicked\n\tprivate handleClickTab = (e: MouseEvent, tab: any) => {\n\t\tconst { onClickTab } = this.props\n\t\tlet cancel = false\n\n\t\tif (onClickTab) {\n\t\t\tcancel =\n\t\t\t\tonClickTab(e, {\n\t\t\t\t\tpayload: tab.payload,\n\t\t\t\t\tkey: tab.key\n\t\t\t\t}) === false\n\t\t}\n\n\t\tif (!cancel) {\n\t\t\tthis.setState(\n\t\t\t\t{ currentPage: 0, selectedTab: tab.key, expandedRows: {} },\n\t\t\t\tthis.refresh\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate fetchRecords = async ({\n\t\tsearch,\n\t\tpage\n\t}: {\n\t\tsearch?: string\n\t\tpage: number\n\t}) => {\n\t\tconst {\n\t\t\tsortDirection,\n\t\t\tsortColumn,\n\t\t\tlimit,\n\t\t\tselectedTab,\n\t\t\tcurrentFilter\n\t\t} = this.state\n\n\t\tconst offset = limit * page\n\n\t\tconst data = await this.props.fetchRecords({\n\t\t\tsortColumn,\n\t\t\tsortDirection,\n\t\t\tlimit,\n\t\t\toffset,\n\t\t\tselectedTab,\n\t\t\tsearch: search || currentFilter\n\t\t})\n\n\t\treturn data\n\t}\n\n\tprivate handleSortChanged = (sorted: SortingRule[]) => {\n\t\tconst sort: {\n\t\t\tsortColumn: string\n\t\t\tsortDirection: 'asc' | 'desc'\n\t\t} = {\n\t\t\tsortColumn: sorted[0].id,\n\t\t\tsortDirection: sorted[0].desc ? 'desc' : 'asc'\n\t\t}\n\n\t\tthis.setState(sort, this.refresh)\n\t}\n\n\tprivate handleSearchSuggestions = async (value: string) => {\n\t\tconst { currentPage } = this.state\n\t\tconst { visibleRows } = await this.fetchRecords({\n\t\t\tpage: currentPage,\n\t\t\tsearch: value\n\t\t})\n\n\t\tconst suggestions =\n\t\t\tvisibleRows.length > 0\n\t\t\t\t? visibleRows.map((record: Record<string, any>) => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\ttext: record.name,\n\t\t\t\t\t\t\trecord\n\t\t\t\t\t\t}\n\t\t\t\t  })\n\t\t\t\t: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: 'NO RESULTS',\n\t\t\t\t\t\t\tisEmptyMessage: true,\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t}\n\t\t\t\t  ]\n\n\t\treturn suggestions\n\t}\n\n\tprivate renderSuggestion = (suggestion: any) => {\n\t\tconst {\n\t\t\tsearchSuggestionAccessor = (/* record */) => (\n\t\t\t\t<Button\n\t\t\t\t\tisSmall\n\t\t\t\t\tclassName=\"autosuggest__list-item-inner\"\n\t\t\t\t\ttext={suggestion.text}\n\t\t\t\t/>\n\t\t\t)\n\t\t} = this.props\n\n\t\tif (suggestion.isEmptyMessage && suggestion.value) {\n\t\t\treturn (\n\t\t\t\t<div className=\"autosuggest__no-results\">\n\t\t\t\t\t<p className=\"autosuggest__no-results-title\">No matches found.</p>\n\t\t\t\t\t<p className=\"autosuggest__no-results-subtitle\">\n\t\t\t\t\t\tPlease adjust your search and try again.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\n\t\tif (suggestion.isEmptyMessage && !suggestion.value) {\n\t\t\treturn (\n\t\t\t\t<div className=\"autosuggest__no-results\">\n\t\t\t\t\t<p className=\"autosuggest__no-results-title\">Type to search.</p>\n\t\t\t\t\t<p className=\"autosuggest__no-results-subtitle\">\n\t\t\t\t\t\t{`I'll find whataver I can as fast as I can.`}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\n\t\treturn searchSuggestionAccessor(suggestion.record)\n\t}\n\n\tprivate isFiltered = () => {\n\t\tconst { enableFilter } = this.props\n\t\tconst { currentFilter } = this.state\n\n\t\treturn currentFilter && currentFilter.length > 0 && enableFilter\n\t}\n\n\tprivate getNoDataIcon = () => {\n\t\tconst { noDataIcon, noFilteredMatchesIcon, fetchError } = this.props\n\n\t\treturn fetchError\n\t\t\t? 'caution'\n\t\t\t: this.isFiltered()\n\t\t\t? noFilteredMatchesIcon\n\t\t\t: noDataIcon\n\t}\n\n\tprivate getNoDataHeadline = () => {\n\t\tconst { noDataHeadline, noFilteredMatchesHeadline, fetchError } = this.props\n\n\t\treturn fetchError\n\t\t\t? 'Data not available'\n\t\t\t: this.isFiltered()\n\t\t\t? noFilteredMatchesHeadline\n\t\t\t: noDataHeadline\n\t}\n\n\tprivate getNoDataSubheadline = () => {\n\t\tconst {\n\t\t\tnoDataSubheadline,\n\t\t\tnoFilteredMatchesSubheadline,\n\t\t\tfetchError\n\t\t} = this.props\n\t\treturn fetchError\n\t\t\t? 'It looks like something went wrong.'\n\t\t\t: this.isFiltered()\n\t\t\t? noFilteredMatchesSubheadline\n\t\t\t: noDataSubheadline\n\t}\n\n\tprivate getNoDataPrimaryAction = () => {\n\t\tconst {\n\t\t\tnoDataPrimaryAction,\n\t\t\tnoFilteredMatchesPrimaryActionText,\n\t\t\tfetchError\n\t\t} = this.props\n\t\treturn fetchError\n\t\t\t? {\n\t\t\t\t\ttext: 'Try again',\n\t\t\t\t\tonClick: () => window.location.reload()\n\t\t\t  }\n\t\t\t: this.isFiltered()\n\t\t\t? {\n\t\t\t\t\ttext: noFilteredMatchesPrimaryActionText,\n\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\tthis.updateFilter('')\n\t\t\t\t\t},\n\t\t\t\t\ttype: 'submit'\n\t\t\t  }\n\t\t\t: noDataPrimaryAction\n\t}\n}\n\nexport default RecordTable\n"],"file":"RecordTable.js"}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _SplitButton = _interopRequireDefault(require("./SplitButton"));
+
+var actions = [{
+  text: 'Another action',
+  onClick: function onClick() {
+    return console.log('CLICK');
+  }
+}, {
+  text: 'Third action'
+}, {
+  text: 'Yet another action'
+}];
+var stories = (0, _react2.storiesOf)('SplitButton', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Primary', function () {
+  return _react["default"].createElement(_SplitButton["default"], {
+    defaultAction: {
+      text: (0, _react3.text)('defaultActionText', 'Do the default action')
+    },
+    actions: actions,
+    kind: "primary"
+  });
+}).add('Primary Small', function () {
+  return _react["default"].createElement(_SplitButton["default"], {
+    defaultAction: {
+      text: (0, _react3.text)('defaultActionText', 'Do the default action')
+    },
+    actions: actions,
+    kind: "primary",
+    isSmall: true
+  });
+}).add('Secondary', function () {
+  return _react["default"].createElement(_SplitButton["default"], {
+    defaultAction: {
+      text: (0, _react3.text)('defaultActionText', 'Do the default action')
+    },
+    actions: actions,
+    kind: "secondary"
+  });
+}).add('Secondary Small', function () {
+  return _react["default"].createElement(_SplitButton["default"], {
+    defaultAction: {
+      text: (0, _react3.text)('defaultActionText', 'Do the default action')
+    },
+    actions: actions,
+    kind: "secondary",
+    isSmall: true
+  });
+});
+//# sourceMappingURL=SplitButton-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SplitButton/SplitButton-story.js"],"names":["actions","text","onClick","console","log","stories","module","addDecorator","withKnobs","add"],"mappings":";;;;AAAA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,OAAO,GAAG,CACf;AACCC,EAAAA,IAAI,EAAE,gBADP;AAECC,EAAAA,OAAO,EAAE;AAAA,WAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ,CAAN;AAAA;AAFV,CADe,EAKf;AACCH,EAAAA,IAAI,EAAE;AADP,CALe,EAQf;AACCA,EAAAA,IAAI,EAAE;AADP,CARe,CAAhB;AAaA,IAAMI,OAAO,GAAG,uBAAU,aAAV,EAAyBC,MAAzB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CACLI,GADF,CACM,SADN,EACiB;AAAA,SACf,gCAAC,uBAAD;AACC,IAAA,aAAa,EAAE;AACdR,MAAAA,IAAI,EAAE,kBAAK,mBAAL,EAA0B,uBAA1B;AADQ,KADhB;AAIC,IAAA,OAAO,EAAED,OAJV;AAKC,IAAA,IAAI,EAAC;AALN,IADe;AAAA,CADjB,EAUES,GAVF,CAUM,eAVN,EAUuB;AAAA,SACrB,gCAAC,uBAAD;AACC,IAAA,aAAa,EAAE;AACdR,MAAAA,IAAI,EAAE,kBAAK,mBAAL,EAA0B,uBAA1B;AADQ,KADhB;AAIC,IAAA,OAAO,EAAED,OAJV;AAKC,IAAA,IAAI,EAAC,SALN;AAMC,IAAA,OAAO;AANR,IADqB;AAAA,CAVvB,EAoBES,GApBF,CAoBM,WApBN,EAoBmB;AAAA,SACjB,gCAAC,uBAAD;AACC,IAAA,aAAa,EAAE;AACdR,MAAAA,IAAI,EAAE,kBAAK,mBAAL,EAA0B,uBAA1B;AADQ,KADhB;AAIC,IAAA,OAAO,EAAED,OAJV;AAKC,IAAA,IAAI,EAAC;AALN,IADiB;AAAA,CApBnB,EA6BES,GA7BF,CA6BM,iBA7BN,EA6ByB;AAAA,SACvB,gCAAC,uBAAD;AACC,IAAA,aAAa,EAAE;AACdR,MAAAA,IAAI,EAAE,kBAAK,mBAAL,EAA0B,uBAA1B;AADQ,KADhB;AAIC,IAAA,OAAO,EAAED,OAJV;AAKC,IAAA,IAAI,EAAC,WALN;AAMC,IAAA,OAAO;AANR,IADuB;AAAA,CA7BzB","sourcesContent":["import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text } from '@storybook/addon-knobs/react'\n\nimport SplitButton from './SplitButton'\n\nconst actions = [\n\t{\n\t\ttext: 'Another action',\n\t\tonClick: () => console.log('CLICK')\n\t},\n\t{\n\t\ttext: 'Third action'\n\t},\n\t{\n\t\ttext: 'Yet another action'\n\t}\n]\n\nconst stories = storiesOf('SplitButton', module)\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Primary', () => (\n\t\t<SplitButton\n\t\t\tdefaultAction={{\n\t\t\t\ttext: text('defaultActionText', 'Do the default action')\n\t\t\t}}\n\t\t\tactions={actions}\n\t\t\tkind=\"primary\"\n\t\t/>\n\t))\n\t.add('Primary Small', () => (\n\t\t<SplitButton\n\t\t\tdefaultAction={{\n\t\t\t\ttext: text('defaultActionText', 'Do the default action')\n\t\t\t}}\n\t\t\tactions={actions}\n\t\t\tkind=\"primary\"\n\t\t\tisSmall\n\t\t/>\n\t))\n\t.add('Secondary', () => (\n\t\t<SplitButton\n\t\t\tdefaultAction={{\n\t\t\t\ttext: text('defaultActionText', 'Do the default action')\n\t\t\t}}\n\t\t\tactions={actions}\n\t\t\tkind=\"secondary\"\n\t\t/>\n\t))\n\t.add('Secondary Small', () => (\n\t\t<SplitButton\n\t\t\tdefaultAction={{\n\t\t\t\ttext: text('defaultActionText', 'Do the default action')\n\t\t\t}}\n\t\t\tactions={actions}\n\t\t\tkind=\"secondary\"\n\t\t\tisSmall\n\t\t/>\n\t))\n"],"file":"SplitButton-story.js"}