@arcblock/ux 2.1.6 → 2.1.9

package/lib/Datatable/index.js

@@ -0,0 +1,338 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Datatable;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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"));
+
+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 }; }
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+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
+ */
+
+
+function ReDatatable(_ref2) {
+  let {
+    data: originData,
+    columns: originColumns,
+    locale,
+    options,
+    style,
+    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',
+      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: '删除所选项目'
+      }
+    };
+  }
+
+  (0, _react.useEffect)(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+
+  const opts = _objectSpread({
+    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 = _objectSpread(_objectSpread({
+    options: opts
+  }, rest), {}, {
+    components: {
+      TableToolbar: _CustomToolbar.default,
+      TableFooter: WrapTableFooter,
+      TableFilterList: WrapFilterList
+    }
+  });
+
+  ReDatatable.propTypes = {
+    data: _propTypes.default.array.isRequired,
+    columns: _propTypes.default.array.isRequired,
+    options: _propTypes.default.object,
+    style: _propTypes.default.object,
+    locale: _propTypes.default.string,
+    loading: _propTypes.default.bool,
+    disabled: _propTypes.default.bool,
+    customButtons: _propTypes.default.array,
+    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+  };
+  ReDatatable.defaultProps = {
+    options: {},
+    style: {},
+    locale: 'en',
+    loading: false,
+    disabled: false,
+    customButtons: [],
+    onChange: ''
+  };
+  return /*#__PURE__*/_react.default.createElement(TableContainer, {
+    ref: container,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, Object.assign({
+    data: data,
+    columns: columns
+  }, props)));
+}
+
+const TableContainer = _styledComponents.default.div.withConfig({
+  displayName: "Datatable__TableContainer",
+  componentId: "sc-1ju12vq-0"
+})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}"], props => props.theme.breakpoints.down('md'));
+
+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;}"]);
+
+const WrapFilterList = props => {
+  const {
+    filterLabel
+  } = (0, _DatatableContext.useDatatableContext)();
+  const hasFilter = !!props.filterList.filter(e => e.length).length;
+
+  if (hasFilter) {
+    return /*#__PURE__*/_react.default.createElement(FilterLine, null, hasFilter && /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolbar-filter-title"
+    }, filterLabel), /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolbar-filter-content"
+    }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFilterList, props)));
+  }
+
+  return '';
+};
+
+WrapFilterList.propTypes = {
+  filterList: _propTypes.default.array
+};
+WrapFilterList.defaultProps = {
+  filterList: []
+};
+
+const WrapTableFooter = props => {
+  const {
+    loading,
+    disabled
+  } = (0, _DatatableContext.useDatatableContext)();
+  return /*#__PURE__*/_react.default.createElement(FooterContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "datatable-footer ".concat(loading || disabled ? 'datatable-footer-disabled' : '')
+  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFooter, props)));
+};
+
+const FooterContainer = _styledComponents.default.div.withConfig({
+  displayName: "Datatable__FooterContainer",
+  componentId: "sc-1ju12vq-2"
+})(["display:flex;align-items:center;.datatable-footer{position:relative;margin-left:auto;&.datatable-footer-disabled{position:relative;.MuiTablePagination-root{opacity:0.6;}&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}"]);

package/lib/Datatable/utils.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.handleCSVDownload = handleCSVDownload;
+
+var _find = _interopRequireDefault(require("lodash/find"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 "".concat(columns.reduce((soFar, column) => column.download ? "".concat(soFar, "\"").concat(escapeDangerousCSVCharacters(replaceDoubleQuoteInString(column.label || column.name)), "\"").concat(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) => "".concat(soFar, "\"").concat(row.data.filter((_, index) => columns[index].download).map(columnData => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData))).join("\"".concat(options.downloadOptions.separator, "\"")), "\"\r\n"), '').trim();
+  };
+
+  const CSVBody = buildBody(data);
+  const csv = options.onDownload ? options.onDownload(buildHead, buildBody, columns, data) : "".concat(CSVHead).concat(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,".concat(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);
+}
+
+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) ? (0, _find.default)(data, d => d.index === row.dataIndex).data[i] : column;
+            val = typeof val === 'function' ? (0, _find.default)(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);
+}
+
+var _default = {
+  handleCSVDownload
+};
+exports.default = _default;

package/lib/Layout/dashboard/header.js

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

package/lib/Layout/dashboard/index.js

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

package/lib/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "CountDown", {
     return _CountDown.default;
   }
 });
+Object.defineProperty(exports, "Datatable", {
+  enumerable: true,
+  get: function get() {
+    return _Datatable.default;
+  }
+});
 Object.defineProperty(exports, "Earth", {
   enumerable: true,
   get: function get() {
@@ -230,6 +236,8 @@ var _Logo = _interopRequireDefault(require("./Logo"));
 
 var _RelativeTime = _interopRequireDefault(require("./RelativeTime"));
 
+var _Datatable = _interopRequireDefault(require("./Datatable"));
+
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 
 var _Tag = _interopRequireDefault(require("./Tag"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.6",
+  "version": "2.1.9",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "2b8a9723f5280a51416f34afd78472d2e4dbb353",
+  "gitHead": "7a3efb456e1dbe3318ab8757feb9e58a88c08d8e",
   "dependencies": {
-    "@arcblock/icons": "^2.1.6",
-    "@arcblock/react-hooks": "^2.1.6",
+    "@arcblock/icons": "^2.1.9",
+    "@arcblock/react-hooks": "^2.1.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -75,6 +75,7 @@
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
     "mdi-material-ui": "^7.2.0",
+    "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^6.1.0",