@aloudata/aloudata-design 0.4.0-beta.9 → 0.4.0

package/dist/Table/components/TableHead/index.js

@@ -0,0 +1,262 @@
+var _excluded = ["style"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+import React, { useState } from 'react';
+import usePrefixCls from "../../../_utils/hooks/usePrefixCls";
+import classnames from 'classnames';
+import { FoldDownFill, FoldUpFill } from '@aloudata/icons-react';
+import _ from 'lodash';
+import { getValidWidthByNumber } from "../../utils";
+import message from "../../../message";
+var ARRAY_FIRST_INDEX = 0;
+
+function TableHead(props) {
+  var headerGroups = props.headerGroups,
+      canResizeColumn = props.canResizeColumn,
+      defaultSort = props.defaultSort,
+      _props$sortable = props.sortable,
+      sortable = _props$sortable === void 0 ? false : _props$sortable,
+      _props$columns = props.columns,
+      columns = _props$columns === void 0 ? [{
+    accessor: '',
+    sortOrder: 'descend'
+  }] : _props$columns,
+      allSortDirections = props.sortDirections,
+      setSortBy = props.setSortBy,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      columnsWidthMapRef = props.columnsWidthMapRef,
+      columnsTotalWidthRef = props.columnsTotalWidthRef;
+  var prefixCls = usePrefixCls('', 'ald-table'); // 第一列的情况 默认或者恢复是需要用到
+
+  var defaultSortObject = {
+    id: columns[ARRAY_FIRST_INDEX].accessor,
+    desc: !!(columns[ARRAY_FIRST_INDEX].sortOrder && columns[ARRAY_FIRST_INDEX].sortOrder === 'descend')
+  }; // 如果支持排序
+  // 1. 有默认排序 则按照默认排序
+  // 2. 如果没有默认排序，再判断第一列是否符合排序条件，若满足 => 则按第一列排序
+
+  var getInitialSortDirection = function getInitialSortDirection() {
+    if (defaultSort && defaultSort.id) {
+      return defaultSort;
+    }
+
+    if (!defaultSortObject.id) {
+      message.error('开启了排序，但是没有给予默认排序列，并且第一列不支持排序');
+    }
+
+    return defaultSortObject;
+  };
+
+  var _useState = useState(getInitialSortDirection()),
+      _useState2 = _slicedToArray(_useState, 2),
+      sortDirection = _useState2[0],
+      setSortDirection = _useState2[1]; // 排序的方向 倒叙{ 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 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 || 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(_ref) {
+    var id = _ref.id;
+    var currentSortId = sortDirection.id,
+        desc = sortDirection.desc;
+
+    if (id !== currentSortId || !sortable) {
+      return null;
+    }
+
+    return desc ? /*#__PURE__*/React.createElement(FoldDownFill, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      fill: "currentColor",
+      size: 12
+    }) : /*#__PURE__*/React.createElement(FoldUpFill, {
+      className: "".concat(prefixCls, "-sortIcon"),
+      fill: "currentColor",
+      size: 12
+    });
+  }; // 在页面拖拽完成之后 更新表格整体宽度以及每个列对应的列宽map
+
+
+  var adjustColumnsMapAfterDrag = function adjustColumnsMapAfterDrag(key, width) {
+    var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
+
+    var newMap = _.cloneDeep(columnsWidthMapRef.current);
+
+    var originWidth = (_columnsWidthMapRef$c = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c === void 0 ? void 0 : (_columnsWidthMapRef$c2 = _columnsWidthMapRef$c.get(key)) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : _columnsWidthMapRef$c2.width;
+    var newWidth = getValidWidthByNumber(width);
+    newMap.set(key, {
+      isSpecific: true,
+      width: newWidth
+    });
+    columnsWidthMapRef.current = newMap;
+    columnsTotalWidthRef.current = columnsTotalWidthRef.current - originWidth + newWidth;
+  };
+
+  var handleStyleAndReturn = function handleStyleAndReturn(column, index) {
+    var _get, _getHeaderProps$style, _getHeaderProps$style2;
+
+    var key = index.toString();
+    var lastColumnsMapWidth = (_get = columnsWidthMapRef.current.get(key)) === null || _get === void 0 ? void 0 : _get.width; // 在拖动之前记录宽度map
+
+    var currentRenderWidth = Number((_getHeaderProps$style = getHeaderProps(column).style) === null || _getHeaderProps$style === void 0 ? void 0 : (_getHeaderProps$style2 = _getHeaderProps$style.width) === null || _getHeaderProps$style2 === void 0 ? void 0 : _getHeaderProps$style2.toString().replace('px', '')); // 表格内置计算的宽度 'px'
+
+    if (currentRenderWidth !== lastColumnsMapWidth) {
+      adjustColumnsMapAfterDrag(key, currentRenderWidth);
+    }
+
+    return _objectSpread(_objectSpread({}, getHeaderProps(column).style), {}, {
+      width: getValidWidthByNumber(currentRenderWidth)
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-thead"),
+    style: {
+      width: columnsTotalWidthRef.current
+    }
+  }, headerGroups.map(function (headerGroup) {
+    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+        style = _headerGroup$getHeade.style,
+        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
+
+    return /*#__PURE__*/React.createElement("div", _extends({}, headerGroupProps, {
+      className: "".concat(prefixCls, "-row")
+    }), headerGroup.headers.map(function (column, index) {
+      var barProps = canResizeColumn ? column.getResizerProps() : {};
+      var headCellStyle = handleStyleAndReturn(column, index);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell")),
+        style: headCellStyle,
+        key: column.id
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        className: "".concat(prefixCls, "-cell-content")
+      }, getHeaderProps(column), {
+        style: {
+          width: '100%'
+        }
+      }), /*#__PURE__*/React.createElement(React.Fragment, null, column.render('Header'), /*#__PURE__*/React.createElement(SortIcons, {
+        id: column.id
+      }))), /*#__PURE__*/React.createElement("div", _extends({}, barProps, {
+        className: classnames(_defineProperty({}, "".concat(prefixCls, "-dragBar"), canResizeColumn), "".concat(prefixCls, "-bar"))
+      })));
+    }));
+  }));
+}
+
+export default TableHead;

