@kep-platform/basic-component 1.0.6 → 1.0.8

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) lee-step-jss 1599925910@qq.com
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) lee-step-jss 1599925910@qq.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,43 +1,43 @@
-# @kep-platform/basic-component
-
-[![NPM version](https://img.shields.io/npm/v/@kep-platform/basic-component.svg?style=flat)](https://npmjs.org/package/@kep-platform/basic-component)
-[![NPM downloads](http://img.shields.io/npm/dm/@kep-platform/basic-component.svg?style=flat)](https://npmjs.org/package/@kep-platform/basic-component)
-
-A react library developed with dumi
-
-## Usage
-
-TODO
-
-## Options
-
-TODO
-
-## Development
-
-```bash
-# install dependencies
-$ npm install
-
-# develop library by docs demo
-$ npm start
-
-# build library source code
-$ npm run build
-
-# build library source code in watch mode
-$ npm run build:watch
-
-# build docs
-$ npm run docs:build
-
-# Locally preview the production build.
-$ npm run docs:preview
-
-# check your project for potential problems
-$ npm run doctor
-```
-
-## LICENSE
-
-MIT
+# @kep-platform/basic-component
+
+[![NPM version](https://img.shields.io/npm/v/@kep-platform/basic-component.svg?style=flat)](https://npmjs.org/package/@kep-platform/basic-component)
+[![NPM downloads](http://img.shields.io/npm/dm/@kep-platform/basic-component.svg?style=flat)](https://npmjs.org/package/@kep-platform/basic-component)
+
+A react library developed with dumi
+
+## Usage
+
+TODO
+
+## Options
+
+TODO
+
+## Development
+
+```bash
+# install dependencies
+$ npm install
+
+# develop library by docs demo
+$ npm start
+
+# build library source code
+$ npm run build
+
+# build library source code in watch mode
+$ npm run build:watch
+
+# build docs
+$ npm run docs:build
+
+# Locally preview the production build.
+$ npm run docs:preview
+
+# check your project for potential problems
+$ npm run doctor
+```
+
+## LICENSE
+
+MIT

package/dist/@types/styled-components.d.ts

@@ -1,9 +1,9 @@
-// styled.d.ts 文件
-import 'styled-components';
-import { ButtonTheme } from './theme';
-
-declare module 'styled-components' {
-    export interface DefaultTheme {
-        button?: ButtonTheme;
-    }
-}
+// styled.d.ts 文件
+import 'styled-components';
+import { ButtonTheme } from './theme';
+
+declare module 'styled-components' {
+    export interface DefaultTheme {
+        button?: ButtonTheme;
+    }
+}

package/dist/@types/theme.d.ts

@@ -1,38 +1,38 @@
-export type ButtonTheme = {
-    /* all */
-    fontWeight?: string;
-    borderRadius?: string;
-    borderWidth?: string;
-    shadowAnimation?: Keyframes;
-    /* Default */
-    defaultTextColor?: string;
-    defaultBorderColor?: string;
-    defaultBackgroundColor?: string;
-    defaultHoverBackgroundColor?: string;
-    defaultHoverBorderColor: string;
-    defaultHoverTextColor?: string;
-    /* Danger */
-    dangerTextColor?: string;
-    dangerBorderColor?: string;
-    dangerBackgroundColor?: string;
-    dangerHoverBackgroundColor: string;
-    dangerHoverTextColor?: string;
-    dangerShadowAnimation?: Keyframes;
-    /* Primary */
-    primaryTextColor?: string;
-    primaryBorderColor?: string;
-    primaryBackgroundColor?: string;
-    primaryHoverBackgroundColor: string;
-    primaryHoverTextColor?: string;
-    primaryShadowAnimation?: Keyframes;
-    /* Small */
-    smallPaddingTop?: string;
-    smallPaddingLeft?: string;
-    smallFontSize?: string;
-    smallBorderRadius?: string;
-    /* Large */
-    bargePaddingTop?: string;
-    bargePaddingLeft?: string;
-    bargeFontSize?: string;
-    bargeBorderRadius?: string;
-};
+export type ButtonTheme = {
+    /* all */
+    fontWeight?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+    shadowAnimation?: Keyframes;
+    /* Default */
+    defaultTextColor?: string;
+    defaultBorderColor?: string;
+    defaultBackgroundColor?: string;
+    defaultHoverBackgroundColor?: string;
+    defaultHoverBorderColor: string;
+    defaultHoverTextColor?: string;
+    /* Danger */
+    dangerTextColor?: string;
+    dangerBorderColor?: string;
+    dangerBackgroundColor?: string;
+    dangerHoverBackgroundColor: string;
+    dangerHoverTextColor?: string;
+    dangerShadowAnimation?: Keyframes;
+    /* Primary */
+    primaryTextColor?: string;
+    primaryBorderColor?: string;
+    primaryBackgroundColor?: string;
+    primaryHoverBackgroundColor: string;
+    primaryHoverTextColor?: string;
+    primaryShadowAnimation?: Keyframes;
+    /* Small */
+    smallPaddingTop?: string;
+    smallPaddingLeft?: string;
+    smallFontSize?: string;
+    smallBorderRadius?: string;
+    /* Large */
+    bargePaddingTop?: string;
+    bargePaddingLeft?: string;
+    bargeFontSize?: string;
+    bargeBorderRadius?: string;
+};

package/dist/Tree/MainProperties.d.ts

@@ -1,5 +1,5 @@
 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"> & {
+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 import("../Flex").FlexItemProps | keyof React.HtmlHTMLAttributes<HTMLDivElement>> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
 type MainPropertyProps = {

package/dist/Tree/Tree.d.ts

@@ -17,8 +17,9 @@ export type TreeProps = {
     isFlex?: boolean;
     bordered?: boolean;
     hideColumns?: boolean;
+    loadData?: (node: TreeNodeType) => Promise<any>;
 };
-declare const Tree: (({ treeData, columns, fieldNames, title: treeTitle, titleWidth, titleRender, selectedKeys, expandedKeys, isFlex, onSelect, onExpand, contextMenuRender, onContextMenuItemSelect, multiple, bordered, hideColumns, }: TreeProps) => React.JSX.Element) & {
+declare const Tree: (({ treeData, columns, fieldNames, title: treeTitle, titleWidth, titleRender, selectedKeys, expandedKeys, isFlex, onSelect, onExpand, contextMenuRender, onContextMenuItemSelect, loadData, multiple, bordered, hideColumns, }: TreeProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default Tree;

package/dist/Tree/Tree.js

@@ -1,11 +1,17 @@
 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); }
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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; }
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { BoxShadowBox } from "../BoxShadowBox";
 import { Column, Columns } from "../Columns";
@@ -17,7 +23,7 @@ var TreeContainer = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['bordered'].includes(prop);
   }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow-x: auto;\n    border: 1px solid var(--kep-platform-color-border-secondary);\n    border-width: ", ";\n"])), function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\toverflow-x: auto;\n\tborder: 1px solid var(--kep-platform-color-border-secondary);\n\tborder-width: ", ";\n"])), function (props) {
   return props.bordered ? '1px' : 0;
 });
 var TreeBody = styled(List)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
@@ -25,15 +31,16 @@ var TreeHeader = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['width', 'isFlex'].includes(prop);
   }
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    background-color: var(--kep-platform-header-bg);\n    & ", ",& ", " {\n        background-color: var(--kep-platform-header-bg);\n        font-weight: 600;\n        position: sticky;\n    }\n"])), function (props) {
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t", "\n\tbackground-color: var(--kep-platform-header-bg);\n\t& ", ",& ", " {\n\t\tbackground-color: var(--kep-platform-header-bg);\n\t\tfont-weight: 600;\n\t\tposition: sticky;\n\t}\n"])), function (props) {
   if (props.isFlex) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                width: 100%;\n            "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\twidth: 100%;\n\t\t\t"])));
   }
   if (props.width) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\twidth: ", "px;\n\t\t\t"])), props.width);
   }
 }, Column, MainArea);
 var rootLevel = -1;
