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

package/lib/components/Table/Table.js

@@ -0,0 +1,395 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _reactTable = _interopRequireDefault(require("react-table"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Forms = require("../Forms");
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+var _Card = _interopRequireDefault(require("../Card/Card"));
+
+var _Pagination = _interopRequireDefault(require("../Pagination/Pagination"));
+
+var _EmptyState = _interopRequireDefault(require("../EmptyState/EmptyState"));
+
+var _ContextMenu = _interopRequireDefault(require("../ContextMenu/ContextMenu"));
+
+// Uses React Table. See https://react-table.js.org/#/story/readme details.
+var Table =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Table, _Component);
+
+  function Table(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Table);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Table).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (_ref) {
+      var id = _ref.id;
+      var _this$props = _this.props,
+          onSelection = _this$props.onSelection,
+          totalRows = _this$props.totalRows;
+
+      _this.setState(function (prevState) {
+        var idx = prevState.selectedIds.indexOf(id);
+        var newIds = (0, _toConsumableArray2["default"])(prevState.selectedIds);
+
+        if (idx > -1) {
+          newIds.splice(idx, 1);
+        } else {
+          if (prevState.selectedIds.length === 0) {
+            newIds = [id];
+          } else {
+            newIds.push(id);
+          }
+        }
+
+        return {
+          selectedIds: newIds,
+          allRowsSelected: newIds.length === totalRows
+        };
+      }, function () {
+        onSelection && onSelection({
+          selectedIds: _this.state.selectedIds
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelectAll", function () {
+      var onSelection = _this.props.onSelection;
+      var currentPage = _this.table.state.page;
+      var pageSize = _this.table.state.pageSize;
+
+      var allRows = _this.table.getResolvedState().sortedData;
+
+      var startIdx = currentPage * pageSize;
+      var currentRows = allRows.slice(startIdx, startIdx + pageSize).map(function (item) {
+        return item._original;
+      });
+      var visibleIds = currentRows.map(function (row) {
+        return row.id;
+      });
+
+      _this.setState(function (prevState) {
+        return {
+          selectedIds: prevState.selectedIds.length > 0 ? [] : [].concat((0, _toConsumableArray2["default"])(prevState.selectedIds), (0, _toConsumableArray2["default"])(visibleIds))
+        };
+      }, function () {
+        onSelection && onSelection({
+          selectedIds: _this.state.selectedIds
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickRow", function (e, handleOriginal) {
+      var _this$props$onClickRo = _this.props.onClickRow,
+          onClickRow = _this$props$onClickRo === void 0 ? function () {} : _this$props$onClickRo; // determine which row we clicked
+
+      var children = (0, _toConsumableArray2["default"])(e.currentTarget.parentNode.parentNode.children);
+      var idx = children.indexOf(e.currentTarget.parentNode);
+      onClickRow(e, {
+        idx: idx,
+        item: _this.props.data[idx]
+      });
+      handleOriginal && handleOriginal(e);
+    });
+    _this.state = {
+      selectedIds: props.initialSelectedIds || [],
+      allRowsSelected: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Table, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          data = _this$props2.data,
+          totalRows = _this$props2.totalRows,
+          columns = _this$props2.columns,
+          className = _this$props2.className,
+          paginationProps = _this$props2.paginationProps,
+          isSelectable = _this$props2.isSelectable,
+          kind = _this$props2.kind,
+          pluralKind = _this$props2.pluralKind,
+          bulkActions = _this$props2.bulkActions,
+          sortable = _this$props2.sortable,
+          noDataIcon = _this$props2.noDataIcon,
+          noDataHeadline = _this$props2.noDataHeadline,
+          noDataSubheadline = _this$props2.noDataSubheadline,
+          noDataPrimaryAction = _this$props2.noDataPrimaryAction,
+          noDataPrimaryActionButtonKind = _this$props2.noDataPrimaryActionButtonKind,
+          noDataPrimaryActionButtonIcon = _this$props2.noDataPrimaryActionButtonIcon,
+          subComponentForRow = _this$props2.subComponentForRow,
+          rowIsDirty = _this$props2.rowIsDirty,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props2, ["data", "totalRows", "columns", "className", "paginationProps", "isSelectable", "kind", "pluralKind", "bulkActions", "sortable", "noDataIcon", "noDataHeadline", "noDataSubheadline", "noDataPrimaryAction", "noDataPrimaryActionButtonKind", "noDataPrimaryActionButtonIcon", "subComponentForRow", "rowIsDirty"]);
+      var selectedIds = this.state.selectedIds;
+      var columnsToRender = (0, _toConsumableArray2["default"])(columns);
+
+      if (isSelectable) {
+        columnsToRender.unshift({
+          id: 'checkbox',
+          accessor: '',
+          Header: function Header() {
+            return _react["default"].createElement(_Forms.Checkbox, {
+              id: "",
+              isIndeterminate: selectedIds.length > 0 && selectedIds.length < totalRows // NOTE: Using state here because this Header can't access page size on its own
+              ,
+              isChecked: selectedIds.length > 0,
+              onChange: function onChange() {
+                return _this2.handleSelectAll();
+              }
+            });
+          },
+          Cell: function Cell(props) {
+            var original = props.original,
+                pageSize = props.pageSize;
+            var id = original.id;
+            return _react["default"].createElement(_Forms.Checkbox, {
+              id: id,
+              isChecked: selectedIds.indexOf(id) > -1,
+              onChange: function onChange() {
+                return _this2.handleChange({
+                  id: id,
+                  pageSize: pageSize
+                });
+              }
+            });
+          },
+          sortable: false,
+          width: 36
+        });
+      } // Handle updating header columns when at least one row is selected
+
+
+      if (isSelectable && selectedIds.length > 0) {
+        var numSelectedRows = selectedIds.length;
+        var selectedText = "".concat(numSelectedRows, " selected");
+
+        if (numSelectedRows > 1) {
+          if (pluralKind) {
+            selectedText = "".concat(numSelectedRows, " ").concat(pluralKind, " selected");
+          } else if (kind) {
+            selectedText = "".concat(numSelectedRows, " ").concat(kind, "s selected");
+          }
+        } else {
+          if (kind) {
+            selectedText = "".concat(numSelectedRows, " ").concat(kind, " selected");
+          }
+        } // Change the header text to reflect which rows are selected
+
+
+        columnsToRender = columnsToRender.map(function (col, idx) {
+          if (idx === 0) {
+            return col;
+          } else if (idx === 1) {
+            return (0, _objectSpread2["default"])({}, col, {
+              Header: function Header() {
+                return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement("p", {
+                  className: "table-selected-text"
+                }, selectedText), bulkActions && bulkActions.length > 0 && _react["default"].createElement(_ContextMenu["default"], {
+                  actions: bulkActions,
+                  text: "Actions",
+                  isSimple: true,
+                  isTextOnly: true,
+                  isLeftAligned: true,
+                  closeOnSelectAction: true
+                }));
+              }
+            });
+          }
+
+          return (0, _objectSpread2["default"])({}, col, {
+            Header: null
+          });
+        });
+      }
+
+      return _react["default"].createElement(_reactTable["default"], (0, _extends2["default"])({
+        ref: function ref(_ref2) {
+          return _this2.table = _ref2;
+        },
+        data: data,
+        columns: columnsToRender,
+        className: (0, _classnames["default"])('table', className),
+        sortable: isSelectable && selectedIds.length > 0 ? false : sortable,
+        expanderDefaults: {
+          sortable: false,
+          resizable: false,
+          filterable: false,
+          width: 40
+        },
+        getTableProps: function getTableProps() {
+          return {
+            className: 'table__inner'
+          };
+        },
+        getTbodyProps: function getTbodyProps() {
+          return {
+            className: 'table__body'
+          };
+        },
+        getTheadTrProps: function getTheadTrProps() {
+          return {
+            className: (0, _classnames["default"])('table-header-row', {
+              'table-header-row--has-selections': isSelectable && selectedIds.length > 0
+            })
+          };
+        },
+        getTheadThProps: function getTheadThProps(state, rowInfo, column) {
+          return {
+            className: (0, _classnames["default"])('table-header-cell', {
+              'table-checkbox-cell': column && column.id === 'checkbox'
+            }),
+            width: 'auto'
+          };
+        },
+        getTrGroupProps: function getTrGroupProps(state, rowInfo) {
+          var expanded = state.expanded[rowInfo.viewIndex];
+          var isDirty = typeof rowIsDirty === 'function' && !!rowIsDirty(rowInfo) || rowInfo.original.isDirty;
+          return {
+            className: (0, _classnames["default"])('table-row-group', {
+              'table-row-group--expanded': expanded,
+              'table-row-group--is-dirty': isDirty
+            })
+          };
+        },
+        getTrProps: function getTrProps(state, rowInfo) {
+          var expanded = state.expanded[rowInfo.viewIndex];
+          var isDirty = typeof rowIsDirty === 'function' && !!rowIsDirty(rowInfo) || rowInfo.original.isDirty;
+          return {
+            className: (0, _classnames["default"])('table-row', {
+              'table-row--expanded': expanded,
+              'table-row--is-dirty': isDirty
+            }),
+            onClick: _this2.handleClickRow
+          };
+        },
+        getTdProps: function getTdProps(state, rowInfo, column) {
+          return {
+            className: (0, _classnames["default"])('table-cell', {
+              'table-checkbox-cell': column.id === 'checkbox',
+              'table-expander-cell': column.expander
+            }),
+            width: 'auto'
+          };
+        },
+        getPaginationProps: function getPaginationProps() {
+          return {
+            className: 'table__pagination'
+          };
+        },
+        getLoadingProps: function getLoadingProps(state) {
+          return {
+            className: state.loading ? 'table-loader--is-visible' : 'table-loader'
+          };
+        },
+        getNoDataProps: function getNoDataProps() {
+          return {
+            icon: noDataIcon,
+            headline: noDataHeadline,
+            subheadline: noDataSubheadline,
+            primaryAction: noDataPrimaryAction,
+            primaryActionButtonKind: noDataPrimaryActionButtonKind,
+            primaryActionButtonIcon: noDataPrimaryActionButtonIcon
+          };
+        },
+        SubComponent: subComponentForRow ? function (row) {
+          return _react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+            "in": true,
+            appear: true,
+            classNames: "table-subcomponent",
+            timeout: 100
+          }, _react["default"].createElement("div", {
+            className: 'table-subcomponent'
+          }, _react["default"].createElement(_Card["default"], null, subComponentForRow(row))));
+        } : undefined,
+        NoDataComponent: _EmptyState["default"] // @ts-ignore-next-line
+        ,
+        ExpanderComponent: _react["default"].createElement(_Icon["default"], {
+          name: 'keyboard_arrow_right',
+          className: 'table-expander-row'
+        }),
+        ThComponent: function ThComponent(tableProps) {
+          var toggleSort = tableProps.toggleSort,
+              className = tableProps.className,
+              rest = (0, _objectWithoutProperties2["default"])(tableProps, ["toggleSort", "className"]);
+          var isSortable = className && className.indexOf('-cursor-pointer') > -1;
+          var isSortedAsc = className && className.indexOf('-sort-asc') > -1;
+          var isSortedDesc = tableProps.className && tableProps.className.indexOf('-sort-desc') > -1;
+          return _react["default"].createElement("div", (0, _extends2["default"])({
+            onClick: toggleSort,
+            className: (0, _classnames["default"])(className, {
+              'table-header-cell--is-sortable': (isSortable || isSortedAsc || isSortedDesc) && selectedIds.length === 0,
+              'table-header-cell--is-sorted-asc': isSortedAsc,
+              'table-header-cell--is-sorted-desc': isSortedDesc
+            })
+          }, rest), tableProps.children, (isSortable || isSortedAsc || isSortedDesc) && selectedIds.length === 0 && _react["default"].createElement(_Icon["default"], {
+            name: "arrow_drop_down",
+            className: (0, _classnames["default"])('table-header-cell__icon', {
+              'table-header-cell__icon--is-visible': isSortedAsc || isSortedDesc,
+              'table-header-cell__icon--is-reversed': isSortedDesc
+            })
+          }));
+        },
+        PaginationComponent: function PaginationComponent(tableProps) {
+          return tableProps.page === 0 && totalRows <= tableProps.pageSize ? null : _react["default"].createElement("div", {
+            className: "table-pagination__wrapper"
+          }, _react["default"].createElement(_Pagination["default"], (0, _extends2["default"])({}, paginationProps, tableProps)));
+        }
+      }, rest));
+    }
+  }]);
+  return Table;
+}(_react.Component);
+
+exports["default"] = Table;
+(0, _defineProperty2["default"])(Table, "defaultProps", {
+  className: '',
+  paginationProps: {},
+  isSelectable: false,
+  noDataIcon: 'empty_box',
+  noDataHeadline: 'Nothing to see here',
+  noDataPrimaryAction: null,
+  noDataPrimaryActionButtonKind: 'simple',
+  noDataPrimaryActionButtonIcon: null
+});
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"names":["Table","props","id","onSelection","totalRows","setState","prevState","idx","selectedIds","indexOf","newIds","splice","length","push","allRowsSelected","state","currentPage","table","page","pageSize","allRows","getResolvedState","sortedData","startIdx","currentRows","slice","map","item","_original","visibleIds","row","e","handleOriginal","onClickRow","children","currentTarget","parentNode","data","initialSelectedIds","columns","className","paginationProps","isSelectable","kind","pluralKind","bulkActions","sortable","noDataIcon","noDataHeadline","noDataSubheadline","noDataPrimaryAction","noDataPrimaryActionButtonKind","noDataPrimaryActionButtonIcon","subComponentForRow","rowIsDirty","rest","columnsToRender","unshift","accessor","Header","handleSelectAll","Cell","original","handleChange","width","numSelectedRows","selectedText","col","ref","resizable","filterable","rowInfo","column","expanded","viewIndex","isDirty","onClick","handleClickRow","expander","loading","icon","headline","subheadline","primaryAction","primaryActionButtonKind","primaryActionButtonIcon","undefined","EmptyState","tableProps","toggleSort","isSortable","isSortedAsc","isSortedDesc","Component"],"mappings":"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","sourcesContent":["// Uses React Table. See https://react-table.js.org/#/story/readme details.\nimport React, { Component, Fragment, ReactElement } from 'react'\nimport ReactTable, { TableProps } from 'react-table'\nimport { CSSTransition } from 'react-transition-group'\nimport cx from 'classnames'\nimport { Checkbox } from '../Forms'\nimport Icon from '../Icon/Icon'\nimport Card from '../Card/Card'\nimport Pagination from '../Pagination/Pagination'\nimport EmptyState from '../EmptyState/EmptyState'\nimport ContextMenu from '../ContextMenu/ContextMenu'\nimport { IButtonProps } from '../Button/Button'\n\nexport interface ITableProps extends Partial<TableProps> {\n\t/** Table data */\n\tdata: Record<string, any>[]\n\n\t/** The total number of rows which this table can access */\n\ttotalRows: number\n\n\t/** Columns of the table */\n\tcolumns: Record<string, any>[]\n\n\t/** Set true if the table rows can be selected */\n\tisSelectable?: boolean\n\n\t/** any Id's that are selected by default when the page loads */\n\tinitialSelectedIds?: (string | number)[]\n\n\t/** The kind of data this table displays. This will affect the text shown when at least one row is selected. */\n\tkind?: string\n\n\t/** Optional text for pluralization when multiple rows are selected */\n\tpluralKind?: string\n\n\t// TODO: IMPLEMENT PAGINATION PROPS\n\t/** Pagination component props */\n\tpaginationProps?: any\n\n\t/** Enable bulk actions for selectable tables */\n\tbulkActions?: IButtonProps[]\n\n\t/** Handle clicking on a row */\n\tonClickRow?: (\n\t\te: MouseEvent,\n\t\tmeta: { idx: number; item: Record<string, any> }\n\t) => void\n\n\t/** Callback when selection changes */\n\tonSelection?: (options: { selectedIds: (string | number)[] }) => void\n\n\t/** No data available */\n\tnoDataIcon?: string\n\tnoDataHeadline?: string\n\tnoDataSubheadline?: string\n\tnoDataPrimaryAction?: IPrimaryAction\n\tnoDataPrimaryActionButtonKind?: string\n\tnoDataPrimaryActionButtonIcon?: string\n\n\t/** Return a nested sub-component to be added as an expansion level for designated row. */\n\tsubComponentForRow?: (row: Record<string, any>) => any\n\n\t/** Called any time row props are updated. Return true if the given row should appear dirty. */\n\trowIsDirty?: (row: Record<string, any>) => boolean\n}\n\ninterface IPrimaryAction {\n\ttext: string\n\tonClick: (e: MouseEvent) => void\n\ttype: string\n}\n\ninterface ITableState {\n\tselectedIds: (string | number)[]\n\tallRowsSelected: boolean\n}\n\nexport default class Table extends Component<ITableProps, ITableState> {\n\tprivate static defaultProps = {\n\t\tclassName: '',\n\t\tpaginationProps: {},\n\t\tisSelectable: false,\n\t\tnoDataIcon: 'empty_box',\n\t\tnoDataHeadline: 'Nothing to see here',\n\t\tnoDataPrimaryAction: null,\n\t\tnoDataPrimaryActionButtonKind: 'simple',\n\t\tnoDataPrimaryActionButtonIcon: null\n\t}\n\n\tprivate table: any\n\n\tpublic constructor(props: ITableProps) {\n\t\tsuper(props)\n\n\t\tthis.state = {\n\t\t\tselectedIds: props.initialSelectedIds || [],\n\t\t\tallRowsSelected: false\n\t\t}\n\t}\n\n\tpublic render(): ReactElement {\n\t\tconst {\n\t\t\tdata,\n\t\t\ttotalRows,\n\t\t\tcolumns,\n\t\t\tclassName,\n\t\t\tpaginationProps,\n\t\t\tisSelectable,\n\t\t\tkind,\n\t\t\tpluralKind,\n\t\t\tbulkActions,\n\t\t\tsortable,\n\t\t\tnoDataIcon,\n\t\t\tnoDataHeadline,\n\t\t\tnoDataSubheadline,\n\t\t\tnoDataPrimaryAction,\n\t\t\tnoDataPrimaryActionButtonKind,\n\t\t\tnoDataPrimaryActionButtonIcon,\n\t\t\tsubComponentForRow,\n\t\t\trowIsDirty,\n\t\t\t...rest\n\t\t} = this.props\n\n\t\tconst { selectedIds } = this.state\n\n\t\tlet columnsToRender = [...columns]\n\n\t\tif (isSelectable) {\n\t\t\tcolumnsToRender.unshift({\n\t\t\t\tid: 'checkbox',\n\t\t\t\taccessor: '',\n\t\t\t\tHeader: () => (\n\t\t\t\t\t<Checkbox\n\t\t\t\t\t\tid=\"\"\n\t\t\t\t\t\tisIndeterminate={\n\t\t\t\t\t\t\tselectedIds.length > 0 && selectedIds.length < totalRows\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// NOTE: Using state here because this Header can't access page size on its own\n\t\t\t\t\t\tisChecked={selectedIds.length > 0}\n\t\t\t\t\t\tonChange={() => this.handleSelectAll()}\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tCell: props => {\n\t\t\t\t\tconst { original, pageSize } = props\n\t\t\t\t\tconst { id } = original\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tid={id}\n\t\t\t\t\t\t\tisChecked={selectedIds.indexOf(id) > -1}\n\t\t\t\t\t\t\tonChange={() => this.handleChange({ id, pageSize })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t},\n\t\t\t\tsortable: false,\n\t\t\t\twidth: 36\n\t\t\t})\n\t\t}\n\n\t\t// Handle updating header columns when at least one row is selected\n\t\tif (isSelectable && selectedIds.length > 0) {\n\t\t\tconst numSelectedRows = selectedIds.length\n\t\t\tlet selectedText = `${numSelectedRows} selected`\n\t\t\tif (numSelectedRows > 1) {\n\t\t\t\tif (pluralKind) {\n\t\t\t\t\tselectedText = `${numSelectedRows} ${pluralKind} selected`\n\t\t\t\t} else if (kind) {\n\t\t\t\t\tselectedText = `${numSelectedRows} ${kind}s selected`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (kind) {\n\t\t\t\t\tselectedText = `${numSelectedRows} ${kind} selected`\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Change the header text to reflect which rows are selected\n\t\t\tcolumnsToRender = columnsToRender.map((col, idx) => {\n\t\t\t\tif (idx === 0) {\n\t\t\t\t\treturn col\n\t\t\t\t} else if (idx === 1) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...col,\n\t\t\t\t\t\tHeader: () => (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<p className=\"table-selected-text\">{selectedText}</p>\n\t\t\t\t\t\t\t\t{bulkActions && bulkActions.length > 0 && (\n\t\t\t\t\t\t\t\t\t<ContextMenu\n\t\t\t\t\t\t\t\t\t\tactions={bulkActions}\n\t\t\t\t\t\t\t\t\t\ttext=\"Actions\"\n\t\t\t\t\t\t\t\t\t\tisSimple\n\t\t\t\t\t\t\t\t\t\tisTextOnly\n\t\t\t\t\t\t\t\t\t\tisLeftAligned\n\t\t\t\t\t\t\t\t\t\tcloseOnSelectAction\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</Fragment>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn { ...col, Header: null }\n\t\t\t})\n\t\t}\n\n\t\treturn (\n\t\t\t<ReactTable\n\t\t\t\tref={ref => (this.table = ref)}\n\t\t\t\tdata={data}\n\t\t\t\tcolumns={columnsToRender}\n\t\t\t\tclassName={cx('table', className)}\n\t\t\t\tsortable={isSelectable && selectedIds.length > 0 ? false : sortable}\n\t\t\t\texpanderDefaults={{\n\t\t\t\t\tsortable: false,\n\t\t\t\t\tresizable: false,\n\t\t\t\t\tfilterable: false,\n\t\t\t\t\twidth: 40\n\t\t\t\t}}\n\t\t\t\tgetTableProps={() => ({\n\t\t\t\t\tclassName: 'table__inner'\n\t\t\t\t})}\n\t\t\t\tgetTbodyProps={() => ({\n\t\t\t\t\tclassName: 'table__body'\n\t\t\t\t})}\n\t\t\t\tgetTheadTrProps={() => ({\n\t\t\t\t\tclassName: cx('table-header-row', {\n\t\t\t\t\t\t'table-header-row--has-selections':\n\t\t\t\t\t\t\tisSelectable && selectedIds.length > 0\n\t\t\t\t\t})\n\t\t\t\t})}\n\t\t\t\tgetTheadThProps={(state, rowInfo, column) => ({\n\t\t\t\t\tclassName: cx('table-header-cell', {\n\t\t\t\t\t\t'table-checkbox-cell': column && column.id === 'checkbox'\n\t\t\t\t\t}),\n\t\t\t\t\twidth: 'auto'\n\t\t\t\t})}\n\t\t\t\tgetTrGroupProps={(state, rowInfo) => {\n\t\t\t\t\tconst expanded = state.expanded[rowInfo.viewIndex]\n\t\t\t\t\tconst isDirty =\n\t\t\t\t\t\t(typeof rowIsDirty === 'function' && !!rowIsDirty(rowInfo)) ||\n\t\t\t\t\t\trowInfo.original.isDirty\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tclassName: cx('table-row-group', {\n\t\t\t\t\t\t\t'table-row-group--expanded': expanded,\n\t\t\t\t\t\t\t'table-row-group--is-dirty': isDirty\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tgetTrProps={(state, rowInfo) => {\n\t\t\t\t\tconst expanded = state.expanded[rowInfo.viewIndex]\n\t\t\t\t\tconst isDirty =\n\t\t\t\t\t\t(typeof rowIsDirty === 'function' && !!rowIsDirty(rowInfo)) ||\n\t\t\t\t\t\trowInfo.original.isDirty\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tclassName: cx('table-row', {\n\t\t\t\t\t\t\t'table-row--expanded': expanded,\n\t\t\t\t\t\t\t'table-row--is-dirty': isDirty\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tonClick: this.handleClickRow\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tgetTdProps={(state, rowInfo, column) => ({\n\t\t\t\t\tclassName: cx('table-cell', {\n\t\t\t\t\t\t'table-checkbox-cell': column.id === 'checkbox',\n\t\t\t\t\t\t'table-expander-cell': column.expander\n\t\t\t\t\t}),\n\t\t\t\t\twidth: 'auto'\n\t\t\t\t})}\n\t\t\t\tgetPaginationProps={() => ({\n\t\t\t\t\tclassName: 'table__pagination'\n\t\t\t\t})}\n\t\t\t\tgetLoadingProps={state => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tclassName: state.loading\n\t\t\t\t\t\t\t? 'table-loader--is-visible'\n\t\t\t\t\t\t\t: 'table-loader'\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tgetNoDataProps={() => ({\n\t\t\t\t\ticon: noDataIcon,\n\t\t\t\t\theadline: noDataHeadline,\n\t\t\t\t\tsubheadline: noDataSubheadline,\n\t\t\t\t\tprimaryAction: noDataPrimaryAction,\n\t\t\t\t\tprimaryActionButtonKind: noDataPrimaryActionButtonKind,\n\t\t\t\t\tprimaryActionButtonIcon: noDataPrimaryActionButtonIcon\n\t\t\t\t})}\n\t\t\t\tSubComponent={\n\t\t\t\t\tsubComponentForRow\n\t\t\t\t\t\t? row => (\n\t\t\t\t\t\t\t\t<CSSTransition\n\t\t\t\t\t\t\t\t\tin={true}\n\t\t\t\t\t\t\t\t\tappear={true}\n\t\t\t\t\t\t\t\t\tclassNames=\"table-subcomponent\"\n\t\t\t\t\t\t\t\t\ttimeout={100}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className={'table-subcomponent'}>\n\t\t\t\t\t\t\t\t\t\t<Card>{subComponentForRow(row)}</Card>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</CSSTransition>\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tNoDataComponent={EmptyState}\n\t\t\t\t// @ts-ignore-next-line\n\t\t\t\tExpanderComponent={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tname={'keyboard_arrow_right'}\n\t\t\t\t\t\tclassName={'table-expander-row'}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tThComponent={tableProps => {\n\t\t\t\t\tconst { toggleSort, className, ...rest } = tableProps\n\t\t\t\t\tconst isSortable =\n\t\t\t\t\t\tclassName && className.indexOf('-cursor-pointer') > -1\n\t\t\t\t\tconst isSortedAsc = className && className.indexOf('-sort-asc') > -1\n\t\t\t\t\tconst isSortedDesc =\n\t\t\t\t\t\ttableProps.className &&\n\t\t\t\t\t\ttableProps.className.indexOf('-sort-desc') > -1\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={toggleSort}\n\t\t\t\t\t\t\tclassName={cx(className, {\n\t\t\t\t\t\t\t\t'table-header-cell--is-sortable':\n\t\t\t\t\t\t\t\t\t(isSortable || isSortedAsc || isSortedDesc) &&\n\t\t\t\t\t\t\t\t\tselectedIds.length === 0,\n\t\t\t\t\t\t\t\t'table-header-cell--is-sorted-asc': isSortedAsc,\n\t\t\t\t\t\t\t\t'table-header-cell--is-sorted-desc': isSortedDesc\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{tableProps.children}\n\t\t\t\t\t\t\t{(isSortable || isSortedAsc || isSortedDesc) &&\n\t\t\t\t\t\t\t\tselectedIds.length === 0 && (\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tname=\"arrow_drop_down\"\n\t\t\t\t\t\t\t\t\t\tclassName={cx('table-header-cell__icon', {\n\t\t\t\t\t\t\t\t\t\t\t'table-header-cell__icon--is-visible':\n\t\t\t\t\t\t\t\t\t\t\t\tisSortedAsc || isSortedDesc,\n\t\t\t\t\t\t\t\t\t\t\t'table-header-cell__icon--is-reversed': isSortedDesc\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</div>\n\t\t\t\t\t)\n\t\t\t\t}}\n\t\t\t\tPaginationComponent={tableProps =>\n\t\t\t\t\ttableProps.page === 0 && totalRows <= tableProps.pageSize ? null : (\n\t\t\t\t\t\t<div className=\"table-pagination__wrapper\">\n\t\t\t\t\t\t\t<Pagination {...paginationProps} {...tableProps} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t)\n\t}\n\n\tprivate handleChange = ({ id }: any) => {\n\t\tconst { onSelection, totalRows } = this.props\n\t\tthis.setState(\n\t\t\tprevState => {\n\t\t\t\tconst idx = prevState.selectedIds.indexOf(id)\n\t\t\t\tlet newIds = [...prevState.selectedIds]\n\t\t\t\tif (idx > -1) {\n\t\t\t\t\tnewIds.splice(idx, 1)\n\t\t\t\t} else {\n\t\t\t\t\tif (prevState.selectedIds.length === 0) {\n\t\t\t\t\t\tnewIds = [id]\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnewIds.push(id)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tselectedIds: newIds,\n\t\t\t\t\tallRowsSelected: newIds.length === totalRows\n\t\t\t\t}\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tonSelection && onSelection({ selectedIds: this.state.selectedIds })\n\t\t\t}\n\t\t)\n\t}\n\n\tprivate handleSelectAll = () => {\n\t\tconst { onSelection } = this.props\n\t\tconst currentPage = this.table.state.page\n\t\tconst pageSize = this.table.state.pageSize\n\t\tconst allRows = this.table.getResolvedState().sortedData\n\t\tconst startIdx = currentPage * pageSize\n\t\tconst currentRows = allRows\n\t\t\t.slice(startIdx, startIdx + pageSize)\n\t\t\t.map(item => item._original)\n\t\tconst visibleIds = currentRows.map(row => row.id)\n\n\t\tthis.setState(\n\t\t\tprevState => ({\n\t\t\t\tselectedIds:\n\t\t\t\t\tprevState.selectedIds.length > 0\n\t\t\t\t\t\t? []\n\t\t\t\t\t\t: [...prevState.selectedIds, ...visibleIds]\n\t\t\t}),\n\t\t\t() => {\n\t\t\t\tonSelection && onSelection({ selectedIds: this.state.selectedIds })\n\t\t\t}\n\t\t)\n\t}\n\n\tprivate handleClickRow = (e, handleOriginal) => {\n\t\tconst { onClickRow = () => {} } = this.props\n\n\t\t// determine which row we clicked\n\t\tconst children = [...e.currentTarget.parentNode.parentNode.children]\n\t\tconst idx = children.indexOf(e.currentTarget.parentNode)\n\n\t\tonClickRow(e, {\n\t\t\tidx,\n\t\t\titem: this.props.data[idx]\n\t\t})\n\n\t\thandleOriginal && handleOriginal(e)\n\t}\n}\n"],"file":"Table.js"}

