@arcblock/ux 2.1.6 → 2.1.9

package/src/Datatable/index.js

@@ -0,0 +1,314 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+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';
+
+export default function Datatable({ ...props }) {
+  return (
+    <DatatableProvide>
+      <ReDatatable {...props} />
+    </DatatableProvide>
+  );
+}
+
+/**
+ * @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();
+
+  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.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' },
+    pagination: {
+      next: 'Next Page',
+      previous: 'Previous Page',
+      rowsPerPage: 'Rows 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: '对不起，没有找到匹配的记录', 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 opts = {
+    selectableRows: 'none',
+    textLabels,
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 50],
+    ...options,
+  };
+
+  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: CustomToolbar,
+      TableFooter: WrapTableFooter,
+      TableFilterList: WrapFilterList,
+    },
+  };
+
+  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]),
+  };
+
+  ReDatatable.defaultProps = {
+    options: {},
+    style: {},
+    locale: 'en',
+    loading: false,
+    disabled: false,
+    customButtons: [],
+    onChange: '',
+  };
+
+  return (
+    <TableContainer ref={container} style={style}>
+      <MUIDataTable data={data} columns={columns} {...props} />
+    </TableContainer>
+  );
+}
+
+const TableContainer = styled.div`
+  height: 100%;
+  > .MuiPaper-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-shadow: none;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    [class*='MUIDataTableBody-emptyTitle'] {
+      padding-left: 16px;
+      width: 200%;
+      margin-left: -100%;
+      text-align: center;
+    }
+  }
+`;
+
+const FilterLine = styled.div`
+  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 } = 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;
+      }
+    }
+  }
+`;

package/src/Datatable/utils.js

@@ -0,0 +1,165 @@
+import find from 'lodash/find';
+
+function escapeDangerousCSVCharacters(data) {
+  if (typeof data === 'string') {
+    // Places single quote before the appearance of dangerous characters if they
+    // are the first in the data string.
+    // eslint-disable-next-line no-useless-escape
+    return data.replace(/^\+|^\-|^\=|^\@/g, "'$&");
+  }
+
+  return data;
+}
+
+function buildCSV(columns, data, options) {
+  const replaceDoubleQuoteInString = columnData =>
+    typeof columnData === 'string' ? columnData.replace(/"/g, '""') : columnData;
+
+  // eslint-disable-next-line no-shadow
+  const buildHead = columns => {
+    return `${columns
+      .reduce(
+        (soFar, column) =>
+          column.download
+            ? `${soFar}"${escapeDangerousCSVCharacters(
+                replaceDoubleQuoteInString(column.label || column.name)
+              )}"${options.downloadOptions.separator}`
+            : soFar,
+        ''
+      )
+      .slice(0, -1)}\r\n`;
+  };
+
+  const CSVHead = buildHead(columns);
+
+  // eslint-disable-next-line no-shadow
+  const buildBody = data => {
+    if (!data.length) return '';
+    return data
+      .reduce(
+        (soFar, row) =>
+          `${soFar}"${row.data
+            .filter((_, index) => columns[index].download)
+            .map(columnData => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData)))
+            .join(`"${options.downloadOptions.separator}"`)}"\r\n`,
+        ''
+      )
+      .trim();
+  };
+  const CSVBody = buildBody(data);
+
+  const csv = options.onDownload
+    ? options.onDownload(buildHead, buildBody, columns, data)
+    : `${CSVHead}${CSVBody}`.trim();
+
+  return csv;
+}
+
+function downloadCSV(csv, filename) {
+  const blob = new Blob([csv], { type: 'text/csv' });
+
+  /* taken from react-csv */
+  if (navigator && navigator.msSaveOrOpenBlob) {
+    navigator.msSaveOrOpenBlob(blob, filename);
+  } else {
+    const dataURI = `data:text/csv;charset=utf-8,${csv}`;
+
+    const URL = window.URL || window.webkitURL;
+    const downloadURI =
+      typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.setAttribute('href', downloadURI);
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
+// eslint-disable-next-line no-shadow
+function createCSVDownload(columns, data, options, downloadCSV) {
+  const csv = buildCSV(columns, data, options);
+
+  if (options.onDownload && csv === false) {
+    return;
+  }
+
+  downloadCSV(csv, options.downloadOptions.filename);
+}
+
+export function handleCSVDownload(props) {
+  const { data, displayData, columns, options, columnOrder } = props;
+  let dataToDownload = [];
+  let columnsToDownload = [];
+  let columnOrderCopy = Array.isArray(columnOrder) ? columnOrder.slice(0) : [];
+
+  if (columnOrderCopy.length === 0) {
+    columnOrderCopy = columns.map((item, idx) => idx);
+  }
+
+  data.forEach(row => {
+    const newRow = { index: row.index, data: [] };
+    columnOrderCopy.forEach(idx => {
+      newRow.data.push(row.data[idx]);
+    });
+    dataToDownload.push(newRow);
+  });
+
+  columnOrderCopy.forEach(idx => {
+    columnsToDownload.push(columns[idx]);
+  });
+
+  if (options.downloadOptions && options.downloadOptions.filterOptions) {
+    // check rows first:
+    if (options.downloadOptions.filterOptions.useDisplayedRowsOnly) {
+      const filteredDataToDownload = displayData.map((row, index) => {
+        let i = -1;
+
+        // Help to preserve sort order in custom render columns
+        row.index = index;
+
+        return {
+          data: row.data.map(column => {
+            i += 1;
+
+            // if we have a custom render, which will appear as a react element, we must grab the actual value from data
+            // that matches the dataIndex and column
+            // TODO: Create a utility function for checking whether or not something is a react object
+            let val =
+              typeof column === 'object' && column !== null && !Array.isArray(column)
+                ? find(data, d => d.index === row.dataIndex).data[i]
+                : column;
+            val =
+              typeof val === 'function' ? find(data, d => d.index === row.dataIndex).data[i] : val;
+            return val;
+          }),
+        };
+      });
+
+      dataToDownload = [];
+      filteredDataToDownload.forEach(row => {
+        const newRow = { index: row.index, data: [] };
+        columnOrderCopy.forEach(idx => {
+          newRow.data.push(row.data[idx]);
+        });
+        dataToDownload.push(newRow);
+      });
+    }
+
+    // now, check columns:
+    if (options.downloadOptions.filterOptions.useDisplayedColumnsOnly) {
+      columnsToDownload = columnsToDownload.filter(_ => _.display === 'true');
+
+      dataToDownload = dataToDownload.map(row => {
+        row.data = row.data.filter(
+          (_, index) => columns[columnOrderCopy[index]].display === 'true'
+        );
+        return row;
+      });
+    }
+  }
+  createCSVDownload(columnsToDownload, dataToDownload, options, downloadCSV);
+}
+
+export default { handleCSVDownload };

package/src/Layout/dashboard/header.js

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

package/src/Layout/dashboard/index.js

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

package/src/index.js

@@ -15,6 +15,7 @@ import Icon from './Icon';
 import LocaleSelector from './Locale/selector';
 import Logo from './Logo';
 import RelativeTime from './RelativeTime';
+import Datatable from './Datatable';
 import Tabs from './Tabs';
 import Tag from './Tag';
 import Terminal from './Terminal';
@@ -50,6 +51,7 @@ export {
   Logo,
   Tabs,
   RelativeTime,
+  Datatable,
   Tag,
   Terminal,
   TerminalPlayer,