@aloudata/aloudata-design 1.9.16 → 1.10.0

package/dist/Table/style/index.less

@@ -1,252 +1,155 @@
-/* stylelint-disable property-no-unknown */
-
 @import '../../style/index.less';
-@import '../../Empty/style/index.less';
-@import '../../message/style/index.less';
-@import './variable.less';
+@import '../../Pagination/style/index.less';
+@import '../../Spin/style/index.less';
+@import '../../ScrollArea/style/index.less';
 
-.ald-table {
+.ald-table-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
-  overflow: hidden;
+}
 
-  &-page-loading {
-    opacity: 0;
-  }
+.ald-table-main {
+  width: 100%;
+  color: #171717;
+  font-size: 13px;
+  line-height: 20px;
+  background: #fff;
 
-  &-table-wrap {
+  .ald-table-content {
     display: flex;
-    flex: 1;
     flex-direction: column;
-    overflow: hidden;
+    border-spacing: 0;
   }
 
-  &-inner-wrap {
-    width: 100%;
+  .ald-table-resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
     height: 100%;
-    overflow-x: auto;
+    width: 5px;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+
+    &::after {
+      content: '';
+      display: block;
+      height: 20px;
+      width: 2px;
+      position: absolute;
+      top: 50%;
+      right: -1px;
+      transform: translateY(-50%);
+      background-color: #e8e8e8;
+    }
   }
 
-  &-tableHeadScrollWrap {
-    display: flex;
-    width: 100%;
+  .ald-table-overflow-x {
     overflow-x: hidden;
   }
 
-  &-cell {
-    flex-grow: 1;
-    height: unset;
-    color: inherit;
-    text-align: left;
-    word-break: break-all;
-    border-bottom: 1px solid @BG80;
-
-    &-content {
-      flex: 1;
-    }
+  .ald-table-tr {
+    display: flex;
   }
 
-  &-row {
-    height: @table-head-row-height;
+  .ald-table-th,
+  .ald-table-td {
+    position: relative;
+    border-bottom: 1px solid #e8e8e8;
+    flex: 0 0 auto;
+  }
 
-    &-ellipsis {
-      .ald-table-cell {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
+  .ald-table-th {
+    border-bottom: 1px solid #e8e8e8;
+    background-color: #fff;
   }
 
-  &-thead {
-    flex: 1;
+  .ald-table-th-default {
+    font-weight: 500;
+    padding: 6px 12px;
     overflow: hidden;
-    font-size: 13px;
-    font-weight: 600;
-    background-color: @BG80;
-    mix-blend-mode: multiply;
-    user-select: none;
-
-    .ald-table-row {
-      min-width: 9999px; // 防止拖动时的闪动
-      height: @table-head-row-height;
-    }
-
-    .ald-table-cell {
-      position: relative;
-      padding: 6px 16px;
-      color: @NL0;
-      line-height: 20px;
-      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: 1em;
-        transform: translateY(-50%);
-        touch-action: none;
-
-        &::after {
-          display: block;
-          width: 1px;
-          height: 100%;
-          background-color: @BG70;
-          mix-blend-mode: multiply;
-          content: '';
-        }
-      }
-
-      &:last-child {
-        .ald-table-bar {
-          display: none;
-        }
-      }
-    }
   }
 
-  &-tbody {
-    flex: 1;
-    overflow: hidden;
+  .ald-table-td-default {
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    height: 100%;
     font-size: 13px;
-
-    .ald-empty {
-      display: flex;
-      justify-content: center;
-    }
-
-    .ald-table-row {
-      height: @table-body-row-height;
-
-      .ald-table-cell {
-        display: flex;
-        flex-shrink: 0;
-        box-sizing: border-box;
-        flex-grow: 0;
-        align-items: center;
-        padding-left: 16px;
-        color: @NL0;
-
-        .ald-table-cell-container {
-          width: 100%;
-        }
-      }
-
-      &:hover {
-        background-color: @NL97;
-      }
-
-      &-selected {
-        background-color: @B98;
-
-        &:hover {
-          background-color: @B98;
-        }
-      }
-    }
+    min-height: 48px;
+    overflow: hidden;
   }
 
-  &-tbody&-tbody-innerScroll {
+  .ald-table-td-ellipsis-content {
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  &-row-list-wrap {
-    overflow: unset;
+  .ald-table-sticky {
+    position: sticky;
+    top: 0;
+    // 需要大于 Spin 的 z-index，Spin 的 z-index 为4
+    z-index: 5;
   }
 
-  &-loading {
-    height: @table-body-row-height;
-    color: @NL80;
-    line-height: @table-body-row-height;
-    text-align: center;
+  .ald-table-body {
+    min-height: 200px;
+    overflow: auto;
 
-    &-icon {
-      margin-right: 4px;
+    .ald-table-tr:hover {
+      .ald-table-td {
+        background-color: #f4f4f4;
+      }
     }
   }
+}
 
-  &-empty-icon {
-    padding-top: 52px;
+.ald-table-align {
+  &-left {
+    text-align: left;
+    justify-content: left;
   }
 
-  &-init-loading {
-    .ald-table-loading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding-top: 84px;
-      padding-bottom: 84px;
-    }
+  &-right {
+    text-align: right;
+    justify-content: right;
   }
 
-  &-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 24px;
-
-    &-left {
-      color: @NL0;
-      font-weight: 600;
-      font-size: 13px;
-    }
-
-    &-right {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      height: 28px;
-      color: @NL0;
-      font-size: 13px;
-    }
+  &-center {
+    text-align: center;
+    justify-content: center;
   }
+}
 
-  // 当出现多行的时候 会顶出一个滚动条 通过复写三方库的样式覆盖
-  &-list&-canNotInnerScroll {
-    overflow: hidden !important;
-  }
+.ald-table-pagination {
+  margin-top: 18px;
+  display: flex;
+  justify-content: end;
+}
 
-  &-sortIcon {
-    margin-top: -2px;
-    margin-left: 4px;
-  }
+.ald-table-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
-  .ald-table-thead {
-    border-top: 1px solid @BG70;
+  .ald-table-loading-inner {
+    width: 100%;
   }
+}
 
-  &-column-resizable {
-    overflow: auto;
+.ald-table-overflow-hidden {
+  overflow: hidden;
+  height: 100%;
+}
 
-    .ald-table-thead,
-    .ald-table-tbody {
-      .ald-table-row {
-        .ald-table {
-          &-cell {
-            flex: none;
-          }
-
-          &-thead {
-            &::-webkit-scrollbar {
-              display: none;
-            }
-          }
-
-          &-tbody {
-            overflow: initial;
-          }
-        }
-      }
-    }
-  }
+.ald-table-body-scroll {
+  overflow: auto;
+}
+
+.ald-table-empty {
+  margin-top: 80px;
 }

package/dist/{AldTable → Table}/types.d.ts

@@ -9,14 +9,15 @@ export interface ITableProps<TDataItem extends object> {
         offsetHeader: number;
     };
     loading?: boolean;
-    scroll?: {
-        x?: number | string;
-        y?: number | string;
-    };
+    scroll?: IScroll;
     pagination?: IPaginationProps;
     empty?: React.ReactNode;
     rowClassName?: (record: TDataItem, index: number) => string;
 }
+export interface IScroll {
+    x?: number | string;
+    y?: number | string;
+}
 export interface ITableColumn<TDataItem = unknown> {
     title: string | React.ReactNode;
     dataIndex?: string;

package/dist/Tree/DirectoryTree.d.ts

@@ -0,0 +1,20 @@
+import type RcTree from 'rc-tree';
+import type { BasicDataNode } from 'rc-tree';
+import type { DataNode, Key } from 'rc-tree/lib/interface';
+import * as React from 'react';
+import type { TreeProps } from './Tree';
+export type ExpandAction = false | 'click' | 'doubleClick';
+export interface DirectoryTreeProps<T extends BasicDataNode = DataNode> extends TreeProps<T> {
+    expandAction?: ExpandAction;
+}
+type DirectoryTreeCompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(props: React.PropsWithChildren<DirectoryTreeProps<T>> & {
+    ref?: React.Ref<RcTree>;
+}) => React.ReactElement) & {
+    displayName?: string;
+};
+export interface DirectoryTreeState {
+    expandedKeys?: Key[];
+    selectedKeys?: Key[];
+}
+declare const ForwardDirectoryTree: DirectoryTreeCompoundedComponent;
+export default ForwardDirectoryTree;

package/dist/Tree/DirectoryTree.js

@@ -0,0 +1,175 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys"],
+  _excluded2 = ["prefixCls", "className", "showIcon", "expandAction"];
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import FileOutlined from '@ant-design/icons/FileOutlined';
+import FolderOpenOutlined from '@ant-design/icons/FolderOpenOutlined';
+import FolderOutlined from '@ant-design/icons/FolderOutlined';
+import classNames from 'classnames';
+import { conductExpandParent } from 'rc-tree/lib/util';
+import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil';
+import * as React from 'react';
+import { ConfigContext } from "../ConfigProvider";
+import Tree from "./Tree";
+import { calcRangeKeys, convertDirectoryKeysToNodes } from "./utils/dictUtil";
+function getIcon(props) {
+  var isLeaf = props.isLeaf,
+    expanded = props.expanded;
+  if (isLeaf) {
+    return /*#__PURE__*/React.createElement(FileOutlined, null);
+  }
+  return expanded ? /*#__PURE__*/React.createElement(FolderOpenOutlined, null) : /*#__PURE__*/React.createElement(FolderOutlined, null);
+}
+function getTreeData(_ref) {
+  var treeData = _ref.treeData,
+    children = _ref.children;
+  return treeData || convertTreeToData(children);
+}
+var DirectoryTree = function DirectoryTree(_ref2, ref) {
+  var defaultExpandAll = _ref2.defaultExpandAll,
+    defaultExpandParent = _ref2.defaultExpandParent,
+    defaultExpandedKeys = _ref2.defaultExpandedKeys,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  // Shift click usage
+  var lastSelectedKey = React.useRef();
+  var cachedSelectedKeys = React.useRef();
+  var getInitExpandedKeys = function getInitExpandedKeys() {
+    var _convertDataToEntitie = convertDataToEntities(getTreeData(props)),
+      keyEntities = _convertDataToEntitie.keyEntities;
+    var initExpandedKeys;
+
+    // Expanded keys
+    if (defaultExpandAll) {
+      initExpandedKeys = Object.keys(keyEntities);
+    } else if (defaultExpandParent) {
+      initExpandedKeys = conductExpandParent(props.expandedKeys || defaultExpandedKeys || [], keyEntities);
+    } else {
+      initExpandedKeys = props.expandedKeys || defaultExpandedKeys;
+    }
+    return initExpandedKeys;
+  };
+  var _React$useState = React.useState(props.selectedKeys || props.defaultSelectedKeys || []),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedKeys = _React$useState2[0],
+    setSelectedKeys = _React$useState2[1];
+  var _React$useState3 = React.useState(function () {
+      return getInitExpandedKeys();
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    expandedKeys = _React$useState4[0],
+    setExpandedKeys = _React$useState4[1];
+  React.useEffect(function () {
+    if ('selectedKeys' in props) {
+      setSelectedKeys(props.selectedKeys);
+    }
+  }, [props.selectedKeys, props]);
+  React.useEffect(function () {
+    if ('expandedKeys' in props) {
+      setExpandedKeys(props.expandedKeys);
+    }
+  }, [props.expandedKeys, props]);
+  var onExpand = function onExpand(keys, info) {
+    var _props$onExpand;
+    if (!('expandedKeys' in props)) {
+      setExpandedKeys(keys);
+    }
+    // Call origin function
+    return (_props$onExpand = props.onExpand) === null || _props$onExpand === void 0 ? void 0 : _props$onExpand.call(props, keys, info);
+  };
+  var onSelect = function onSelect(keys, event) {
+    var _props$onSelect;
+    var multiple = props.multiple;
+    var node = event.node,
+      nativeEvent = event.nativeEvent;
+    var _node$key = node.key,
+      key = _node$key === void 0 ? '' : _node$key;
+    var treeData = getTreeData(props);
+    // const newState: DirectoryTreeState = {};
+
+    // We need wrap this event since some value is not same
+    var newEvent = _objectSpread(_objectSpread({}, event), {}, {
+      selected: true // Directory selected always true
+    });
+
+    // Windows / Mac single pick
+    var ctrlPick = (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.ctrlKey) || (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.metaKey);
+    var shiftPick = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey;
+
+    // Generate new selected keys
+    var newSelectedKeys;
+    if (multiple && ctrlPick) {
+      // Control click
+      newSelectedKeys = keys;
+      lastSelectedKey.current = key;
+      cachedSelectedKeys.current = newSelectedKeys;
+      newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
+    } else if (multiple && shiftPick) {
+      // Shift click
+      newSelectedKeys = Array.from(new Set([].concat(_toConsumableArray(cachedSelectedKeys.current || []), _toConsumableArray(calcRangeKeys({
+        treeData: treeData,
+        expandedKeys: expandedKeys,
+        startKey: key,
+        endKey: lastSelectedKey.current
+      })))));
+      newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
+    } else {
+      // Single click
+      newSelectedKeys = [key];
+      lastSelectedKey.current = key;
+      cachedSelectedKeys.current = newSelectedKeys;
+      newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
+    }
+    (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, newSelectedKeys, newEvent);
+    if (!('selectedKeys' in props)) {
+      setSelectedKeys(newSelectedKeys);
+    }
+  };
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction;
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    _props$showIcon = props.showIcon,
+    showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
+    _props$expandAction = props.expandAction,
+    expandAction = _props$expandAction === void 0 ? 'click' : _props$expandAction,
+    otherProps = _objectWithoutProperties(props, _excluded2);
+  var prefixCls = getPrefixCls('tree', customizePrefixCls);
+  var connectClassName = classNames("".concat(prefixCls, "-directory"), _defineProperty({}, "".concat(prefixCls, "-directory-rtl"), direction === 'rtl'), className);
+  return /*#__PURE__*/React.createElement(Tree, _extends({
+    icon: getIcon,
+    ref: ref,
+    blockNode: true
+  }, otherProps, {
+    showIcon: showIcon,
+    expandAction: expandAction,
+    prefixCls: prefixCls,
+    className: connectClassName,
+    expandedKeys: expandedKeys,
+    selectedKeys: selectedKeys,
+    onSelect: onSelect,
+    onExpand: onExpand
+  }));
+};
+var ForwardDirectoryTree = /*#__PURE__*/React.forwardRef(DirectoryTree);
+if (process.env.NODE_ENV !== 'production') {
+  ForwardDirectoryTree.displayName = 'DirectoryTree';
+}
+export default ForwardDirectoryTree;