tntd 3.0.7 → 3.0.9-beta.1

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

@@ -0,0 +1,242 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
+var _react = _interopRequireWildcard(require("react"));
+var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _ellipsis = _interopRequireDefault(require("../ellipsis"));
+var _empty = _interopRequireDefault(require("../empty"));
+var _checkbox = _interopRequireDefault(require("../checkbox"));
+var _utils = require("./utils");
+require("./index.less");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
+ * @Descripttion: 基于antd3 tree 部分api实现的tree，增加了虚拟滚动
+ * @Author: 郑泳健
+ * @Date: 2024-07-31 14:46:55
+ * @LastEditors: 郑泳健
+ * @LastEditTime: 2024-08-08 16:22:40
+ */
+var VirtualTree = function VirtualTree(_ref) {
+  var itemHeight = _ref.itemHeight,
+    height = _ref.height,
+    filterKey = _ref.filterKey,
+    treeData = _ref.treeData,
+    checkable = _ref.checkable,
+    checkStrictly = _ref.checkStrictly,
+    checkedKeys = _ref.checkedKeys,
+    _ref$defaultExpandAll = _ref.defaultExpandAll,
+    defaultExpandAll = _ref$defaultExpandAll === void 0 ? true : _ref$defaultExpandAll,
+    expandedKeys = _ref.expandedKeys,
+    fieldNames = _ref.fieldNames,
+    titleRender = _ref.titleRender,
+    onCheck = _ref.onCheck,
+    onExpand = _ref.onExpand;
+  var ref = _react["default"].useRef(null);
+  // 展开的节点列表
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedList = _useState2[0],
+    setExpandedList = _useState2[1];
+  // checked 节点列表
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkedList = _useState4[0],
+    setCheckedList = _useState4[1];
+  // 当前被选中的节点
+  var _useState5 = (0, _react.useState)(undefined),
+    _useState6 = _slicedToArray(_useState5, 2),
+    choosedValue = _useState6[0],
+    setChoosedValue = _useState6[1];
+  var expandChangedRef = (0, _react.useRef)(0);
+  /** 给每个节点增加属性keys，值为其下面所有节点的集合 */
+  var treeDataWithKeys = (0, _react.useMemo)(function () {
+    return (0, _utils.addTreeNodeAttrs)(treeData, fieldNames);
+  }, [treeData, fieldNames]);
+  /** 默认是否全部展开 */
+  var mergeDefaultExpandAll = (0, _react.useMemo)(function () {
+    if (Array.isArray(expandedKeys)) {
+      return false;
+    }
+    return defaultExpandAll;
+  }, [defaultExpandAll, expandedKeys]);
+  /** 获取到所有选中的节点，因为checkedKeys可能传入的是最后一级 */
+  (0, _react.useEffect)(function () {
+    if (checkable) {
+      var transCheckedKeys = Array.isArray(checkedKeys) ? checkedKeys : [];
+      // 如果是受控
+      if (checkStrictly) {
+        setCheckedList((0, _uniq2["default"])(transCheckedKeys));
+        return;
+      }
+      var _checkedKeys = (0, _utils.getFullCheckedKeys)(treeDataWithKeys, transCheckedKeys);
+      setCheckedList((0, _uniq2["default"])(_checkedKeys));
+    }
+  }, [treeDataWithKeys, checkStrictly, checkable, checkedKeys]);
+  (0, _react.useEffect)(function () {
+    setExpandedList(expandedKeys);
+  }, [expandedKeys]);
+  /** 初始化获取到所有展开的节点，因为初始化expandedKeys可能传入的是最后一级 */
+  (0, _react.useEffect)(function () {
+    if (expandChangedRef.current === 0) {
+      // 展开的节点
+      var transExpandedKeys = Array.isArray(expandedKeys) ? expandedKeys : [];
+      var _expandedKeys = (0, _utils.getFullExpandedKeys)(treeDataWithKeys, transExpandedKeys, mergeDefaultExpandAll);
+      setExpandedList(_expandedKeys);
+    }
+  }, [treeDataWithKeys, expandedKeys, mergeDefaultExpandAll]);
+  /** 最终渲染的数据 */
+  var renderData = (0, _react.useMemo)(function () {
+    return (0, _utils.flatTreeData)(treeDataWithKeys, filterKey, expandedList);
+  }, [treeDataWithKeys, filterKey, expandedList]);
+  /** 切换展开/收起 */
+  var handleToggle = function handleToggle(item) {
+    expandChangedRef.current++;
+    var _ref2 = item || {},
+      value = _ref2.value;
+    var bool = Array.isArray(expandedList) ? expandedList.includes(value) : false;
+    if (bool) {
+      var list = Array.isArray(expandedList) ? expandedList.filter(function (i) {
+        return i !== value;
+      }) : [];
+      if (onExpand) {
+        onExpand((0, _uniq2["default"])(list), {
+          node: item,
+          expanded: !bool
+        });
+        return;
+      }
+      setExpandedList((0, _uniq2["default"])(list));
+    } else {
+      var arr = (0, _uniq2["default"])([].concat(_toConsumableArray(expandedList), [value]));
+      if (onExpand) {
+        onExpand(arr, {
+          node: item,
+          expanded: !bool
+        });
+        return;
+      }
+      setExpandedList(arr);
+    }
+  };
+  var handleCheck = function handleCheck(item, isChecked) {
+    var _value = item.value,
+      children = item.children,
+      disabled = item.disabled;
+    if (disabled) {
+      return;
+    }
+    if (checkable) {
+      // 需要增删的子节点
+      var itemChildrenValues = Array.isArray(children) && !!children.length ? item.childrenValues : [];
+      if (isChecked) {
+        // 需要删除的父节点
+        var itemParentValues = Array.isArray(item.parentsValues) && !!item.parentsValues.length ? item.parentsValues : [];
+        // 当前节点所有的父节点
+        var delList = checkStrictly ? [_value] : [].concat(_toConsumableArray(itemChildrenValues), _toConsumableArray(itemParentValues), [_value]);
+        var _checkedList = checkedList.filter(function (i) {
+          return !delList.includes(i);
+        });
+        if (onCheck) {
+          onCheck === null || onCheck === void 0 ? void 0 : onCheck((0, _uniq2["default"])(_checkedList), item, !isChecked);
+          return;
+        }
+        setCheckedList((0, _uniq2["default"])(_checkedList));
+      } else {
+        // 递归循环其上级是否也要被选中
+        var _itemParentValues = (0, _utils.getNodeParentChoosed)(item.parentsValues, item.siblingsValue, [].concat(_toConsumableArray(checkedList), [_value]));
+        var addList = checkStrictly ? [_value] : [].concat(_toConsumableArray(itemChildrenValues), _toConsumableArray(_itemParentValues), [_value]);
+        var _checkedList2 = [].concat(_toConsumableArray(checkedList), _toConsumableArray(addList));
+        if (onCheck) {
+          onCheck === null || onCheck === void 0 ? void 0 : onCheck((0, _uniq2["default"])(_checkedList2), item, !isChecked);
+          return;
+        }
+        setCheckedList((0, _uniq2["default"])(_checkedList2));
+      }
+    } else {
+      setChoosedValue(_value);
+    }
+  };
+  var defaultRenderItem = function defaultRenderItem(item) {
+    return _react["default"].createElement(_ellipsis["default"], {
+      title: item.title,
+      widthLimit: '100%'
+    });
+  };
+  return _react["default"].createElement("div", {
+    className: "tntd-virtual-tree"
+  }, !Array.isArray(renderData) || !renderData.length ? _react["default"].createElement(_empty["default"], {
+    size: "small"
+  }) : _react["default"].createElement(_rcVirtualList["default"], {
+    ref: ref,
+    height: height || 300,
+    itemHeight: itemHeight || 32,
+    data: renderData
+  }, function (item) {
+    var level = item.level,
+      children = item.children,
+      disabled = item.disabled;
+    var bool = Array.isArray(expandedList) ? expandedList.includes(item.value) : false;
+    // 当前节点半选状态
+    var indeterminateStatus = (0, _utils.getIndeterminate)(item, checkedList);
+    // 当前节点是否被选中
+    var checkedBingo = Array.isArray(checkedList) ? checkedList.includes(item.value) : false;
+    var isChecked = !checkStrictly ? checkedBingo && !indeterminateStatus : checkedBingo;
+    var checkBoxAttrs = {
+      className: "".concat(disabled ? 'tntd-virtual-tree-checkbox-disabled' : ''),
+      onChange: function onChange() {
+        return handleCheck(item, isChecked);
+      },
+      checked: isChecked
+    };
+    // 状态没有半选模式
+    if (!checkStrictly) {
+      checkBoxAttrs.indeterminate = indeterminateStatus;
+    }
+    return _react["default"].createElement("div", {
+      className: "tntd-virtual-tree-item ".concat(disabled ? 'tntd-virtual-tree-item_disabled' : ''),
+      style: {
+        paddingLeft: level * 18
+      },
+      key: item.value
+    }, _react["default"].createElement("div", {
+      style: {
+        width: 18,
+        paddingLeft: 3,
+        marginTop: -2,
+        marginRight: 4
+      }
+    }, Array.isArray(children) && !!children.length ? _react["default"].createElement(_icon["default"], {
+      type: bool ? 'caret-down' : 'caret-right',
+      onClick: function onClick() {
+        return handleToggle(item);
+      }
+    }) : ''), checkable ? _react["default"].createElement("div", {
+      style: {
+        margin: '0 4px'
+      }
+    }, _react["default"].createElement(_checkbox["default"], Object.assign({}, checkBoxAttrs))) : '', _react["default"].createElement("div", {
+      className: "tntd-virtual-tree-title ".concat(checkable ? 'tntd-virtual-tree-title_checkable' : '', " ").concat(choosedValue === item.value ? 'tntd-virtual-tree-title_active' : ''),
+      onClick: function onClick() {
+        return handleCheck(item, isChecked);
+      }
+    }, titleRender ? titleRender(item) : defaultRenderItem(item)));
+  }));
+};
+var _default = exports["default"] = VirtualTree;

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tntd-virtual-tree/index.jsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * @Descripttion: 基于antd3 tree 部分api实现的tree，增加了虚拟滚动\n * @Author: 郑泳健\n * @Date: 2024-07-31 14:46:55\n * @LastEditors: 郑泳健\n * @LastEditTime: 2024-08-08 16:22:40\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 { flatTreeData, getFullExpandedKeys, getFullCheckedKeys, getNodeParentChoosed, addTreeNodeAttrs, getIndeterminate } 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  // 展开的节点列表\n  const [expandedList, setExpandedList] = useState([]);\n  // checked 节点列表\n  const [checkedList, setCheckedList] = useState([]);\n  // 当前被选中的节点\n  const [choosedValue, setChoosedValue] = useState(undefined);\n  const expandChangedRef = useRef(0)\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    if (checkable) {\n      const transCheckedKeys = Array.isArray(checkedKeys) ? checkedKeys : [];\n      // 如果是受控\n      if (checkStrictly) {\n        setCheckedList(uniq(transCheckedKeys));\n        return;\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    if (checkable) {\n      // 需要增删的子节点\n      const itemChildrenValues = Array.isArray(children) && !!children.length ? item.childrenValues : [];\n\n      if (isChecked) {\n        // 需要删除的父节点\n        const itemParentValues = Array.isArray(item.parentsValues) && !!item.parentsValues.length ? item.parentsValues : [];\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        setCheckedList(uniq(_checkedList));\n      } else {\n        // 递归循环其上级是否也要被选中\n        const itemParentValues = getNodeParentChoosed(item.parentsValues, item.siblingsValue, [...checkedList, _value]);\n        const addList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];\n        const _checkedList = [...checkedList, ...addList];\n        if (onCheck) {\n          onCheck?.(uniq(_checkedList), item, !isChecked);\n          return;\n        }\n        setCheckedList(uniq(_checkedList));\n      }\n    }else {\n      setChoosedValue(_value);\n    }\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 ? 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 className={`tntd-virtual-tree-item ${disabled ? 'tntd-virtual-tree-item_disabled' : ''}`} style={{ paddingLeft: level * 18 }} key={item.value}>\n                <div style={{ width: 18, paddingLeft: 3, marginTop: -2, marginRight: 4 }}>\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 style={{ margin: '0 4px' }}>\n                    <Checkbox {...checkBoxAttrs} />\n                  </div>\n                ) : (\n                  ''\n                )}\n\n                <div\n                  className={`tntd-virtual-tree-title ${checkable ? 'tntd-virtual-tree-title_checkable' : ''} ${\n                    choosedValue === item.value ? 'tntd-virtual-tree-title_active' : ''\n                  }`}\n                  onClick={() => handleCheck(item, isChecked)}>\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/lib/tntd-virtual-tree/index.less