package/lib/components/Table/components/TableFilters/TableFilters.js

@@ -0,0 +1,31 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _Forms = require("../../../Forms");
+
+var TableFilters = function TableFilters(props) {
+  var filters = props.filters;
+  return _react["default"].createElement("div", {
+    className: "table-filters__wrapper"
+  }, filters.map(function (filter) {
+    return _react["default"].createElement(_Forms.Tag, (0, _extends2["default"])({
+      key: filter.text,
+      kind: "secondary",
+      isSmall: true
+    }, filter));
+  }));
+};
+
+var _default = TableFilters;
+exports["default"] = _default;
+//# sourceMappingURL=TableFilters.js.map

package/lib/components/Table/components/TableFilters/TableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Table/components/TableFilters/TableFilters.js"],"names":["TableFilters","props","filters","map","filter","text"],"mappings":";;;;;;;;;;;AACA;;AACA;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAkB;AAAA,MAC9BC,OAD8B,GAClBD,KADkB,CAC9BC,OAD8B;AAEtC,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACEA,OAAO,CAACC,GAAR,CAAY,UAAAC,MAAM;AAAA,WAClB,gCAAC,UAAD;AAAK,MAAA,GAAG,EAAEA,MAAM,CAACC,IAAjB;AAAuB,MAAA,IAAI,EAAC,WAA5B;AAAwC,MAAA,OAAO;AAA/C,OAAoDD,MAApD,EADkB;AAAA,GAAlB,CADF,CADD;AAOA,CATD;;eAWeJ,Y","sourcesContent":["// @flow\nimport React from 'react'\nimport { Tag } from '../../../Forms'\n\ntype Props = {\n\t/** Filters applied to the table */\n\tfilters: Array<Object>\n}\n\nconst TableFilters = (props: Props) => {\n\tconst { filters } = props\n\treturn (\n\t\t<div className=\"table-filters__wrapper\">\n\t\t\t{filters.map(filter => (\n\t\t\t\t<Tag key={filter.text} kind=\"secondary\" isSmall {...filter} />\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\nexport default TableFilters\n"],"file":"TableFilters.js"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IAutosuggestInterfaceProps } from '../../../Forms/components/Autosuggest/Autosuggest';
+export interface ITableSearchProps extends IAutosuggestInterfaceProps {
+}
+declare const TableSearch: (props: ITableSearchProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export default TableSearch;
+//# sourceMappingURL=TableSearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/components/TableSearch/TableSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAEN,0BAA0B,EAC1B,MAAM,mDAAmD,CAAA;AAE1D,MAAM,WAAW,iBAAkB,SAAQ,0BAA0B;CAAG;AAExE,QAAA,MAAM,WAAW,8OAQhB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/components/Table/components/TableSearch/TableSearch.js

@@ -0,0 +1,30 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _Autosuggest = _interopRequireDefault(require("../../../Forms/components/Autosuggest/Autosuggest"));
+
+var TableSearch = function TableSearch(props) {
+  var rest = (0, _extends2["default"])({}, props);
+  return _react["default"].createElement("div", {
+    className: "table-search__wrapper"
+  }, _react["default"].createElement(_Autosuggest["default"], (0, _extends2["default"])({
+    isSmall: true,
+    icon: {
+      name: 'search'
+    }
+  }, rest)));
+};
+
+var _default = TableSearch;
+exports["default"] = _default;
+//# sourceMappingURL=TableSearch.js.map

package/lib/components/Table/components/TableSearch/TableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Table/components/TableSearch/TableSearch.tsx"],"names":["TableSearch","props","rest","name"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAOA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAA4C;AAAA,MACpDC,IADoD,iCAC3CD,KAD2C;AAG/D,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,gCAAC,uBAAD;AAAa,IAAA,OAAO,MAApB;AAAqB,IAAA,IAAI,EAAE;AAAEE,MAAAA,IAAI,EAAE;AAAR;AAA3B,KAAmDD,IAAnD,EADD,CADD;AAKA,CARD;;eAUeF,W","sourcesContent":["import React, { ReactElement } from 'react'\nimport {\n\tdefault as Autosuggest,\n\tIAutosuggestInterfaceProps\n} from '../../../Forms/components/Autosuggest/Autosuggest'\n\nexport interface ITableSearchProps extends IAutosuggestInterfaceProps {}\n\nconst TableSearch = (props: ITableSearchProps): ReactElement => {\n\tconst { ...rest } = props\n\n\treturn (\n\t\t<div className=\"table-search__wrapper\">\n\t\t\t<Autosuggest isSmall icon={{ name: 'search' }} {...rest} />\n\t\t</div>\n\t)\n}\n\nexport default TableSearch\n"],"file":"TableSearch.js"}

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