+var virtualRootKey = Symbol('virtualRootKey');
 var Tree = observer(function (_ref) {
   var treeData = _ref.treeData,
     _ref$columns = _ref.columns,
@@ -60,6 +67,7 @@ var Tree = observer(function (_ref) {
     onExpand = _ref$onExpand === void 0 ? function () {} : _ref$onExpand,
     contextMenuRender = _ref.contextMenuRender,
     onContextMenuItemSelect = _ref.onContextMenuItemSelect,
+    loadData = _ref.loadData,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$bordered = _ref.bordered,
@@ -67,7 +75,7 @@ var Tree = observer(function (_ref) {
     _ref$hideColumns = _ref.hideColumns,
     hideColumns = _ref$hideColumns === void 0 ? false : _ref$hideColumns;
   var rootNode = useMemo(function () {
-    return _defineProperty(_defineProperty(_defineProperty({}, fieldNames.key, 'root'), "nodeType", nodeTypeMap.virtual), "children", treeData);
+    return _defineProperty(_defineProperty(_defineProperty({}, fieldNames.key, virtualRootKey), "nodeType", nodeTypeMap.virtual), "children", treeData);
   }, [treeData]);
 
   /* 复用Columns组件显示行，构造一个类似表格头数据来适应Columns组件的数据结构 */
@@ -132,6 +140,11 @@ var Tree = observer(function (_ref) {
       boxShadowBox.current.style.left = treeContainer.scrollLeft + titleWidth + 'px';
     }
   }, [titleWidth]);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadedKeys = _useState2[0],
+    setLoadedKeys = _useState2[1];
+
   /* 树组件的结构其实比较简单，就是一个树标题（TableMode下），然后树节点形成的列表 */
   return /*#__PURE__*/React.createElement(TreeContainer, {
     onScroll: onScrollHandler,
@@ -161,6 +174,9 @@ var Tree = observer(function (_ref) {
     onSelect: onSelect,
     expandedKeys: expandedKeys,
     onExpand: onExpand,
+    loadData: loadData,
+    loadedKeys: loadedKeys,
+    setLoadedKeys: setLoadedKeys,
     width: isTableMode && !isFlex ? rowWidth : undefined,
     node: rootNode,
     fieldNames: fieldNames,

package/dist/Tree/TreeNode.d.ts

@@ -17,10 +17,13 @@ export type TreeNodeControllerProps = {
     contextMenuRender?: (node: TreeNodeType) => MenuItem[];
     onContextMenuItemSelect?: (node: TreeNodeType, key: Key, item: MenuItem) => void;
     titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
+    loadData?: (node: TreeNodeType) => Promise<any>;
+    loadedKeys: Key[];
+    setLoadedKeys: (keys: Key[]) => void;
 };
 export declare const nodeTypeMap: {
     virtual: string;
 };
-export declare const TreeNodeController: (({ node, selectedKeys, width, isTableMode, fieldNames, columns, isFlex, onSelect, multiple, level, mainWidth, expandedKeys, onExpand, contextMenuRender, onContextMenuItemSelect, titleRender, }: TreeNodeControllerProps) => React.JSX.Element) & {
+export declare const TreeNodeController: (({ node, selectedKeys, width, isTableMode, fieldNames, columns, isFlex, onSelect, multiple, level, mainWidth, expandedKeys, onExpand, contextMenuRender, onContextMenuItemSelect, titleRender, loadData, loadedKeys, setLoadedKeys, }: TreeNodeControllerProps) => React.JSX.Element) & {
     displayName: string;
 };

package/dist/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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); }
@@ -6,7 +6,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { CaretRightOutlined } from '@ant-design/icons';
+import { CaretRightOutlined, LoadingOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -18,26 +18,27 @@ import { Menu } from "../Menu";
 import { MainArea, MainProperty } from "./MainProperties";
 var ExpandedIcon = styled(CaretRightOutlined).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['expanded'].includes(prop);
+    return !['expanded', 'loading'].includes(prop);
   }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    transition: transform 0.5s;\n    display: block;\n    user-select: none;\n    ", ";\n    font-size: var(--kep-platform-font-size-sm);\n    &:hover {\n        color: var(--kep-platform-color-primary);\n    }\n"])), function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\ttransition: transform 0.5s;\n\tdisplay: block;\n\tuser-select: none;\n\t", ";\n\tfont-size: var(--kep-platform-font-size-sm);\n\t&:hover {\n\t\tcolor: var(--kep-platform-color-primary);\n\t}\n"])), function (props) {
   if (props.expanded) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                transform: rotate(90deg);\n            "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t"])));
   }
 });
