@arcblock/ux 2.1.7 → 2.1.10

package/lib/Datatable/CustomToolbar.js

@@ -43,10 +43,14 @@ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery
 
 var _styles = require("@mui/material/styles");
 
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+
 var _utils = require("./utils");
 
 var _TableSearch = _interopRequireDefault(require("./TableSearch"));
 
+var _DatatableContext = require("./DatatableContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -63,6 +67,12 @@ function CustomToolbar(props) {
   const moreBtn = (0, _react.useRef)(null);
   const isMobile = useMobile();
   const toolbarId = (0, _react.useRef)(Math.random().toString(32).slice(2));
+  const [searchOpened, setSearchOpened] = (0, _react.useState)(false);
+  const {
+    customButtons,
+    loading,
+    disabled
+  } = (0, _DatatableContext.useDatatableContext)();
   const {
     data,
     options,
@@ -78,9 +88,9 @@ function CustomToolbar(props) {
     title,
     searchText,
     searchTextUpdate,
-    searchClose,
-    customButtons
+    searchClose
   } = props;
+  const customToolbarEle = options.customToolbar ? options.customToolbar(props) : '';
   const {
     search,
     downloadCsv,
@@ -92,6 +102,11 @@ function CustomToolbar(props) {
   const hidePrint = options.print === false || options.print === 'false';
   const TableFilterComponent = components.TableFilter || _muiDatatables.TableFilter;
   const TableViewColComponent = components.TableViewCol || _muiDatatables.TableViewCol;
+  (0, _react.useEffect)(() => {
+    if (loading || disabled) {
+      setAllPopsEl({});
+    }
+  }, [loading, disabled]);
 
   const printArea = func => {
     return /*#__PURE__*/_react.default.createElement(_reactToPrint.default, {
@@ -101,7 +116,7 @@ function CustomToolbar(props) {
 
   const getPopId = key => "toolbar-pop-".concat(toolbarId.current, "-").concat(key);
 
-  const defaultButtons = [];
+  const defaultButtons = []; // download/viewColumns/filter button behaviours, rendered using custom button logic
 
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
@@ -156,7 +171,9 @@ function CustomToolbar(props) {
 
   const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
   const allPops = [];
-  const [allPopsEl, setAllPopsEl] = (0, _react.useState)({});
+  const [allPopsEl, setAllPopsEl] = (0, _react.useState)({}); // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
+  // The right-hand button of the form toolbar in desktop mode
+
   const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
     if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
       return e;
@@ -168,7 +185,7 @@ function CustomToolbar(props) {
       const {
         Icon,
         popRender
-      } = e;
+      } = e; // When popRender is present, clicking the button will bubble up the content returned by the popRender
 
       if (popRender) {
         allPops.push( /*#__PURE__*/_react.default.createElement(_Popover.default, {
@@ -198,6 +215,7 @@ function CustomToolbar(props) {
           }
 
           if (popRender) {
+            // On the large screen, the bubble is positioned at the corresponding button
             setAllPopsEl({
               [popId]: document.getElementById("btn-".concat(popId))
             });
@@ -207,7 +225,8 @@ function CustomToolbar(props) {
     }
 
     return e;
-  });
+  }); // The toolbar menu in the mobile to replace toolbarButtons
+
   const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
     let content;
@@ -233,6 +252,7 @@ function CustomToolbar(props) {
         }
 
         if (e.popRender) {
+          // On the small screen, the bubbles are positioned at the three dot buttons
           setAllPopsEl({
             [popId]: moreBtn.current
           });
@@ -241,20 +261,18 @@ function CustomToolbar(props) {
     }, content);
   });
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-toobar-title"
+    className: "custom-toobar-title ".concat(isMobile && searchOpened && /*#__PURE__*/(0, _react.isValidElement)(title) ? 'toobar-title-hidden' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "custom-toobar-title-inner"
   }, /*#__PURE__*/_react.default.createElement("span", null, title))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-toobar-right"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-toobar-btns"
+    className: "custom-toobar-btns ".concat(loading || disabled ? 'toobar-btns-disabled' : '')
   }, !hideSearch && /*#__PURE__*/_react.default.createElement(_TableSearch.default, {
     search: search,
     options: options,
     searchText: searchText,
     searchTextUpdate: searchTextUpdate,
     searchClose: searchClose,
-    isMobile: isMobile
+    onSearchOpen: setSearchOpened
   }), !showMore && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hidePrint && printArea(_ref => {
     let {
       handlePrint
@@ -271,8 +289,11 @@ function CustomToolbar(props) {
     ref: moreBtn,
     "aria-haspopup": "true",
     "aria-expanded": menuIconEl ? 'true' : undefined,
-    onClick: event => setMenuIconEl(event.currentTarget)
-  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))))), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+    onClick: event => setMenuIconEl(event.currentTarget),
+    style: {
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))), customToolbarEle), /*#__PURE__*/_react.default.createElement(_Menu.default, {
     anchorEl: menuIconEl,
     open: !!menuIconEl,
     onClose: () => setMenuIconEl(null),
@@ -293,7 +314,7 @@ function CustomToolbar(props) {
     })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, print));
   }), menuItems), allPops.map((e, index) => /*#__PURE__*/_react.default.createElement("div", {
     key: getPopId(index)
-  }, e)));
+  }, e)), loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, null));
 }
 
 CustomToolbar.propTypes = {
@@ -308,12 +329,11 @@ CustomToolbar.propTypes = {
   updateFilterByType: _propTypes.default.func.isRequired,
   toggleViewColumn: _propTypes.default.func.isRequired,
   updateColumns: _propTypes.default.func.isRequired,
-  title: _propTypes.default.string,
+  title: _propTypes.default.any,
   searchText: _propTypes.default.any,
   searchTextUpdate: _propTypes.default.func.isRequired,
   searchClose: _propTypes.default.func.isRequired,
-  tableRef: _propTypes.default.func.isRequired,
-  customButtons: _propTypes.default.array.isRequired
+  tableRef: _propTypes.default.func.isRequired
 };
 CustomToolbar.defaultProps = {
   data: [],
@@ -327,4 +347,4 @@ CustomToolbar.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "CustomToolbar__Container",
   componentId: "sc-cvz3dp-0"
-})(["display:flex;align-items:center;height:56px;.custom-toobar{&-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}&-right{display:flex;margin-left:auto;}&-btns{display:flex;justify-content:center;align-items:center;}}"]);
+})(["display:flex;align-items:center;height:56px;.custom-toobar-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;transition:all ease 0.3s;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}.toobar-title-hidden{opacity:0;cursor:none;}"]);

