@aloudata/aloudata-design 0.2.7 → 0.3.0-beta.1

package/es/Table/Table.js

@@ -0,0 +1,464 @@
+var _excluded = ["style"],
+    _excluded2 = ["style"];
+
+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 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/* eslint-disable no-unneeded-ternary */
+/// <reference types ='./react-table-config' />
+import _ from 'lodash';
+import classnames from 'classnames';
+import Icon from '../Icon';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import usePrefixCls from '../_utils/hooks/usePrefixCls';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import TableEmpty from './components/Empty';
+import ResizeObserver from 'rc-resize-observer';
+import { useTable, useBlockLayout, useRowSelect, useSortBy, useResizeColumns } from 'react-table';
+import './style/index';
+var ARRAY_FIRST_INDEX = 0;
+var DEFAULT_ROW_WIDTH = 0;
+var DEFAULT_BODY_HEIGHT = 0;
+var EMPTY_LENGTH = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function Table(props, ref) {
+  var _classnames3;
+
+  var columns = props.columns,
+      data = props.data,
+      onRowSelected = props.onRowSelected,
+      loadMore = props.loadMore,
+      loading = props.loading,
+      hasNextPage = props.hasNextPage,
+      _props$sortable = props.sortable,
+      sortable = _props$sortable === void 0 ? false : _props$sortable,
+      defaultSort = props.defaultSort,
+      _props$resizeColumn = props.resizeColumn,
+      resizeColumn = _props$resizeColumn === void 0 ? false : _props$resizeColumn,
+      allSortDirections = props.sortDirections,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$innerScroll = props.innerScroll,
+      innerScroll = _props$innerScroll === void 0 ? false : _props$innerScroll,
+      _props$scrollThreshol = props.scrollThreshold,
+      scrollThreshold = _props$scrollThreshol === void 0 ? '150px' : _props$scrollThreshol,
+      _props$rowClassName = props.rowClassName,
+      rowClassName = _props$rowClassName === void 0 ? '' : _props$rowClassName,
+      _props$ellipsis = props.ellipsis,
+      ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
+      rowKey = props.rowKey;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRowId = _React$useState2[0],
+      setSelectedRowId = _React$useState2[1];
+
+  var tableBodyListRef = useRef(null);
+  var tableRef = useRef(null);
+
+  var _useState = useState(DEFAULT_BODY_HEIGHT),
+      _useState2 = _slicedToArray(_useState, 2),
+      tableClientWidth = _useState2[0],
+      setTableClientWidth = _useState2[1];
+
+  var RANDOM_ID = "INNER_SCROLL_ID_".concat(Math.random());
+
+  var _useState3 = useState(DEFAULT_ROW_WIDTH),
+      _useState4 = _slicedToArray(_useState3, 2),
+      width = _useState4[0],
+      setWidth = _useState4[1]; // 如果页面整体宽度变化则重新计算
+
+
+  useEffect(function () {
+    if (tableRef.current) {
+      setTableClientWidth(tableRef.current.clientWidth);
+    }
+  }, [width]);
+  var initialColumnsWidthMap = useMemo(function () {
+    var map = new Map();
+
+    if (tableClientWidth !== DEFAULT_BODY_HEIGHT) {
+      var noGivenColumns = 0;
+      var givenColumnsTotalWidth = 0;
+      columns.forEach(function (column) {
+        if (column.width) {
+          map.set(column.dataIndex, column.width);
+          givenColumnsTotalWidth += column.width;
+        } else {
+          noGivenColumns += 1;
+        }
+      });
+      var averageWidth = (tableClientWidth - givenColumnsTotalWidth) / noGivenColumns;
+      return {
+        columnMap: map,
+        averageWidth: averageWidth
+      };
+    }
+
+    columns.forEach(function (column) {
+      if (column.width) {
+        map.set(column.dataIndex, column.width);
+      }
+    });
+    return {
+      columnMap: map,
+      averageWidth: DEFAULT_ROW_WIDTH
+    };
+  }, [columns, tableClientWidth]);
+  var newColumns = useMemo(function () {
+    return columns.map(function (column) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        width: initialColumnsWidthMap.columnMap.get(column.dataIndex) || initialColumnsWidthMap.averageWidth,
+        Header: column.title ? column.title : function () {
+          return null;
+        },
+        disableSortBy: !sortable || typeof column.sorter === 'boolean',
+        accessor: column.dataIndex,
+        Cell: function Cell(_ref) {
+          var row = _ref.row,
+              value = _ref.value;
+          return typeof column.render === 'function' ? column.render(value, row.original, row.index) : value;
+        }
+      });
+    });
+  }, [columns, sortable, initialColumnsWidthMap]); // 默认排序的对象
+
+  var defaultSortObject = {
+    id: newColumns[ARRAY_FIRST_INDEX].accessor,
+    desc: newColumns[ARRAY_FIRST_INDEX].sortOrder && newColumns[ARRAY_FIRST_INDEX].sortOrder === 'descend' ? true : false
+  }; // 如果支持排序 但是没有默认排序 则默认按第一列倒叙排序
+
+  var getInitialSortDirection = function getInitialSortDirection() {
+    if (defaultSort && defaultSort.id) {
+      return defaultSort;
+    }
+
+    if (sortable) {
+      return defaultSortObject;
+    }
+
+    return {
+      id: '',
+      desc: false
+    };
+  };
+
+  var _React$useState3 = React.useState(getInitialSortDirection()),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      sortDirection = _React$useState4[0],
+      setSortDirection = _React$useState4[1];
+
+  var getInitSortBy = function getInitSortBy() {
+    if (!(sortDirection === null || sortDirection === void 0 ? void 0 : sortDirection.id)) {
+      return [];
+    }
+
+    var sortColumn = newColumns.find(function (column) {
+      return column.accessor === sortDirection.id;
+    });
+
+    if (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sorter) {
+      return [];
+    }
+
+    return [sortDirection];
+  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  var getRowIdFn = function getRowIdFn(row, relativeIndex, parent) {
+    if (rowKey && parent) {
+      if (typeof rowKey === 'string') {
+        return [rowKey, relativeIndex].join('.');
+      }
+
+      if (typeof rowKey === 'function') {
+        return [rowKey(row), relativeIndex].join('.');
+      }
+    }
+
+    return relativeIndex.toString();
+  };
+
+  var _useTable = useTable({
+    columns: newColumns,
+    data: data,
+    disableMultiSort: true,
+    disableSortBy: !sortable,
+    getRowId: getRowIdFn,
+    initialState: {
+      sortBy: getInitSortBy()
+    }
+  }, useBlockLayout, useSortBy, useRowSelect, useResizeColumns),
+      getTableProps = _useTable.getTableProps,
+      getTableBodyProps = _useTable.getTableBodyProps,
+      headerGroups = _useTable.headerGroups,
+      rows = _useTable.rows,
+      prepareRow = _useTable.prepareRow,
+      setSortBy = _useTable.setSortBy,
+      totalColumnsWidth = _useTable.totalColumnsWidth;
+
+  var theadRowWidthRef = React.useRef(DEFAULT_ROW_WIDTH);
+  var prefixCls = usePrefixCls('', 'ald-table');
+  var onRowClick = useCallback(function (row) {
+    if (!onRowSelected) {
+      return;
+    }
+
+    setSelectedRowId(row.id);
+    onRowSelected(row.original);
+  }, [onRowSelected]); // 排序的方向 倒叙{ id: 'xx', desc: true }、正序{ id: 'xx', desc: false }、无序 { id: '', desc: undefined }
+  // 获取排序方向以及排序的id
+
+  var getSortBy = function getSortBy(id) {
+    var sortDirections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['ascend', 'descend'];
+    var // 如果传了sortDirections，则使用传入的，否则使用默认的
+    sortOrder = arguments.length > 2 ? arguments[2] : undefined;
+    var res = {
+      id: id,
+      desc: undefined
+    };
+    var isSameCol = sortDirection.id === id;
+    var descMap = new Map([['ascend', false], ['descend', true]]);
+    var directions = allSortDirections || sortDirections; // 如果不是同一列 则返回默认排序 或者排序顺序的第一个
+
+    if (!isSameCol) {
+      if (sortOrder === 'ascend' || sortOrder === 'descend') {
+        res.desc = descMap.get(sortOrder);
+      } else {
+        res.desc = sortOrder ? sortOrder : descMap.get(directions[ARRAY_FIRST_INDEX]);
+      }
+
+      return res;
+    } // 如果是同一列
+    // 如果列给了默认的sortOrder则不在变化
+
+
+    if (sortOrder === 'ascend' || sortOrder === 'descend') {
+      res.desc = descMap.get(sortOrder);
+      return res;
+    } // 在所有方向上 往后取一个
+
+
+    var lastSortDirection = sortDirection.desc ? 'descend' : 'ascend';
+
+    var index = _.findIndex(directions, function (item) {
+      return item === lastSortDirection;
+    });
+
+    var nextIndex = index + 1;
+    res.desc = descMap.get(directions[nextIndex]); // 如果没有排序方向，则返回默认排序对象
+
+    if (res.desc === undefined) {
+      res.id = '';
+    }
+
+    return res;
+  };
+
+  var getHeaderProps = function getHeaderProps(column) {
+    // @ts-ignore
+    var id = column.id,
+        canSort = column.canSort,
+        sorter = column.sorter,
+        sortOrder = column.sortOrder,
+        sortDirections = column.sortDirections;
+    var toggleProps = column.getSortByToggleProps(); // 仅在Table设置sortable时,所有列的canSort为true,此时为前端排序
+
+    if (canSort) {
+      // client sort
+      return _objectSpread(_objectSpread({}, column.getHeaderProps(_objectSpread({}, toggleProps))), {}, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          if (typeof toggleProps.onClick === 'function') {
+            var sortBy = getSortBy(id, sortDirections, sortOrder);
+            setSortBy(sortBy.desc === undefined ? [defaultSortObject] : [sortBy]); // 客户端排序时 需要重新设置排序
+
+            setSortDirection(sortBy);
+            onChange(sortBy);
+          }
+        }
+      });
+    } // 当列设置sorter属性时，则为服务端排序
+
+
+    if (sorter) {
+      // server sort
+      return _objectSpread(_objectSpread({}, column.getHeaderProps({
+        style: {
+          cursor: 'pointer'
+        }
+      })), {}, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          var sortBy = getSortBy(id, sortDirections, sortOrder);
+          setSortDirection(sortBy);
+          onChange(sortBy);
+        }
+      });
+    }
+
+    return column.getHeaderProps();
+  };
+
+  var SortIcons = function SortIcons(_ref2) {
+    var id = _ref2.id;
+    var currentSortId = sortDirection.id,
+        desc = sortDirection.desc;
+
+    if (id !== currentSortId || !sortable) {
+      return null;
+    }
+
+    return desc ? /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      type: "sort_descending",
+      size: 12
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      type: "sort_ascending",
+      size: 12
+    });
+  };
+
+  var scrollToTop = function scrollToTop() {
+    var INITIAL_OFFSET_TOP = 0;
+
+    if (tableBodyListRef && tableBodyListRef.current) {
+      tableBodyListRef.current.scrollTop = INITIAL_OFFSET_TOP;
+    }
+  };
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      backToTop: function backToTop() {
+        scrollToTop();
+      }
+    };
+  });
+  var LoadingNode = /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-loading"))
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "waiting",
+    size: 16,
+    className: classnames("".concat(prefixCls, "-loading-icon"))
+  }), "Loading");
+
+  var renderTableBody = function renderTableBody() {
+    if (loading && !rows.length) {
+      return LoadingNode;
+    }
+
+    if (!loading && !rows.length) {
+      return /*#__PURE__*/React.createElement(TableEmpty, null);
+    }
+
+    var renderRowList = function renderRowList() {
+      return data.map(function (item, index) {
+        var _classnames;
+
+        var row = rows[index];
+        prepareRow(row);
+
+        var _row$getRowProps = row.getRowProps(),
+            rowStyle = _row$getRowProps.style,
+            rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+
+        return /*#__PURE__*/React.createElement("div", Object.assign({}, rowProps, {
+          style: _objectSpread({}, rowStyle),
+          className: classnames("".concat(prefixCls, "-row"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId), _defineProperty(_classnames, rowClassName, rowClassName), _defineProperty(_classnames, "".concat(prefixCls, "-row-ellipsis"), ellipsis), _classnames)),
+          onClick: function onClick() {
+            return onRowClick(row);
+          },
+          key: row.id
+        }), row.cells.map(function (cell) {
+          return /*#__PURE__*/React.createElement("div", Object.assign({}, cell.getCellProps(), {
+            className: classnames("".concat(prefixCls, "-cell"))
+          }), cell.render('Cell'));
+        }));
+      });
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames("".concat(prefixCls, "-list"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
+      id: RANDOM_ID,
+      ref: tableBodyListRef
+    }, innerScroll ? /*#__PURE__*/React.createElement(InfiniteScroll, {
+      dataLength: rows.length,
+      next: loadMore,
+      hasMore: !!hasNextPage,
+      loader: LoadingNode,
+      scrollableTarget: RANDOM_ID,
+      scrollThreshold: scrollThreshold
+    }, renderRowList()) : renderRowList());
+  };
+
+  return /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(_ref3) {
+      var domWidth = _ref3.width;
+      setWidth(domWidth);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls,
+    ref: tableRef
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
+    className: classnames("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-column-resizable"), resizeColumn), _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === EMPTY_LENGTH && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === EMPTY_LENGTH && loading), _classnames3))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-thead")
+  }, headerGroups.map(function (headerGroup) {
+    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+        style = _headerGroup$getHeade.style,
+        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
+
+    theadRowWidthRef.current = (style === null || style === void 0 ? void 0 : style.width) || DEFAULT_ROW_WIDTH;
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, headerGroupProps, {
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        width: resizeColumn ? style === null || style === void 0 ? void 0 : style.width : '100%'
+      }),
+      className: "".concat(prefixCls, "-row")
+    }), headerGroup.headers.map(function (column) {
+      var barPorps = resizeColumn ? column.getResizerProps() : {};
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell")),
+        style: getHeaderProps(column).style,
+        key: column.id
+      }, /*#__PURE__*/React.createElement("div", Object.assign({
+        className: "".concat(prefixCls, "-cell-content")
+      }, getHeaderProps(column), {
+        style: {
+          width: '100%'
+        }
+      }), column.render('Header'), /*#__PURE__*/React.createElement(SortIcons, {
+        id: column.id
+      })), /*#__PURE__*/React.createElement("div", Object.assign({}, barPorps, {
+        className: classnames(_defineProperty({}, "".concat(prefixCls, "-dragBar"), resizeColumn), "".concat(prefixCls, "-bar"))
+      })));
+    }));
+  })), /*#__PURE__*/React.createElement("div", Object.assign({}, getTableBodyProps(), {
+    className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
+    style: {
+      width: totalColumnsWidth
+    }
+  }), renderTableBody()))));
+}
+
+export default /*#__PURE__*/React.forwardRef(Table);

