@arcblock/ux 2.1.7 → 2.1.8

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a54ef3a9335aae1bc7404b5f4a8c9c508b6ff81f",
+  "gitHead": "3c91cd679fef62a21839887f72870b43833c7d39",
   "dependencies": {
-    "@arcblock/icons": "^2.1.7",
-    "@arcblock/react-hooks": "^2.1.7",
+    "@arcblock/icons": "^2.1.8",
+    "@arcblock/react-hooks": "^2.1.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Datatable/CustomToolbar.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, isValidElement } from 'react';
+import React, { useState, useRef, useEffect, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableFilter, TableViewCol } from 'mui-datatables';
 import styled from 'styled-components';
@@ -17,8 +17,10 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
+import LinearProgress from '@mui/material/LinearProgress';
 import { handleCSVDownload } from './utils';
 import TableSearch from './TableSearch';
+import { useDatatableContext } from './DatatableContext';
 
 function useMobile() {
   const theme = useTheme();
@@ -30,6 +32,8 @@ export default function CustomToolbar(props) {
   const moreBtn = useRef(null);
   const isMobile = useMobile();
   const toolbarId = useRef(Math.random().toString(32).slice(2));
+  const [searchOpened, setSearchOpened] = useState(false);
+  const { customButtons, loading, disabled } = useDatatableContext();
 
   const {
     data,
@@ -47,9 +51,10 @@ export default function CustomToolbar(props) {
     searchText,
     searchTextUpdate,
     searchClose,
-    customButtons,
   } = props;
 
+  const customToolbarEle = options.customToolbar ? options.customToolbar(props) : '';
+
   const { search, downloadCsv, print, viewColumns, filterTable } = options.textLabels.toolbar;
 
   const hideSearch = options.search === false || options.search === 'false';
@@ -58,6 +63,12 @@ export default function CustomToolbar(props) {
   const TableFilterComponent = components.TableFilter || TableFilter;
   const TableViewColComponent = components.TableViewCol || TableViewCol;
 
+  useEffect(() => {
+    if (loading || disabled) {
+      setAllPopsEl({});
+    }
+  }, [loading, disabled]);
+
   const printArea = func => {
     return (
       <ReactToPrint content={() => props.tableRef()}>
@@ -70,6 +81,7 @@ export default function CustomToolbar(props) {
 
   const defaultButtons = [];
 
+  // download/viewColumns/filter button behaviours, rendered using custom button logic
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
       Icon: DownloadIcon,
@@ -127,6 +139,8 @@ export default function CustomToolbar(props) {
   const allPops = [];
   const [allPopsEl, setAllPopsEl] = 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 (isValidElement(e)) {
       return e;
@@ -136,6 +150,7 @@ export default function CustomToolbar(props) {
 
     if (e.Icon) {
       const { Icon, popRender } = e;
+      // When popRender is present, clicking the button will bubble up the content returned by the popRender
       if (popRender) {
         allPops.push(
           <Popover
@@ -166,6 +181,7 @@ export default function CustomToolbar(props) {
               }
 
               if (popRender) {
+                // On the large screen, the bubble is positioned at the corresponding button
                 setAllPopsEl({
                   [popId]: document.getElementById(`btn-${popId}`),
                 });
@@ -180,6 +196,7 @@ export default 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);
 
@@ -210,6 +227,7 @@ export default function CustomToolbar(props) {
           }
 
           if (e.popRender) {
+            // On the small screen, the bubbles are positioned at the three dot buttons
             setAllPopsEl({
               [popId]: moreBtn.current,
             });
@@ -223,54 +241,57 @@ export default function CustomToolbar(props) {
   return (
     <div>
       <Container>
-        <div className="custom-toobar-title">
+        <div
+          className={`custom-toobar-title ${
+            isMobile && searchOpened && isValidElement(title) ? 'toobar-title-hidden' : ''
+          }`}>
           <div className="custom-toobar-title-inner">
             <span>{title}</span>
           </div>
         </div>
-        <div className="custom-toobar-right">
-          <div className="custom-toobar-btns">
-            {!hideSearch && (
-              <TableSearch
-                search={search}
-                options={options}
-                searchText={searchText}
-                searchTextUpdate={searchTextUpdate}
-                searchClose={searchClose}
-                isMobile={isMobile}
-              />
-            )}
-            {!showMore && (
-              <>
-                {!hidePrint &&
-                  printArea(({ handlePrint }) => (
-                    <span>
-                      <Tooltip title={print}>
-                        <IconButton
-                          data-testid={`${print}-iconButton`}
-                          aria-label={print}
-                          disabled={options.print === 'disabled'}
-                          onClick={handlePrint}>
-                          <PrintIcon />
-                        </IconButton>
-                      </Tooltip>
-                    </span>
-                  ))}
-
-                {toolbarButtons}
-              </>
-            )}
-            {showMore && (
-              <IconButton
-                ref={moreBtn}
-                aria-haspopup="true"
-                aria-expanded={menuIconEl ? 'true' : undefined}
-                onClick={event => setMenuIconEl(event.currentTarget)}>
-                <MoreVertIcon />
-              </IconButton>
-            )}
-          </div>
+        <div className={`custom-toobar-btns ${loading || disabled ? 'toobar-btns-disabled' : ''}`}>
+          {!hideSearch && (
+            <TableSearch
+              search={search}
+              options={options}
+              searchText={searchText}
+              searchTextUpdate={searchTextUpdate}
+              searchClose={searchClose}
+              onSearchOpen={setSearchOpened}
+            />
+          )}
+          {!showMore && (
+            <>
+              {!hidePrint &&
+                printArea(({ handlePrint }) => (
+                  <span>
+                    <Tooltip title={print}>
+                      <IconButton
+                        data-testid={`${print}-iconButton`}
+                        aria-label={print}
+                        disabled={options.print === 'disabled'}
+                        onClick={handlePrint}>
+                        <PrintIcon />
+                      </IconButton>
+                    </Tooltip>
+                  </span>
+                ))}
+
+              {toolbarButtons}
+            </>
+          )}
+          {showMore && (
+            <IconButton
+              ref={moreBtn}
+              aria-haspopup="true"
+              aria-expanded={menuIconEl ? 'true' : undefined}
+              onClick={event => setMenuIconEl(event.currentTarget)}
+              style={{ flexShrink: 0 }}>
+              <MoreVertIcon />
+            </IconButton>
+          )}
         </div>
+        {customToolbarEle}
       </Container>
 
       <Menu
@@ -298,6 +319,7 @@ export default function CustomToolbar(props) {
       {allPops.map((e, index) => (
         <div key={getPopId(index)}>{e}</div>
       ))}
+      {loading && <LinearProgress />}
     </div>
   );
 }
@@ -314,12 +336,11 @@ CustomToolbar.propTypes = {
   updateFilterByType: PropTypes.func.isRequired,
   toggleViewColumn: PropTypes.func.isRequired,
   updateColumns: PropTypes.func.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.any,
   searchText: PropTypes.any,
   searchTextUpdate: PropTypes.func.isRequired,
   searchClose: PropTypes.func.isRequired,
   tableRef: PropTypes.func.isRequired,
-  customButtons: PropTypes.array.isRequired,
 };
 
 CustomToolbar.defaultProps = {
@@ -335,37 +356,51 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   height: 56px;
-  .custom-toobar {
-    &-title {
-      position: relative;
-      flex: 1;
-      font-size: 18px;
-      font-weight: 800;
+  .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;
-      &-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;
-        span {
-          display: inline-block;
-          max-width: 100%;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
+        content: '';
+        cursor: not-allowed;
       }
     }
-    &-right {
-      display: flex;
-      margin-left: auto;
-    }
-    &-btns {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+  }
+  .toobar-title-hidden {
+    opacity: 0;
+    cursor: none;
   }
 `;

package/src/Datatable/DatatableContext.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const DatatableContext = createContext({});
+
+const { Provider } = DatatableContext;
+
+// eslint-disable-next-line react/prop-types
+const DatatableProvide = ({ children }) => {
+  const [customButtons, setCustomButtons] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const [filterLabel, setFilterLabel] = useState('Filter');
+
+  const value = {
+    customButtons,
+    setCustomButtons,
+    filterLabel,
+    setFilterLabel,
+    loading,
+    setLoading,
+    disabled,
+    setDisabled,
+  };
+
+  return <Provider value={value}>{children}</Provider>;
+};
+
+function useDatatableContext() {
+  return useContext(DatatableContext);
+}
+
+export { DatatableProvide, useDatatableContext };

package/src/Datatable/TableSearch.js

@@ -13,7 +13,6 @@ export default function TableSearch({
   searchText,
   searchTextUpdate,
   searchClose,
-  isMobile,
   onSearchOpen,
 }) {
   const [inputMode, setInputMode] = useState(false);
@@ -36,7 +35,7 @@ export default function TableSearch({
   return (
     <Container>
       {inputMode ? (
-        <div className="toolbar-search-icon-placeholder-">
+        <div className="toolbar-search-icon-placeholder">
           <SearchIcon />
         </div>
       ) : (
@@ -51,10 +50,7 @@ export default function TableSearch({
         </Tooltip>
       )}
 
-      <div
-        className={`toolbar-search-area ${inputMode ? 'toolbar-btn-show' : ''} ${
-          isMobile ? 'small-textfield' : ''
-        }`}>
+      <div className={`toolbar-search-area ${inputMode ? 'toolbar-btn-show' : ''}`}>
         {inputMode && (
           <TextField
             variant="standard"
@@ -81,7 +77,6 @@ TableSearch.propTypes = {
   options: PropTypes.object.isRequired,
   searchTextUpdate: PropTypes.func.isRequired,
   searchClose: PropTypes.func.isRequired,
-  isMobile: PropTypes.bool.isRequired,
 };
 
 TableSearch.defaultProps = {
@@ -104,6 +99,14 @@ const Container = styled.div`
     &.toolbar-btn-show {
       width: 260px;
       padding-left: 8px;
+
+      ${props => props.theme.breakpoints.down('md')} {
+        width: 200px;
+      }
+
+      ${props => props.theme.breakpoints.down('sm')} {
+        width: 180px;
+      }
       &.small-textfield {
         width: 200px;
       }

package/src/Datatable/index.js

@@ -1,34 +1,105 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import MUIDataTable, { TableFilterList } from 'mui-datatables';
+import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
 import styled from 'styled-components';
+import isObject from 'lodash/isObject';
+import cloneDeep from 'lodash/cloneDeep';
 import CustomToolbar from './CustomToolbar';
+import { DatatableProvide, useDatatableContext } from './DatatableContext';
 
-const WrapFilterList = props => {
-  const hasFilter = !!props.filterList.filter(e => e.length).length;
-  if (hasFilter) {
-    return (
-      <FilterLine>
-        {hasFilter && <div className="toolbar-filter-title">Filter</div>}
-        <div className="toolbar-filter-content">
-          <TableFilterList {...props} />
-        </div>
-      </FilterLine>
-    );
-  }
-  return '';
-};
+export default function Datatable({ ...props }) {
+  return (
+    <DatatableProvide>
+      <ReDatatable {...props} />
+    </DatatableProvide>
+  );
+}
 
-WrapFilterList.propTypes = {
-  filterList: PropTypes.array,
-};
+/**
+ * @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
+ */
+function ReDatatable({
+  data: originData,
+  columns: originColumns,
+  locale,
+  options,
+  style,
+  customButtons,
+  onChange,
+  loading,
+  disabled,
+  ...rest
+}) {
+  const container = useRef(null);
+  const oldState = useRef(null);
+  const { setCustomButtons, setFilterLabel, setLoading, setDisabled } = useDatatableContext();
 
-WrapFilterList.defaultProps = {
-  filterList: [],
-};
+  const disabledCellStyle = {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  };
 
-export default function Datatable({ locale, options, style, customButtons, ...rest }) {
-  const container = useRef(null);
+  const keys = [];
+
+  // Convert Columns fields to object sets to support the width function
+  const columns = originColumns.map(e => {
+    let tempObj;
+
+    if (!isObject(e)) {
+      tempObj = {
+        label: e,
+        name: e,
+      };
+    } else {
+      tempObj = cloneDeep(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 = { ...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) && isObject(e)) {
+      return keys.map(key => e[key]);
+    }
+    return e;
+  });
+
+  useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setLoading(loading), [loading]);
+  useEffect(() => setDisabled(disabled), [disabled]);
 
   let textLabels = {
     body: { noMatch: 'Sorry, no matching records found', toolTip: 'Sort' },
@@ -74,42 +145,78 @@ export default function Datatable({ locale, options, style, customButtons, ...re
     };
   }
 
+  useEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+
   const opts = {
     selectableRows: 'none',
     textLabels,
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 50],
     ...options,
   };
 
-  const WrapCustomToolBar = props => {
-    return <CustomToolbar {...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 = {
     options: opts,
     ...rest,
     components: {
-      TableToolbar: WrapCustomToolBar,
+      TableToolbar: CustomToolbar,
+      TableFooter: WrapTableFooter,
       TableFilterList: WrapFilterList,
     },
   };
 
-  Datatable.propTypes = {
+  ReDatatable.propTypes = {
+    data: PropTypes.array.isRequired,
+    columns: PropTypes.array.isRequired,
     options: PropTypes.object,
     style: PropTypes.object,
     locale: PropTypes.string,
+    loading: PropTypes.bool,
+    disabled: PropTypes.bool,
     customButtons: PropTypes.array,
+    onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   };
 
-  Datatable.defaultProps = {
+  ReDatatable.defaultProps = {
     options: {},
     style: {},
     locale: 'en',
+    loading: false,
+    disabled: false,
     customButtons: [],
+    onChange: '',
   };
 
   return (
     <TableContainer ref={container} style={style}>
-      <MUIDataTable {...props} />
+      <MUIDataTable data={data} columns={columns} {...props} />
     </TableContainer>
   );
 }
@@ -143,3 +250,65 @@ const FilterLine = styled.div`
     font-size: 14px;
   }
 `;
+
+const WrapFilterList = props => {
+  const { filterLabel } = useDatatableContext();
+  const hasFilter = !!props.filterList.filter(e => e.length).length;
+  if (hasFilter) {
+    return (
+      <FilterLine>
+        {hasFilter && <div className="toolbar-filter-title">{filterLabel}</div>}
+        <div className="toolbar-filter-content">
+          <TableFilterList {...props} />
+        </div>
+      </FilterLine>
+    );
+  }
+  return '';
+};
+
+WrapFilterList.propTypes = {
+  filterList: PropTypes.array,
+};
+
+WrapFilterList.defaultProps = {
+  filterList: [],
+};
+
+const WrapTableFooter = props => {
+  const { loading, disabled } = useDatatableContext();
+
+  return (
+    <FooterContainer>
+      <div className={`datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`}>
+        <TableFooter {...props} />
+      </div>
+    </FooterContainer>
+  );
+};
+
+const FooterContainer = styled.div`
+  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;
+      }
+    }
+  }
+`;