@arcblock/ux 2.6.8 → 2.7.0

package/es/Datatable/index.js

@@ -0,0 +1,627 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
+import { css } from '@emotion/react';
+import isObject from 'lodash/isObject';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import clsx from 'clsx';
+import CircularProgress from '@mui/material/CircularProgress';
+import Empty from '../Empty';
+import CustomToolbar from './CustomToolbar';
+import { DatatableProvider as DataTableProvider, useDatatableContext } from './DatatableContext';
+import { styled } from '../Theme';
+
+/**
+ * @typedef {{
+ *  icon: import('react').ReactElement,
+ *  title: string,
+ * }} DataTableCustomButton
+ */
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  label: string,
+ *  width?: number,
+ *  options?: {
+ *    filter?: boolean,
+ *    sort?: boolean,
+ *    customBodyRender?: (value: any) => import('react').ReactElement,
+ *    customBodyRenderLite?: (index: number) => import('react').ReactElement
+ *  } & import('mui-datatables').MUIDataTableColumnOptions
+ * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
+ */
+
+/**
+ * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
+ */
+
+/**
+ * @typedef {{
+ *  data: Array<object | number[] | string[]>,
+ *  columns: Array<DataTableColumn>,
+ *  locale?: string,
+ *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  style?: import('react').CSSProperties,
+ *  customButtons?: Array<DataTableCustomButton>,
+ *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
+ *  loading?: boolean,
+ *  disabled?: boolean,
+ *  stripped?: boolean,
+ *  verticalKeyWidth?: number | string,
+ *  hideTableHeader?: boolean,
+ *  components?: import('react').ReactElement,
+ *  emptyNode?: import('react').ReactElement,
+ *  durable?: string,
+ *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
+ * } & import('mui-datatables').MUIDataTableProps} DataTableProps
+ */
+
+/**
+ * @description
+ * @export
+ * @param {DataTableProps} props
+ * @return {import('react').ReactComponentElement}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function DataTable(props) {
+  return /*#__PURE__*/_jsx(DataTableProvider, {
+    children: /*#__PURE__*/_jsx(ReDataTable, {
+      ...props
+    })
+  });
+}
+const fixCellProp = (tempObj, cellProps) => {
+  const cellStyle = {};
+  if (tempObj.align) {
+    cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
+  }
+  if (tempObj.verticalKeyAlign) {
+    cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
+  }
+  if (tempObj.minWidth) {
+    cellStyle.minWidth = tempObj.minWidth;
+  }
+  cellProps.style = Object.assign({}, cellProps.style, cellStyle);
+};
+
+/**
+ * @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,
+  // The options object is usually a property supported by mui-datatable
+  style,
+  customButtons,
+  onChange,
+  loading,
+  disabled,
+  stripped,
+  verticalKeyWidth,
+  hideTableHeader,
+  components,
+  emptyNode,
+  durable,
+  durableKeys,
+  ...rest
+}) {
+  const oldState = useRef(null);
+  const {
+    setCustomButtons,
+    setFilterLabel,
+    setLoading,
+    setDisabled
+  } = 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 (!isObject(e)) {
+      tempObj = {
+        label: e,
+        name: e
+      };
+    } else {
+      tempObj = cloneDeep(e);
+    }
+    keys.push(tempObj.name);
+    if (!tempObj.align) {
+      // There must be an align default for setCellRender to take effect, this is a bug in mui-datatable
+      tempObj.align = 'left';
+    }
+    if (!tempObj.options) {
+      tempObj.options = {};
+    }
+    const {
+      setCellHeaderProps,
+      setCellProps
+    } = tempObj.options;
+    tempObj.options.setCellHeaderProps = (...args) => {
+      let cellProps = {
+        className: ''
+      };
+
+      // Complementing width while inheriting old setCellHeaderProps
+      if (setCellHeaderProps && !setCellHeaderProps.__innerFunc) {
+        cellProps = {
+          ...cellProps,
+          ...(setCellHeaderProps(...args) || {})
+        };
+      }
+      if (loading || disabled) {
+        cellProps = {
+          ...cellProps,
+          style: disabledCellStyle
+        };
+      }
+      if (tempObj.width) {
+        cellProps.width = tempObj.width;
+      }
+      fixCellProp(tempObj, cellProps);
+      return cellProps;
+    };
+
+    // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
+    tempObj.options.setCellHeaderProps.__innerFunc = 1;
+    if (tempObj.align || tempObj.style) {
+      tempObj.options.setCellProps = (...args) => {
+        let cellProps = {
+          className: ''
+        };
+
+        // Complementing width while inheriting old setCellHeaderProps
+        if (setCellProps && !setCellProps.__innerFunc) {
+          cellProps = {
+            ...cellProps,
+            ...(setCellProps(...args) || {})
+          };
+        }
+        fixCellProp(tempObj, cellProps);
+        return cellProps;
+      };
+      tempObj.options.setCellProps.__innerFunc = 1;
+    }
+    return tempObj;
+  });
+
+  // Fixing object-type structures
+  const data = originData.map(e => {
+    if (!Array.isArray(e) && isObject(e)) {
+      return keys.map(key => get(e, key));
+    }
+    return e;
+  });
+  useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setLoading(loading), [loading]);
+  useEffect(() => setDisabled(disabled), [disabled]);
+  let emptyEl;
+  if (loading) {
+    emptyEl = /*#__PURE__*/_jsx(CircularProgress, {});
+  } else if ( /*#__PURE__*/isValidElement(emptyNode)) {
+    emptyEl = emptyNode;
+  } else if (locale === 'zh') {
+    emptyEl = /*#__PURE__*/_jsx(Empty, {
+      children: emptyNode || '没有找到匹配的记录'
+    });
+  } else {
+    emptyEl = /*#__PURE__*/_jsx(Empty, {
+      children: emptyNode || 'No matching records found'
+    });
+  }
+  let textLabels = {
+    body: {
+      noMatch: emptyEl,
+      toolTip: 'Sort'
+    },
+    pagination: {
+      next: 'Next Page',
+      previous: 'Previous Page',
+      rowsPerPage: 'Per page:',
+      displayRows: 'of',
+      jumpToPage: 'Jump to Page:'
+    },
+    toolbar: {
+      search: 'Search',
+      downloadCsv: 'Download CSV',
+      print: 'Print',
+      viewColumns: 'View Columns',
+      filterTable: 'Filter Table'
+    },
+    filter: {
+      all: 'All',
+      title: 'FILTERS',
+      reset: 'RESET'
+    },
+    viewColumns: {
+      title: 'Show Columns',
+      titleAria: 'Show/Hide Table Columns'
+    },
+    selectedRows: {
+      text: 'row(s) selected',
+      delete: 'Delete',
+      deleteAria: 'Delete Selected Rows'
+    }
+  };
+  if (locale === 'zh') {
+    textLabels = {
+      body: {
+        noMatch: emptyEl,
+        toolTip: '排序'
+      },
+      pagination: {
+        next: '下一页',
+        previous: '上一页',
+        rowsPerPage: '每页行数',
+        displayRows: '/',
+        jumpToPage: '跳转到页面：'
+      },
+      toolbar: {
+        search: '搜索',
+        downloadCsv: '下载CSV',
+        print: '打印',
+        viewColumns: '查看列',
+        filterTable: '筛选表格'
+      },
+      filter: {
+        all: '全部',
+        title: '筛选器',
+        reset: '重置'
+      },
+      viewColumns: {
+        title: '显示的列',
+        titleAria: '显示/隐藏 表格的列'
+      },
+      selectedRows: {
+        text: '个已选项目',
+        delete: '删除',
+        deleteAria: '删除所选项目'
+      }
+    };
+  }
+  useEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+  const durableData = getDurableData(durable);
+  const opts = {
+    selectableRows: 'none',
+    textLabels,
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 50],
+    ...durableData,
+    ...options,
+    // 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
+      };
+      if (durable) {
+        const needSaveState = {};
+        durableKeys.forEach(key => {
+          needSaveState[key] = state[key];
+        });
+        localStorage.setItem(`datatable-durable-${durable}`, JSON.stringify(needSaveState));
+      }
+      const stateStr = JSON.stringify(state);
+      if (stateStr === oldState.current) {
+        return;
+      }
+      oldState.current = stateStr;
+      if (onChange) {
+        onChange(state, action);
+      }
+    }
+  };
+  if (onChange) {
+    opts.serverSide = true;
+  }
+  const props = {
+    options: opts,
+    ...rest,
+    components: {
+      ...components,
+      TableToolbar: CustomToolbar,
+      TableFooter: WrapTableFooter,
+      TableFilterList: WrapFilterList
+    }
+  };
+  return /*#__PURE__*/_jsx(TableContainer, {
+    verticalKeyWidth: verticalKeyWidth,
+    className: clsx({
+      'datatable-stripped': stripped,
+      'datatable-hide-header': hideTableHeader
+    }),
+    style: style,
+    children: /*#__PURE__*/_jsx(MUIDataTable, {
+      data: data,
+      columns: columns,
+      ...props
+    })
+  });
+}
+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]),
+  stripped: PropTypes.bool,
+  verticalKeyWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  hideTableHeader: PropTypes.bool,
+  components: PropTypes.object,
+  emptyNode: PropTypes.node,
+  durable: PropTypes.string,
+  durableKeys: PropTypes.array
+};
+ReDataTable.defaultProps = {
+  options: {},
+  style: {},
+  locale: 'en',
+  loading: false,
+  disabled: false,
+  customButtons: [],
+  onChange: '',
+  stripped: false,
+  verticalKeyWidth: '',
+  hideTableHeader: false,
+  components: {},
+  emptyNode: '',
+  durable: '',
+  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder']
+};
+export const getDurableData = key => {
+  const durableKey = `datatable-durable-${key}`;
+  let localData = localStorage[durableKey];
+  if (localData) {
+    try {
+      localData = JSON.parse(localData);
+    } catch (err) {
+      console.error(`parse durable data error (key:${key}) => `, err);
+    }
+  }
+  return localData || {};
+};
+const alignCss = css`
+  .MuiTableCell-head {
+    [class*='MUIDataTableHeadCell-toolButton'] {
+      width: 100%;
+      > [class*='MUIDataTableHeadCell-sortAction'] {
+        width: 100%;
+      }
+    }
+    &.pc-align-center {
+      text-align: center;
+      [class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction'] {
+        justify-content: center;
+      }
+    }
+    &.pc-align-right {
+      text-align: right;
+      [class*='MUIDataTableHeadCell-toolButton'] {
+        margin-right: 0;
+        padding-right: 0;
+        & > [class*='MUIDataTableHeadCell-sortAction'] {
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+  .MuiTableCell-body {
+    &.pc-align-center {
+      text-align: center;
+    }
+    &.pc-align-right {
+      text-align: right;
+    }
+  }
+`;
+const TableContainer = styled('div', {
+  shouldForwardProp: prop => prop !== 'verticalKeyWidth'
+})`
+  &.datatable-hide-header {
+    thead.MuiTableHead-root {
+      display: none;
+    }
+  }
+
+  td {
+    &.vertical-align-top {
+      align-items: flex-start;
+    }
+    &.vertical-align-center {
+      align-items: center;
+    }
+    &.vertical-align-bottom {
+      align-items: flex-end;
+    }
+  }
+
+  height: 100%;
+  > .MuiPaper-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-shadow: none;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    td.MuiTableCell-body {
+      padding-right: 0;
+    }
+    [class*='MUIDataTable-responsiveBase'] {
+      tr:not([class*='responsiveSimple']) {
+        td.MuiTableCell-body {
+          display: flex;
+          > div {
+            width: auto;
+            flex: 1;
+            &:first-of-type {
+              font-weight: bold;
+              font-size: 14px;
+              width: auto;
+              flex: 0 0 auto;
+              padding-right: 16px;
+              &:empty {
+                padding-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  ${props => props.theme.breakpoints.up('md')} {
+    ${alignCss}
+  }
+  ${props => props.theme.breakpoints.up('sm')} {
+    [class*='responsiveSimple'] {
+      ${alignCss}
+    }
+  }
+
+  ${inProps => {
+  if (inProps.verticalKeyWidth) {
+    return `
+        ${inProps.theme.breakpoints.down('md')} {
+          [class*='MUIDataTable-responsiveBase'] {
+            tr:not([class*='responsiveSimple']) {
+              td.MuiTableCell-body {
+                > div {
+                  &:first-of-type {
+                    width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
+  }
+  return '';
+}}
+
+  &.datatable-stripped {
+    .MuiTableBody-root {
+      tr:nth-of-type(odd) {
+        background-color: ${props => props.theme.palette.action.hover};
+      }
+    }
+  }
+`;
+const FilterLine = styled('div')`
+  display: flex;
+  align-items: center;
+  .toolbar-filter-content {
+    margin-bottom: 8px;
+  }
+  .toolbar-filter-title {
+    font-weight: 700;
+    font-size: 14px;
+  }
+`;
+function WrapFilterList(props) {
+  const {
+    filterLabel
+  } = useDatatableContext();
+  const hasFilter = !!props.filterList.filter(e => e.length).length;
+  if (hasFilter) {
+    return /*#__PURE__*/_jsxs(FilterLine, {
+      children: [hasFilter && /*#__PURE__*/_jsx("div", {
+        className: "toolbar-filter-title",
+        children: filterLabel
+      }), /*#__PURE__*/_jsx("div", {
+        className: "toolbar-filter-content",
+        children: /*#__PURE__*/_jsx(TableFilterList, {
+          ...props
+        })
+      })]
+    });
+  }
+  return '';
+}
+WrapFilterList.propTypes = {
+  filterList: PropTypes.array
+};
+WrapFilterList.defaultProps = {
+  filterList: []
+};
+function WrapTableFooter(props) {
+  const {
+    loading,
+    disabled
+  } = useDatatableContext();
+  return /*#__PURE__*/_jsx(FooterContainer, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: `datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`,
+      children: /*#__PURE__*/_jsx(TableFooter, {
+        ...props
+      })
+    })
+  });
+}
+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;
+      }
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('sm')} {
+    .MuiTableCell-footer,
+    .MuiToolbar-gutters {
+      padding: 0;
+    }
+
+    div[variant='standard'] {
+      margin-left: 4px;
+      margin-right: 16px;
+    }
+
+    .MuiTablePagination-actions {
+      margin-left: 10px;
+    }
+  }
+`;