@popmenu/table 0.21.0 → 0.24.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);
@@ -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';
 
@@ -720,6 +719,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));
 };
@@ -747,6 +774,24 @@ function SvgMore(props) {
   })));
 }
 
+var _path$3A;
+
+function _extends$3R() { _extends$3R = 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$3R.apply(this, arguments); }
+
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3R({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3A || (_path$3A = /*#__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$2X;
 
 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); }
@@ -870,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;
@@ -945,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);
@@ -966,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) {
@@ -976,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'))); }))); })),