@aloudata/aloudata-design 1.9.17 → 1.10.1

package/dist/Tree/Tree.d.ts

@@ -0,0 +1,136 @@
+import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';
+import RcTree from 'rc-tree';
+import type { DataNode, Key } from 'rc-tree/lib/interface';
+import * as React from 'react';
+export type SwitcherIcon = React.ReactNode | ((props: AldTreeNodeProps) => React.ReactNode);
+export type TreeLeafIcon = React.ReactNode | ((props: AldTreeNodeProps) => React.ReactNode);
+export interface AldTreeNodeAttribute {
+    eventKey: string;
+    prefixCls: string;
+    className: string;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    halfChecked: boolean;
+    children: React.ReactNode;
+    title: React.ReactNode;
+    pos: string;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+    isLeaf: boolean;
+    selectable: boolean;
+    disabled: boolean;
+    disableCheckbox: boolean;
+}
+export interface AldTreeNodeProps {
+    className?: string;
+    checkable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    title?: string | React.ReactNode;
+    key?: Key;
+    eventKey?: string;
+    isLeaf?: boolean;
+    checked?: boolean;
+    expanded?: boolean;
+    loading?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    icon?: ((treeNode: AldTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
+    children?: React.ReactNode;
+    [customProp: string]: any;
+}
+export type AldTreeNode = React.Component<AldTreeNodeProps, object>;
+export interface AldTreeNodeBaseEvent {
+    node: AldTreeNode;
+    nativeEvent: MouseEvent;
+}
+export interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {
+    event: 'check';
+    checked?: boolean;
+    checkedNodes?: AldTreeNode[];
+}
+export interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {
+    event: 'select';
+    selected?: boolean;
+    selectedNodes?: DataNode[];
+}
+export interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {
+    expanded?: boolean;
+}
+export interface AldTreeNodeMouseEvent {
+    node: AldTreeNode;
+    event: React.DragEvent<HTMLElement>;
+}
+export interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {
+    expandedKeys: Key[];
+}
+export interface AldTreeNodeAttribute {
+    node: AldTreeNode;
+    dragNode: AldTreeNode;
+    dragNodesKeys: Key[];
+    dropPosition: number;
+    dropToGap?: boolean;
+    event: React.MouseEvent<HTMLElement>;
+}
+export type TreeNodeNormal = DataNode;
+type DraggableFn = (node: DataNode) => boolean;
+interface DraggableConfig {
+    icon?: React.ReactNode | false;
+    nodeDraggable?: DraggableFn;
+}
+export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon'> {
+    showLine?: boolean | {
+        showLeafIcon: boolean | TreeLeafIcon;
+    };
+    className?: string;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否自动展开父节点 */
+    autoExpandParent?: boolean;
+    /** Checkable状态下节点选择完全受控（父子节点选中状态不再关联） */
+    checkStrictly?: boolean;
+    /** 是否支持选中 */
+    checkable?: boolean;
+    /** 是否禁用树 */
+    disabled?: boolean;
+    /** 默认展开所有树节点 */
+    defaultExpandAll?: boolean;
+    /** 默认展开对应树节点 */
+    defaultExpandParent?: boolean;
+    /** 默认展开指定的树节点 */
+    defaultExpandedKeys?: Key[];
+    /** （受控）展开指定的树节点 */
+    expandedKeys?: Key[];
+    /** （受控）选中复选框的树节点 */
+    checkedKeys?: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
+    /** 默认选中复选框的树节点 */
+    defaultCheckedKeys?: Key[];
+    /** （受控）设置选中的树节点 */
+    selectedKeys?: Key[];
+    /** 默认选中的树节点 */
+    defaultSelectedKeys?: Key[];
+    selectable?: boolean;
+    /** 点击树节点触发 */
+    filterAldTreeNode?: (node: AldTreeNode) => boolean;
+    loadedKeys?: Key[];
+    /** 设置节点可拖拽（IE>8） */
+    draggable?: DraggableFn | boolean | DraggableConfig;
+    style?: React.CSSProperties;
+    showIcon?: boolean;
+    icon?: ((nodeProps: AldTreeNodeAttribute) => React.ReactNode) | React.ReactNode | RcTreeProps<T>['icon'];
+    switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];
+    prefixCls?: string;
+    children?: React.ReactNode;
+    blockNode?: boolean;
+    size?: 'large' | 'small';
+    titleRender?: (node: T) => React.ReactNode;
+    showTabLeader?: boolean;
+    handlerRender?: (node: T) => React.ReactNode;
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeProps<DataNode> & React.RefAttributes<RcTree<DataNode>>>;
+export default Tree;

package/dist/Tree/Tree.js

@@ -0,0 +1,131 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 classNames from 'classnames';
+import { noop } from 'lodash';
+import RcTree from 'rc-tree';
+import * as React from 'react';
+import { ConfigContext } from "../ConfigProvider";
+import { ChevronDownLine, DragLine } from "../Icon";
+import collapseMotion from "../_utils/motion";
+import theme from "../style/themes/default/themeColor.module.less";
+import dropIndicatorRender from "./utils/dropIndicator";
+import renderSwitcherIcon from "./utils/iconUtil";
+var TREE_SWITCH_LARGE_ICON_SIZE = 20;
+var TREE_SWITCH_CION_SIZE = 16;
+
+// [Legacy] Compatible for v3
+
+var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames;
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction,
+    virtual = _React$useContext.virtual;
+  var size = props.size || 'small';
+  var className = props.className,
+    _props$showIcon = props.showIcon,
+    showIcon = _props$showIcon === void 0 ? false : _props$showIcon,
+    showLine = props.showLine,
+    _props$blockNode = props.blockNode,
+    blockNode = _props$blockNode === void 0 ? false : _props$blockNode,
+    children = props.children,
+    _props$checkable = props.checkable,
+    checkable = _props$checkable === void 0 ? false : _props$checkable,
+    _props$selectable = props.selectable,
+    selectable = _props$selectable === void 0 ? true : _props$selectable,
+    draggable = props.draggable,
+    titleRender = props.titleRender,
+    showTabLeader = props.showTabLeader,
+    _props$handlerRender = props.handlerRender,
+    handlerRender = _props$handlerRender === void 0 ? noop : _props$handlerRender,
+    _props$motion = props.motion,
+    motion = _props$motion === void 0 ? _objectSpread(_objectSpread({}, collapseMotion), {}, {
+      motionAppear: false
+    }) : _props$motion;
+  var prefixCls = getPrefixCls('tree', 'ald-tree');
+  var customTitleRender = React.useCallback(function (node) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, titleRender ? titleRender(node) : node.title, showTabLeader && /*#__PURE__*/React.createElement("div", {
+      className: "ald-tree-tab-leader"
+    }), handlerRender && handlerRender(node));
+  }, [titleRender, showTabLeader, handlerRender]);
+  var newProps = _objectSpread(_objectSpread({}, props), {}, {
+    checkable: checkable,
+    selectable: selectable,
+    showIcon: showIcon,
+    motion: motion,
+    blockNode: blockNode,
+    showLine: Boolean(showLine),
+    dropIndicatorRender: dropIndicatorRender,
+    titleRender: customTitleRender
+  });
+  var draggableConfig = React.useMemo(function () {
+    if (!draggable) {
+      return false;
+    }
+    var newIcon = /*#__PURE__*/React.createElement(DragLine, {
+      size: TREE_SWITCH_CION_SIZE,
+      color: theme.NL50
+    });
+    var mergedDraggable = {
+      icon: newIcon
+    };
+    switch (_typeof(draggable)) {
+      case 'function':
+        mergedDraggable.nodeDraggable = draggable;
+        break;
+      case 'object':
+        mergedDraggable = _objectSpread(_objectSpread({}, draggable), {}, {
+          icon: newIcon
+        });
+        break;
+      default:
+        break;
+      // Do nothing
+    }
+
+    return mergedDraggable;
+  }, [draggable]);
+  var renderIndent = function renderIndent(nodeProps) {
+    var _keyEntities;
+    var eventKey = nodeProps.eventKey,
+      keyEntities = nodeProps.context.keyEntities,
+      isLeaf = nodeProps.isLeaf;
+    var level = ((_keyEntities = keyEntities[eventKey]) === null || _keyEntities === void 0 ? void 0 : _keyEntities.level) || 0;
+    var iconSize = size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE;
+    var indentWidth = isLeaf ? iconSize : 0;
+    indentWidth += level * (iconSize / 2);
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: indentWidth
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(RcTree, _extends({
+    itemHeight: 20,
+    ref: ref,
+    virtual: virtual
+  }, newProps, {
+    prefixCls: prefixCls,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className),
+    direction: direction,
+    checkable: checkable ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-checkbox-inner")
+    }) : checkable,
+    selectable: selectable
+    // @ts-ignore
+    ,
+    switcherIcon: function switcherIcon(nodeProps) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ChevronDownLine, {
+        size: size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE,
+        color: theme.NL50
+      }, "\u5C55\u5F00"), showLine, nodeProps));
+    },
+    draggable: draggableConfig
+  }), children);
+});
+export default Tree;

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