package/lib/Datatable/DatatableContext.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatatableProvide = void 0;
+exports.useDatatableContext = useDatatableContext;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DatatableContext = /*#__PURE__*/(0, _react.createContext)({});
+const {
+  Provider
+} = DatatableContext; // eslint-disable-next-line react/prop-types
+
+const DatatableProvide = _ref => {
+  let {
+    children
+  } = _ref;
+  const [customButtons, setCustomButtons] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [disabled, setDisabled] = (0, _react.useState)(false);
+  const [filterLabel, setFilterLabel] = (0, _react.useState)('Filter');
+  const value = {
+    customButtons,
+    setCustomButtons,
+    filterLabel,
+    setFilterLabel,
+    loading,
+    setLoading,
+    disabled,
+    setDisabled
+  };
+  return /*#__PURE__*/_react.default.createElement(Provider, {
+    value: value
+  }, children);
+};
+
+exports.DatatableProvide = DatatableProvide;
+
+function useDatatableContext() {
+  return (0, _react.useContext)(DatatableContext);
+}

package/lib/Datatable/TableSearch.js

@@ -34,7 +34,6 @@ function TableSearch(_ref) {
     searchText,
     searchTextUpdate,
     searchClose,
-    isMobile,
     onSearchOpen
   } = _ref;
   const [inputMode, setInputMode] = (0, _react.useState)(false);
@@ -55,7 +54,7 @@ function TableSearch(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, inputMode ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "toolbar-search-icon-placeholder-"
+    className: "toolbar-search-icon-placeholder"
   }, /*#__PURE__*/_react.default.createElement(_Search.default, null)) : /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: search,
     disableFocusListener: true
@@ -65,7 +64,7 @@ function TableSearch(_ref) {
     disabled: options.search === 'disabled',
     onClick: clickSearchIcon
   }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : '', " ").concat(isMobile ? 'small-textfield' : '')