@@ -0,0 +1,4 @@
+export { default } from './Table';
+export { default as TableSearch, ITableSearchProps } from './components/TableSearch/TableSearch';
+export { default as TableFilters } from './components/TableFilters/TableFilters';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EACN,OAAO,IAAI,WAAW,EACtB,iBAAiB,EACjB,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAA"}

package/lib/components/Table/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Table["default"];
+  }
+});
+Object.defineProperty(exports, "TableSearch", {
+  enumerable: true,
+  get: function get() {
+    return _TableSearch["default"];
+  }
+});
+Object.defineProperty(exports, "ITableSearchProps", {
+  enumerable: true,
+  get: function get() {
+    return _TableSearch.ITableSearchProps;
+  }
+});
+Object.defineProperty(exports, "TableFilters", {
+  enumerable: true,
+  get: function get() {
+    return _TableFilters["default"];
+  }
+});
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _TableSearch = _interopRequireWildcard(require("./components/TableSearch/TableSearch"));
+
+var _TableFilters = _interopRequireDefault(require("./components/TableFilters/TableFilters"));
+//# sourceMappingURL=index.js.map

package/lib/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA","sourcesContent":["export { default } from './Table'\nexport {\n\tdefault as TableSearch,\n\tITableSearchProps\n} from './components/TableSearch/TableSearch'\nexport { default as TableFilters } from './components/TableFilters/TableFilters'\n"],"file":"index.js"}