package/es/Table/components/Empty/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare function TableEmpty(): JSX.Element;
+export default TableEmpty;

package/es/Table/components/Empty/index.js

@@ -0,0 +1,16 @@
+import "antd/es/empty/style";
+import _Empty from "antd/es/empty";
+import React from 'react';
+import './index.less';
+
+function TableEmpty() {
+  var emptyNode = /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-empty-node"
+  });
+  return /*#__PURE__*/React.createElement(_Empty, {
+    image: emptyNode,
+    description: "No Data"
+  });
+}
+
+export default TableEmpty;

package/es/Table/components/Empty/index.less

@@ -0,0 +1,24 @@
+@import '../../style/index.less';
+
+.ald-table-tbody {
+  .ant-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 52px;
+    color: @NL50;
+  }
+
+  .ant-empty-image {
+    width: 48px;
+    height: 48px;
+  }
+
+  .ald-table-empty-node {
+    width: 48px;
+    height: 48px;
+    background-image: url('./empty-img.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}

package/es/Table/index.d.ts

@@ -1,4 +1,2 @@
-import React from 'react';
-import { ITableProps } from './interface';
-declare const _default: React.ForwardRefExoticComponent<Pick<ITableProps<Record<string, unknown>>, "onChange" | "loading" | "data" | "ellipsis" | "columns" | "total" | "renderHeaderLeft" | "renderHeaderRight" | "onRowSelected" | "loadMore" | "hasNextPage" | "sortable" | "defaultSort" | "resizeColumn" | "sortDirections" | "showHeader" | "innerScroll" | "scrollThreshold" | "rowClassName" | "renderEmpty" | "rowKey"> & React.RefAttributes<unknown>>;
-export default _default;
+import Table from './Table';
+export default Table;