@aloudata/aloudata-design 2.0.0-beta.9 → 2.0.1

package/dist/Tree/demo/filter/index.js

@@ -0,0 +1,64 @@
+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; }
+import { App, Input, Tree } from "../../..";
+import React from 'react';
+export default (function () {
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterKey = _React$useState2[0],
+    setFilterKey = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    expandedKeys = _React$useState4[0],
+    setExpandedKeys = _React$useState4[1];
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Input, {
+    onChange: function onChange(v) {
+      setFilterKey(v.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Tree, {
+    size: "large",
+    showIcon: true,
+    icon: 'icon',
+    filterTreeNode: function filterTreeNode(node) {
+      var title = node.title;
+      if (typeof title === 'string') {
+        return title.includes(filterKey);
+      }
+      return false;
+    },
+    highlightKeywords: filterKey,
+    expandedKeys: expandedKeys,
+    onExpand: function onExpand(keys) {
+      setExpandedKeys(keys);
+    },
+    treeData: [{
+      title: 'Parent 1',
+      key: '0-0',
+      children: [{
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [{
+          title: 'leaf',
+          key: '0-0-0-0',
+          isLeaf: true
+        }, {
+          title: 'leaf',
+          key: '0-0-0-1',
+          isLeaf: true
+        }]
+      }, {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{
+          title: 'ssss',
+          key: '0-0-1-0',
+          disabled: true
+        }]
+      }]
+    }]
+  }));
+});

package/dist/Tree/style/checkbox.less

