@kep-platform/basic-component 0.0.1 → 0.0.5

package/dist/Tree/BOMTree.js

@@ -0,0 +1,111 @@
+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; }
+import { GlobalStyles, Tree } from "./..";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+var Title = styled.div.withConfig({
+  displayName: "Title",
+  componentId: "basic-component-347b__sc-klaw2r-0"
+})(["width:100%;text-align:center;"]);
+export default (function () {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKeys = _useState2[0],
+    setSelectedKeys = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expandedKeys = _useState4[0],
+    setExpandedKeys = _useState4[1];
+  var treeData = [{
+    key: '1',
+    title: 'jss',
+    count: 1,
+    children: [{
+      key: '4',
+      title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
+      children: []
+    }, {
+      key: '5',
+      title: 567,
+      children: []
+    }, {
+      key: '6',
+      title: 789,
+      children: []
+    }]
+  }, {
+    key: '2121212121212',
+    title: '2',
+    count: 1,
+    children: []
+  }, {
+    key: '3',
+    title: 'jss',
+    name: 'jss',
+    children: [],
+    count: 2
+  }, {
+    key: '10',
+    title: 'jss',
+    name: 'jss',
+    children: [],
+    count: 2
+  }, {
+    key: '20',
+    title: '3',
+    children: [],
+    count: 2
+  }];
+  var columns = [{
+    key: 'key',
+    title: '键值',
+    dataIndex: 'key',
+    align: 'center',
+    width: 400,
+    fixed: 'left'
+  }, {
+    key: 'name',
+    title: '姓名',
+    dataIndex: 'name',
+    align: 'center'
+  }, {
+    key: 'count',
+    title: '数量',
+    dataIndex: 'count',
+    align: 'center'
+  }];
+  var contextMenuRender = function contextMenuRender(node) {
+    return [{
+      key: 'delete',
+      label: "\u5220\u9664 node".concat(node.key)
+    }, {
+      key: 'add',
+      label: '新增'
+    }, {
+      key: 'edit',
+      label: '编辑'
+    }];
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
+    $css: []
+  }), /*#__PURE__*/React.createElement(Tree, {
+    title: /*#__PURE__*/React.createElement(Title, null, "\u6807\u8BC6"),
+    titleWidth: 400,
+    contextMenuRender: contextMenuRender,
+    treeData: treeData,
+    columns: columns,
+    selectedKeys: selectedKeys,
+    expandedKeys: expandedKeys,
+    onSelect: function onSelect(selectedKeys) {
+      return setSelectedKeys(selectedKeys);
+    },
+    onExpand: function onExpand(expandedKeys) {
+      return setExpandedKeys(expandedKeys);
+    },
+    groupBy: "count"
+  }));
+});

package/dist/Tree/MainProperties.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HtmlHTMLAttributes<HTMLDivElement> | keyof import("../Flex").FlexItemProps> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+type MainPropertyProps = {
+    mainWidth?: number;
+    main: ReactNode;
+    property?: ReactNode;
+    isFlex: boolean;
+};
+export declare const MainProperty: React.FC<MainPropertyProps>;
+export {};

package/dist/Tree/MainProperties.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, FlexItem } from "../Flex";
+export var MainArea = styled(FlexItem).withConfig({
+  displayName: "MainArea",
+  componentId: "basic-component-347b__sc-u1pspr-0"
+})(["overflow:hidden;position:sticky;left:0;z-index:20;align-self:stretch;display:flex;align-items:center;border-right:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);border-bottom:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);"]);
+var PropertiesArea = styled(FlexItem).withConfig({
+  displayName: "PropertiesArea",
+  componentId: "basic-component-347b__sc-u1pspr-1"
+})([""]);
+/* 有属性就渲染属性，没有属性就不处理 */
+export var MainProperty = function MainProperty(_ref) {
+  var mainWidth = _ref.mainWidth,
+    main = _ref.main,
+    property = _ref.property,
+    isFlex = _ref.isFlex;
+  if (property) return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(MainArea, {
+    width: mainWidth
+  }, main), /*#__PURE__*/React.createElement(PropertiesArea, {
+    flex: isFlex ? 1 : undefined
+  }, property));else return main;
+};

package/dist/Tree/Tree.d.ts

@@ -0,0 +1,20 @@
+import React, { Key, ReactNode } from 'react';
+export type TreeProps = {
+    treeData: TreeNodeType[];
+    expandedKeys?: Key[];
+    selectedKeys?: Key[];
+    fieldNames?: TreeFieldNames;
+    multiple?: boolean;
+    columns?: ColumnType[];
+    titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
+    onExpand?: onExpandHandler;
+    onSelect?: onSelectHandler;
+    contextMenuRender: (node: TreeNodeType) => MenuItem[];
+    titleWidth?: number;
+    title?: ReactNode;
+    isFlex?: boolean;
+    bordered?: boolean;
+    groupBy?: string | null;
+};
+declare const Tree: React.FC<TreeProps>;
+export default Tree;

