@popmenu/table 0.21.0 → 0.24.0

package/build/components/GlobalFilter/GlobalFilter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { GlobalFilterProps } from './GlobalFilterProps';
+export declare const GlobalFilter: (props: GlobalFilterProps) => JSX.Element;

package/build/components/GlobalFilter/GlobalFilterProps.d.ts

@@ -0,0 +1,7 @@
+import { OutlinedTextFieldProps } from '@material-ui/core/TextField';
+export interface GlobalFilterProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    /** the value of global filter from table instance */
+    value: string;
+    /** the setter for value of global filter from table instance */
+    setValue: (value: string) => void;
+}

package/build/components/GlobalFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { GlobalFilter } from './GlobalFilter';
+export { GlobalFilterProps } from './GlobalFilterProps';

package/build/components/Table/TableProps.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Cell, Column, TableInstance, UsePaginationOptions } from 'react-table';
+import { GlobalFilterProps } from '../GlobalFilter';
 export interface TableProps {
     /** Configurations for each individual column. */
     columns: Array<Column & {
@@ -17,6 +18,8 @@ export interface TableProps {
     fullHeight?: boolean;
     /** Styles the table to take up its containers full width. */
     fullWidth?: boolean;
+    /** Enables global filter as search. */
+    searchable?: boolean;
     /** Enables sortability for columns. */
     sortable?: boolean;
     /** Sets loading state. When true, Will render a CircularProgress when true and not rows.  */
@@ -25,6 +28,8 @@ export interface TableProps {
     emptyMessage?: string;
     /** An image to be displayed with the empty message. */
     EmptyImage?: () => React.ReactNode;
+    /** Props applied to the global search input component. Extends [TextField props](https://v4.mui.com/api/text-field/). */
+    GlobalFilterProps?: Omit<GlobalFilterProps, 'value' | 'setValue'>;
     /** Callback for managing pagination events. */
     onPaginate?: (pageIndex: number, instance: TableInstance) => void;
     /** Callback for managing pagination events. */

package/build/index.es.js

@@ -3,12 +3,12 @@ import React__default, { forwardRef, createElement, useMemo, useState } from 're
 import { useTable } from 'react-table/src/hooks/useTable.js';
 import { usePagination } from 'react-table/src/plugin-hooks/usePagination.js';
 import { useSortBy } from 'react-table/src/plugin-hooks/useSortBy.js';
+import { useGlobalFilter } from 'react-table/src/plugin-hooks/useGlobalFilter.js';
 import { Pagination } from '@material-ui/lab';
 import '@material-ui/lab/Alert';
-import { makeStyles, Paper as Paper$1, Link as Link$1, Box, useTheme as useTheme$1 } from '@material-ui/core';
+import { makeStyles, Typography as Typography$1, Paper as Paper$1, Link as Link$1, Box, useTheme as useTheme$1, TextField, InputAdornment } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiIconButton from '@material-ui/core/IconButton';
-import MuiTypography from '@material-ui/core/Typography';
 import { makeStyles as makeStyles$1, useTheme } from '@material-ui/core/styles';
 import MuiAvatar from '@material-ui/core/Avatar';
 import '@material-ui/core/Badge';
@@ -277,29 +277,29 @@ IconButton.defaultProps = {
     color: 'secondary',
 };
 
-var useTypographyStyles = makeStyles$1(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 = makeStyles$1(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 = forwardRef(function (props, ref) {
+    props.weight; var restProps = __rest(props, ["weight"]);
     var classes = useTypographyStyles(props);
-    return React__default.createElement(MuiTypography, __assign({ ref: ref, classes: classes }, props));
+    return React__default.createElement(Typography$1, __assign({ ref: ref, classes: classes }, restProps));
 });
 Typography.displayName = 'Typography';
 
@@ -678,6 +678,34 @@ var Tooltip = forwardRef(function (props, ref) {
 });
 Tooltip.displayName = 'Tooltip';
 
+makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+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.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
 };
@@ -705,6 +733,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.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.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); }
@@ -828,28 +874,6 @@ var TableCell = function (props) {
     return (React__default.createElement("td", __assign$1({ className: root }, restProps), children));
 };
 
-var useTableStyles = 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;
@@ -903,17 +927,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.createElement(TextField, __assign$1({ variant: "outlined", value: value, onChange: handleChange, InputProps: __assign$1({ startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                React__default.createElement(Icon, { icon: SvgSearch }))) }, InputProps) }, cleanRestProps)));
+};
+
+var useTableStyles = 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 = useTheme$1();
     var classes = useTableStyles(props);
     var columns = 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(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useSortBy, 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(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useGlobalFilter, useSortBy, 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);
@@ -924,6 +985,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) {
@@ -934,6 +996,8 @@ var Table = function (props) {
         }
     };
     return (React__default.createElement(Box, { className: classes.root, minHeight: fullHeight ? minHeight : 'unset' },
+        searchable && (React__default.createElement(Box, null,
+            React__default.createElement(GlobalFilter, __assign$1({ value: state.globalFilter, setValue: setGlobalFilter }, GlobalFilterProps)))),
         React__default.createElement(Box, { className: classes.tableWrap },
             React__default.createElement("table", __assign$1({ className: classes.table }, getTableProps()),
                 React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default.createElement(TableHeaderCell, __assign$1({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign$1(__assign$1({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),