@@ -1,7 +1,6 @@
-.aldCheckboxFn(@checkbox-prefix-cls: ~'ald-tree-checkbox') {
-  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
+.aldCheckboxFn() {
   // 一般状态
-  .@{checkbox-prefix-cls} {
+  .ald-tree-checkbox {
     .reset-component();
 
     position: relative;
@@ -22,11 +21,7 @@
       animation: ald-checkbox-effect 0.36s ease-in-out;
       animation-fill-mode: backwards;
       content: '';
-    }
-
-    &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
-      visibility: hidden;
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
 
     &-inner {
@@ -38,7 +33,8 @@
       height: @checkbox-size;
       direction: ltr;
       background-color: @checkbox-check-bg;
-      border: 1px solid #dbdbdb;
+      border: 1px solid
+        var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
       border-radius: @checkbox-border-radius;
       border-collapse: separate;
       transition: all 0.3s;
@@ -54,7 +50,7 @@
         display: table;
         width: @check-width;
         height: @check-height;
-        border: 2px solid @checkbox-check-color;
+        border: 2px solid;
         border-top: 0;
         border-left: 0;
         transform: rotate(45deg) scale(0) translate(-50%, -50%);
@@ -62,6 +58,21 @@
         transition: all 0.1s @ease-in-back, opacity 0.1s;
         content: ' ';
       }
+
+      &:hover {
+        border-color: var(
+          --alias-colors-border-accent-gray-subtle-hover,
+          #9ca3af
+        );
+      }
+
+      &:active {
+        border-color: var(
+          --alias-colors-border-accent-gray-subtle-default,
+          #d1d5db
+        );
+        background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+      }
     }
 
     &-input {
@@ -76,10 +87,10 @@
   }
 
   // 选中状态
-  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
+  .ald-tree-checkbox-checked .ald-tree-checkbox-inner::after {
     position: absolute;
     display: table;
-    border: 2px solid @checkbox-color;
+    border: 2px solid var(--alias-colors-icon-inverse-default, #fff);
     border-top: 0;
     border-left: 0;
     transform: rotate(45deg) scale(1) translate(-50%, -50%);
@@ -88,30 +99,31 @@
     content: ' ';
   }
 
-  .@{checkbox-prefix-cls}-checked {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: #f8f8f8;
+  .ald-tree-checkbox-checked {
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
   }
 
-  .@{checkbox-prefix-cls}-disabled {
+  .ald-tree-checkbox-disabled {
     cursor: initial;
 
-    &.@{checkbox-prefix-cls}-checked {
-      .@{checkbox-inner-prefix-cls}::after {
-        border-color: @disabled-color;
+    &.ald-tree-checkbox-checked {
+      .ald-tree-checkbox-inner::after {
+        border-color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
         animation-name: none;
       }
     }
 
-    .@{checkbox-prefix-cls}-input {
+    .ald-tree-checkbox-input {
       cursor: initial;
       pointer-events: none;
     }
 
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @input-disabled-bg;
-      // border-color: @border-color-base !important;
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      border-color: var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1));
 
       &::after {
         border-color: @input-disabled-bg;
@@ -127,12 +139,12 @@
 
     // Not show highlight border of checkbox when disabled
     &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+    .ald-tree-checkbox-wrapper:hover &::after {
       visibility: hidden;
     }
   }
 
-  .@{checkbox-prefix-cls}-wrapper {
+  .ald-tree-checkbox-wrapper {
     .reset-component();
 
     display: inline-flex;
@@ -147,7 +159,7 @@
       content: '\a0';
     }
 
-    &.@{checkbox-prefix-cls}-wrapper-disabled {
+    &.ald-tree-checkbox-wrapper-disabled {
       cursor: initial;
     }
 
@@ -163,12 +175,12 @@
     }
   }
 
-  .@{checkbox-prefix-cls} + span {
+  .ald-tree-checkbox + span {
     padding-right: 8px;
     padding-left: 8px;
   }
 
-  .@{checkbox-prefix-cls}-group {
+  .ald-tree-checkbox-group {
     .reset-component();
 
     display: inline-block;
@@ -187,11 +199,13 @@
   }
 
   // 半选状态
-  .@{checkbox-prefix-cls}-indeterminate {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @checkbox-check-bg;
+  .ald-tree-checkbox-indeterminate {
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
-    .@{checkbox-inner-prefix-cls}::after {
+
+    .ald-tree-checkbox-inner::after {
       @indeterminate-width: @checkbox-size - 8px;
       @indeterminate-height: @checkbox-size - 14px;
 
@@ -199,16 +213,23 @@
       left: 50%;
       width: @indeterminate-width;
       height: @indeterminate-height;
-      background-color: @checkbox-color;
+      background-color: var(--alias-colors-icon-inverse-default, #fff);
       border: 0;
       transform: translate(-50%, -50%) scale(1);
       opacity: 1;
       content: ' ';
     }
 
-    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
-      background-color: @disabled-color;
-      border-color: @disabled-color;
+    &.ald-tree-checkbox-disabled .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      border-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+
+      &::after {
+        background-color: var(
+          --alias-colors-icon-disabled,
+          rgba(0, 0, 0, 0.25)
+        );
+      }
     }
   }
 }

package/dist/Tree/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/index.less';
 @import '../../Checkbox/style/index.less';
+@import '../../HighlightText/style/index.less';
 @import './var.less';
 @import './rtl.less';
 @import './mixin.less';
@@ -26,9 +27,22 @@
     padding: 3px 0;
   }
 
-  .ald-tree-treenode.ald-tree-treenode-draggable {
-    .ald-tree-draggable-icon {
-      opacity: 1;
+  .ald-tree-treenode {
+    &.ald-tree-treenode-draggable {
+      .ald-tree-draggable-icon {
+        opacity: 1;
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
+  }
+
+  &.ald-tree-no-children {
+    .ald-tree-switcher {
+      display: none;
     }
   }
 }
@@ -40,6 +54,10 @@
   font-weight: 400;
   color: var(--alias-colors-text-default, #1f2937);
 
+  &.ald-tree-node-disabled {
+    display: none;
+  }
+
   .ald-tree-draggable-icon {
     display: inline-flex;
     align-items: center;
@@ -56,6 +74,10 @@
     }
   }
 
+  .ald-tree-checkbox {
+    margin: 0;
+  }
+
   .ald-tree-node-content-wrapper {
     padding: @tree-padding-default;
     line-height: @tree-line-height-default;
@@ -82,7 +104,7 @@
 
       .ald-tree-tab-leader {
         flex: 1;
-        border-top: 1px dashed #dbdbdb;
+        border-top: 1px dashed var(--alias-colors-border-default);
         height: 0;
         margin: 0 4px;
       }
@@ -90,7 +112,6 @@
 
     &:hover {
       background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
-      mix-blend-mode: multiply;
     }
 
     &.ald-tree-node-selected {
@@ -139,9 +160,9 @@
 
 .ald-tree-treenode-switcher-open .ald-tree-switcher svg {
   transition: transform 0.2s;
+  transform: rotate(90deg);
 }
 
 .ald-tree-treenode-switcher-close .ald-tree-switcher svg {
-  transform: rotate(-90deg);
   transition: transform 0.2s;
 }

package/dist/Tree/style/mixin.less

@@ -85,8 +85,12 @@
     &-disabled {
       // >>> Title
       .@{custom-tree-prefix-cls}-node-content-wrapper {
-        color: @disabled-color;
-        cursor: not-allowed;
+        color: var(--alias-colors-text-default, #1f2937);
+        cursor: default;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
 
         &:hover {
           background: transparent;
@@ -98,10 +102,10 @@
       background: @tree-node-hover-bg;
     }
 
-    &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
-      color: @tree-node-highlight-color;
-      font-weight: 500;
-    }
+    // &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
+    //   // font-weight: 500;
+    //   // color: var(--alias-colors-text-danger);
+    // }
 
     &-draggable {
       .@{custom-tree-prefix-cls}-draggable-icon {

package/dist/Tree/style/var.less

@@ -29,7 +29,7 @@
 @normal-color: #d9d9d9;
 @border-radius-base: 2px;
 @tree-node-selected-bg: @primary-2;
-@checkbox-color: @primary-color;
+@checkbox-color: var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
 @checkbox-border-radius: @border-radius-sm;
 @checkbox-check-bg: transparent;
 @checkbox-border-width: @border-width-base;