@popmenu/table 0.22.0 → 0.25.0

package/build/index.js

@@ -6,12 +6,12 @@ var React = require('react');
 var useTable_js = require('react-table/src/hooks/useTable.js');
 var usePagination_js = require('react-table/src/plugin-hooks/usePagination.js');
 var useSortBy_js = require('react-table/src/plugin-hooks/useSortBy.js');
+var useGlobalFilter_js = require('react-table/src/plugin-hooks/useGlobalFilter.js');
 var lab = require('@material-ui/lab');
 require('@material-ui/lab/Alert');
 var core = require('@material-ui/core');
 require('@material-ui/core/AppBar');
 var MuiIconButton = require('@material-ui/core/IconButton');
-var MuiTypography = require('@material-ui/core/Typography');
 var styles = require('@material-ui/core/styles');
 var MuiAvatar = require('@material-ui/core/Avatar');
 require('@material-ui/core/Badge');
@@ -79,7 +79,6 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
-var MuiTypography__default = /*#__PURE__*/_interopDefaultLegacy(MuiTypography);
 var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
 var MuiButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiButton);
 var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
@@ -179,12 +178,12 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$3k;
+var _path$3l;
 
-function _extends$3B() { _extends$3B = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3B.apply(this, arguments); }
+function _extends$3C() { _extends$3C = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3C.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3C({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -192,7 +191,7 @@ function SvgUser(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$3k || (_path$3k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3l || (_path$3l = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z"
   })));
 }
@@ -319,29 +318,29 @@ IconButton.defaultProps = {
     color: 'secondary',
 };
 
-var useTypographyStyles = styles.makeStyles(function () {
-    var _a;
-    return ({
-        root: (_a = {},
-            _a["& ." + iconStaticClassName] = {
-                position: 'relative',
-                top: '0.125em',
-                padding: '0 0.125em',
-                boxSizing: 'content-box',
-            },
-            _a),
-        caption: {
-            display: 'inline',
-        },
-        overline: {
-            display: 'inline',
-        },
-    });
-});
+var useTypographyStyles = styles.makeStyles(function () { return ({
+    root: function (_a) {
+        var _b;
+        var weight = _a.weight;
+        return (__assign((_b = {}, _b["& ." + iconStaticClassName] = {
+            position: 'relative',
+            top: '0.125em',
+            padding: '0 0.125em',
+            boxSizing: 'content-box',
+        }, _b), (weight && { fontWeight: (weight === 'semi-bold' && 600) || (weight === 'bold' && 700) || 400 })));
+    },
+    caption: {
+        display: 'inline',
+    },
+    overline: {
+        display: 'inline',
+    },
+}); });
 
 var Typography = React.forwardRef(function (props, ref) {
+    props.weight; var restProps = __rest(props, ["weight"]);
     var classes = useTypographyStyles(props);
-    return React__default['default'].createElement(MuiTypography__default['default'], __assign({ ref: ref, classes: classes }, props));
+    return React__default['default'].createElement(core.Typography, __assign({ ref: ref, classes: classes }, restProps));
 });
 Typography.displayName = 'Typography';
 
@@ -757,12 +756,12 @@ var TableHeader = function (props) {
     return React__default['default'].createElement("thead", __assign$1({}, restProps), children);
 };
 
-var _path$3K;
+var _path$3L;
 
-function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
+function _extends$40() { _extends$40 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$40.apply(this, arguments); }
 
 function SvgMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$40({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -770,17 +769,35 @@ function SvgMore(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$3K || (_path$3K = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3L || (_path$3L = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
   })));
 }
 
-var _path$2X;
+var _path$3B;
 
-function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
+function _extends$3S() { _extends$3S = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3S.apply(this, arguments); }
+
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3S({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3B || (_path$3B = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.333 12.667A5.333 5.333 0 107.333 2a5.333 5.333 0 000 10.667zM14 14l-2.9-2.9"
+  })));
+}
+
+var _path$2Y;
+
+function _extends$3c() { _extends$3c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3c.apply(this, arguments); }
 
 function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3c({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -788,17 +805,17 @@ function SvgChevronDown(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2Y || (_path$2Y = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M4 6l4 4 4-4"
   })));
 }
 
-var _path$2W;
+var _path$2X;
 
-function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
+function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
 
 function SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -806,7 +823,7 @@ function SvgChevronUp(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$2W || (_path$2W = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 10L8 6l-4 4"
   })));
 }
@@ -898,28 +915,6 @@ var TableCell = function (props) {
     return (React__default['default'].createElement("td", __assign$1({ className: root }, restProps), children));
 };
 
