@popmenu/table 0.20.0 → 0.23.0

package/build/index.js

@@ -6,6 +6,7 @@ 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');
@@ -179,20 +180,20 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$3k;
+var _path$2O;
 
-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$32() { _extends$32 = 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$32.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$32({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3k || (_path$3k = /*#__PURE__*/React__namespace.createElement("path", {
+    height: "1em"
+  }, props), _path$2O || (_path$2O = /*#__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"
   })));
 }
@@ -720,6 +721,34 @@ var Tooltip = React.forwardRef(function (props, ref) {
 });
 Tooltip.displayName = 'Tooltip';
 
+core.makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+core.makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(1),
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        minWidth: 40,
+        padding: 0,
+        textAlign: 'center',
+    },
+    adornedStart: {
+        padding: 0,
+    },
+    adornedEnd: {
+        padding: 0,
+    },
+}); });
+
 var TableFooter = function (props) {
     return (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
 };
@@ -729,57 +758,75 @@ var TableHeader = function (props) {
     return React__default['default'].createElement("thead", __assign$1({}, restProps), children);
 };
 
-var _path$3K;
+var _path$4w;
 
-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$4M() { _extends$4M = 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$4M.apply(this, arguments); }
 
-function SvgMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
+function SvgChevronDown(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4M({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3K || (_path$3K = /*#__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"
+    height: "1em"
+  }, props), _path$4w || (_path$4w = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M4 6l4 4 4-4"
   })));
 }
 
-var _path$2X;
+var _path$4v;
 
-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$4L() { _extends$4L = 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$4L.apply(this, arguments); }
 
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
+function SvgChevronUp(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4L({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4 6l4 4 4-4"
+    height: "1em"
+  }, props), _path$4v || (_path$4v = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 10L8 6l-4 4"
   })));
 }
 
-var _path$2W;
+var _path$3c;
 
-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$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 SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3a({
+function SvgMore(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3s({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2W || (_path$2W = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 10L8 6l-4 4"
+    height: "1em"
+  }, props), _path$3c || (_path$3c = /*#__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.334A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
+  })));
+}
+
+var _path$32;
+
+function _extends$3i() { _extends$3i = 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$3i.apply(this, arguments); }
+
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3i({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    fill: "none",
+    width: "1em",
+    height: "1em"
+  }, props), _path$32 || (_path$32 = /*#__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"
   })));
 }
 
@@ -870,28 +917,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;
@@ -945,17 +970,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);
@@ -966,6 +1028,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) {
@@ -976,6 +1039,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'))); }))); })),