package/dist/Tree/Tree.js

@@ -0,0 +1,253 @@
+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; }
+import React, { useMemo, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { BoxShadowBox } from "../BoxShadowBox";
+import { Column, Columns } from "../Columns";
+import { DefaultColumnWidth } from "../Columns/Columns";
+import { List } from "../List";
+import { MainArea } from "./MainProperties";
+import { MainProperty, TreeNodeController } from "./TreeNode";
+var TreeContainer = styled.div.withConfig({
+  displayName: "TreeContainer",
+  componentId: "basic-component-347b__sc-n4lkq9-0"
+})(["position:relative;overflow-x:auto;border:1px solid var(--kep-platform-color-border-secondary);border-width:", ";"], function (props) {
+  return props.bordered ? '1px' : 0;
+});
+var TreeBody = styled(List).withConfig({
+  displayName: "TreeBody",
+  componentId: "basic-component-347b__sc-n4lkq9-1"
+})([""]);
+var TreeHeader = styled.div.withConfig({
+  displayName: "TreeHeader",
+  componentId: "basic-component-347b__sc-n4lkq9-2"
+})(["", " background-color:var(--kep-platform-header-bg);& ", ",& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;}"], function (props) {
+  if (props.isFlex) {
+    return css(["width:100%;"]);
+  }
+  if (props.width) {
+    return css(["width:", "px;"], props.width);
+  }
+}, Column, MainArea);
+var rootLevel = 0;
+var TreeGroupNode = styled.div.withConfig({
+  displayName: "TreeGroupNode",
+  componentId: "basic-component-347b__sc-n4lkq9-3"
+})(["height:40px;line-height:40px;padding:0 16px;color:var(--kep-platform-color-primary);cursor:pointer;border:1px dotted var(--kep-platform-color-primary);"]);
+var TreeNodeGroup = function TreeNodeGroup(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeGroupNode, {
+    onClick: function onClick() {
+      return setExpanded(!expanded);
+    }
+  }, props.groupName, "\uFF1A", props.groupValue), expanded && props.children);
+};
+function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
+  var grouped = arr.reduce(function (acc, obj) {
+    var key = obj[propertyName] || obj[fieldNames.key];
+    if (key) {
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(obj);
+    } else {}
+    return acc;
+  }, {});
+  return grouped;
+}
+var Tree = function Tree(_ref) {
+  var treeData = _ref.treeData,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {
+      key: 'key',
+      title: 'title',
+      children: 'children'
+    } : _ref$fieldNames,
+    treeTitle = _ref.title,
+    _ref$titleWidth = _ref.titleWidth,
+    titleWidth = _ref$titleWidth === void 0 ? 700 : _ref$titleWidth,
+    _ref$selectedKeys = _ref.selectedKeys,
+    selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
+    _ref$expandedKeys = _ref.expandedKeys,
+    expandedKeys = _ref$expandedKeys === void 0 ? [] : _ref$expandedKeys,
+    _ref$isFlex = _ref.isFlex,
+    isFlex = _ref$isFlex === void 0 ? true : _ref$isFlex,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+    _ref$onExpand = _ref.onExpand,
+    onExpand = _ref$onExpand === void 0 ? function () {} : _ref$onExpand,
+    contextMenuRender = _ref.contextMenuRender,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$groupBy = _ref.groupBy,
+    groupBy = _ref$groupBy === void 0 ? null : _ref$groupBy;
+  /* 复用Columns组件显示行，构造一个类似表格头数据来适应Columns组件的数据结构 */
+  var treeHeaderRowData = useMemo(function () {
+    var data = {};
+    if (columns) columns.forEach(function (_ref2) {
+      var title = _ref2.title,
+        dataIndex = _ref2.dataIndex;
+      data[dataIndex] = title;
+    });
+    return data;
+  }, [columns, fieldNames]);
+
+  /* 如果columns存在而且长度大于0，则启用TableMode，用以展示节点属性 */
+  var isTableMode = useMemo(function () {
+    return columns && columns.length > 0;
+  }, [columns]);
+
+  /* 如果没有行宽，position:sticky就会存在问题,所以要计算出行的宽度，这样行内的Column的sticky才能生效 */
+  var rowWidth = useMemo(function () {
+    if (columns) return columns.reduce(function (pre, current) {
+      if (current.hideInTable) return pre;
+      return pre + (current.width || DefaultColumnWidth);
+    }, 0) + titleWidth;
+  }, [columns, titleWidth]);
+
+  /* format主要是为了兼容树节点主体结构的内容，简单来说就是正常树节点的title,把title视为一个Column(当然只在tableMode生效) */
+  /* 同时也要计算left和right的偏移量，因为很多时候fixed的Column可能不止一个 */
+  var formatColumns = useMemo(function () {
+    /* 用来计算sticky的偏移量，确定每个有fixed属性column的位置 */
+    var leftOffset = 0;
+    var rightOffset = 0;
+    var p;
+    var newColumns = [];
+    for (var i = 0; i < columns.length; i++) {
+      p = columns[i];
+      if (p.hideInTable) {
+        continue;
+      }
+      if (p.fixed === 'left') {
+        p.left = leftOffset + 'px';
+        leftOffset += p.width || DefaultColumnWidth;
+      }
+      if (p.fixed === 'right') {
+        p.right = rightOffset + 'px';
+        rightOffset += p.width || DefaultColumnWidth;
+      }
+      p.bordered = true;
+      newColumns.push(p);
+    }
+    return newColumns;
+  }, [columns, fieldNames]);
+  var treeNodeGroup = useMemo(function () {
+    if (groupBy) return groupTreeNodeByPropertyName(treeData, groupBy, fieldNames);
+  }, [treeData, groupBy]);
+  var groupByTitle = useMemo(function () {
+    var _columns$find;
+    return (_columns$find = columns.find(function (column) {
+      return column.dataIndex === groupBy;
+    })) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
+  }, [columns, groupBy]);
+  var boxShadowBox = useRef(null);
+  /* 树组件的结构其实比较简单，就是一个树标题（TableMode下），然后树节点形成的列表 */
+  return /*#__PURE__*/React.createElement(TreeContainer, {
+    onScroll: function onScroll(e) {
+      var treeContainer = e.target;
+      if (boxShadowBox.current) {
+        if (treeContainer.scrollLeft === 0) {
+          boxShadowBox.current.style.opacity = '0';
+        } else {
+          boxShadowBox.current.style.opacity = '1';
+        }
+        boxShadowBox.current.style.left = treeContainer.scrollLeft + titleWidth + 'px';
+      }
+    },
+    bordered: bordered
+  }, isTableMode && !isFlex && /*#__PURE__*/React.createElement(BoxShadowBox, {
+    ref: boxShadowBox,
+    width: "10px",
+    height: "100%",
+    offsetLeft: "-999px"
+  }), isTableMode && /*#__PURE__*/React.createElement(TreeHeader, {
+    width: rowWidth,
+    isFlex: isFlex
+  }, /*#__PURE__*/React.createElement(MainProperty, {
+    mainWidth: titleWidth,
+    main: treeTitle,
+    property: /*#__PURE__*/React.createElement(Columns, {
+      columns: formatColumns,
+      leftBase: titleWidth,
+      rowData: treeHeaderRowData,
+      isFlex: isFlex
+    }),
+    isFlex: isFlex
+  })), /*#__PURE__*/React.createElement(TreeBody, {
+    direction: "column"
+  }, !treeNodeGroup && !groupBy && treeData.map(function (node) {
+    return /*#__PURE__*/React.createElement(TreeNodeController, {
+      key: node[fieldNames.key],
+      selectedKeys: selectedKeys,
+      onSelect: onSelect,
+      expandedKeys: expandedKeys,
+      onExpand: onExpand,
+      width: isTableMode && !isFlex ? rowWidth : undefined,
+      node: node,
+      fieldNames: fieldNames,
+      isFlex: isFlex,
+      isTableMode: !!isTableMode,
+      columns: columns,
+      multiple: multiple,
+      level: rootLevel,
+      mainWidth: titleWidth,
+      contextMenuRender: contextMenuRender
+    });
+  }), treeNodeGroup && groupBy && Object.keys(treeNodeGroup).map(function (key) {
+    var group = treeNodeGroup[key];
+    if (group.length < 2) {
+      return /*#__PURE__*/React.createElement(TreeNodeController, {
+        key: group[0][fieldNames.key],
+        selectedKeys: selectedKeys,
+        onSelect: onSelect,
+        expandedKeys: expandedKeys,
+        onExpand: onExpand,
+        width: isTableMode && !isFlex ? rowWidth : undefined,
+        node: group[0],
+        fieldNames: fieldNames,
+        isFlex: isFlex,
+        isTableMode: !!isTableMode,
+        columns: columns,
+        multiple: multiple,
+        level: rootLevel,
+        mainWidth: titleWidth,
+        contextMenuRender: contextMenuRender
+      });
+    }
+    return /*#__PURE__*/React.createElement(TreeNodeGroup, {
+      groupName: groupByTitle,
+      key: key,
+      groupValue: key
+    }, treeNodeGroup[key].map(function (node) {
+      return /*#__PURE__*/React.createElement(TreeNodeController, {
+        key: node[fieldNames.key],
+        selectedKeys: selectedKeys,
+        onSelect: onSelect,
+        expandedKeys: expandedKeys,
+        onExpand: onExpand,
+        width: isTableMode && !isFlex ? rowWidth : undefined,
+        node: node,
+        fieldNames: fieldNames,
+        isFlex: isFlex,
+        isTableMode: !!isTableMode,
+        columns: columns,
+        multiple: multiple,
+        level: rootLevel + 1,
+        mainWidth: titleWidth,
+        contextMenuRender: contextMenuRender
+      });
+    }));
+  })));
+};
+export default Tree;