-var TitleArea = styled(FlexItem)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-var TreeNode = styled(ListItem)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", "\n    & ", ",& ", " {\n        background-color: var(--kep-platform-color-bg-base);\n    }\n    /* \u5904\u7406\u9F20\u6807\u79FB\u5165 */\n    &:hover {\n        background-color: var(--kep-platform-color-bg-hover);\n        & ", ", & ", " {\n            background-color: var(--kep-platform-color-bg-hover);\n        }\n        & ", " {\n            overflow-x: auto;\n            & > ", " {\n                width: auto;\n            }\n        }\n        & ", " {\n            overflow-x: auto;\n        }\n    }\n    /* \u5904\u7406\u8282\u70B9\u9009\u4E2D */\n    ", "\n"])), function (props) {
+var LoadingIcon = styled(LoadingOutlined)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tfont-size: var(--kep-platform-font-size-sm);\n\tuser-select: none;\n"])));
+var TitleArea = styled(FlexItem)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
+var TreeNode = styled(ListItem)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t", "\n\t& ", ",& ", " {\n\t\tbackground-color: var(--kep-platform-color-bg-base);\n\t}\n\t/* \u5904\u7406\u9F20\u6807\u79FB\u5165 */\n\t&:hover {\n\t\tbackground-color: var(--kep-platform-color-bg-hover);\n\t\t& ", ", & ", " {\n\t\t\tbackground-color: var(--kep-platform-color-bg-hover);\n\t\t}\n\t\t& ", " {\n\t\t\toverflow-x: auto;\n\t\t\t& > ", " {\n\t\t\t\twidth: auto;\n\t\t\t}\n\t\t}\n\t\t& ", " {\n\t\t\toverflow-x: auto;\n\t\t}\n\t}\n\t/* \u5904\u7406\u8282\u70B9\u9009\u4E2D */\n\t", "\n"])), function (props) {
   if (props.width) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\twidth: ", "px;\n\t\t\t"])), props.width);
   }
 }, Column, MainArea, Column, MainArea, MainArea, Flex, TitleArea, function (props) {
   if (props.selected) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                background-color: var(--kep-platform-color-bg-active) !important;\n                color: var(--kep-platform-color-text-active) !important;\n                & ", ", & ", " {\n                    background-color: var(--kep-platform-color-bg-active) !important;\n                    color: var(--kep-platform-color-text-active) !important;\n                }\n                & ", " {\n                    overflow-x: auto;\n                    & > ", " {\n                        width: auto;\n                    }\n                }\n                & ", " {\n                    overflow-x: auto;\n                }\n            "])), Column, MainArea, MainArea, Flex, TitleArea);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t\t\tbackground-color: var(--kep-platform-color-bg-active) !important;\n\t\t\t\tcolor: var(--kep-platform-color-text-active) !important;\n\t\t\t\t& ", ", & ", " {\n\t\t\t\t\tbackground-color: var(--kep-platform-color-bg-active) !important;\n\t\t\t\t\tcolor: var(--kep-platform-color-text-active) !important;\n\t\t\t\t}\n\t\t\t\t& ", " {\n\t\t\t\t\toverflow-x: auto;\n\t\t\t\t\t& > ", " {\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t& ", " {\n\t\t\t\t\toverflow-x: auto;\n\t\t\t\t}\n\t\t\t"])), Column, MainArea, MainArea, Flex, TitleArea);
   }
 });
