tntd 3.0.9 → 3.0.10

package/es/title/index.less

@@ -1,10 +1,9 @@
 .tntd-title {
   & {
     position: relative;
-    height: 32px;
-    line-height: 32px;
-    clear: both;
-    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
   &.has-number {
@@ -82,6 +81,7 @@
       transform: rotate(-45deg);
     }
   }
+
   &.is-bold {
     .tntd-title-text {
       h3 {
@@ -89,22 +89,26 @@
       }
     }
   }
-  &.small {
+
+  &.large,&.h1 {
     & {
-      height: 28px;
-      line-height: 28px;
+      height: 40px;
+      line-height: 40px;
     }
     .tntd-title-text {
       h3 {
-        font-size: 14px;
+        font-size: 20px;
       }
       &::before {
-        height: 12px;
-        top: 8px;
+        height: 16px;
+        top: 12px;
+      }
+      .sub-title {
+        font-size: 16px;
       }
     }
   }
-  &.middle {
+  &.middle,&.h2 {
     & {
       height: 36px;
       line-height: 36px;
@@ -115,46 +119,93 @@
       }
       &::before {
         height: 14px;
-        top: 10px;
+        top: 11px;
       }
     }
   }
-  &.large {
+  &.h3,&.h4,&.h5,&.small{
     & {
-      height: 40px;
-      line-height: 40px;
+        height: 22px;
+        line-height: 22px;
+        .tntd-title-text{
+            h3 {
+                font-size: 14px;
+            }
+            .sub-title{
+                font-size: 14px;
+            }
+        }
     }
+  }
+  // 默认h3 和 small  
+  &.h3,&.small {
     .tntd-title-text {
-      h3 {
-        font-size: 20px;
-      }
-      &::before {
-        height: 16px;
-        top: 10px;
-      }
+        &::before {
+            height: 12px;
+            top: 5px;
+        }
+        h3 {
+            font-weight: bold;
+        }
+    }
+  }
+  &.h4 {
+    .tntd-title-text {
+        &::before {
+            display: none;
+        }
+        h3 {
+            font-weight: bold;
+            margin-left:0;
+        }
+    }
+  }
+  &.h5 {
+    .tntd-title-text {
+        &::before {
+            display: none;
+        }
+        h3 {
+            margin-left: 0;
+            font-weight: normal;
+        }
     }
   }
   .tntd-title-text {
     & {
       position: relative;
-      float: left;
+      display: flex;
+      align-items: center;
+      flex:1;
+      min-width: 0;
     }
     h3 {
       font-size: 16px;
       color: @text-color;
       font-weight: normal;
       margin: 0;
-      margin-right: 10px;
-      margin-left: 10px;
-      display: inline-block;
+      margin-left: 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.has-sub-title{
+        max-width: 70%;
+      }
     }
-    span {
+    .sub-title {
       position: relative;
-      top: 1px;
-      font-size: 12px;
+      font-size: 14px;
       color: #8b919e;
-      margin-right: 10px;
-      line-height: 1;
+      max-width: 30%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-left: 8px;
+    }
+    .sub-tip{
+        margin-left: 4px;
+        font-size: 16px;
+        color:@text-color;
     }
     &::before {
       position: absolute;
@@ -164,15 +215,15 @@
       content: '';
       width: 4px;
       height: 12px;
-      margin-right: 8px;
+      margin-right: 4px;
       border-radius: 2px;
     }
   }
   .tntd-title-extra {
     & {
       position: relative;
-      float: right;
-      margin-left: 8px;
+      margin-left: 16px;
+      color: @primary-color;
     }
   }
 }

package/es/tntd-virtual-tree/index.js

@@ -0,0 +1,218 @@
+import _uniq from "lodash/uniq";
+/*
+ * @Descripttion: 基于antd3 tree 部分api实现的tree，增加了虚拟滚动
+ * @Author: 郑泳健
+ * @Date: 2024-07-31 14:46:55
+ * @LastEditors: 郑泳健
+ * @LastEditTime: 2024-08-09 17:51:50
+ */
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import List from 'rc-virtual-list';
+import Icon from '../icon';
+import Ellipsis from '../ellipsis';
+import Empty from '../empty';
+import Checkbox from '../checkbox';
+import { flatTreeData, findNodeDetail, getFullExpandedKeys, getFullCheckedKeys, getNodeParentChoosed, addTreeNodeAttrs, getIndeterminate } from './utils';
+import './index.less';
+const VirtualTree = ({
+  itemHeight,
+  height,
+  filterKey,
+  treeData,
+  checkable,
+  checkStrictly,
+  checkedKeys,
+  defaultExpandAll = true,
+  expandedKeys,
+  fieldNames,
+  titleRender,
+  onCheck,
+  onExpand
+}) => {
+  const ref = React.useRef(null);
+  const expandChangedRef = useRef(0);
+  const checkedChangeRef = useRef(0);
+  // 展开的节点列表
+  const [expandedList, setExpandedList] = useState([]);
+  // checked 节点列表
+  const [checkedList, setCheckedList] = useState([]);
+  // 当前被选中的节点
+  const [choosedValue, setChoosedValue] = useState(undefined);
+  /** 给每个节点增加属性keys，值为其下面所有节点的集合 */
+  const treeDataWithKeys = useMemo(() => {
+    return addTreeNodeAttrs(treeData, fieldNames);
+  }, [treeData, fieldNames]);
+  /** 默认是否全部展开 */
+  const mergeDefaultExpandAll = useMemo(() => {
+    if (Array.isArray(expandedKeys)) {
+      return false;
+    }
+    return defaultExpandAll;
+  }, [defaultExpandAll, expandedKeys]);
+  /** 获取到所有选中的节点，因为checkedKeys可能传入的是最后一级 */
+  useEffect(() => {
+    // 非第一次
+    if (checkedChangeRef.current > 0) {
+      setCheckedList(checkedKeys);
+      return;
+    }
+    if (checkable) {
+      // 如果是受控
+      if (checkStrictly) {
+        setCheckedList(_uniq(Array.isArray(checkedKeys) ? checkedKeys : []));
+        return;
+      }
+      const transCheckedKeys = Array.isArray(checkedKeys) ? checkedKeys.reduce((total, item) => {
+        total.push(item);
+        const {
+          needCheckedChildrenValues
+        } = findNodeDetail(treeDataWithKeys, item) || {};
+        total = [...total, ...needCheckedChildrenValues];
+        return total;
+      }, []) : [];
+      const _checkedKeys = getFullCheckedKeys(treeDataWithKeys, transCheckedKeys);
+      setCheckedList(_uniq(_checkedKeys));
+    }
+  }, [treeDataWithKeys, checkStrictly, checkable, checkedKeys]);
+  useEffect(() => {
+    setExpandedList(expandedKeys);
+  }, [expandedKeys]);
+  /** 初始化获取到所有展开的节点，因为初始化expandedKeys可能传入的是最后一级 */
+  useEffect(() => {
+    if (expandChangedRef.current === 0) {
+      // 展开的节点
+      const transExpandedKeys = Array.isArray(expandedKeys) ? expandedKeys : [];
+      const _expandedKeys = getFullExpandedKeys(treeDataWithKeys, transExpandedKeys, mergeDefaultExpandAll);
+      setExpandedList(_expandedKeys);
+    }
+  }, [treeDataWithKeys, expandedKeys, mergeDefaultExpandAll]);
+  /** 最终渲染的数据 */
+  const renderData = useMemo(() => {
+    return flatTreeData(treeDataWithKeys, filterKey, expandedList);
+  }, [treeDataWithKeys, filterKey, expandedList]);
+  /** 切换展开/收起 */
+  const handleToggle = item => {
+    expandChangedRef.current++;
+    const {
+      value
+    } = item || {};
+    const bool = Array.isArray(expandedList) ? expandedList.includes(value) : false;
+    if (bool) {
+      const list = Array.isArray(expandedList) ? expandedList.filter(i => i !== value) : [];
+      if (onExpand) {
+        onExpand(_uniq(list), {
+          node: item,
+          expanded: !bool
+        });
+        return;
+      }
+      setExpandedList(_uniq(list));
+    } else {
+      const arr = _uniq([...expandedList, value]);
+      if (onExpand) {
+        onExpand(arr, {
+          node: item,
+          expanded: !bool
+        });
+        return;
+      }
+      setExpandedList(arr);
+    }
+  };
+  const handleCheck = (item, isChecked) => {
+    const {
+      value: _value,
+      children,
+      disabled
+    } = item;
+    if (disabled) {
+      return;
+    }
+    checkedChangeRef.current++;
+    // 需要增删的子节点
+    const itemChildrenValues = Array.isArray(children) && !!children.length ? item.needCheckedChildrenValues : [];
+    if (isChecked) {
+      // 需要删除的父节点
+      const itemParentValues = Array.isArray(item.needCheckedSiblingsValue) ? item.needCheckedSiblingsValue.map(i => i.key) : [];
+      // 当前节点所有的父节点
+      const delList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];
+      const _checkedList = checkedList.filter(i => !delList.includes(i));
+      if (onCheck) {
+        onCheck === null || onCheck === void 0 ? void 0 : onCheck(_uniq(_checkedList), item, !isChecked);
+        return;
+      }
+      setCheckedList(_uniq(_checkedList));
+    } else {
+      // 递归循环其上级是否也要被选中
+      const itemParentValues = getNodeParentChoosed(item.needCheckedSiblingsValue, [...checkedList, ...itemChildrenValues, _value]);
+      const addList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];
+      const _checkedList = [...checkedList, ...addList];
+      if (onCheck) {
+        onCheck === null || onCheck === void 0 ? void 0 : onCheck(_uniq(_checkedList), item, !isChecked);
+        return;
+      }
+      setCheckedList(_uniq(_checkedList));
+    }
+  };
+  const handleChoosed = item => {
+    if (item.disabled) {
+      return;
+    }
+    setChoosedValue(item.value);
+  };
+  const defaultRenderItem = item => {
+    return React.createElement(Ellipsis, {
+      title: item.title,
+      widthLimit: '100%'
+    });
+  };
+  return React.createElement("div", {
+    className: "tntd-virtual-tree"
+  }, !Array.isArray(renderData) || !renderData.length ? React.createElement(Empty, {
+    size: "small"
+  }) : React.createElement(List, {
+    ref: ref,
+    height: height || 300,
+    itemHeight: itemHeight || 32,
+    data: renderData
+  }, item => {
+    const {
+      level,
+      children,
+      disabled
+    } = item;
+    const bool = Array.isArray(expandedList) ? expandedList.includes(item.value) : false;
+    // 当前节点半选状态
+    const indeterminateStatus = getIndeterminate(item, checkedList);
+    // 当前节点是否被选中
+    const checkedBingo = Array.isArray(checkedList) ? checkedList.includes(item.value) : false;
+    const isChecked = !checkStrictly || disabled ? checkedBingo && !indeterminateStatus : checkedBingo;
+    const checkBoxAttrs = {
+      className: `${disabled ? 'tntd-virtual-tree-checkbox-disabled' : ''}`,
+      onChange: () => handleCheck(item, isChecked),
+      checked: isChecked
+    };
+    // 状态没有半选模式
+    if (!checkStrictly) {
+      checkBoxAttrs.indeterminate = indeterminateStatus;
+    }
+    return React.createElement("div", {
+      className: `tntd-virtual-tree-item ${disabled ? 'tntd-virtual-tree-item_disabled' : ''}`,
+      style: {
+        paddingLeft: level * 18
+      },
+      key: item.value
+    }, React.createElement("div", {
+      className: "tntd-virtual-tree-item-expand-icon"
+    }, Array.isArray(children) && !!children.length ? React.createElement(Icon, {
+      type: bool ? 'caret-down' : 'caret-right',
+      onClick: () => handleToggle(item)
+    }) : ''), checkable ? React.createElement("div", {
+      className: "tntd-virtual-tree-item-checkbox"
+    }, React.createElement(Checkbox, Object.assign({}, checkBoxAttrs))) : '', React.createElement("div", {
+      className: `tntd-virtual-tree-title ${choosedValue === item.value ? 'tntd-virtual-tree-title_active' : ''}`,
+      onClick: () => handleChoosed(item)
+    }, titleRender ? titleRender(item) : defaultRenderItem(item)));
+  }));
+};
+export default VirtualTree;

package/es/tntd-virtual-tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tntd-virtual-tree/index.jsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EACL,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,SAAS,CAAC;AACjB,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,GAAG,CAAC,EACnB,UAAU,EACV,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,gBAAgB,GAAG,IAAI,EACvB,YAAY,EACZ,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACnC,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACnC,UAAU;IACV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,eAAe;IACf,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,WAAW;IACX,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE5D,iCAAiC;IACjC,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3B,eAAe;IACf,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;YAC/B,OAAO,KAAK,CAAC;SACd;QAED,OAAO,gBAAgB,CAAC;IAC1B,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC;IAErC,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO;QACP,IAAI,gBAAgB,CAAC,OAAO,GAAG,CAAC,EAAE;YAChC,cAAc,CAAC,WAAW,CAAC,CAAC;YAC5B,OAAO;SACR;QAED,IAAI,SAAS,EAAE;YACb,QAAQ;YACR,IAAI,aAAa,EAAE;gBACjB,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACpE,OAAO;aACR;YACD,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;gBACjD,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;oBACjC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACjB,MAAM,EAAE,yBAAyB,EAAE,GAAG,cAAc,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;oBACnF,KAAK,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,yBAAyB,CAAC,CAAC;oBACjD,OAAO,KAAK,CAAC;gBACf,CAAC,EAAE,EAAE,CAAC;gBACR,CAAC,CAAC,EAAE,CAAC;YACP,MAAM,YAAY,GAAG,kBAAkB,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;YAC5E,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,CAAC,OAAO,KAAK,CAAC,EAAE;YAClC,QAAQ;YACR,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1E,MAAM,aAAa,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;YACtG,eAAe,CAAC,aAAa,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE5D,cAAc;IACd,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,YAAY,CAAC,gBAAgB,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhD,cAAc;IACd,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;QAC5B,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;QAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAChF,IAAI,IAAI,EAAE;YACR,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACxF,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;gBACtD,OAAO;aACR;YACD,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7B;aAAM;YACL,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,GAAG,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;YAC3C,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;gBAC/C,OAAO;aACR;YACD,eAAe,CAAC,GAAG,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;QACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACnD,IAAI,QAAQ,EAAE;YACZ,OAAO;SACR;QACD,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC3B,WAAW;QACX,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9G,IAAI,SAAS,EAAE;YACb,WAAW;YACX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7H,aAAa;YACb,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,EAAE,GAAG,gBAAgB,EAAE,MAAM,CAAC,CAAC;YAChG,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YACrE,IAAI,OAAO,EAAE;gBACX,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC;gBAChD,OAAO;aACR;YAED,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;SACpC;aAAM;YACL,iBAAiB;YACjB,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,GAAG,WAAW,EAAE,GAAG,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;YAC9H,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,EAAE,GAAG,gBAAgB,EAAE,MAAM,CAAC,CAAC;YAChG,MAAM,YAAY,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC,CAAC;YAElD,IAAI,OAAO,EAAE;gBACX,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC;gBAChD,OAAO;aACR;YACD,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,EAAE;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QACD,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,EAAE;QACjC,OAAO,oBAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,GAAI,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAClD,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,GAAG,CACvB,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,UAAU,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,IAClF,CAAC,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACrF,WAAW;QACX,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAChE,YAAY;QACZ,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC3F,MAAM,SAAS,GAAG,CAAC,aAAa,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAC;QAEnG,MAAM,aAAa,GAAG;YACpB,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YACrE,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC;YAC5C,OAAO,EAAE,SAAS;SACnB,CAAC;QACF,WAAW;QACX,IAAI,CAAC,aAAa,EAAE;YAClB,aAAa,CAAC,aAAa,GAAG,mBAAmB,CAAC;SACnD;QACD,OAAO,CACL,6BACE,SAAS,EAAE,0BAA0B,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,EACxF,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,GAAG,EAAE,EAAE,EAClC,GAAG,EAAE,IAAI,CAAC,KAAK;YACf,6BAAK,SAAS,EAAC,oCAAoC,IAChD,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAC9C,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GAAI,CACvF,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG;YAEL,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,oBAAC,QAAQ,oBAAK,aAAa,EAAI,CAC3B,CACP,CAAC,CAAC,CAAC,CACF,EAAE,CACH;YAED,6BACE,SAAS,EAAE,2BAA2B,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EAAE,EAC3G,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IACjC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CACtD,CACF,CACP,CAAC;IACJ,CAAC,CACI,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["/*\n * @Descripttion: 基于antd3 tree 部分api实现的tree，增加了虚拟滚动\n * @Author: 郑泳健\n * @Date: 2024-07-31 14:46:55\n * @LastEditors: 郑泳健\n * @LastEditTime: 2024-08-09 17:51:50\n */\nimport React, { useState, useMemo, useEffect, useRef } from 'react';\nimport List from 'rc-virtual-list';\nimport { uniq } from 'lodash';\nimport Icon from '../icon';\nimport Ellipsis from '../ellipsis';\nimport Empty from '../empty';\nimport Checkbox from '../checkbox';\nimport {\n  flatTreeData,\n  findNodeDetail,\n  getFullExpandedKeys,\n  getFullCheckedKeys,\n  getNodeParentChoosed,\n  addTreeNodeAttrs,\n  getIndeterminate\n} from './utils';\nimport './index.less';\n\nconst VirtualTree = ({\n  itemHeight,\n  height,\n  filterKey,\n  treeData,\n  checkable,\n  checkStrictly,\n  checkedKeys,\n  defaultExpandAll = true,\n  expandedKeys,\n  fieldNames,\n  titleRender,\n  onCheck,\n  onExpand\n}) => {\n  const ref = React.useRef(null);\n  const expandChangedRef = useRef(0);\n  const checkedChangeRef = useRef(0);\n  // 展开的节点列表\n  const [expandedList, setExpandedList] = useState([]);\n  // checked 节点列表\n  const [checkedList, setCheckedList] = useState([]);\n  // 当前被选中的节点\n  const [choosedValue, setChoosedValue] = useState(undefined);\n\n  /** 给每个节点增加属性keys，值为其下面所有节点的集合 */\n  const treeDataWithKeys = useMemo(() => {\n    return addTreeNodeAttrs(treeData, fieldNames);\n  }, [treeData, fieldNames]);\n\n  /** 默认是否全部展开 */\n  const mergeDefaultExpandAll = useMemo(() => {\n    if (Array.isArray(expandedKeys)) {\n      return false;\n    }\n\n    return defaultExpandAll;\n  }, [defaultExpandAll, expandedKeys]);\n\n  /** 获取到所有选中的节点，因为checkedKeys可能传入的是最后一级 */\n  useEffect(() => {\n    // 非第一次\n    if (checkedChangeRef.current > 0) {\n      setCheckedList(checkedKeys);\n      return;\n    }\n\n    if (checkable) {\n      // 如果是受控\n      if (checkStrictly) {\n        setCheckedList(uniq(Array.isArray(checkedKeys) ? checkedKeys : []));\n        return;\n      }\n      const transCheckedKeys = Array.isArray(checkedKeys)\n        ? checkedKeys.reduce((total, item) => {\n            total.push(item);\n            const { needCheckedChildrenValues } = findNodeDetail(treeDataWithKeys, item) || {};\n            total = [...total, ...needCheckedChildrenValues];\n            return total;\n          }, [])\n        : [];\n      const _checkedKeys = getFullCheckedKeys(treeDataWithKeys, transCheckedKeys);\n      setCheckedList(uniq(_checkedKeys));\n    }\n  }, [treeDataWithKeys, checkStrictly, checkable, checkedKeys]);\n\n  useEffect(() => {\n    setExpandedList(expandedKeys);\n  }, [expandedKeys]);\n\n  /** 初始化获取到所有展开的节点，因为初始化expandedKeys可能传入的是最后一级 */\n  useEffect(() => {\n    if (expandChangedRef.current === 0) {\n      // 展开的节点\n      const transExpandedKeys = Array.isArray(expandedKeys) ? expandedKeys : [];\n      const _expandedKeys = getFullExpandedKeys(treeDataWithKeys, transExpandedKeys, mergeDefaultExpandAll);\n      setExpandedList(_expandedKeys);\n    }\n  }, [treeDataWithKeys, expandedKeys, mergeDefaultExpandAll]);\n\n  /** 最终渲染的数据 */\n  const renderData = useMemo(() => {\n    return flatTreeData(treeDataWithKeys, filterKey, expandedList);\n  }, [treeDataWithKeys, filterKey, expandedList]);\n\n  /** 切换展开/收起 */\n  const handleToggle = (item) => {\n    expandChangedRef.current++;\n    const { value } = item || {};\n    const bool = Array.isArray(expandedList) ? expandedList.includes(value) : false;\n    if (bool) {\n      const list = Array.isArray(expandedList) ? expandedList.filter((i) => i !== value) : [];\n      if (onExpand) {\n        onExpand(uniq(list), { node: item, expanded: !bool });\n        return;\n      }\n      setExpandedList(uniq(list));\n    } else {\n      const arr = uniq([...expandedList, value]);\n      if (onExpand) {\n        onExpand(arr, { node: item, expanded: !bool });\n        return;\n      }\n      setExpandedList(arr);\n    }\n  };\n\n  const handleCheck = (item, isChecked) => {\n    const { value: _value, children, disabled } = item;\n    if (disabled) {\n      return;\n    }\n    checkedChangeRef.current++;\n    // 需要增删的子节点\n    const itemChildrenValues = Array.isArray(children) && !!children.length ? item.needCheckedChildrenValues : [];\n    if (isChecked) {\n      // 需要删除的父节点\n      const itemParentValues = Array.isArray(item.needCheckedSiblingsValue) ? item.needCheckedSiblingsValue.map((i) => i.key) : [];\n      // 当前节点所有的父节点\n      const delList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];\n      const _checkedList = checkedList.filter((i) => !delList.includes(i));\n      if (onCheck) {\n        onCheck?.(uniq(_checkedList), item, !isChecked);\n        return;\n      }\n\n      setCheckedList(uniq(_checkedList));\n    } else {\n      // 递归循环其上级是否也要被选中\n      const itemParentValues = getNodeParentChoosed(item.needCheckedSiblingsValue, [...checkedList, ...itemChildrenValues, _value]);\n      const addList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];\n      const _checkedList = [...checkedList, ...addList];\n\n      if (onCheck) {\n        onCheck?.(uniq(_checkedList), item, !isChecked);\n        return;\n      }\n      setCheckedList(uniq(_checkedList));\n    }\n  };\n\n  const handleChoosed = (item) => {\n    if (item.disabled) {\n      return;\n    }\n    setChoosedValue(item.value);\n  };\n\n  const defaultRenderItem = (item) => {\n    return <Ellipsis title={item.title} widthLimit={'100%'} />;\n  };\n\n  return (\n    <div className=\"tntd-virtual-tree\">\n      {!Array.isArray(renderData) || !renderData.length ? (\n        <Empty size=\"small\" />\n      ) : (\n        <List ref={ref} height={height || 300} itemHeight={itemHeight || 32} data={renderData}>\n          {(item) => {\n            const { level, children, disabled } = item;\n            const bool = Array.isArray(expandedList) ? expandedList.includes(item.value) : false;\n            // 当前节点半选状态\n            const indeterminateStatus = getIndeterminate(item, checkedList);\n            // 当前节点是否被选中\n            const checkedBingo = Array.isArray(checkedList) ? checkedList.includes(item.value) : false;\n            const isChecked = !checkStrictly || disabled ? checkedBingo && !indeterminateStatus : checkedBingo;\n\n            const checkBoxAttrs = {\n              className: `${disabled ? 'tntd-virtual-tree-checkbox-disabled' : ''}`,\n              onChange: () => handleCheck(item, isChecked),\n              checked: isChecked\n            };\n            // 状态没有半选模式\n            if (!checkStrictly) {\n              checkBoxAttrs.indeterminate = indeterminateStatus;\n            }\n            return (\n              <div\n                className={`tntd-virtual-tree-item ${disabled ? 'tntd-virtual-tree-item_disabled' : ''}`}\n                style={{ paddingLeft: level * 18 }}\n                key={item.value}>\n                <div className=\"tntd-virtual-tree-item-expand-icon\">\n                  {Array.isArray(children) && !!children.length ? (\n                    <Icon type={bool ? 'caret-down' : 'caret-right'} onClick={() => handleToggle(item)} />\n                  ) : (\n                    ''\n                  )}\n                </div>\n\n                {checkable ? (\n                  <div className=\"tntd-virtual-tree-item-checkbox\">\n                    <Checkbox {...checkBoxAttrs} />\n                  </div>\n                ) : (\n                  ''\n                )}\n\n                <div\n                  className={`tntd-virtual-tree-title ${choosedValue === item.value ? 'tntd-virtual-tree-title_active' : ''}`}\n                  onClick={() => handleChoosed(item)}>\n                  {titleRender ? titleRender(item) : defaultRenderItem(item)}\n                </div>\n              </div>\n            );\n          }}\n        </List>\n      )}\n    </div>\n  );\n};\n\nexport default VirtualTree;\n"]}

