@teamix/pro 1.3.2 → 1.3.5

package/es/sidebar/components/tree-node/componnets/IconSwitch/index.js

@@ -0,0 +1,73 @@
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import TeamixIcon from '@teamix/icon';
+import { baseClass } from '@teamix/utils';
+import React, { isValidElement, useEffect, useState } from 'react';
+import ProHoverTooltip from '../HoverTooltip';
+import './index.scss';
+var cls = baseClass('teamix-pro-icon-switch');
+
+var ProIconSwitch = function ProIconSwitch(props) {
+  var visibleProp = props.visible,
+      icon = props.icon,
+      activeIcon = props.activeIcon,
+      onChange = props.onChange,
+      tooltipVisible = props.tooltipVisible,
+      tooltipProps = props.tooltipProps,
+      tooltip = props.tooltip,
+      cancelTooltip = props.cancelTooltip;
+
+  var _useState = useState(visibleProp !== null && visibleProp !== void 0 ? visibleProp : false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  useEffect(function () {
+    setVisible(visibleProp !== null && visibleProp !== void 0 ? visibleProp : false);
+  }, [visibleProp]); // 点击操作
+
+  var clickHandle = function clickHandle(e, state) {
+    e.stopPropagation();
+    setVisible(state);
+    onChange === null || onChange === void 0 ? void 0 : onChange(state);
+  };
+
+  if (visible) {
+    if ( /*#__PURE__*/isValidElement(icon)) {
+      return icon;
+    }
+  }
+
+  if ( /*#__PURE__*/isValidElement(activeIcon)) {
+    return activeIcon;
+  }
+
+  return /*#__PURE__*/React.createElement(ProHoverTooltip, {
+    visible: tooltipVisible,
+    tooltip: visible ? cancelTooltip !== null && cancelTooltip !== void 0 ? cancelTooltip : tooltip : tooltip,
+    tooltipProps: tooltipProps,
+    trigger: /*#__PURE__*/React.createElement(TeamixIcon, {
+      size: "small",
+      className: cls({
+        '': true,
+        active: visible
+      }),
+      type: visible ? activeIcon !== null && activeIcon !== void 0 ? activeIcon : icon : icon,
+      onClick: function onClick(e) {
+        clickHandle(e, !visible);
+      }
+    })
+  });
+};
+
+export default ProIconSwitch;

package/es/sidebar/components/tree-node/componnets/IconSwitch/index.scss

@@ -0,0 +1,7 @@
+.teamix-pro-icon-switch {
+  color: var(--color-fill1-4, #d9d9d9);
+  cursor: pointer;
+}
+.teamix-pro-icon-switch-active {
+  color: var(--color-warning-7, #ffb96e);
+}

package/es/sidebar/components/tree-node/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ProSidebarDataSource, ProSidebarDataSourceItem } from '../../typing';
+import { ProSidebarProps } from '../..';
+declare const ProSideBarTreeNode: React.FC<ProSidebarDataSourceItem>;
+export declare function renderTreeNode(data: ProSidebarDataSource): JSX.Element[];
+export declare function renderTreeNodeDependenceValue(data: ProSidebarDataSource, onBeforeRenderNodeEvent: ProSidebarProps['onBeforeRenderNodeEvent'], checkedKeys: any[], selectedKeys: any[], allData?: ProSidebarDataSource): JSX.Element[];
+export default ProSideBarTreeNode;

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

@@ -0,0 +1,225 @@
+var _excluded = ["type", "action", "props"];
+
+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 _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; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Tree } from '@alicloudfe/components';
+import { ProActionGroup } from '../../../actions';
+import { baseClass, renderTags } from '@teamix/utils';
+import React, { isValidElement, useState } from 'react';
+import ProField from '@teamix/pro-field';
+import ProIconAction from './componnets/IconAction';
+import ProIconSwitch from './componnets/IconSwitch';
+import ProHoverTooltip from './componnets/HoverTooltip';
+var cls = baseClass('teamix-pro-sidebar-tree');
+
+var ProSideBarTreeNode = function ProSideBarTreeNode(props) {
+  var tag = props.tag,
+      render = props.render,
+      _props$valueType = props.valueType,
+      valueType = _props$valueType === void 0 ? 'text' : _props$valueType,
+      fieldProps = props.fieldProps,
+      extra = props.extra,
+      label = props.label;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      extraVisible = _useState2[0],
+      setExtraVisible = _useState2[1]; // 获取 extra 区域渲染组件
+
+
+  var getExtraComponent = function getExtraComponent(type, action, props, others) {
+    var _ref = others !== null && others !== void 0 ? others : {},
+        _ref$hover = _ref.hover,
+        hover = _ref$hover === void 0 ? true : _ref$hover;
+
+    if (type === 'action') {
+      return /*#__PURE__*/React.createElement(ProHoverTooltip, {
+        visible: !hover || extraVisible,
+        trigger: /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread({
+          type: "text",
+          actions: action
+        }, props))
+      });
+    }
+
+    if (type === 'iconSwitch') {
+      return /*#__PURE__*/React.createElement(ProIconSwitch, _objectSpread({
+        tooltipVisible: !hover || extraVisible
+      }, props));
+    }
+
+    if (type === 'iconAction') {
+      return /*#__PURE__*/React.createElement(ProIconAction, _objectSpread({
+        visible: !hover || extraVisible,
+        action: action
+      }, props));
+    }
+
+    if (type === 'custom') {
+      return /*#__PURE__*/React.createElement(ProHoverTooltip, {
+        className: cls('extra-custom'),
+        visible: !hover || extraVisible,
+        trigger: others.trigger
+      });
+    }
+  }; // 渲染 extra 区域
+
+
+  var renderExtra = function renderExtra() {
+    var result = /*#__PURE__*/React.createElement(React.Fragment, null); // extra 是否是 action 配置
+
+    var isActionGroupProps = Array.isArray(extra) && ! /*#__PURE__*/isValidElement(extra === null || extra === void 0 ? void 0 : extra[0]) && Array.isArray(extra === null || extra === void 0 ? void 0 : extra[0]); // 直接渲染 action
+
+    if (isActionGroupProps) {
+      result = /*#__PURE__*/React.createElement(ProActionGroup, {
+        actions: extra,
+        type: "text"
+      });
+    } // 大杂烩
+
+
+    if (extra && Array.isArray(extra)) {
+      result = /*#__PURE__*/React.createElement(React.Fragment, null, extra.map(function (item, index) {
+        if ( /*#__PURE__*/isValidElement(item) || typeof item === 'string') {
+          return /*#__PURE__*/React.createElement("span", {
+            key: index,
+            className: cls('item-content-extra-item')
+          }, item);
+        }
+
+        var type = item.type,
+            _item$action = item.action,
+            action = _item$action === void 0 ? {} : _item$action,
+            _item$props = item.props,
+            props = _item$props === void 0 ? {} : _item$props,
+            others = _objectWithoutProperties(item, _excluded);
+
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: cls('item-content-extra-item')
+        }, getExtraComponent(type, action, props, others));
+      }));
+    }
+
+    return result;
+  }; // 鼠标移入
+
+
+  var onMouseEnter = function onMouseEnter(e) {
+    var _e$target, _e$target$closest;
+
+    if (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$closest = _e$target.closest) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.call(_e$target, '.teamix-pro-sidebar-delete-overlay')) {
+      return;
+    }
+
+    setExtraVisible(true);
+  }; // 鼠标移出
+
+
+  var onMouseLeave = function onMouseLeave(e) {
+    var _e$target2, _e$target2$closest;
+
+    if (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$closest = _e$target2.closest) === null || _e$target2$closest === void 0 ? void 0 : _e$target2$closest.call(_e$target2, '.teamix-pro-sidebar-delete-overlay')) {
+      return;
+    }
+
+    setExtraVisible(false);
+  }; // 获取 ProFieldRender
+
+
+  var getFieldRender = function getFieldRender() {
+    if (typeof render === 'function') {
+      return render;
+    }
+
+    return _objectSpread({
+      ellipsis: true,
+      emptyText: '-'
+    }, render);
+  }; // 获取 tag 参数
+
+
+  var getTags = function getTags(tags) {
+    if ( /*#__PURE__*/isValidElement(tags)) {
+      return tags;
+    }
+
+    if (Array.isArray(tags)) {
+      return tags.map(function (item) {
+        return _objectSpread({
+          size: 'small'
+        }, item);
+      });
+    }
+
+    if (_typeof(tags) === 'object') {
+      return _objectSpread({
+        size: 'small'
+      }, tags);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls('item-context'),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls('item-context-front')
+  }, /*#__PURE__*/React.createElement(ProField, _objectSpread({
+    value: label,
+    type: valueType,
+    render: getFieldRender()
+  }, fieldProps)), tag && /*#__PURE__*/React.createElement("span", {
+    className: cls('item-context-tag')
+  }, renderTags(getTags(tag)))), /*#__PURE__*/React.createElement("div", {
+    className: cls('item-content-extra')
+  }, renderExtra()));
+}; // 渲染树节点
+
+
+export function renderTreeNode(data) {
+  return data.map(function (item) {
+    return /*#__PURE__*/React.createElement(Tree.Node, {
+      key: item.value,
+      label: /*#__PURE__*/React.createElement(ProSideBarTreeNode, _objectSpread({}, item))
+    }, item.children && item.children.length > 0 && renderTreeNode(item.children));
+  });
+} // 渲染树节点 依赖 value
+
+export function renderTreeNodeDependenceValue(data, onBeforeRenderNodeEvent, checkedKeys, selectedKeys, allData) {
+  return data.map(function (item) {
+    var newProps = item;
+
+    if (onBeforeRenderNodeEvent) {
+      newProps = onBeforeRenderNodeEvent(item, checkedKeys, selectedKeys, allData !== null && allData !== void 0 ? allData : data);
+    }
+
+    return /*#__PURE__*/React.createElement(Tree.Node, {
+      key: item.value,
+      label: /*#__PURE__*/React.createElement(ProSideBarTreeNode, _objectSpread({}, newProps))
+    }, item.children && item.children.length > 0 && renderTreeNodeDependenceValue(item.children, onBeforeRenderNodeEvent, checkedKeys, selectedKeys, allData !== null && allData !== void 0 ? allData : data));
+  });
+}
+export default ProSideBarTreeNode;