@@ -3,7 +3,7 @@ import React from 'react';
 export default (function () {
   return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Tree, {
     treeData: [{
-      title: 'parent 1',
+      title: 'Parent 1',
       key: '0-0',
       children: [{
         title: 'parent 1-0',
@@ -26,7 +26,8 @@ export default (function () {
               color: '#1890ff'
             }
           }, "sss"),
-          key: '0-0-1-0'
+          key: '0-0-1-0',
+          disabled: true
         }]
       }]
     }]

package/dist/Tree/demo/drag/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

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

@@ -0,0 +1,124 @@
+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(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 { Tree } from "../../..";
+import React, { useState } from 'react';
+var x = 3;
+var y = 2;
+var z = 1;
+var defaultData = [];
+var generateData = function generateData(_level, _preKey, _tns) {
+  var preKey = _preKey || '0';
+  var tns = _tns || defaultData;
+  var children = [];
+  for (var _i = 0; _i < x; _i++) {
+    var key = "".concat(preKey, "-").concat(_i);
+    tns.push({
+      title: key,
+      key: key
+    });
+    if (_i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  var level = _level - 1;
+  children.forEach(function (key, index) {
+    tns[index].children = [];
+    return generateData(level, key, tns[index].children);
+  });
+};
+generateData(z);
+var App = function App() {
+  var _useState = useState(defaultData),
+    _useState2 = _slicedToArray(_useState, 2),
+    gData = _useState2[0],
+    setGData = _useState2[1];
+  var _useState3 = useState(['0-0', '0-0-0', '0-0-0-0']),
+    _useState4 = _slicedToArray(_useState3, 1),
+    expandedKeys = _useState4[0];
+  var onDragEnter = function onDragEnter(info) {
+    console.log(info);
+    // expandedKeys, set it when controlled is needed
+    // setExpandedKeys(info.expandedKeys)
+  };
+
+  var onDrop = function onDrop(info) {
+    console.log(info);
+    var dropKey = info.node.key;
+    var dragKey = info.dragNode.key;
+    var dropPos = info.node.pos.split('-');
+    var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+    var loop = function loop(data, key, callback) {
+      for (var _i2 = 0; _i2 < data.length; _i2++) {
+        if (data[_i2].key === key) {
+          return callback(data[_i2], _i2, data);
+        }
+        if (data[_i2].children) {
+          loop(data[_i2].children, key, callback);
+        }
+      }
+    };
+    var data = _toConsumableArray(gData);
+
+    // Find dragObject
+    var dragObj;
+    loop(data, dragKey, function (item, index, arr) {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+    if (!info.dropToGap) {
+      // Drop on the content
+      loop(data, dropKey, function (item) {
+        item.children = item.children || [];
+        // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
+        item.children.unshift(dragObj);
+      });
+    } else if ((info.node.props.children || []).length > 0 &&
+    // Has children
+    info.node.props.expanded &&
+    // Is expanded
+    dropPosition === 1 // On the bottom gap
+    ) {
+      loop(data, dropKey, function (item) {
+        item.children = item.children || [];
+        // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
+        item.children.unshift(dragObj);
+        // in previous version, we use item.children.push(dragObj) to insert the
+        // item to the tail of the children
+      });
+    } else {
+      var ar = [];
+      var _i3;
+      loop(data, dropKey, function (_item, index, arr) {
+        ar = arr;
+        _i3 = index;
+      });
+      if (dropPosition === -1) {
+        ar.splice(_i3, 0, dragObj);
+      } else {
+        ar.splice(_i3 + 1, 0, dragObj);
+      }
+    }
+    setGData(data);
+  };
+  return /*#__PURE__*/React.createElement(Tree, {
+    className: "draggable-tree",
+    defaultExpandedKeys: expandedKeys,
+    draggable: true,
+    blockNode: true,
+    onDragEnter: onDragEnter,
+    onDrop: onDrop,
+    treeData: gData
+  });
+};
+export default App;

package/dist/Tree/index.d.ts

@@ -1,13 +1,19 @@
-import { DataNode } from 'antd/lib/tree';
-import { AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, TreeProps as AntdTreeProps } from 'antd/lib/tree/Tree';
-import RcTree from 'rc-tree';
-import { BasicDataNode } from 'rc-tree/lib/interface';
-import React, { ForwardedRef } from 'react';
-export type { DataNode, EventDataNode } from 'antd/lib/tree';
-export type { ExpandAction as DirectoryTreeExpandAction, DirectoryTreeProps, } from 'antd/lib/tree/DirectoryTree';
-export type { AntTreeNode, AntTreeNodeMouseEvent, AntTreeNodeExpandedEvent, AntTreeNodeCheckedEvent, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, AntTreeNodeProps, };
-export type TreeProps<T extends BasicDataNode = DataNode> = Omit<AntdTreeProps<T>, 'switcherIcon'>;
-declare const _default: <T extends BasicDataNode = DataNode>(props: TreeProps<T> & {
-    ref?: React.ForwardedRef<RcTree<DataNode>> | undefined;
-}) => React.ReactElement;
-export default _default;
+/// <reference types="react" />
+import type RcTree from 'rc-tree';
+import type { BasicDataNode } from 'rc-tree';
+import { TreeNode } from 'rc-tree';
+import type { DataNode } from 'rc-tree/lib/interface';
+import DirectoryTree from './DirectoryTree';
+import type { TreeProps } from './Tree';
+export type { EventDataNode } from 'rc-tree/lib/interface';
+export type { ExpandAction as DirectoryTreeExpandAction, DirectoryTreeProps, } from './DirectoryTree';
+export type { AldTreeNode, AldTreeNodeAttribute, AldTreeNodeCheckedEvent, AldTreeNodeExpandedEvent, AldTreeNodeMouseEvent, AldTreeNodeProps, AldTreeNodeSelectedEvent, TreeProps, } from './Tree';
+export type { DataNode };
+type CompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(props: React.PropsWithChildren<TreeProps<T>> & {
+    ref?: React.Ref<RcTree>;
+}) => React.ReactElement) & {
+    TreeNode: typeof TreeNode;
+    DirectoryTree: typeof DirectoryTree;
+};
+declare const Tree: CompoundedComponent;
+export default Tree;

package/dist/Tree/index.js

@@ -1,17 +1,7 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-import { Tree as AntdTree } from 'antd';
-import React from 'react';
-import { ChevronDownLine } from "../Icon";
-import theme from "../style/themes/default/themeColor.module.less";
-function Tree(props, ref) {
-  var restProps = Object.assign({}, (_objectDestructuringEmpty(props), props));
-  return /*#__PURE__*/React.createElement(AntdTree, _extends({}, restProps, {
-    ref: ref,
-    switcherIcon: /*#__PURE__*/React.createElement(ChevronDownLine, {
-      size: 14,
-      color: theme.NL40
-    }, "\u5C55\u5F00")
-  }));
-}
-export default /*#__PURE__*/React.forwardRef(Tree);
+import { TreeNode } from 'rc-tree';
+import DirectoryTree from "./DirectoryTree";
+import TreePure from "./Tree";
+var Tree = TreePure;
+Tree.DirectoryTree = DirectoryTree;
+Tree.TreeNode = TreeNode;
+export default Tree;