+    className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : '')
   }, inputMode && /*#__PURE__*/_react.default.createElement(_TextField.default, {
     variant: "standard",
     spacing: 2,
@@ -85,8 +84,7 @@ TableSearch.propTypes = {
   onSearchOpen: _propTypes.default.func,
   options: _propTypes.default.object.isRequired,
   searchTextUpdate: _propTypes.default.func.isRequired,
-  searchClose: _propTypes.default.func.isRequired,
-  isMobile: _propTypes.default.bool.isRequired
+  searchClose: _propTypes.default.func.isRequired
 };
 TableSearch.defaultProps = {
   search: '',
@@ -97,4 +95,4 @@ TableSearch.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "TableSearch__Container",
   componentId: "sc-43ylue-0"
-})(["display:flex;align-items:center;.toolbar-search-area{width:0;transition:all ease 0.3s;overflow:hidden;.MuiFormControl-root{width:inherit;margin:0 12px;}&.toolbar-btn-show{width:260px;padding-left:8px;&.small-textfield{width:200px;}}}.toolbar-search-close{width:0;transition:all ease 0.3s;overflow:hidden;&.toolbar-btn-show{width:40px;}}.toolbar-search-icon-placeholder{display:flex;justify-content:center;align-items:center;width:40px;height:40px;}"]);
+})(["display:flex;align-items:center;.toolbar-search-area{width:0;transition:all ease 0.3s;overflow:hidden;.MuiFormControl-root{width:inherit;margin:0 12px;}&.toolbar-btn-show{width:260px;padding-left:8px;", "{width:200px;}", "{width:180px;}&.small-textfield{width:200px;}}}.toolbar-search-close{width:0;transition:all ease 0.3s;overflow:hidden;&.toolbar-btn-show{width:40px;}}.toolbar-search-icon-placeholder{display:flex;justify-content:center;align-items:center;width:40px;height:40px;}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));

package/lib/Datatable/index.js

@@ -13,9 +13,15 @@ var _muiDatatables = _interopRequireWildcard(require("mui-datatables"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _isObject = _interopRequireDefault(require("lodash/isObject"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
 var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
-const _excluded = ["locale", "options", "style", "customButtons"];
+var _DatatableContext = require("./DatatableContext");
+
+const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,37 +39,104 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-const WrapFilterList = props => {
-  const hasFilter = !!props.filterList.filter(e => e.length).length;
-
-  if (hasFilter) {
-    return /*#__PURE__*/_react.default.createElement(FilterLine, null, hasFilter && /*#__PURE__*/_react.default.createElement("div", {
-      className: "toolbar-filter-title"
-    }, "Filter"), /*#__PURE__*/_react.default.createElement("div", {
-      className: "toolbar-filter-content"
-    }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFilterList, props)));
-  }
-
-  return '';
-};
+function Datatable(_ref) {
+  let props = Object.assign({}, _ref);
+  return /*#__PURE__*/_react.default.createElement(_DatatableContext.DatatableProvide, null, /*#__PURE__*/_react.default.createElement(ReDatatable, props));
+}
+/**
+ * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
+ * @param {Array} props.customButtons Custom buttons for toolbar
+ * @param {Function} props.onChange When onChange is present, serverSide mode is activated by default https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca#remote-data
+ * @param {Boolean} props.loading For dynamic data, usually used with onChange
+ * @returns
+ */
 
-WrapFilterList.propTypes = {
-  filterList: _propTypes.default.array
-};
-WrapFilterList.defaultProps = {
-  filterList: []
-};
 
-function Datatable(_ref) {
+function ReDatatable(_ref2) {
   let {
+    data: originData,
+    columns: originColumns,
     locale,
     options,
     style,
-    customButtons
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+    customButtons,
+    onChange,
+    loading,
+    disabled
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   const container = (0, _react.useRef)(null);
+  const oldState = (0, _react.useRef)(null);
+  const {
+    setCustomButtons,
+    setFilterLabel,
+    setLoading,
+    setDisabled
+  } = (0, _DatatableContext.useDatatableContext)();
+  const disabledCellStyle = {
+    cursor: 'not-allowed',
+    pointerEvents: 'none'
+  };
+  const keys = []; // Convert Columns fields to object sets to support the width function
+
+  const columns = originColumns.map(e => {
+    let tempObj;
+
+    if (!(0, _isObject.default)(e)) {
+      tempObj = {
+        label: e,
+        name: e
+      };
+    } else {
+      tempObj = (0, _cloneDeep.default)(e);
+    }
+
+    keys.push(tempObj.name);
+
+    if (!tempObj.options) {
+      tempObj.options = {};
+    }
+
+    const {
+      setCellHeaderProps
+    } = tempObj.options;
+
+    tempObj.options.setCellHeaderProps = columnMeta => {
+      let cellProps = {}; // Complementing width while inheriting old setCellHeaderProps
+
+      if (setCellHeaderProps && !setCellHeaderProps.__innerFunc) {
+        cellProps = setCellHeaderProps(columnMeta) || {};
+      }
+
+      if (loading || disabled) {
+        cellProps = _objectSpread(_objectSpread({}, cellProps), {}, {
+          style: disabledCellStyle
+        });
+      }
+
+      if (tempObj.width) {
+        cellProps.width = tempObj.width;
+      }
+
+      return cellProps;
+    }; // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
+
+
+    tempObj.options.setCellHeaderProps.__innerFunc = 1;
+    return tempObj;
+  }); // Fixing object-type structures
+
+  const data = originData.map(e => {
+    if (!Array.isArray(e) && (0, _isObject.default)(e)) {
+      return keys.map(key => e[key]);
+    }
+
+    return e;
+  });
+  (0, _react.useEffect)(() => setCustomButtons(customButtons || []), [customButtons]);
+  (0, _react.useEffect)(() => setLoading(loading), [loading]);
+  (0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
   let textLabels = {
     body: {
       noMatch: 'Sorry, no matching records found',
@@ -136,42 +209,83 @@ function Datatable(_ref) {
     };
   }
 
+  (0, _react.useEffect)(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+
   const opts = _objectSpread({
     selectableRows: 'none',
-    textLabels
+    textLabels,
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 50]
   }, options);
 
-  const WrapCustomToolBar = props => {
-    return /*#__PURE__*/_react.default.createElement(_CustomToolbar.default, Object.assign({}, props, {
-      customButtons: customButtons || []
-    }));
-  };
+  if (onChange) {
+    Object.assign(opts, {
+      serverSide: true,
+      // Wrap the more friendly onChange callback by listening to onTableChange,
+      // which will only be triggered when the table key state changes
+      onTableChange: (action, tableState) => {
+        if (action === 'propsUpdate') {
+          return;
+        }
+
+        const state = {
+          count: tableState.count,
+          page: tableState.page,
+          rowsPerPage: tableState.rowsPerPage,
+          searchText: tableState.searchText,
+          sortOrder: tableState.sortOrder,
+          //
+          filterList: tableState.filterList
+        };
+        const stateStr = JSON.stringify(state);
+
+        if (stateStr === oldState.current) {
+          return;
+        }
+
+        oldState.current = stateStr;
+        onChange(state, action);
+      }
+    });
+  }
 
   const props = _objectSpread(_objectSpread({
     options: opts
   }, rest), {}, {
     components: {
-      TableToolbar: WrapCustomToolBar,
+      TableToolbar: _CustomToolbar.default,
+      TableFooter: WrapTableFooter,
       TableFilterList: WrapFilterList
     }
   });
 
-  Datatable.propTypes = {
+  ReDatatable.propTypes = {
+    data: _propTypes.default.array.isRequired,
+    columns: _propTypes.default.array.isRequired,
     options: _propTypes.default.object,
     style: _propTypes.default.object,
     locale: _propTypes.default.string,
-    customButtons: _propTypes.default.array
+    loading: _propTypes.default.bool,
+    disabled: _propTypes.default.bool,
+    customButtons: _propTypes.default.array,
+    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
   };
-  Datatable.defaultProps = {
+  ReDatatable.defaultProps = {
     options: {},
     style: {},
     locale: 'en',
-    customButtons: []
+    loading: false,
+    disabled: false,
+    customButtons: [],
+    onChange: ''
   };
   return /*#__PURE__*/_react.default.createElement(TableContainer, {
     ref: container,
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, props));
+  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, Object.assign({
+    data: data,
+    columns: columns
+  }, props)));
 }
 
 const TableContainer = _styledComponents.default.div.withConfig({
@@ -182,4 +296,43 @@ const TableContainer = _styledComponents.default.div.withConfig({
 const FilterLine = _styledComponents.default.div.withConfig({
   displayName: "Datatable__FilterLine",
   componentId: "sc-1ju12vq-1"
-})(["display:flex;align-items:center;.toolbar-filter-content{margin-bottom:8px;}.toolbar-filter-title{font-weight:700;font-size:14px;}"]);
+})(["display:flex;align-items:center;.toolbar-filter-content{margin-bottom:8px;}.toolbar-filter-title{font-weight:700;font-size:14px;}"]);
+
+const WrapFilterList = props => {
+  const {
+    filterLabel
+  } = (0, _DatatableContext.useDatatableContext)();
+  const hasFilter = !!props.filterList.filter(e => e.length).length;
+
+  if (hasFilter) {
+    return /*#__PURE__*/_react.default.createElement(FilterLine, null, hasFilter && /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolbar-filter-title"
+    }, filterLabel), /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolbar-filter-content"
+    }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFilterList, props)));
+  }
+
+  return '';
+};
+
+WrapFilterList.propTypes = {
+  filterList: _propTypes.default.array
+};
+WrapFilterList.defaultProps = {
+  filterList: []
+};
+
+const WrapTableFooter = props => {
+  const {
+    loading,
+    disabled
+  } = (0, _DatatableContext.useDatatableContext)();
+  return /*#__PURE__*/_react.default.createElement(FooterContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "datatable-footer ".concat(loading || disabled ? 'datatable-footer-disabled' : '')
+  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFooter, props)));
+};
+
+const FooterContainer = _styledComponents.default.div.withConfig({
+  displayName: "Datatable__FooterContainer",
+  componentId: "sc-1ju12vq-2"
+})(["display:flex;align-items:center;.datatable-footer{position:relative;margin-left:auto;&.datatable-footer-disabled{position:relative;.MuiTablePagination-root{opacity:0.6;}&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}"]);

package/lib/Footer/index.js

@@ -43,7 +43,7 @@ function Footer(props) {
     className: "footer-item"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "footer-copy"
-  }, "\xA9 Copyright ", copyYear, " "), /*#__PURE__*/_react.default.createElement("span", {
+  }, "Copyright \xA9 ", copyYear, " "), /*#__PURE__*/_react.default.createElement("span", {
     className: "footer-brand"
   }, brand)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "p",
@@ -68,7 +68,7 @@ Footer.propTypes = {
 };
 Footer.defaultProps = {
   dark: false,
-  brand: 'ArcBlock Inc.',
+  brand: 'ArcBlock, Inc.',
   copyStart: '2017',
   className: '',
   style: {}

package/lib/Header/header.js

@@ -17,7 +17,7 @@ var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
-const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "containerComponent"];
+const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,15 +37,14 @@ function Header(_ref) {
     description,
     children,
     addons,
-    prepend,
-    containerComponent: ContainerComponent
+    prepend
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
     $theme: theme
-  }), /*#__PURE__*/_react.default.createElement(ContainerComponent, {
+  }), /*#__PURE__*/_react.default.createElement(_Container.default, {
     className: "header-container"
   }, prepend, logo && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-logo"
@@ -76,9 +75,7 @@ Header.propTypes = {
   // 右侧区域, 可以放置 icons/actions/login 等
   addons: _propTypes.default.node,
   // logo 左侧内容
-  prepend: _propTypes.default.node,
-  // 默认使用 mui 的 Container, 如果不想限制 header 内容区域的宽度, 可以设置为 div
-  containerComponent: _propTypes.default.elementType
+  prepend: _propTypes.default.node
 };
 Header.defaultProps = {
   logo: null,
@@ -87,14 +84,13 @@ Header.defaultProps = {
   description: null,
   children: null,
   addons: null,
-  prepend: null,
-  containerComponent: _Container.default
+  prepend: null
 };
 
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:0 16px;", "{padding:0;}}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.up('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/Layout/dashboard/header.js

@@ -108,7 +108,7 @@ Header.propTypes = {
   onToggleMenu: _propTypes.default.func.isRequired,
   brand: _propTypes.default.string.isRequired,
   brandAddon: _propTypes.default.object,
-  description: _propTypes.default.string.isRequired,
+  description: _propTypes.default.any.isRequired,
   children: _propTypes.default.any,
   addons: _propTypes.default.any,
   homeUrl: _propTypes.default.string,

package/lib/Layout/dashboard/index.js

@@ -131,7 +131,7 @@ Dashboard.propTypes = {
   links: _propTypes.default.array.isRequired,
   images: _propTypes.default.object.isRequired,
   brandAddon: _propTypes.default.object,
-  description: _propTypes.default.string.isRequired,
+  description: _propTypes.default.any.isRequired,
   headerAddon: _propTypes.default.any,
   prefix: _propTypes.default.string,
   // 兼容旧版的设置，新版使用 fullWidth 进行设置

package/lib/NavMenu/style.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const NavMenuBase = _styledComponents.default.nav.withConfig({
   displayName: "style__NavMenuBase",
   componentId: "sc-2g7isz-0"
-})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}.navmenu-item{position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
+})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
 const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__HorizontalStyle",
@@ -24,5 +24,5 @@ exports.HorizontalStyle = HorizontalStyle;
 const InlineStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__InlineStyle",
   componentId: "sc-2g7isz-2"
-})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{height:48px;line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;position:absolute;top:100%;left:0;right:0;.navmenu-item,.navmenu-sub{line-height:24px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;margin-top:8px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
+})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}& .navmenu-sub{flex-wrap:wrap;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;flex:1 0 100%;margin:0 -16px;padding-bottom:8px;.navmenu-item,.navmenu-sub{line-height:32px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
 exports.InlineStyle = InlineStyle;