package/es/sidebar/components/tree-node/index.scss

@@ -0,0 +1,58 @@
+.teamix-pro-sidebar-tree {
+  &-item-context {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    &-tag {
+      margin-left: 6px;
+      display: flex;
+      align-items: center;
+    }
+
+    .teamix-pro-field {
+      display: flex;
+      align-items: center;
+
+      .teamix-pro-ellipsis{
+        white-space: normal;
+      }
+    }
+  }
+  &-item-context-front {
+    display: flex;
+    align-items: center;
+  }
+  &-item-content-has-extra {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    text-align: center;
+  }
+
+  &-item-content-extra {
+    &-item {
+      margin-right: 4px;
+      display: inline-block;
+    }
+  }
+
+  &-extra-custom {
+    color: var(--color-fill1-6, #848484);
+  }
+
+  // 在 ProField 里 icon 后的主要文本默认加粗。这里抵消
+  .teamix-icon + span.teamix-pro-field-output-bold {
+    font-weight: unset;
+  }
+  .teamix-icon + span.teamix-pro-ellipsis-content {
+    .teamix-pro-field-output-bold {
+      font-weight: unset;
+    }
+  }
+  .next-tree.next-node-block .next-tree-node-inner{
+    padding: 6px 0px 6px 4px !important;
+    margin: 0 0 4px 0px;
+    border-radius: 2px;
+  }
+}

package/es/sidebar/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import './index.scss';
 import { ProSidebarProps } from './typing';
+export * from './typing';
+export * from './utils';
 declare const ProSidebar: React.FC<ProSidebarProps>;
 export default ProSidebar;

package/es/sidebar/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["dataSource", "className", "style", "searchOnChange", "showSearch", "onSelect", "treeProps", "cardProps"];
+var _excluded = ["selectedKeys", "checkedKeys", "dataSource", "className", "style", "searchOnChange", "showSearch", "onSelect", "onCheck", "treeProps", "cardProps", "actionRef", "onBeforeRenderNodeEvent", "beforeRenderNode", "url", "method", "params", "data", "extendParams", "beforeRequest", "successMsg", "errorMsg", "formatParams", "formatResult", "onSuccess", "onError", "link", "scrollArea", "onExpandAllChange", "onExpandLevelChange"];
 
 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; }
 