-var useTableStyles = core.makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        root: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return ({
-                display: fullWidth ? 'flex' : 'inline-flex',
-                flexDirection: 'column',
-            });
-        },
-        table: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return (__assign$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
-        },
-        tableWrap: function () { return ({
-            maxWidth: '100%',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-        }); },
-    });
-});
-
 var filterProps = function (props) {
     props.icon; props.action; var filteredProps = __rest$1(props, ["icon", "action"]);
     return filteredProps;
@@ -973,17 +968,54 @@ var makeColumns = function (config) {
     return memoizedColumns;
 };
 
+var GlobalFilter = function (props) {
+    var value = props.value, setValue = props.setValue, restProps = __rest$1(props, ["value", "setValue"]);
+    var onChange = restProps.onChange, InputProps = restProps.InputProps, cleanRestProps = __rest$1(restProps, ["onChange", "InputProps"]);
+    var handleChange = function (e) {
+        setValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (React__default['default'].createElement(core.TextField, __assign$1({ variant: "outlined", value: value, onChange: handleChange, InputProps: __assign$1({ startAdornment: (React__default['default'].createElement(core.InputAdornment, { position: "start" },
+                React__default['default'].createElement(Icon, { icon: SvgSearch }))) }, InputProps) }, cleanRestProps)));
+};
+
+var useTableStyles = core.makeStyles(function (_a) {
+    var typography = _a.typography;
+    return ({
+        root: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return ({
+                display: fullWidth ? 'flex' : 'inline-flex',
+                flexDirection: 'column',
+            });
+        },
+        table: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return (__assign$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
+        },
+        tableWrap: function () { return ({
+            maxWidth: '100%',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+        }); },
+    });
+});
+
 /* eslint-disable react/jsx-key */
 var Table = function (props) {
+    // Setup
     var actionColumnId = 'table-actions-column';
-    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, fullHeight = props.fullHeight, _a = props.paginationOptions, paginationOptions = _a === void 0 ? {} : _a, _b = props.tableOptions, tableOptions = _b === void 0 ? {} : _b, onPaginate = props.onPaginate;
+    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, fullHeight = props.fullHeight, GlobalFilterProps = props.GlobalFilterProps, _a = props.paginationOptions, paginationOptions = _a === void 0 ? {} : _a, _b = props.tableOptions, tableOptions = _b === void 0 ? {} : _b, searchable = props.searchable, onPaginate = props.onPaginate;
     var theme = core.useTheme();
     var classes = useTableStyles(props);
     var columns = React.useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
     var initialPaginationState = paginationOptions.initialState, restPaginationOptions = __rest$1(paginationOptions, ["initialState"]);
     var initialState = __assign$1({}, initialPaginationState);
-    var instance = useTable_js.useTable(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useSortBy_js.useSortBy, usePagination_js.usePagination);
-    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, rows = instance.rows;
+    var instance = useTable_js.useTable(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useGlobalFilter_js.useGlobalFilter, useSortBy_js.useSortBy, usePagination_js.usePagination);
+    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, rows = instance.rows, state = instance.state, setGlobalFilter = instance.setGlobalFilter;
+    // Aliases
     var isPaginated = pageCount > 1;
     var isEmpty = rows.length === 0;
     var lineHeightRem = parseFloat(theme.typography[tableConstants.tableTypography].lineHeight);
@@ -994,6 +1026,7 @@ var Table = function (props) {
     var bodyHeight = instance.state.pageSize * cellHeight;
     var footerHeight = 88;
     var minHeight = headerHeight + bodyHeight + footerHeight;
+    // Handlers
     var handlePagination = function (_e, pageNumber) {
         var pageIndex = pageNumber - 1;
         if (onPaginate) {
@@ -1004,6 +1037,8 @@ var Table = function (props) {
         }
     };
     return (React__default['default'].createElement(core.Box, { className: classes.root, minHeight: fullHeight ? minHeight : 'unset' },
+        searchable && (React__default['default'].createElement(core.Box, null,
+            React__default['default'].createElement(GlobalFilter, __assign$1({ value: state.globalFilter, setValue: setGlobalFilter }, GlobalFilterProps)))),
         React__default['default'].createElement(core.Box, { className: classes.tableWrap },
             React__default['default'].createElement("table", __assign$1({ className: classes.table }, getTableProps()),
                 React__default['default'].createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default['default'].createElement(TableHeaderCell, __assign$1({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign$1(__assign$1({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),