package/dist/Tree/TreeNode.d.ts

@@ -0,0 +1,20 @@
+import React, { Key } from 'react';
+import { MainProperty } from './MainProperties';
+export type TreeNodeControllerProps = {
+    node: TreeNodeType;
+    selectedKeys: Key[];
+    width?: number;
+    fieldNames: TreeFieldNames;
+    isFlex: boolean;
+    isTableMode: boolean;
+    columns: ColumnType[];
+    onSelect: onSelectHandler;
+    multiple: boolean;
+    level: number;
+    mainWidth?: number;
+    expandedKeys: Key[];
+    onExpand: onExpandHandler;
+    contextMenuRender?: (node: TreeNodeType) => MenuItem[];
+};
+export declare const TreeNodeController: React.FC<TreeNodeControllerProps>;
+export { MainProperty };

package/dist/Tree/TreeNode.js

@@ -0,0 +1,147 @@
+import { CaretRightOutlined } from '@ant-design/icons';
+import React, { useCallback, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Column, Columns } from "../Columns";
+import { Flex, FlexItem } from "../Flex";
+import { Indent } from "../Indent";
+import { ListItem } from "../List";
+import { Menu } from "../Menu";
+import { MainArea, MainProperty } from "./MainProperties";
+var ExpandedIcon = styled(CaretRightOutlined).withConfig({
+  displayName: "ExpandedIcon",
+  componentId: "basic-component-347b__sc-tzoomn-0"
+})(["transition:transform 0.5s;display:block;user-select:none;", ";font-size:var(--kep-platform-font-size-sm);&:hover{color:var(--kep-platform-color-primary);}"], function (props) {
+  if (props.expanded) {
+    return css(["transform:rotate(90deg);"]);
+  }
+});
+var TreeNode = styled(ListItem).withConfig({
+  displayName: "TreeNode",
+  componentId: "basic-component-347b__sc-tzoomn-1"
+})(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}}", ""], function (props) {
+  if (props.width) {
+    return css(["width:", "px;"], props.width);
+  }
+}, Column, MainArea, Column, MainArea, MainArea, Flex, function (props) {
+  if (props.selected) {
+    return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;& ", ",& ", "{background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;}& ", "{overflow-x:auto;& > ", "{width:auto;}}"], Column, MainArea, MainArea, Flex);
+  }
+});
+export var TreeNodeController = function TreeNodeController(_ref) {
+  var node = _ref.node,
+    _ref$selectedKeys = _ref.selectedKeys,
+    selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
+    width = _ref.width,
+    isTableMode = _ref.isTableMode,
+    fieldNames = _ref.fieldNames,
+    columns = _ref.columns,
+    isFlex = _ref.isFlex,
+    onSelect = _ref.onSelect,
+    multiple = _ref.multiple,
+    level = _ref.level,
+    mainWidth = _ref.mainWidth,
+    expandedKeys = _ref.expandedKeys,
+    onExpand = _ref.onExpand,
+    contextMenuRender = _ref.contextMenuRender;
+  /* 处理子节点缩进 */
+  var childLevel = useMemo(function () {
+    return level + 1;
+  }, [level]);
+  var selected = useMemo(function () {
+    return selectedKeys.includes(node[fieldNames.key]);
+  }, [selectedKeys, fieldNames, node]);
+  var expanded = useMemo(function () {
+    return expandedKeys.includes(node[fieldNames.key]);
+  }, [expandedKeys, fieldNames, node]);
+  var onClickNodeHandler = useCallback(function (e) {
+    if (multiple) {
+      if (selected) {
+        onSelect(selectedKeys.filter(function (key) {
+          return key !== node[fieldNames.key];
+        }), {
+          nativeEvent: e,
+          node: node,
+          selected: !selected
+        });
+      } else {
+        onSelect(selectedKeys.concat([node[fieldNames.key]]), {
+          nativeEvent: e,
+          node: node,
+          selected: !selected
+        });
+      }
+    } else {
+      onSelect(selected ? [] : [node[fieldNames.key]], {
+        nativeEvent: e,
+        node: node,
+        selected: !selected
+      });
+    }
+  }, [onSelect, selectedKeys, multiple, selected]);
+  var onClickExpandIconhandler = useCallback(function (e) {
+    if (expanded) {
+      onExpand(expandedKeys.filter(function (key) {
+        return key !== node[fieldNames.key];
+      }), {
+        nativeEvent: e,
+        node: node,
+        expanded: !expanded
+      });
+    } else {
+      onExpand(expandedKeys.concat([node[fieldNames.key]]), {
+        nativeEvent: e,
+        node: node,
+        expanded: !expanded
+      });
+    }
+  }, [expandedKeys, onExpand, expanded]);
+  var treeNode = /*#__PURE__*/React.createElement(TreeNode, {
+    selected: selectedKeys.includes(node[fieldNames.key]),
+    width: width,
+    onClick: onClickNodeHandler
+  }, /*#__PURE__*/React.createElement(MainProperty, {
+    isFlex: isFlex,
+    mainWidth: mainWidth,
+    main: /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
+      level: level
+    })), /*#__PURE__*/React.createElement(FlexItem, {
+      width: 24,
+      align: "center",
+      cursor: "pointer",
+      onClick: onClickExpandIconhandler
+    }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+      expanded: expanded
+    })), /*#__PURE__*/React.createElement(FlexItem, {
+      flex: 1
+    }, node[fieldNames.title])),
+    property: isTableMode && /*#__PURE__*/React.createElement(Columns, {
+      columns: columns,
+      leftBase: mainWidth,
+      rowData: node,
+      isFlex: isFlex
+    })
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contextMenuRender && /*#__PURE__*/React.createElement(Menu.Popup, {
+    trigger: "contextmenu",
+    items: contextMenuRender(node)
+  }, treeNode), !contextMenuRender && treeNode, expanded && node.children.map(function (childNode) {
+    return /*#__PURE__*/React.createElement(TreeNodeController, {
+      width: width,
+      selectedKeys: selectedKeys,
+      key: childNode[fieldNames.key],
+      node: childNode,
+      fieldNames: fieldNames,
+      isFlex: isFlex,
+      isTableMode: isTableMode,
+      columns: columns,
+      onSelect: onSelect,
+      multiple: multiple,
+      level: childLevel,
+      mainWidth: mainWidth,
+      onExpand: onExpand,
+      expandedKeys: expandedKeys,
+      contextMenuRender: contextMenuRender
+    });
+  }));
+};
+export { MainProperty };