-var TreeNodeGroupNode = styled.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: 32px;\n    line-height: 32px;\n    background-color: var(--kep-platform-color-primary);\n    color: var(--kep-platform-color-white);\n    & span {\n        color: var(--kep-platform-color-white) !important;\n    }\n    cursor: pointer;\n    ", "\n"])), function (props) {
+var TreeNodeGroupNode = styled.li(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\theight: 32px;\n\tline-height: 32px;\n\tbackground-color: var(--kep-platform-color-primary);\n\tcolor: var(--kep-platform-color-white);\n\t& span {\n\t\tcolor: var(--kep-platform-color-white) !important;\n\t}\n\tcursor: pointer;\n\t", "\n"])), function (props) {
   if (props.width) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\twidth: ", "px;\n\t\t\t"])), props.width);
   }
 });
 var TreeNodeGroup = function TreeNodeGroup(props) {
@@ -119,17 +120,27 @@ export var TreeNodeController = observer(function (_ref) {
     onExpand = _ref.onExpand,
     contextMenuRender = _ref.contextMenuRender,
     onContextMenuItemSelect = _ref.onContextMenuItemSelect,
-    titleRender = _ref.titleRender;
+    titleRender = _ref.titleRender,
+    loadData = _ref.loadData,
+    loadedKeys = _ref.loadedKeys,
+    setLoadedKeys = _ref.setLoadedKeys;
   /* 处理子节点缩进 */
   var childLevel = useMemo(function () {
     return level + 1;
   }, [level]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   var selected = useMemo(function () {
     return selectedKeys.includes(node[fieldNames.key]) && !isFalse(node.selectable);
   }, [selectedKeys, fieldNames, node]);
   var expanded = useMemo(function () {
-    return (expandedKeys.includes(node[fieldNames.key]) || node.nodeType === nodeTypeMap.virtual) && !node.isLeaf;
-  }, [expandedKeys, fieldNames, node]);
+    return (expandedKeys.includes(node[fieldNames.key]) || node.nodeType === nodeTypeMap.virtual) && !node.isLeaf && !loading;
+  }, [expandedKeys, fieldNames, node, loading]);
+  var loaded = useMemo(function () {
+    return (loadedKeys === null || loadedKeys === void 0 ? void 0 : loadedKeys.includes(node[fieldNames.key])) || node.nodeType === nodeTypeMap.virtual;
+  }, [loadedKeys, fieldNames, node]);
   var treeNodeGroup = useMemo(function () {
     return groupTreeNodeByPropertyName(node.groupBy, node.children || []);
   }, [node.children, node.groupBy]);
@@ -165,10 +176,11 @@ export var TreeNodeController = observer(function (_ref) {
       node: node,
       selected: !selected
     });
-  }, [onSelect, selectedKeys, multiple, selected]);
+  }, [onSelect, selectedKeys, multiple, selected, node]);
   var onClickExpandIconhandler = useCallback(function (e) {
     e.preventDefault();
     e.stopPropagation();
+    if (loading) return;
     if (expanded) {
       onExpand(expandedKeys.filter(function (key) {
         return key !== node[fieldNames.key];
@@ -178,14 +190,30 @@ export var TreeNodeController = observer(function (_ref) {
         expanded: !expanded
       });
     } else {
-      onExpand(expandedKeys.concat([node[fieldNames.key]]), {
-        nativeEvent: e,
-        node: node,
-        expanded: !expanded
-      });
+      //如果有loadData则触发。
+      if (loadData && !loaded) {
+        setLoading(true);
+        loadData(node).then(function () {
+          setLoading(false);
+          setLoadedKeys(loadedKeys.concat([node[fieldNames.key]]));
+          onExpand(expandedKeys.concat([node[fieldNames.key]]), {
+            nativeEvent: e,
+            node: node,
+            expanded: !expanded
+          });
+        }, function () {
+          setLoading(false);
+        });
+      } else {
+        onExpand(expandedKeys.concat([node[fieldNames.key]]), {
+          nativeEvent: e,
+          node: node,
+          expanded: !expanded
+        });
+      }
     }
-  }, [expandedKeys, onExpand, expanded]);
-  var nodeEntity = /*#__PURE__*/React.createElement(MainProperty, {
+  }, [expandedKeys, onExpand, expanded, loading, loadData, node]);
+  var nodeEntity = node.nodeType !== nodeTypeMap.virtual ? null : /*#__PURE__*/React.createElement(MainProperty, {
     isFlex: isFlex,
     mainWidth: mainWidth,
     main: /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
@@ -195,7 +223,7 @@ export var TreeNodeController = observer(function (_ref) {
       align: "center",
       cursor: "pointer",
       onClick: onClickExpandIconhandler
-    }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    }, loading ? /*#__PURE__*/React.createElement(LoadingIcon, null) : /*#__PURE__*/React.createElement(ExpandedIcon, {
       expanded: expanded,
       hidden: node.isLeaf
     })), /*#__PURE__*/React.createElement(TitleArea, {
@@ -234,6 +262,7 @@ export var TreeNodeController = observer(function (_ref) {
         key: childNode[fieldNames.key],
         node: childNode,
         fieldNames: fieldNames,
+        loadData: loadData,
         isFlex: isFlex,
         isTableMode: isTableMode,
         columns: columns,
@@ -245,7 +274,9 @@ export var TreeNodeController = observer(function (_ref) {
         expandedKeys: expandedKeys,
         contextMenuRender: contextMenuRender,
         titleRender: titleRender,
-        onContextMenuItemSelect: onContextMenuItemSelect
+        onContextMenuItemSelect: onContextMenuItemSelect,
+        loadedKeys: loadedKeys,
+        setLoadedKeys: setLoadedKeys
       });
     }));
   }), expanded && treeNodeGroup && Array.isArray(treeNodeGroup) && treeNodeGroup.map(function (childNode) {
@@ -256,6 +287,7 @@ export var TreeNodeController = observer(function (_ref) {
       node: childNode,
       fieldNames: fieldNames,
       isFlex: isFlex,
+      loadData: loadData,
       isTableMode: isTableMode,
       columns: columns,
       onSelect: onSelect,
@@ -266,7 +298,9 @@ export var TreeNodeController = observer(function (_ref) {
       expandedKeys: expandedKeys,
       contextMenuRender: contextMenuRender,
       titleRender: titleRender,
-      onContextMenuItemSelect: onContextMenuItemSelect
+      onContextMenuItemSelect: onContextMenuItemSelect,
+      loadedKeys: loadedKeys,
+      setLoadedKeys: setLoadedKeys
     });
   }));
 });

package/dist/Tree/test.js

@@ -72,7 +72,7 @@ var MyStore = /*#__PURE__*/function () {
 }();
 var mystore = new MyStore([{
   key: '1',
-  title: 'jss',
+  title: 'js222s',
   count: 1,
   selectable: false,
   isLeaf: true,
@@ -131,7 +131,7 @@ var mystore = new MyStore([{
     count: 1
   }]
 }]);
-var Title = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    text-align: center;\n"])));
+var Title = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: 100%;\n\ttext-align: center;\n"])));
 export default (function () {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -204,6 +204,13 @@ export default (function () {
     },
     titleRender: function titleRender(node) {
       return node.title;
+    },
+    loadData: function loadData() {
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          resolve(true);
+        }, 2000);
+      });
     }
   }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -86,5 +86,5 @@
   "authors": [
     "less-step-jss 1599925910@qq.com"
   ],
-  "gitHead": "e64b8404e6b9d9ce2c7d411d6183ce27a2c624bf"
+  "gitHead": "a49f28bab74144cfa6a8982009a73edb58a38088"
 }