@aloudata/aloudata-design 1.9.17 → 1.10.1

package/dist/Tree/style/mixin.less

@@ -0,0 +1,333 @@
+@tree-prefix-cls: ~'@{ald-prefix}-tree';
+@select-tree-prefix-cls: ~'@{ald-prefix}-select-tree';
+@tree-motion: ~'@{ald-prefix}-motion-collapse';
+@tree-node-padding: (@padding-xs / 2);
+// @deprecated: kept for customization usages, recommend using @tree-node-highlight-color instead.
+@tree-node-hightlight-color: inherit;
+@tree-node-highlight-color: @tree-node-hightlight-color;
+.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
+  .@{tree-prefix-cls}-switcher-icon,
+  .@{select-tree-prefix-cls}-switcher-icon {
+    display: inline-block;
+    font-size: 10px;
+    vertical-align: baseline;
+
+    svg {
+      transition: transform 0.3s;
+    }
+  }
+}
+
+.drop-indicator() {
+  .@{tree-prefix-cls}-drop-indicator {
+    position: absolute;
+    // it should displayed over the following node
+    z-index: 1;
+    height: 2px;
+    background-color: @primary-color;
+    border-radius: 1px;
+    pointer-events: none;
+
+    &::after {
+      position: absolute;
+      top: -3px;
+      left: -6px;
+      width: 8px;
+      height: 8px;
+      background-color: transparent;
+      border: 2px solid @primary-color;
+      border-radius: 50%;
+      content: '';
+    }
+  }
+}
+
+.antTreeFn(@custom-tree-prefix-cls) {
+  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
+  .reset-component();
+
+  background: transparent;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+
+  &-focused:not(:hover):not(&-active-focused) {
+    background: @primary-1;
+  }
+
+  // =================== Virtual List ===================
+  &-list-holder-inner {
+    align-items: flex-start;
+  }
+
+  &.@{custom-tree-prefix-cls}-block-node {
+    .@{custom-tree-prefix-cls}-list-holder-inner {
+      align-items: stretch;
+
+      // >>> Title
+      .@{custom-tree-prefix-cls}-node-content-wrapper {
+        flex: auto;
+      }
+
+      // >>> Drag
+      .@{custom-tree-node-prefix-cls}.dragging {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          inset: 0 0 @tree-node-padding 0;
+          border: 1px solid @primary-color;
+          opacity: 0;
+          animation: ant-tree-node-fx-do-not-use 0.3s;
+          animation-play-state: running;
+          animation-fill-mode: forwards;
+          content: '';
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  // ===================== TreeNode =====================
+  .@{custom-tree-node-prefix-cls} {
+    display: flex;
+    align-items: flex-start;
+    padding: 0 0 @tree-node-padding 0;
+    outline: none;
+    // Disabled
+    &-disabled {
+      // >>> Title
+      .@{custom-tree-prefix-cls}-node-content-wrapper {
+        color: @disabled-color;
+        cursor: not-allowed;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
+      background: @tree-node-hover-bg;
+    }
+
+    &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
+      color: @tree-node-highlight-color;
+      font-weight: 500;
+    }
+
+    &-draggable {
+      .@{custom-tree-prefix-cls}-draggable-icon {
+        width: @tree-title-height;
+        line-height: @tree-title-height;
+        text-align: center;
+        visibility: visible;
+        opacity: 0.2;
+        transition: opacity @animation-duration-slow;
+
+        .@{custom-tree-node-prefix-cls}:hover & {
+          opacity: 0.45;
+        }
+      }
+
+      &.@{custom-tree-node-prefix-cls}-disabled {
+        .@{custom-tree-prefix-cls}-draggable-icon {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  // >>> Indent
+  &-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    user-select: none;
+
+    &-unit {
+      display: inline-block;
+      width: @tree-title-height;
+    }
+  }
+
+  // >>> Drag Handler
+  &-draggable-icon {
+    visibility: hidden;
+  }
+
+  // >>> Switcher
+  &-switcher {
+    .antTreeSwitcherIcon();
+
+    position: relative;
+    flex: none;
+    align-self: stretch;
+    width: @tree-title-height;
+    margin: 0;
+    line-height: @tree-title-height;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+
+    &-noop {
+      cursor: default;
+    }
+
+    &_close {
+      .@{custom-tree-prefix-cls}-switcher-icon {
+        svg {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &-loading-icon {
+      color: @primary-color;
+    }
+
+    &-leaf-line {
+      position: relative;
+      z-index: 1;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      // https://github.com/ant-design/ant-design/issues/31884
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 12px;
+        bottom: -@tree-node-padding;
+        margin-left: -1px;
+        border-right: 1px solid @normal-color;
+        content: ' ';
+      }
+
+      &::after {
+        position: absolute;
+        width: @tree-title-height - 14px;
+        height: @tree-title-height - 10px;
+        border-bottom: 1px solid @normal-color;
+        content: ' ';
+      }
+    }
+  }
+
+  // >>> Checkbox
+  &-checkbox {
+    top: initial;
+    margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
+  }
+
+  // >>> Title
+  & &-node-content-wrapper {
+    position: relative;
+    z-index: auto;
+    min-height: @tree-title-height;
+    margin: 0;
+    padding: 0 4px;
+    color: inherit;
+    line-height: @tree-title-height;
+    background: transparent;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
+
+    &:hover {
+      background-color: @tree-node-hover-bg;
+    }
+
+    &.@{custom-tree-prefix-cls}-node-selected {
+      background-color: @tree-node-selected-bg;
+    }
+
+    // Icon
+    .@{custom-tree-prefix-cls}-iconEle {
+      display: inline-block;
+      width: @tree-title-height;
+      height: @tree-title-height;
+      line-height: @tree-title-height;
+      text-align: center;
+      vertical-align: top;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  // https://github.com/ant-design/ant-design/issues/28217
+  &-unselectable &-node-content-wrapper:hover {
+    background-color: transparent;
+  }
+
+  // ==================== Draggable =====================
+  &-node-content-wrapper {
+    line-height: @tree-title-height;
+    user-select: none;
+
+    .drop-indicator();
+  }
+
+  .@{custom-tree-node-prefix-cls}.drop-container {
+    > [draggable] {
+      box-shadow: 0 0 0 2px @primary-color;
+    }
+  }
+
+  // ==================== Show Line =====================
+  &-show-line {
+    // ================ Indent lines ================
+    .@{custom-tree-prefix-cls}-indent {
+      &-unit {
+        position: relative;
+        height: 100%;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: (@tree-title-height / 2);
+          bottom: -@tree-node-padding;
+          border-right: 1px solid @border-color-base;
+          content: '';
+        }
+
+        &-end {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // ============== Cover Background ==============
+    .@{custom-tree-prefix-cls}-switcher {
+      background: @component-background;
+
+      &-line-icon {
+        // https://github.com/ant-design/ant-design/issues/32813
+        vertical-align: -0.15em;
+      }
+    }
+  }
+
+  .@{custom-tree-node-prefix-cls}-leaf-last {
+    .@{custom-tree-prefix-cls}-switcher {
+      &-leaf-line {
+        &::before {
+          top: auto !important;
+          bottom: auto !important;
+          height: @tree-title-height - 10px !important;
+        }
+      }
+    }
+  }
+}
+
+@keyframes ant-tree-node-fx-do-not-use {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/dist/Tree/style/reset.less

@@ -0,0 +1,11 @@
+.reset-component() {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: @text-color;
+  font-size: @font-size-base;
+  font-variant: @font-variant-base;
+  line-height: @line-height-base;
+  list-style: none;
+  font-feature-settings: @font-feature-settings-base;
+}

package/dist/Tree/style/rtl.less

@@ -0,0 +1,68 @@
+@tree-prefix-cls: ~'@{ald-prefix}-tree';
+@select-tree-prefix-cls: ~'@{ald-prefix}-select-tree';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+
+.@{tree-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+    .@{tree-prefix-cls}-node-content-wrapper[draggable='true'] {
+      .@{tree-prefix-cls}-drop-indicator {
+        &::after {
+          right: -6px;
+          left: unset;
+        }
+      }
+    }
+  }
+
+  // ===================== TreeNode =====================
+  .@{tree-node-prefix-cls} {
+    &-rtl {
+      direction: rtl;
+    }
+  }
+
+  // >>> Switcher
+  &-switcher {
+    &_close {
+      .@{tree-prefix-cls}-switcher-icon {
+        svg {
+          .@{tree-prefix-cls}-rtl & {
+            transform: rotate(90deg);
+          }
+        }
+      }
+    }
+  }
+  // ==================== Show Line =====================
+  &-show-line {
+    // ================ Indent lines ================
+    .@{tree-prefix-cls}-indent {
+      &-unit {
+        &::before {
+          .@{tree-prefix-cls}-rtl& {
+            right: auto;
+            left: -(@tree-title-height / 2) - 1px;
+            border-right: none;
+            border-left: 1px solid @border-color-base;
+          }
+        }
+      }
+    }
+  }
+  // >>> Checkbox
+  &-checkbox {
+    .@{tree-prefix-cls}-rtl & {
+      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
+    }
+  }
+}
+
+.@{select-tree-prefix-cls} {
+  // >>> Checkbox
+  &-checkbox {
+    .@{tree-prefix-cls}-select-dropdown-rtl & {
+      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
+    }
+  }
+}

package/dist/Tree/style/var.less

@@ -0,0 +1,42 @@
+@import '../../style/color/colorPalette.less';
+@padding-xs: 4px; // small items
+@item-hover-bg: fade(#fff, 8%);
+@tree-directory-selected-color: #fff;
+@tree-directory-selected-bg: @BG40;
+@tree-title-height: 16px;
+@border-color-base: #434343; // base border outline a component
+
+@checkbox-size: 16px;
+@text-color: fade(#000, 85%);
+@font-size-base: 12px;
+@primary-color: @B40;
+@component-background: #141414;
+@border-radius-sm: 2px;
+@border-width-base: 1px;
+@border-style-base: solid;
+@primary-1: mix(
+  color(~`colorPalette('@{primary-color}', 8) `),
+  @component-background,
+  15%
+);
+@primary-2: color(~`colorPalette('@{primary-color}', 2) `);
+@font-variant-base: tabular-nums;
+@line-height-base: 1.6667;
+@font-feature-settings-base: 'tnum';
+@disabled-color: fade(#fff, 30%);
+@tree-node-hover-bg: #f5f5f5;
+@animation-duration-slow: 0.3s; // Modal
+@normal-color: #d9d9d9;
+@border-radius-base: 2px;
+@tree-node-selected-bg: @primary-2;
+@checkbox-color: @primary-color;
+@checkbox-border-radius: @border-radius-sm;
+@checkbox-check-bg: transparent;
+@checkbox-border-width: @border-width-base;
+@checkbox-check-color: #fff;
+@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+@input-disabled-bg: @disabled-bg;
+@checkbox-group-item-margin-right: 6px;
+@background-color-base: fade(#fff, 8%); // Default grey background color
+@disabled-bg: @background-color-base;

package/dist/Tree/utils/dictUtil.d.ts

@@ -0,0 +1,9 @@
+import type { DataNode, Key } from 'rc-tree/lib/interface';
+/** 计算选中范围，只考虑expanded情况以优化性能 */
+export declare function calcRangeKeys({ treeData, expandedKeys, startKey, endKey, }: {
+    treeData: DataNode[];
+    expandedKeys: Key[];
+    startKey?: Key;
+    endKey?: Key;
+}): Key[];
+export declare function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[]): DataNode[];

package/dist/Tree/utils/dictUtil.js

@@ -0,0 +1,74 @@
+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 _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 _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 _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; }
+var Record = /*#__PURE__*/function (Record) {
+  Record[Record["None"] = 0] = "None";
+  Record[Record["Start"] = 1] = "Start";
+  Record[Record["End"] = 2] = "End";
+  return Record;
+}(Record || {});
+function traverseNodesKey(treeData, callback) {
+  function processNode(dataNode) {
+    var key = dataNode.key,
+      children = dataNode.children;
+    if (callback(key, dataNode) !== false) {
+      traverseNodesKey(children || [], callback);
+    }
+  }
+  treeData.forEach(processNode);
+}
+
+/** 计算选中范围，只考虑expanded情况以优化性能 */
+export function calcRangeKeys(_ref) {
+  var treeData = _ref.treeData,
+    expandedKeys = _ref.expandedKeys,
+    startKey = _ref.startKey,
+    endKey = _ref.endKey;
+  var keys = [];
+  var record = Record.None;
+  if (startKey && startKey === endKey) {
+    return [startKey];
+  }
+  if (!startKey || !endKey) {
+    return [];
+  }
+  function matchKey(key) {
+    return key === startKey || key === endKey;
+  }
+  traverseNodesKey(treeData, function (key) {
+    if (record === Record.End) {
+      return false;
+    }
+    if (matchKey(key)) {
+      // Match test
+      keys.push(key);
+      if (record === Record.None) {
+        record = Record.Start;
+      } else if (record === Record.Start) {
+        record = Record.End;
+        return false;
+      }
+    } else if (record === Record.Start) {
+      // Append selection
+      keys.push(key);
+    }
+    return expandedKeys.includes(key);
+  });
+  return keys;
+}
+export function convertDirectoryKeysToNodes(treeData, keys) {
+  var restKeys = _toConsumableArray(keys);
+  var nodes = [];
+  traverseNodesKey(treeData, function (key, node) {
+    var index = restKeys.indexOf(key);
+    if (index !== -1) {
+      nodes.push(node);
+      restKeys.splice(index, 1);
+    }
+    return !!restKeys.length;
+  });
+  return nodes;
+}

package/dist/Tree/utils/dropIndicator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const offset = 4;
+export default function dropIndicatorRender(props: {
+    dropPosition: -1 | 0 | 1;
+    dropLevelOffset: number;
+    indent: number;
+    prefixCls: string;
+    direction: 'ltr' | 'rtl';
+}): React.JSX.Element;

package/dist/Tree/utils/dropIndicator.js

@@ -0,0 +1,35 @@
+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); }
+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); }
+import React from 'react';
+export var offset = 4;
+export default function dropIndicatorRender(props) {
+  var _style;
+  var dropPosition = props.dropPosition,
+    dropLevelOffset = props.dropLevelOffset,
+    prefixCls = props.prefixCls,
+    indent = props.indent,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'ltr' : _props$direction;
+  var startPosition = direction === 'ltr' ? 'left' : 'right';
+  var endPosition = direction === 'ltr' ? 'right' : 'left';
+  var style = (_style = {}, _defineProperty(_style, startPosition, -dropLevelOffset * indent + offset), _defineProperty(_style, endPosition, 0), _style);
+  switch (dropPosition) {
+    case -1:
+      style.top = -3;
+      break;
+    case 1:
+      style.bottom = -3;
+      break;
+    default:
+      // dropPosition === 0
+      style.bottom = -3;
+      style[startPosition] = indent + offset;
+      break;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: "".concat(prefixCls, "-drop-indicator")
+  });
+}

package/dist/Tree/utils/iconUtil.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { AldTreeNodeProps, SwitcherIcon, TreeLeafIcon } from '../Tree';
+export default function renderSwitcherIcon(prefixCls: string, switcherIcon: SwitcherIcon, showLine: boolean | {
+    showLeafIcon: boolean | TreeLeafIcon;
+} | undefined, treeNodeProps: AldTreeNodeProps): React.ReactNode;

package/dist/Tree/utils/iconUtil.js

@@ -0,0 +1,63 @@
+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); }
+import CaretDownFilled from '@ant-design/icons/CaretDownFilled';
+import FileOutlined from '@ant-design/icons/FileOutlined';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import MinusSquareOutlined from '@ant-design/icons/MinusSquareOutlined';
+import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined';
+import classNames from 'classnames';
+import * as React from 'react';
+import { cloneElement, isValidElement } from "../../_utils/reactNode";
+export default function renderSwitcherIcon(prefixCls, switcherIcon, showLine, treeNodeProps) {
+  var isLeaf = treeNodeProps.isLeaf,
+    expanded = treeNodeProps.expanded,
+    loading = treeNodeProps.loading;
+  if (loading) {
+    return /*#__PURE__*/React.createElement(LoadingOutlined, {
+      className: "".concat(prefixCls, "-switcher-loading-icon")
+    });
+  }
+  var showLeafIcon;
+  if (showLine && _typeof(showLine) === 'object') {
+    showLeafIcon = showLine.showLeafIcon;
+  }
+  if (isLeaf) {
+    if (!showLine) {
+      return null;
+    }
+    if (typeof showLeafIcon !== 'boolean' && !!showLeafIcon) {
+      var leafIcon = typeof showLeafIcon === 'function' ? showLeafIcon(treeNodeProps) : showLeafIcon;
+      var leafCls = "".concat(prefixCls, "-switcher-line-custom-icon");
+      if (isValidElement(leafIcon)) {
+        return cloneElement(leafIcon, {
+          className: classNames(leafIcon.props.className || '', leafCls)
+        });
+      }
+      return leafIcon;
+    }
+    return showLeafIcon ? /*#__PURE__*/React.createElement(FileOutlined, {
+      className: "".concat(prefixCls, "-switcher-line-icon")
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-switcher-leaf-line")
+    });
+  }
+  var switcherCls = "".concat(prefixCls, "-switcher-icon");
+  var switcher = typeof switcherIcon === 'function' ? switcherIcon(treeNodeProps) : switcherIcon;
+  if (isValidElement(switcher)) {
+    return cloneElement(switcher, {
+      className: classNames(switcher.props.className || '', switcherCls)
+    });
+  }
+  if (switcher) {
+    return switcher;
+  }
+  if (showLine) {
+    return expanded ? /*#__PURE__*/React.createElement(MinusSquareOutlined, {
+      className: "".concat(prefixCls, "-switcher-line-icon")
+    }) : /*#__PURE__*/React.createElement(PlusSquareOutlined, {
+      className: "".concat(prefixCls, "-switcher-line-icon")
+    });
+  }
+  return /*#__PURE__*/React.createElement(CaretDownFilled, {
+    className: switcherCls
+  });
+}

package/dist/_utils/motion.d.ts

@@ -0,0 +1,8 @@
+import type { CSSMotionProps } from 'rc-motion';
+declare const collapseMotion: CSSMotionProps;
+declare const SelectPlacements: ["bottomLeft", "bottomRight", "topLeft", "topRight"];
+export type SelectCommonPlacement = (typeof SelectPlacements)[number];
+declare const getTransitionDirection: (placement: SelectCommonPlacement | undefined) => "slide-down" | "slide-up";
+declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;
+export { getTransitionName, getTransitionDirection };
+export default collapseMotion;