package/dist/Tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MainProperties';
+export { default as Tree, type TreeProps } from './Tree';
+export * from './TreeNode';

package/dist/Tree/index.js

@@ -0,0 +1,3 @@
+export * from "./MainProperties";
+export { default as Tree } from "./Tree";
+export * from "./TreeNode";

package/dist/__consts/theme.d.ts

@@ -0,0 +1,81 @@
+export declare const presetColors: {
+    magenta: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    red: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    volcano: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    orange: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    gold: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    green: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    blue: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+    purple: {
+        color: string;
+        backgroundColor: string;
+        border: string;
+    };
+};
+declare const _default: {
+    primaryColor: string;
+    lightenPrimaryColor: string;
+    secondaryColor: string;
+    dangerColor: string;
+    lightenDangerColor: string;
+    backgroundColor: string;
+    paddingXS: string;
+    paddingSM: string;
+    padding: string;
+    paddingLG: string;
+    paddingXL: string;
+    gapXS: string;
+    gapSM: string;
+    gap: string;
+    gapLG: string;
+    marginXS: string;
+    marginSM: string;
+    margin: string;
+    marginLG: string;
+    marginXL: string;
+    fontSize: string;
+    fontSizeSM: string;
+    fontSizeLG: string;
+    color: string;
+    fontWeight: number;
+    fontWeightBold: number;
+    fontWeightBolder: number;
+    fontWeightLight: number;
+    fontWeightLighter: number;
+    borderRadiusSM: string;
+    borderRadius: string;
+    borderRadiusLG: string;
+    borderWidth: string;
+    borderColor: string;
+    defaultTagColor: string;
+    defaultTagBackgroundColor: string;
+};
+export default _default;