package/es/tntd-virtual-tree/index.less

@@ -0,0 +1,99 @@
+.tntd-virtual-tree{
+  padding: 0;
+  white-space: nowrap;
+  .tntd-virtual-tree-item{
+    // display: flex;
+    border-radius: var(--border-radius-sm);
+    color: #17233d;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 24px;
+    padding: 4px 0;
+    font-size: 14px;
+    box-sizing: border-box;
+
+    .tntd-virtual-tree-item-expand-icon{
+      display: inline-block;
+      width: 18px;
+      padding-left: 3px;
+      margin-right: 4px;
+
+      .anticon-caret-down,.anticon-caret-right {
+        vertical-align: middle;
+        font-size: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    .tntd-virtual-tree-item-checkbox{
+      display: inline-block;
+      margin: 0 4px;
+      vertical-align: middle;
+    }
+
+    .tntd-virtual-tree-title{
+      padding: 0 2px;
+      flex: 1;
+      overflow: hidden;
+      display: inline-block;
+      vertical-align: middle;
+
+      &:hover{
+        background-color: var(--blue-1);
+      }
+
+      &_active{
+        background-color: var(--blue-2) !important;
+        border-radius: @border-radius-base;
+      }
+    }
+
+    &.tntd-virtual-tree-item_disabled{
+      color: rgba(0, 0, 0, 0.25);
+      cursor: not-allowed;
+
+      .tntd-virtual-tree-title_checkable{
+        &:hover{
+          background-color: inherit !important;
+        }
+      }
+    }
+
+    .tntd-virtual-tree-checkbox-disabled{
+      color: var(--text-color-tertiary);
+      cursor: not-allowed;
+
+      .ant-checkbox{
+        &::after{
+          border-color: #c9d2dd;
+        }
+      }
+
+      .ant-checkbox-input{
+        cursor: not-allowed;
+      }
+
+      .ant-checkbox-inner{
+        background-color: #f1f2f5;
+        border-color: #c9d2dd !important;
+        
+        &::after{
+          border-color: rgba(0, 0, 0, 0.25);
+        }
+      }
+
+      .ant-checkbox-indeterminate{
+        .ant-checkbox-inner{
+          &::after{
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.tntd-rc-select-dropdown-hidden{
+  display: block;
+}