package/dist/Table/hooks/useFrame.js

@@ -0,0 +1,90 @@
+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; }
+
+// @ts-nocheck
+import { useRef, useState, useEffect } from 'react';
+
+/**
+ * Execute code before next frame but async
+ */
+export function useLayoutState(defaultState) {
+  var stateRef = useRef(defaultState);
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceUpdate = _useState2[1];
+
+  var lastPromiseRef = useRef(null);
+  var updateBatchRef = useRef([]);
+
+  function setFrameState(updater) {
+    updateBatchRef.current.push(updater);
+    var promise = Promise.resolve(); // @ts-ignore;
+
+    lastPromiseRef.current = promise;
+    promise.then(function () {
+      if (lastPromiseRef.current === promise) {
+        var prevBatch = updateBatchRef.current;
+        var prevState = stateRef.current;
+        updateBatchRef.current = [];
+        prevBatch.forEach(function (batchUpdater) {
+          stateRef.current = batchUpdater(stateRef.current);
+        }); // @ts-ignore;
+
+        lastPromiseRef.current = null;
+
+        if (prevState !== stateRef.current) {
+          forceUpdate({});
+        }
+      }
+    });
+  }
+
+  useEffect(function () {
+    return function () {
+      // @ts-ignore;
+      lastPromiseRef.current = null;
+    };
+  }, []);
+  return [stateRef.current, setFrameState];
+}
+/** Lock frame, when frame pass reset the lock. */
+
+export function useTimeoutLock(defaultState) {
+  var frameRef = useRef(defaultState || null);
+  var timeoutRef = useRef();
+  var TIMEOUT_DELAY = 50;
+
+  function cleanUp() {
+    window.clearTimeout(timeoutRef.current);
+  }
+
+  function setState(newState) {
+    // @ts-ignore;
+    frameRef.current = newState;
+    cleanUp();
+    timeoutRef.current = window.setTimeout(function () {
+      // @ts-ignore;
+      frameRef.current = null;
+      timeoutRef.current = undefined;
+    }, TIMEOUT_DELAY);
+  }
+
+  function getState() {
+    return frameRef.current;
+  }
+
+  useEffect(function () {
+    return cleanUp;
+  }, []);
+  return [setState, getState];
+}

package/dist/Table/index.js

@@ -0,0 +1,2 @@
+import Table from "./Table";
+export default Table;

package/dist/Table/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/Table/style/index.less