@@ -0,0 +1,86 @@
+.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_disabled{
+      color: rgba(0, 0, 0, 0.25);
+      cursor: not-allowed;
+
+      .tntd-virtual-tree-title_checkable{
+        &:hover{
+          background-color: inherit !important;
+        }
+      }
+    }
+
+    .anticon-caret-down,.anticon-caret-right {
+      vertical-align: middle;
+      font-size: 16px;
+      margin-right: 4px;
+    }
+
+    .tntd-virtual-tree-title{
+      padding: 0 2px;
+      flex: 1;
+      overflow: hidden;
+
+      &.tntd-virtual-tree-title_checkable{
+        &:hover{
+          background-color: var(--blue-1);
+        }
+      }
+
+      &_active{
+        background-color: var(--blue-2);
+        border-radius: @border-radius-base;
+      }
+    }
+
+    .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;
+}

package/lib/tntd-virtual-tree/utils.d.ts

@@ -0,0 +1,15 @@
+export function addTreeNodeAttrs(treeData: any, fieldNames?: {
+    title: string;
+    value: string;
+    children: string;
+    disabled: string;
+}, parentsValues?: any[], siblingsValue?: {}): any[];
+export function getNodeStr(node: any, key: any, result?: any[]): any[];
+export function getNodeValuess(node: any, widthSelf?: any, result?: any): any;
+export function flatTreeData(treeData: any, filterKey?: string, expandedKeys?: any, treeDefaultExpandAll?: any, level?: any, result?: any): any;
+export function getFullExpandedKeys(treeDataWithKeys: any, treeExpandedKeys: any, treeDefaultExpandAll: any, result?: any): any;
+export function getFullCheckedKeys(treeDataWithKeys: any, transCheckedKeys: any, result?: any): any;
+export function getNodeAllChildrenValue(node: any, isSelf?: boolean, result?: any): any;
+export function getIndeterminate(item: any, checkedList: any): boolean;
+export function getNodeParentChoosed(parentsValues: any, siblingsValue: any, checkedList: any): any[];
+//# sourceMappingURL=utils.d.ts.map

package/lib/tntd-virtual-tree/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/tntd-virtual-tree/utils.js"],"names":[],"mappings":"AAKO;;;;;qDAgCN;AAEM,uEAUN;AASM,8EAYN;AAWM,gJAuBN;AASM,gIAqBN;AASM,oGAkBN;AAQM,wFAcN;AAOM,uEAgBN;AASM,sGAgBN"}