@teamix/pro 1.2.8 → 1.2.12

package/es/form/ProForm/index.scss

@@ -230,14 +230,12 @@
   }
 }
 
-// 筛选和抽屉按钮
-.#{$teamix-pro-form}-filter-advanced,
+// 抽屉按钮
 .#{$css-prefix}drawer-footer {
   .#{$css-prefix}formily-button-group {
     margin-top: 0;
   }
 }
-
 .#{$teamix-pro-form}-button-affix-auto.#{$css-prefix}affix,
 .#{$teamix-pro-form}-button-affix-always.#{$css-prefix}affix {
   left: 0;
@@ -259,22 +257,6 @@
   }
 }
 
-// 高级筛选
-.#{$teamix-pro-form}-filter-advanced,
-.#{$teamix-pro-form}-filter-simple {
-  .#{$form-item-cls}-feedback-layout-popover {
-    margin-bottom: 0;
-  }
-  .#{$css-prefix}date-picker2-input {
-    .#{$css-prefix}input {
-      width: inherit;
-      input {
-        width: inherit;
-      }
-    }
-  }
-}
-
 // ArrayItems
 .#{$css-prefix}formily-array-items {
   .#{$css-prefix}formily-grid-layout {
@@ -288,3 +270,12 @@
     cursor: pointer;
   }
 }
+
+/* hack todo remove */
+.#{$form-item-cls}-control-content-component {
+  .teamix-pro-field-tooltip.teamix-pro-field-checkbox {
+    .teamix-pro-lable-icon-tip-icon {
+      transform: translate(0px, 4px);
+    }
+  }
+}

package/es/form/ProForm/useFormDisplayValues.d.ts

@@ -1,6 +1,4 @@
-/**
- * 获取表单值的可显示值
- * @returns 如果某字段有dataSource，则返回value对应label
- */
+import type { Form } from '@formily/core';
 declare const useFormDisplayValues: () => any;
-export default useFormDisplayValues;
+declare const getFormDisplayValues: (form: Form) => any;
+export { useFormDisplayValues, getFormDisplayValues };

package/es/form/ProForm/useFormDisplayValues.js

@@ -15,51 +15,57 @@ import { isArr, isPlainObj, getValueByValue } from '@teamix/utils';
 /**
  * 获取表单值的可显示值
  * @returns 如果某字段有dataSource，则返回value对应label
+ * @example const example = {
+    a: [
+        [{ b: 'a.0.0.b', c: 'a.0.0.c' }, { d: 'a.0.1.d' }],
+        { e: [{ f: { g: [{ h: 'a.1.e.0.f.g.0.h' }] } }, 'a.1.e.1'] },
+      ],
+  };
+  console.log(getDisplayValues(example));
  */
 
-var useFormDisplayValues = function useFormDisplayValues() {
-  var form = useForm();
-  var values = form.values; // 判断值的类型，递归获取每个值在该结构中的完整路径
+var getDisplayValues = function getDisplayValues(form, values) {
+  var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var displayValues; // 判断值的类型，递归获取每个值在该结构中的完整路径
 
-  var getDisplayValues = function getDisplayValues(values) {
-    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    var displayValues;
+  if (isPlainObj(values)) {
+    displayValues = {};
+    Object.entries(values).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
 
-    if (isPlainObj(values)) {
-      displayValues = {};
-      Object.entries(values).forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            key = _ref2[0],
-            value = _ref2[1];
+      var path = prefix ? "".concat(prefix, ".").concat(key) : "".concat(key);
+      displayValues[key] = getDisplayValues(form, value, path);
+    });
+  } else if (isArr(values)) {
+    displayValues = []; // todo 如果对象或数组的值不再是对象或数组，并且找不到路径，判断为非复合组件，直接返回原始值
 
-        var path = prefix ? "".concat(prefix, ".").concat(key) : "".concat(key);
-        displayValues[key] = getDisplayValues(value, path);
-      });
-    } else if (isArr(values)) {
-      displayValues = [];
-      values.map(function (value, index) {
-        var path = prefix ? "".concat(prefix, ".").concat(index) : "".concat(index);
-        displayValues[index] = getDisplayValues(value, path);
-      });
-    } else {
-      // 通过值的完整路径获取字段address（从form实例的indexes中），然后获取该字段的value在该字段dataSource中对应的label
-      var address = form.indexes[prefix];
-      var field = form.query(address).take();
-      displayValues = getValueByValue(field === null || field === void 0 ? void 0 : field.dataSource, values) || values;
-    }
+    values.map(function (value, index) {
+      var path = prefix ? "".concat(prefix, ".").concat(index) : "".concat(index);
+      displayValues[index] = getDisplayValues(form, value, path);
+    });
+  } else {
+    // 通过值的完整路径获取字段address（从form实例的indexes中），然后获取该字段的value在该字段dataSource中对应的label
+    var address = form.indexes[prefix];
+    var field = form.query(address).take();
+    displayValues = {
+      title: field === null || field === void 0 ? void 0 : field.title,
+      value: values,
+      displayValue: getValueByValue(field === null || field === void 0 ? void 0 : field.dataSource, values)
+    };
+  }
 
