@arcblock/ux 2.1.7 → 2.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.7",
+  "version": "2.1.10",
   "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": "f31615cda7024bde33cc8b4be093ab8e0baf46a1",
   "dependencies": {
-    "@arcblock/icons": "^2.1.7",
-    "@arcblock/react-hooks": "^2.1.7",
+    "@arcblock/icons": "^2.1.10",
+    "@arcblock/react-hooks": "^2.1.10",
     "@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;
+      }
+    }
+  }
+`;