package/lib/components/Tabs/Tabs-story.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tabs-story.d.ts.map

package/lib/components/Tabs/Tabs-story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-story.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs-story.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,36 @@
+"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 _tabs = require("../../../.storybook/data/tabs");
+
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+
+var stories = (0, _react2.storiesOf)('Tabs', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Tabs', function () {
+  return _react["default"].createElement(_Tabs["default"], {
+    tabs: (0, _react3.object)('tabs', [{
+      text: 'Team',
+      isCurrent: true
+    }, {
+      text: 'Guests'
+    }, {
+      text: 'Everyone',
+      onClick: function onClick() {
+        return console.log('Click');
+      }
+    }])
+  });
+}).add('Many Tabs', function () {
+  return _react["default"].createElement(_Tabs["default"], {
+    tabs: (0, _react3.object)('tabs', _tabs.manyTabs)
+  });
+});
+//# sourceMappingURL=Tabs-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tabs/Tabs-story.tsx"],"names":["stories","module","addDecorator","withKnobs","add","text","isCurrent","onClick","console","log","manyTabs"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,OAAO,GAAG,uBAAU,MAAV,EAAkBC,MAAlB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CACLI,GADF,CACM,MADN,EACc;AAAA,SACZ,gCAAC,gBAAD;AACC,IAAA,IAAI,EAAE,oBAAO,MAAP,EAAe,CACpB;AAAEC,MAAAA,IAAI,EAAE,MAAR;AAAgBC,MAAAA,SAAS,EAAE;AAA3B,KADoB,EAEpB;AAAED,MAAAA,IAAI,EAAE;AAAR,KAFoB,EAGpB;AAAEA,MAAAA,IAAI,EAAE,UAAR;AAAoBE,MAAAA,OAAO,EAAE;AAAA,eAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ,CAAN;AAAA;AAA7B,KAHoB,CAAf;AADP,IADY;AAAA,CADd,EAUEL,GAVF,CAUM,WAVN,EAUmB;AAAA,SAAM,gCAAC,gBAAD;AAAM,IAAA,IAAI,EAAE,oBAAO,MAAP,EAAeM,cAAf;AAAZ,IAAN;AAAA,CAVnB","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, object } from '@storybook/addon-knobs/react'\nimport { manyTabs } from '../../../.storybook/data/tabs'\nimport Tabs from './Tabs'\n\nconst stories = storiesOf('Tabs', module)\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Tabs', () => (\n\t\t<Tabs\n\t\t\ttabs={object('tabs', [\n\t\t\t\t{ text: 'Team', isCurrent: true },\n\t\t\t\t{ text: 'Guests' },\n\t\t\t\t{ text: 'Everyone', onClick: () => console.log('Click') }\n\t\t\t])}\n\t\t/>\n\t))\n\t.add('Many Tabs', () => <Tabs tabs={object('tabs', manyTabs)} />)\n"],"file":"Tabs-story.js"}