@aloudata/aloudata-design 1.9.16 → 1.10.0

package/dist/Tree/style/directory.less

@@ -0,0 +1,68 @@
+// @import '../../style/themes/index';
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+
+.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
+  // ================== TreeNode ==================
+  .@{tree-prefix-cls}-treenode {
+    position: relative;
+
+    // Hover color
+    &::before {
+      position: absolute;
+      inset: 0 0 4px;
+      transition: background-color 0.3s;
+      content: '';
+      pointer-events: none;
+    }
+
+    &:hover {
+      &::before {
+        background: @item-hover-bg;
+      }
+    }
+
+    // Elements
+    > * {
+      z-index: 1;
+    }
+
+    // >>> Switcher
+    .@{tree-prefix-cls}-switcher {
+      transition: color 0.3s;
+    }
+
+    // >>> Title
+    .@{tree-prefix-cls}-node-content-wrapper {
+      border-radius: 0;
+      user-select: none;
+
+      &:hover {
+        background: transparent;
+      }
+
+      &.@{tree-prefix-cls}-node-selected {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
+
+    // ============= Selected =============
+    &-selected {
+      &:hover::before,
+      &::before {
+        background: @tree-directory-selected-bg;
+      }
+
+      // >>> Switcher
+      .@{tree-prefix-cls}-switcher {
+        color: @tree-directory-selected-color;
+      }
+
+      // >>> Title
+      .@{tree-prefix-cls}-node-content-wrapper {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
+  }
+}

package/dist/Tree/style/index.less

@@ -1,48 +1,87 @@
 @import '../../style/index.less';
+@import '../../Checkbox/style/index.less';
+@import './var.less';
+@import './reset.less';
+@import './checkbox.less';
 
-.ant-tree.ant-tree .ant-tree-treenode {
-  height: 28px;
+@tree-font-size-large: 13px;
+@tree-padding-large: 6px 4px;
+@tree-line-height-large: 20px;
+
+@tree-font-size-default: 12px;
+@tree-padding-default: 4px;
+@tree-line-height-default: 16px;
+.aldCheckboxFn();
+
+.ald-tree-treenode {
+  display: flex;
   align-items: center;
-  padding: 0 12px;
-  width: 100%;
+  font-size: @tree-font-size-default;
+  font-weight: 400;
+  color: #171717;
 
-  &:hover {
-    background-color: #f8f8f8;
+  .ald-tree-draggable-icon {
+    display: inline-flex;
+    align-items: center;
   }
 
-  &.ant-tree-treenode-selected {
-    background-color: #f0f6ff;
+  .ald-tree-switcher {
+    display: inline-flex;
+    align-items: center;
   }
 
-  .ant-tree-switcher {
-    line-height: 16px;
-    height: 16px;
-    width: auto;
-    align-self: center;
+  .ald-tree-node-content-wrapper {
+    padding: 0;
+    flex: 1;
 
-    .ant-tree-switcher-icon {
-      vertical-align: middle;
-    }
-  }
+    .ald-tree-title {
+      padding: @tree-padding-default;
+      line-height: @tree-line-height-default;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #171717;
 
-  .ant-tree-node-content-wrapper {
-    line-height: 16px;
-    font-size: 12px;
-    min-height: 16px;
-    color: @NL0;
-
-    &.ant-tree-node-selected {
-      background: none;
+      .ald-tree-tab-leader {
+        flex: 1;
+        border-top: 1px dashed #dbdbdb;
+        height: 0;
+        margin: 0 4px;
+      }
     }
 
     &:hover {
-      background: none;
+      background: var(--colors-gray-97, #f8f8f8);
+      mix-blend-mode: multiply;
+    }
+
+    &.ald-tree-node-selected {
+      border-radius: 2px;
+      background: var(--colors-blue-100, #f0f6ff);
     }
   }
+}
+
+.ald-tree-large {
+  .ald-tree-treenode {
+    font-size: @tree-font-size-large;
 
-  .ant-tree-indent {
-    .ant-tree-indent-unit {
-      width: 12px;
+    .ald-tree-node-content-wrapper {
+      .ald-tree-title {
+        display: flex;
+        padding: @tree-padding-large;
+        line-height: @tree-line-height-large;
+      }
     }
   }
 }
+
+.ald-tree-treenode-switcher-open .ald-tree-switcher svg {
+  transition: transform 0.2s;
+}
+
+.ald-tree-treenode-switcher-close .ald-tree-switcher svg {
+  transform: rotate(-90deg);
+  transition: transform 0.2s;
+}

package/dist/Tree/style/mixin.less

@@ -0,0 +1,333 @@
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+@tree-motion: ~'@{ant-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: ~'@{ant-prefix}-tree';
+@select-tree-prefix-cls: ~'@{ant-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: 20px;
+@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[];