@@ -0,0 +1,243 @@
+/* stylelint-disable property-no-unknown */
+
+@import '../../style/index.less';
+@import '../../Empty/style/index.less';
+@import '../../message/style/index.less';
+@import './variable.less';
+
+.ald-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+
+  &-page-loading {
+    opacity: 0;
+  }
+
+  &-table-wrap {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-inner-wrap {
+    width: 100%;
+    height: 100%;
+    overflow-x: overlay;
+  }
+
+  &-tableHeadScrollWrap {
+    display: flex;
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  &-cell {
+    flex-grow: 1;
+    height: unset;
+    color: inherit;
+    text-align: left;
+    word-break: break-all;
+    border-bottom: 1px solid @BG70;
+
+    &-content {
+      flex: 1;
+    }
+  }
+
+  &-row {
+    height: @table-head-row-height;
+
+    &-ellipsis {
+      .ald-table-cell {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &-thead {
+    flex: 1;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+
+    .ald-table-row {
+      min-width: 9999px; // 防止拖动时的闪动
+      height: @table-head-row-height;
+    }
+
+    .ald-table-cell {
+      position: relative;
+      padding: 6px 16px;
+      color: @NL0;
+      line-height: 20px;
+      background-color: @BG80;
+      height: 100%;
+
+      .ald-table-cell-content {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .ald-table-bar {
+        position: absolute;
+        top: 50%;
+        right: -12px;
+        z-index: 1;
+        display: inline-block;
+        width: 12px;
+        height: 14px;
+        transform: translateY(-50%);
+        touch-action: none;
+
+        &::after {
+          display: block;
+          width: 1px;
+          height: 100%;
+          background-color: @BG70;
+          content: '';
+        }
+      }
+
+      &:last-child {
+        .ald-table-bar {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &-tbody {
+    flex: 1;
+    overflow: hidden;
+    font-size: 13px;
+
+    .ald-empty {
+      display: flex;
+      justify-content: center;
+    }
+
+    .ald-table-row {
+      height: @table-body-row-height;
+
+      .ald-table-cell {
+        display: flex;
+        align-items: center;
+        padding-left: 16px;
+        color: @NL40;
+
+        .ald-table-cell-container {
+          width: 100%;
+        }
+      }
+
+      &:hover {
+        background-color: @NL97;
+      }
+
+      &-selected {
+        background-color: @B98;
+
+        &:hover {
+          background-color: @B98;
+        }
+      }
+    }
+  }
+
+  &-tbody&-tbody-innerScroll {
+    overflow: hidden;
+  }
+
+  &-row-list-wrap {
+    overflow: unset;
+  }
+
+  &-loading {
+    height: @table-body-row-height;
+    color: @NL80;
+    line-height: @table-body-row-height;
+    text-align: center;
+
+    &-icon {
+      margin-right: 4px;
+    }
+  }
+
+  &-empty-icon {
+    padding-top: 52px;
+  }
+
+  &-init-loading {
+    .ald-table-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top: 84px;
+      padding-bottom: 84px;
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+
+    &-left {
+      color: @NL0;
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    &-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 28px;
+      color: @NL0;
+      font-size: 14px;
+    }
+  }
+
+  // 当出现多行的时候 会顶出一个滚动条 通过复写三方库的样式覆盖
+  &-list&-canNotInnerScroll {
+    overflow: hidden !important;
+  }
+
+  &-sortIcon {
+    margin-top: -2px;
+    margin-left: 4px;
+  }
+
+  &-column-resizable {
+    overflow: overlay;
+
+    .ald-table-thead,
+    .ald-table-tbody {
+      .ald-table-row {
+        .ald-table {
+          &-cell {
+            flex: none;
+          }
+
+          &-thead {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
+
+          &-tbody {
+            overflow: initial;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/Table/style/variable.less

@@ -0,0 +1,5 @@
+/* stylelint-disable property-no-unknown */
+
+@ald-iconfont-css-prefix: anticon;
+@table-head-row-height: 32px;
+@table-body-row-height: 48px;

package/dist/Table/utils.d.ts

@@ -0,0 +1,15 @@
+import { IColumn } from './interface';
+export interface IWidthDetail {
+    width: number;
+    isSpecific: boolean;
+}
+export declare function isPercentageWidth(width: string): boolean;
+export declare function isSpecificPxWidth(width: string): boolean;
+export declare function getValidWidthByNumber(width: number): number;
+export declare function getPercentageValue(percentage: string, containerNum: number): number;
+export declare function getPxValue(px: string): number;
+export declare function getValidScrollThreshold(height: string | number, clientHeight: number): number;
+export declare function getColumnsWidthMap<T>(columns: IColumn<T>[], clientWidth: number, lastWidthMap?: Map<string, IWidthDetail>): {
+    columnsWidthMap: Map<string, IWidthDetail>;
+    totalColumnWidth: number;
+};