@@ -22,35 +22,156 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './index.scss';
-import { baseClass } from '@teamix/utils';
+import { baseClass, doCommonRequest } from '@teamix/utils';
 import ProSidebarContainer from './components/sidebar-container';
 import ProSidebarTree from './components/tree';
+import { getTreeLevel, ProSkeletonRaw } from '..';
+import { useActionType } from './utils/action-ref';
+export * from './typing';
+export * from './utils';
 var cls = baseClass('teamix-pro-sidebar');
 
 var ProSidebar = function ProSidebar(props) {
-  var dataSource = props.dataSource,
-      className = props.className,
+  var selectedKeys = props.selectedKeys,
+      checkedKeys = props.checkedKeys,
+      dataSourceProp = props.dataSource,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
       style = props.style,
       _searchOnChange = props.searchOnChange,
       _props$showSearch = props.showSearch,
       showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
       onSelect = props.onSelect,
+      onCheck = props.onCheck,
       treeProps = props.treeProps,
       cardProps = props.cardProps,
+      actionRefProp = props.actionRef,
+      onBeforeRenderNodeEvent = props.onBeforeRenderNodeEvent,
+      beforeRenderNode = props.beforeRenderNode,
+      _props$url = props.url,
+      url = _props$url === void 0 ? '' : _props$url,
+      _props$method = props.method,
+      method = _props$method === void 0 ? 'post' : _props$method,
+      params = props.params,
+      data = props.data,
+      extendParams = props.extendParams,
+      beforeRequest = props.beforeRequest,
+      successMsg = props.successMsg,
+      errorMsg = props.errorMsg,
+      formatParams = props.formatParams,
+      formatResult = props.formatResult,
+      onSuccess = props.onSuccess,
+      onError = props.onError,
+      link = props.link,
+      _props$scrollArea = props.scrollArea,
+      scrollArea = _props$scrollArea === void 0 ? 'all' : _props$scrollArea,
+      onExpandAllChangeProp = props.onExpandAllChange,
+      onExpandLevelChangeProp = props.onExpandLevelChange,
       others = _objectWithoutProperties(props, _excluded); // 搜索的关键词
 
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
       searchKey = _useState2[0],
-      setSearchKey = _useState2[1];
+      setSearchKey = _useState2[1]; // loading 状态
+
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1]; // 数据源
+
+
+  var _useState5 = useState(dataSourceProp !== null && dataSourceProp !== void 0 ? dataSourceProp : []),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dataSource = _useState6[0],
+      setDataSource = _useState6[1]; // 展开全部状态
+
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      expandAllState = _useState8[0],
+      setExpandAllState = _useState8[1]; // 展开层级状态
+
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      expandLevelState = _useState10[0],
+      setExpandLevelState = _useState10[1]; // 树层级
+
+
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      expandLevel = _useState12[0],
+      setExpandLevel = _useState12[1];
+
+  var actionRef = useRef(); // const requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
+
+  var requestConfig = {
+    url: url,
+    method: method,
+    params: params,
+    data: data,
+    extendParams: extendParams,
+    beforeRequest: beforeRequest,
+    successMsg: successMsg,
+    errorMsg: errorMsg,
+    formatParams: formatParams,
+    formatResult: formatResult,
+    onSuccess: onSuccess,
+    onError: onError,
+    link: link
+  };
+  useEffect(function () {
+    if (url) {
+      request();
+    } else {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(function () {
+    setDataSource(dataSourceProp !== null && dataSourceProp !== void 0 ? dataSourceProp : []);
+  }, [dataSourceProp]); // 请求数据
+
+  var request = function request() {
+    setLoading(true);
+    doCommonRequest(requestConfig).then(function (resp) {
+      setDataSource(resp);
+    }).finally(function () {
+      setLoading(false);
+    });
+  };
+
+  useActionType(actionRefProp !== null && actionRefProp !== void 0 ? actionRefProp : actionRef, {
+    refresh: function refresh() {
+      request();
+    }
+  }); // 展开全部变化回调
+
+  var onExpandAllChange = function onExpandAllChange(status) {
+    setExpandAllState(status);
+    onExpandAllChangeProp === null || onExpandAllChangeProp === void 0 ? void 0 : onExpandAllChangeProp(status);
+  }; // 展开层级回调
+
+
+  var onExpandLevelChange = function onExpandLevelChange(level) {
+    setExpandLevelState(level);
+    onExpandLevelChangeProp === null || onExpandLevelChangeProp === void 0 ? void 0 : onExpandLevelChangeProp(level);
+  }; // DataSource 变化回调。用于更新层级
+
+
+  var onDataSourceChange = function onDataSourceChange(dataSource) {
+    var level = getTreeLevel(dataSource);
+    setExpandLevel(level);
+  };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cls(_defineProperty({
-      '': true
-    }, className, true)),
+    className: "".concat(cls({
+      '': true,
+      'scroll-tree': scrollArea === 'tree'
+    }), " ").concat(className),
     style: style
   }, /*#__PURE__*/React.createElement(ProSidebarContainer, _objectSpread(_objectSpread({
     searchOnChange: function searchOnChange(value) {
@@ -59,11 +180,25 @@ var ProSidebar = function ProSidebar(props) {
         setSearchKey(value);
       }
     },
-    showSearch: showSearch
-  }, others), cardProps), /*#__PURE__*/React.createElement(ProSidebarTree, _objectSpread({
+    onExpandAllChange: onExpandAllChange,
+    onExpandLevelChange: onExpandLevelChange,
+    showSearch: showSearch,
+    scrollArea: scrollArea,
+    expandLevel: expandLevel,
+    isTree: getTreeLevel(dataSource) > 1 ? true : false
+  }, others), cardProps), loading && /*#__PURE__*/React.createElement(ProSkeletonRaw.SideBar, null), !loading && /*#__PURE__*/React.createElement(ProSidebarTree, _objectSpread({
     dataSource: dataSource,
     searchKey: searchKey,
-    onSelect: onSelect
+    onSelect: onSelect,
+    onCheck: onCheck,
+    selectedKeys: selectedKeys,
+    checkedKeys: checkedKeys,
+    actionRef: actionRefProp !== null && actionRefProp !== void 0 ? actionRefProp : actionRef,
+    onBeforeRenderNodeEvent: onBeforeRenderNodeEvent,
+    beforeRenderNode: beforeRenderNode,
+    expandAll: expandAllState,
+    expandLevel: expandLevelState,
+    onDataSourceChange: onDataSourceChange
   }, treeProps))));
 };
 

package/es/sidebar/index.scss

@@ -1,3 +1,26 @@
+@import '../common.scss';
+
 .teamix-pro-sidebar {
   color: var(--color-brand1-6);
-}
+  .teamix-pro-card {
+    background: transparent;
+  }
+
+  &-scroll-tree {
+    height: calc(100% - var(--s-4, 16px) - 40px);
+    .teamix-pro-sidebar-container,
+    .teamix-pro-card,
+    .next-card-content-container,
+    .teamix-pro-card-content {
+      height: 100%;
+    }
+    .teamix-pro-sidebar-container-context {
+      @include hybridcloud-scrollbar;
+      overflow: auto;
+    }
+  }
+
+  .next-form-preview {
+    color: unset;
+  }
+}