-    return displayValues;
-  }; // 测试样例
-  // const example = {
-  //   a: [
-  //     [{ b: 'a.0.0.b', c: 'a.0.0.c' }, { d: 'a.0.1.d' }],
-  //     { e: [{ f: { g: [{ h: 'a.1.e.0.f.g.0.h' }] } }, 'a.1.e.1'] },
-  //   ],
-  // };
-  // console.log(getDisplayValues(example));
+  return displayValues;
+};
 
+var useFormDisplayValues = function useFormDisplayValues() {
+  var form = useForm();
+  return getDisplayValues(form, form.values);
+};
 
-  return getDisplayValues(values);
+var getFormDisplayValues = function getFormDisplayValues(form) {
+  return getDisplayValues(form, form.values);
 };
 
-export default useFormDisplayValues;
+export { useFormDisplayValues, getFormDisplayValues };

package/es/form/SchemaForm/index.js

@@ -62,6 +62,7 @@ export default /*#__PURE__*/memo(function (_ref) {
   var schema = _ref.schema,
       scope = _ref.scope,
       components = _ref.components;
+  // 创建 SchemaField
   var SchemaField = useMemo(function () {
     return createSchemaField({
       components: _objectSpread(_objectSpread({}, ProFieldComponents), {}, {
@@ -92,15 +93,15 @@ export default /*#__PURE__*/memo(function (_ref) {
         Text: Text
       })
     });
-  }, []); // 合并schema中request的scope
+  }, []); // 合并 schema 中 request 的 scope
 
   var mergedScope = useMemo(function () {
     return _objectSpread({}, scope);
-  }, [scope]); // 格式化schema
+  }, [scope]); // 格式化 schema
 
   var formatSchema = useCallback(function (schema) {
     var schemaProperties = {};
-    schema.forEach(function (item) {
+    schema === null || schema === void 0 ? void 0 : schema.forEach(function (item) {
       var newItem = warning(item);
       var _newItem = newItem,
           originalComponent = _newItem.component; // 根据component的不同，初始化为内置的item
@@ -236,15 +237,15 @@ export default /*#__PURE__*/memo(function (_ref) {
     });
     return schemaProperties;
   }, [mergedScope]);
-  var schemaPro = useMemo(function () {
+  var proFormSchema = useMemo(function () {
     return {
       type: 'object',
       properties: formatSchema(schema)
     };
-  }, []); // console.log(schemaPro);
+  }, []); // console.log(proFormSchema);
 
   return /*#__PURE__*/React.createElement(SchemaField, {
-    schema: schemaPro,
+    schema: proFormSchema,
     components: components,
     scope: mergedScope
   });

package/es/form/index.d.ts

@@ -108,7 +108,8 @@ export { createForm, FormConsumer, FormDialog, FormDrawer, FormStep, FormTab, Fo
 /**
  * 导出 Filter 组件
  */
-import { AdvancedFilter, SimpleFilter, QueryFilter } from './Filter';
+import { AdvancedFilter, SimpleFilter } from './Filter';
+import { QueryFilter } from './Filter/index2';
 export { AdvancedFilter, SimpleFilter, QueryFilter };
 /**
  * 导出 ProForm 组件，支持快速搭建表单

package/es/form/index.js

@@ -19,7 +19,7 @@ export { _formilyReactive as formilyReactive };
 import * as _formilyTeamix from '@teamix/formily';
 export { _formilyTeamix as formilyTeamix };
 import * as originalFormilyReact from '@formily/react';
-import useFormDisplayValues from './ProForm/useFormDisplayValues';
+import { useFormDisplayValues } from './ProForm/useFormDisplayValues';
 import useFieldRequest from './ProForm/useFieldRequest';
 
 var formilyReact = _objectSpread(_objectSpread({}, originalFormilyReact), {}, {
@@ -40,7 +40,8 @@ export { createForm, FormConsumer, FormDialog, FormDrawer, FormStep, FormTab, Fo
  * 导出 Filter 组件
  */
 
-import { AdvancedFilter, SimpleFilter, QueryFilter } from './Filter';
+import { AdvancedFilter, SimpleFilter } from './Filter';
+import { QueryFilter } from './Filter/index2';
 export { AdvancedFilter, SimpleFilter, QueryFilter };
 /**
  * 导出 ProForm 组件，支持快速搭建表单

package/es/form/typing.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { IFormFeedback, Form as FormType, FieldPatternTypes } from '@formily/core';
 import type { IFormLayoutProps } from '@teamix/formily';
 import { CommonRequestConfig } from '@teamix/utils';
+import React from 'react';
 interface AnyObject {
     [propName: string]: any;
 }
@@ -64,6 +65,8 @@ export interface ProFormProps extends IFormLayoutProps {
     onSubmitFailed?: (feedbacks: IFormFeedback[]) => void;
 }
 export interface QueryFilterProps extends ProFormProps {
+    addonBefore?: ReactNode;
+    addonAfter?: ReactNode;
     onFilter?: (values: any) => void;
     onReset?: (payload?: any) => void;
 }

package/es/index.d.ts

@@ -21,5 +21,5 @@ export * from './page-container';
 export * from './page-header';
 export * from './skeleton';
 export * from './table';
-declare const version = "1.2.7";
+declare const version = "1.2.11";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, hooks, nocode, templates, utils, };

package/es/index.js

@@ -27,7 +27,7 @@ export * from './page-header';
 export * from './skeleton';
 export * from './table'; // export * from './sidebar';
 
-var version = '1.2.7';
+var version = '1.2.11';
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, // ProLayout,
 ProPageContainer, ProPageHeader, ProSkeleton, ProTable, // ProSidebar,
 hooks, nocode, templates, utils };

package/es/page-header/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TagProps, CloseableProps } from '@alicloudfe/components/types/tag';
 import { ItemProps } from '@alicloudfe/components/types/breadcrumb';
+import { LinkPath } from '@teamix/utils';
+import { ProTagItem } from '../utils/components/tags';
 import { ProActionGroupProps } from '../actions';
 import { ProInfoProps } from '../info';
 import './index.scss';
@@ -10,14 +11,7 @@ export interface ProPageHeaderBreadcrumbItem extends ItemProps {
      */
     text?: string;
 }
-export declare type ProPageHeaderTagItem = (TagProps | (CloseableProps & {
-    closable: true;
-})) & {
-    /**
-     * @deprecated 建议使用 children 代替
-     */
-    text?: string;
-};
+export declare type ProPageHeaderTagItem = ProTagItem;
 declare type Color = 'blue' | 'green' | 'orange' | 'red' | 'yellow' | string;
 export declare type ProPageHeaderDataItem = {
     title: string;
@@ -25,20 +19,35 @@ export declare type ProPageHeaderDataItem = {
     color?: Color;
 } & React.HTMLAttributes<HTMLElement>;
 export declare type ProPageHeaderProps = {
+    /** 标题 */
     title?: React.ReactNode;
+    /** 描述 */
     description?: React.ReactNode;
-    icon?: string;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 图标颜色 */
     iconColor?: Color;
+    /** 图标背景类型 */
     iconBackgroundType?: 'circle' | 'square';
+    /** 图标背景色 */
     iconBackgroundColor?: Color;
-    goback?: string | boolean;
+    /** 返回按钮配置 */
+    goback?: boolean | LinkPath | ((e: React.MouseEvent) => void);
+    /** 背景图 */
     image?: string;
+    /** 加载中 */
     loading?: boolean;
+    /** 面包屑配置 */
     breadcrumb?: ProPageHeaderBreadcrumbItem[];
+    /** 额外信息区配置 */
     extra?: ProActionGroupProps | React.ReactNode;
+    /** 操作区配置 */
     operation?: ProActionGroupProps | React.ReactNode;
+    /** 标签组 */
     tags?: ProPageHeaderTagItem[];
+    /** 数据概览项 */
     data?: ProPageHeaderDataItem[];
+    /** 底部详情 */
     info?: ProInfoProps | React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
 declare const ProPageHeader: React.FC<ProPageHeaderProps>;

package/es/page-header/index.js

@@ -1,7 +1,6 @@
 var _excluded = ["text", "children"],
-    _excluded2 = ["text", "children", "closable"],
-    _excluded3 = ["color", "title", "num", "className"],
-    _excluded4 = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style"];
+    _excluded2 = ["color", "title", "num", "className"],
+    _excluded3 = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -17,8 +16,9 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
 import TeamixIcon from '@teamix/icon';
-import { Breadcrumb, Tag } from '@alicloudfe/components';
-import { baseClass } from '@teamix/utils';
+import { Breadcrumb } from '@alicloudfe/components';
+import { baseClass, goToLink } from '@teamix/utils';
+import { renderTags } from '../utils/components/tags';
 import { ProActionGroup } from '../actions';
 import { ProSkeletonRaw } from '../skeleton';
 import ProInfo from '../info';
@@ -64,40 +64,6 @@ var renderActionGroup = function renderActionGroup(group, defaultProps) {
   return group;
 };
 
-var renderTags = function renderTags(tags) {
-  if (!tags) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(Tag.Group, {
-    className: cls('tags')
-  }, tags.map(function (tag, i) {
-    // @ts-ignore
-    var text = tag.text,
-        children = tag.children,
-        closable = tag.closable,
-        others = _objectWithoutProperties(tag, _excluded2);
-
-    if (closable) {
-      return /*#__PURE__*/React.createElement(Tag.Closeable, _objectSpread({
-        key: i,
-        size: "large",
-        style: {
-          marginBottom: 0
-        }
-      }, others), text || children);
-    }
-
-    return /*#__PURE__*/React.createElement(Tag, _objectSpread({
-      key: i,
-      size: "large",
-      style: {
-        marginBottom: 0
-      }
-    }, others), text || children);
-  }));
-};
-
 var isPresetColor = function isPresetColor(color) {
   if (!color) {
     return false;
@@ -135,7 +101,7 @@ var renderData = function renderData(data) {
         title = item.title,
         num = item.num,
         customClassName = item.className,
-        others = _objectWithoutProperties(item, _excluded3);
+        others = _objectWithoutProperties(item, _excluded2);
 
     var _getColorAndStyle = getColorAndStyle(color),
         className = _getColorAndStyle.className,
@@ -183,7 +149,7 @@ var ProPageHeader = function ProPageHeader(props) {
       children = props.children,
       className = props.className,
       style = props.style,
-      others = _objectWithoutProperties(props, _excluded4);
+      others = _objectWithoutProperties(props, _excluded3);
 
   var history = useHistory();
   var backgroundImage = image ? "url('".concat(image, "')") : undefined;
@@ -201,12 +167,22 @@ var ProPageHeader = function ProPageHeader(props) {
         iconClass = _getColorAndStyle2.className,
         iconStyle = _getColorAndStyle2.style;
 
-    var onBack = function onBack() {
+    var onBack = function onBack(e) {
+      if (!goback) {
+        return;
+      }
+
+      if (typeof goback === 'function') {
+        goback(e);
+        return;
+      }
+
       if (goback === true) {
         history.go(-1);
-      } else if (typeof goback === 'string') {
-        history.push && history.push(goback);
+        return;
       }
+
+      goToLink(goback, history);
     };
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, goback && /*#__PURE__*/React.createElement(TeamixIcon, {
@@ -214,14 +190,14 @@ var ProPageHeader = function ProPageHeader(props) {
       onClick: onBack,
       type: "return-line",
       size: "large"
-    }), icon && /*#__PURE__*/React.createElement(TeamixIcon, {
+    }), icon && (typeof icon === 'string' ? /*#__PURE__*/React.createElement(TeamixIcon, {
       className: classnames(iconClass, cls('title-icon')),
       style: iconStyle,
       type: icon,
       size: "large"
-    }), /*#__PURE__*/React.createElement("span", {
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, icon)), /*#__PURE__*/React.createElement("span", {
       className: cls('title-name')
-    }, title), renderTags(tags));
+    }, title), renderTags(tags, 'large'));
   };
 
   return /*#__PURE__*/React.createElement("header", _objectSpread({

package/es/page-header/index.scss

@@ -124,17 +124,6 @@ $prefix: 'teamix-pro-page-header';
     cursor: pointer;
   }
 
-  .#{$prefix}-tags {
-    display: inline-flex;
-    align-items: center;
-
-    & > div {
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
   .#{$prefix}-color {
     &-blue {
       color: var(--color-notice-5);

package/es/sidebar/components/tree/index.js

@@ -1,3 +1,11 @@
+var _excluded = ["dataSource", "searchKey", "onSelect"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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."); }
@@ -18,35 +26,63 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import { Tree } from '@alicloudfe/components';
-import { baseClass } from '@teamix/utils';
-import React, { useEffect, useState } from 'react';
+import { baseClass, treeToList } from '@teamix/utils';
+import React, { isValidElement, useEffect, useState } from 'react';
 var cls = baseClass('teamix-pro-sidebar-tree');
 
 var ProSidebarTree = function ProSidebarTree(props) {
   var dataSourceProp = props.dataSource,
-      searchKey = props.searchKey; // 自动展开父节点。过滤时用
+      searchKey = props.searchKey,
+      onSelect = props.onSelect,
+      others = _objectWithoutProperties(props, _excluded); // 自动展开父节点。过滤时用
 
-  var _useState = useState(),
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      matchedKeys = _useState2[0],
-      setMatchedKeys = _useState2[1];
+      autoExpandParent = _useState2[0],
+      setAutoExpandParent = _useState2[1];
 
   var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      expandedKeys = _useState4[0],
-      setExpandedKeys = _useState4[1];
+      matchedKeys = _useState4[0],
+      setMatchedKeys = _useState4[1];
 
-  var _useState5 = useState(dataSourceProp !== null && dataSourceProp !== void 0 ? dataSourceProp : []),
+  var _useState5 = useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      dataSource = _useState6[0],
-      setDataSource = _useState6[1];
+      expandedKeys = _useState6[0],
+      setExpandedKeys = _useState6[1];
+
+  var _useState7 = useState(dataSourceProp !== null && dataSourceProp !== void 0 ? dataSourceProp : []),
+      _useState8 = _slicedToArray(_useState7, 2),
+      dataSource = _useState8[0],
+      setDataSource = _useState8[1];
 
+  useEffect(function () {
+    getAllExpend();
+  }, []);
   useEffect(function () {
     filterDataSource(searchKey !== null && searchKey !== void 0 ? searchKey : '');
-  }, [searchKey]); // 过滤
+  }, [searchKey]); // 获取全部展开节点key
+
+  var getAllExpend = function getAllExpend() {
+    var allKeys = treeToList(dataSource).map(function (item) {
+      return item.value;
+    });
+    setExpandedKeys(allKeys);
+  }; // 过滤
+
 
   var filterDataSource = function filterDataSource(value) {
+    if (!value) {
+      setExpandedKeys([]);
+      getAllExpend();
+    }
+
     value = value.trim();
     var matchedKeys = [];
 
@@ -58,7 +94,7 @@ var ProSidebarTree = function ProSidebarTree(props) {
     var loop = function loop(data) {
       return data.forEach(function (item) {
         if (item.label.indexOf(value) > -1) {
-          matchedKeys.push(item.key);
+          matchedKeys.push(item.value);
         }
 
         if (item.children && item.children.length) {
@@ -69,27 +105,58 @@ var ProSidebarTree = function ProSidebarTree(props) {
 
     loop(dataSource);
     setExpandedKeys(_toConsumableArray(matchedKeys));
+    setAutoExpandParent(true);
     setMatchedKeys(matchedKeys);
   };
 
   var filterTreeNode = function filterTreeNode(node) {
     return matchedKeys && matchedKeys.indexOf(node.props.eventKey) > -1;
+  }; // 节点展开回调
+
+
+  var handleExpand = function handleExpand(key) {
+    setExpandedKeys(key);
+    setAutoExpandParent(false);
+  }; // 渲染树节点
+
+
+  var renderTreeNode = function renderTreeNode(data) {
+    return data.map(function (item) {
+      return /*#__PURE__*/React.createElement(Tree.Node, {
+        key: item.value,
+        label: renderTreeNodeItem(item)
+      }, item.children && item.children.length > 0 && renderTreeNode(item.children));
+    });
+  }; // 渲染单个树节点 label
+
+
+  var renderTreeNodeItem = function renderTreeNodeItem(data) {
+    var node = /*#__PURE__*/React.createElement(React.Fragment, null, data.label);
+
+    if (data.tag) {
+      if ( /*#__PURE__*/isValidElement(data.tag)) {
+        node = /*#__PURE__*/React.createElement(React.Fragment, null, node, data.tag);
+      }
+    }
+
+    return node;
   };
 
   return /*#__PURE__*/React.createElement("div", {
     className: cls()
-  }, /*#__PURE__*/React.createElement(Tree, {
-    draggable: true,
+  }, /*#__PURE__*/React.createElement(Tree, _objectSpread({
     defaultExpandAll: true,
     isLabelBlock: true,
     isNodeBlock: {
       defaultPaddingLeft: 8,
       indent: 16
     },
-    dataSource: dataSource,
     filterTreeNode: filterTreeNode,
-    expandedKeys: expandedKeys
-  }));
+    expandedKeys: expandedKeys,
+    onExpand: handleExpand,
+    autoExpandParent: autoExpandParent,
+    onSelect: onSelect
+  }, others), renderTreeNode(dataSource)));
 };
 
 export default ProSidebarTree;