@zat-design/sisyphus-react 3.14.0-beta.2 → 4.0.0-beta.10

package/es/ProThemeTools/utils/index.js

@@ -1,47 +1,53 @@
-import "antd/es/config-provider/style";
-import _ConfigProvider from "antd/es/config-provider";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-/** 主题配置mapping */
-var configProviderMapping = {
-  'zaui-brand': 'primaryColor'
+/** antd5 主题配置 mapping */
+var antd5ConfigMapping = {
+  'zaui-brand': 'colorPrimary'
+  // 可以根据需要添加更多映射
 };
 
 /**
- * 取主题配置的mapping值, 返回antd可用的主题配置
- * @param themes
- * @param themeMapping
+ * 将 kebab-case 的主题配置转换为 antd5 的 token 格式
+ * @param themes kebab-case 格式的主题配置
+ * @param themeMapping 自定义映射关系
  */
-export var replaceObject = (themes, themeMapping) => {
-  var result = {};
-  Object.keys(themes).forEach((key, index) => {
+export var convertToAntd5Tokens = (themes, themeMapping) => {
+  var mapping = _objectSpread(_objectSpread({}, antd5ConfigMapping), themeMapping);
+  var tokens = {};
+  Object.keys(themes).forEach(key => {
     var value = themes[key];
-    var mappingKey = themeMapping[key];
+    var mappingKey = mapping[key];
     if (mappingKey) {
-      result[mappingKey] = value;
+      tokens[mappingKey] = value;
     }
   });
-  return result;
+  return {
+    token: tokens
+  };
 };
 
 /**
- * 设置主题变量
+ * 设置主题变量 - antd5 兼容版本
+ * 只设置 CSS 变量，不再使用 ConfigProvider.config
  */
-export var setThemes = (themes, themeMapping) => {
+export var setThemes = themes => {
   if (!Object.keys(themes).length) {
     return false;
   }
-  var mapping = _objectSpread(_objectSpread({}, configProviderMapping), themeMapping);
-  var configProviderThemes = replaceObject(themes, mapping);
-  // 匹配到主题配置执行antd的主题配置
-  if (configProviderThemes && Object.keys(configProviderThemes).length) {
-    _ConfigProvider.config({
-      theme: configProviderThemes
-    });
-  }
+
+  // 只设置 CSS 变量，主题配置通过 Context 管理
   var list = Object.entries(themes);
   list.forEach(item => {
     document.documentElement.style.setProperty(`--${item[0]}`, item[1]);
   });
+  return true;
+};
+
+/**
+ * 获取 antd5 主题配置
+ * @param themes kebab-case 格式的主题配置
+ */
+export var getAntd5ThemeConfig = themes => {
+  return convertToAntd5Tokens(themes);
 };
 
 /** JS实现驼峰命名与横线命名的转换  */

package/es/ProTooltip/index.js

@@ -1,10 +1,9 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["text", "mode", "width", "line", "className", "style", "lineHeight", "scrollFollowParent"];
 import { useSize, useSetState, useDebounce } from 'ahooks';
+import { Tooltip } from 'antd';
 import { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { isEllipsisActive } from "../utils";
@@ -65,18 +64,20 @@ var ProTooltip = props => {
   var _ref = (_useSize = useSize(localElement)) !== null && _useSize !== void 0 ? _useSize : {},
     _localSizeWidth = _ref.width;
   var isTable = findTableParent(ref.current);
-  var overlayStyle = mode === 'auto' ? {
+  var rootStyles = mode === 'auto' ? {
     maxWidth: _localSizeWidth
   } : {};
   var multiStyle = isMultiLine ? {
     WebkitLineClamp: line
   } : {};
   var AutoMixinSingle = () => {
-    return isShowToolTip && line === 1 ? /*#__PURE__*/_jsx(_Tooltip, _objectSpread(_objectSpread({
+    return isShowToolTip && line === 1 ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       title: text,
       getPopupContainer: triggerNode => triggerNode.parentNode
     }, restProps), {}, {
-      overlayStyle: overlayStyle,
+      styles: {
+        root: rootStyles
+      },
       children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, specialProps), {}, {
         style: _objectSpread(_objectSpread({}, multiStyle), {}, {
           width: localWidth,
@@ -105,11 +106,13 @@ var ProTooltip = props => {
     });
   };
   var AutoMixinMulti = () => {
-    return isShowToolTip && line > 1 ? /*#__PURE__*/_jsx(_Tooltip, _objectSpread(_objectSpread({
+    return isShowToolTip && line > 1 ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       title: text,
       getPopupContainer: triggerNode => triggerNode.parentNode
     }, restProps), {}, {
-      overlayStyle: overlayStyle,
+      styles: {
+        root: rootStyles
+      },
       children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, specialProps), {}, {
         style: _objectSpread(_objectSpread({}, multiStyle), {}, {
           width: localWidth,
@@ -243,7 +246,7 @@ var ProTooltip = props => {
     });
   };
   var renderTooltipContent = () => {
-    return /*#__PURE__*/_jsx(_Tooltip, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       title: text,
       getPopupContainer: triggerNode => {
         // 修复scrollFollowParent为false时tooltip不显示的问题
@@ -251,7 +254,9 @@ var ProTooltip = props => {
         return scrollFollowParent ? triggerNode.parentNode : document.body;
       }
     }, restProps), {}, {
-      overlayStyle: mode === 'auto' ? overlayStyle : {},
+      styles: {
+        root: mode === 'auto' ? rootStyles : {}
+      },
       children: renderContentBox()
     }));
   };

package/es/ProTooltip/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-tooltip {
   cursor: pointer;

package/es/ProTree/components/AdaptiveTooltip.js

@@ -1,9 +1,8 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
+import { Tooltip } from 'antd';
 import { jsx as _jsx } from "react/jsx-runtime";
 var AdaptiveTooltip = _ref => {
   var children = _ref.children;
-  return /*#__PURE__*/_jsx(_Tooltip, {
+  return /*#__PURE__*/_jsx(Tooltip, {
     placement: "rightTop",
     title: /*#__PURE__*/_jsx("div", {
       onMouseDown: e => e.stopPropagation(),

package/es/ProTree/components/List.js

@@ -1,9 +1,8 @@
-import "antd/es/checkbox/style";
-import _Checkbox from "antd/es/checkbox";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["checkedValues", "disabled", "treeData", "searchStr", "showCodeName", "mode", "fieldNames", "handleOnChange", "handleFilterClose", "optionRender"];
 import { memo } from 'react';
+import { Checkbox } from 'antd';
 import SearchTitle from "./SearchTitle";
 import CloseIcon from "./CloseIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,7 +25,7 @@ function List(props) {
   var fieldNameValue = fieldNames.value;
   if (mode === 'render') {
     return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(_Checkbox.Group, {
+      children: /*#__PURE__*/_jsx(Checkbox.Group, {
         disabled: disabled,
         style: {
           width: '100%'
@@ -36,7 +35,7 @@ function List(props) {
           var title = showCodeName ? `${item[fieldNameValue]}-${item[fieldNameLabel]}` : item[fieldNameLabel];
           return /*#__PURE__*/_jsx("div", {
             className: "pro-tree-checkbox-content",
-            children: /*#__PURE__*/_jsx(_Checkbox, {
+            children: /*#__PURE__*/_jsx(Checkbox, {
               onChange: e => handleOnChange(e, item[fieldNameValue]),
               value: item[fieldNameValue],
               disabled: item.disabled,

package/es/ProTree/components/ProTree.js

@@ -1,13 +1,5 @@
-import "antd/es/spin/style";
-import _Spin from "antd/es/spin";
-import "antd/es/checkbox/style";
-import _Checkbox from "antd/es/checkbox";
-import "antd/es/input/style";
-import _Input from "antd/es/input";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import "antd/es/message/style";
-import _message from "antd/es/message";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -16,6 +8,7 @@ import { useEffect } from 'react';
 import classNames from 'classnames';
 import { CaretDownOutlined, Loading3QuartersOutlined } from '@ant-design/icons';
 import { useDeepCompareEffect, useSetState, useRequest as useRequestFunc } from 'ahooks';
+import { Checkbox, Input, message, Spin } from 'antd';
 import { cloneDeep, isFunction } from 'lodash';
 import { ReactSVG } from 'react-svg';
 import { useProConfig } from "../../ProConfigProvider";
@@ -117,7 +110,7 @@ var ProTree = props => {
           msg = res.message,
           data = res.data;
         if (status !== 200) {
-          _message.error(msg);
+          message.error(msg);
           return;
         }
         var _flatTrees = getFlatTreeData(data, fieldNames);
@@ -426,14 +419,14 @@ var ProTree = props => {
   return /*#__PURE__*/_jsx("div", {
     className: boxClass,
     style: style,
-    children: /*#__PURE__*/_jsx(_Spin, {
+    children: /*#__PURE__*/_jsx(Spin, {
       spinning: state.clickShowLoading,
       indicator: antIcon,
       children: /*#__PURE__*/_jsxs("div", {
         className: "pro-tree-content",
         children: [/*#__PURE__*/_jsxs("div", {
           className: "pro-tree-header-box",
-          children: [showSearch && /*#__PURE__*/_jsx(_Input, {
+          children: [showSearch && /*#__PURE__*/_jsx(Input, {
             disabled: disabled,
             allowClear: true,
             value: state.searchStr,
@@ -481,7 +474,7 @@ var ProTree = props => {
           className: allValue || footer ? 'pro-tree-footer-box' : '',
           children: [/*#__PURE__*/_jsx("div", {
             className: "check-all-box",
-            children: allValue !== undefined ? /*#__PURE__*/_jsx(_Checkbox, {
+            children: allValue !== undefined ? /*#__PURE__*/_jsx(Checkbox, {
               checked: state.checkAll,
               disabled: disabled,
               onChange: handleAllCheck,

package/es/ProTree/components/ProTreeSelect/index.js

@@ -1,21 +1,14 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import "antd/es/input/style";
-import _Input from "antd/es/input";
-import "antd/es/message/style";
-import _message from "antd/es/message";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import "antd/es/tree-select/style";
-import _TreeSelect from "antd/es/tree-select";
 var _excluded = ["disabled", "code", "dataSource", "defaultDisableValue", "onChange", "useRequest", "transformResponse", "fieldNames", "placeholder", "tooltip", "showSearch", "filterTreeNode", "treeNodeFilterProp", "defaultExpandAll", "expandedKeys", "treeCheckable", "onSearch", "otherProps", "width", "dropdownStyle", "popupClassName", "style", "allowClear", "listHeight", "showCodeName", "className", "checkStrictly", "checkable"],
   _excluded2 = ["children"];
 /* eslint-disable react/no-danger */
 /* eslint-disable react/jsx-closing-tag-location */
 import { useDeepCompareEffect, useRequest as useRequestFunc, useSetState } from 'ahooks';
+import { Input, TreeSelect, message, Tooltip } from 'antd';
 import classnames from 'classnames';
 import React, { useImperativeHandle, forwardRef, useCallback } from 'react';
 import { cloneDeep, debounce } from 'lodash';
@@ -25,9 +18,9 @@ import Container from "../../../ProForm/components/Container";
 import AdaptiveTooltip from "../AdaptiveTooltip";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SHOW_PARENT = _TreeSelect.SHOW_PARENT;
+var SHOW_PARENT = TreeSelect.SHOW_PARENT;
 export var ProTreeSelect = (props, ref) => {
-  var _useRequest$options;
+  var _useRequest$options, _selectProps$classNam, _selectProps$classNam2, _selectProps$styles, _selectProps$styles2;
   // 全局属性配置在ConfigProvider
   var _ref = useProConfig('ProTreeSelect') || {},
     _ref$fieldNames = _ref.fieldNames,
@@ -164,7 +157,7 @@ export var ProTreeSelect = (props, ref) => {
       msg = res.message,
       data = res.data;
     if (status !== 200) {
-      _message.error(msg);
+      message.error(msg);
       return;
     }
     var resultData = transferDataSource(data, showCodeName);
@@ -183,7 +176,7 @@ export var ProTreeSelect = (props, ref) => {
       msg = _ref4.message,
       data = _ref4.data;
     if (status !== 200) {
-      _message.error(msg);
+      message.error(msg);
       return;
     }
     return data;
@@ -268,7 +261,7 @@ export var ProTreeSelect = (props, ref) => {
   if (defaultDisableValue) {
     return /*#__PURE__*/_jsx("span", {
       title: defaultDisableValue,
-      children: /*#__PURE__*/_jsx(_Input, {
+      children: /*#__PURE__*/_jsx(Input, {
         disabled: true,
         defaultValue: defaultDisableValue,
         style: props === null || props === void 0 ? void 0 : props.style
@@ -385,7 +378,7 @@ export var ProTreeSelect = (props, ref) => {
       });
     }
     if (!children) {
-      return /*#__PURE__*/_jsx(_TreeSelect.TreeNode, {
+      return /*#__PURE__*/_jsx(TreeSelect.TreeNode, {
         value: value,
         title: title,
         label: searchKey,
@@ -396,7 +389,7 @@ export var ProTreeSelect = (props, ref) => {
       }, key);
     }
     var sonGrade = grade + 1;
-    return /*#__PURE__*/_jsx(_TreeSelect.TreeNode, {
+    return /*#__PURE__*/_jsx(TreeSelect.TreeNode, {
       value: value,
       title: title,
       label: searchKey,
@@ -578,7 +571,7 @@ export var ProTreeSelect = (props, ref) => {
     [`${innerClass}`]: true,
     [`${popupClassName}`]: popupClassName
   });
-  var treeProps = _objectSpread({
+  var treeProps = _objectSpread(_objectSpread({
     disabled,
     showSearch,
     // 默认支持搜索
@@ -591,30 +584,39 @@ export var ProTreeSelect = (props, ref) => {
     // 选择后的值只显示父级
     value,
     onChange: handleChange,
-    dropdownStyle: _objectSpread({
-      maxHeight: 320,
-      paddingTop: '0px',
-      maxWidth: '580px'
-    }, dropdownStyle),
     listHeight: listHeight || 320,
     style: _objectSpread({
       width: width || '100%'
     }, style),
-    popupClassName: dropDownClassName,
     onSearch: searchTreeEvent,
     allowClear: allowClear || true,
-    showArrow: true,
     treeNodeFilterProp,
     virtual: true,
     treeCheckStrictly: checkStrictly
-  }, selectProps);
+  }, selectProps), {}, {
+    // 使用新的 API 替代弃用的 popupClassName 和 dropdownStyle
+    classNames: _objectSpread(_objectSpread({}, selectProps === null || selectProps === void 0 ? void 0 : selectProps.classNames), {}, {
+      popup: _objectSpread(_objectSpread({}, selectProps === null || selectProps === void 0 || (_selectProps$classNam = selectProps.classNames) === null || _selectProps$classNam === void 0 ? void 0 : _selectProps$classNam.popup), {}, {
+        root: [selectProps === null || selectProps === void 0 || (_selectProps$classNam2 = selectProps.classNames) === null || _selectProps$classNam2 === void 0 || (_selectProps$classNam2 = _selectProps$classNam2.popup) === null || _selectProps$classNam2 === void 0 ? void 0 : _selectProps$classNam2.root, dropDownClassName].filter(Boolean).join(' ')
+      })
+    }),
+    styles: _objectSpread(_objectSpread({}, selectProps === null || selectProps === void 0 ? void 0 : selectProps.styles), {}, {
+      popup: _objectSpread(_objectSpread({}, selectProps === null || selectProps === void 0 || (_selectProps$styles = selectProps.styles) === null || _selectProps$styles === void 0 ? void 0 : _selectProps$styles.popup), {}, {
+        root: _objectSpread(_objectSpread({
+          maxHeight: 320,
+          paddingTop: '0px',
+          maxWidth: '580px'
+        }, dropdownStyle), selectProps === null || selectProps === void 0 || (_selectProps$styles2 = selectProps.styles) === null || _selectProps$styles2 === void 0 || (_selectProps$styles2 = _selectProps$styles2.popup) === null || _selectProps$styles2 === void 0 ? void 0 : _selectProps$styles2.root)
+      })
+    })
+  });
   if (value === null) {
     delete treeProps.value;
   }
   return /*#__PURE__*/_jsx("div", {
     onClick: nodeChangeEvent,
     className: cls,
-    children: /*#__PURE__*/_jsx(_TreeSelect, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(TreeSelect, _objectSpread(_objectSpread({
       placeholder: placeholder || locale.ProForm.treeSelectPlaceholder,
       maxTagPlaceholder: rest => {
         var _rest = rest.map(tag => {
@@ -622,7 +624,7 @@ export var ProTreeSelect = (props, ref) => {
           return (tag !== null && tag !== void 0 && (_tag$label = tag.label) !== null && _tag$label !== void 0 && (_tag$label = _tag$label.props) !== null && _tag$label !== void 0 && _tag$label.children ? tag === null || tag === void 0 || (_tag$label2 = tag.label) === null || _tag$label2 === void 0 || (_tag$label2 = _tag$label2.props) === null || _tag$label2 === void 0 || (_tag$label2 = _tag$label2.children) === null || _tag$label2 === void 0 || (_tag$label2 = _tag$label2.props) === null || _tag$label2 === void 0 || (_tag$label2 = _tag$label2.dangerouslySetInnerHTML) === null || _tag$label2 === void 0 ? void 0 : _tag$label2.__html : tag === null || tag === void 0 || (_tag$label3 = tag.label) === null || _tag$label3 === void 0 || (_tag$label3 = _tag$label3.props) === null || _tag$label3 === void 0 || (_tag$label3 = _tag$label3.dangerouslySetInnerHTML) === null || _tag$label3 === void 0 ? void 0 : _tag$label3.__html) || tag.label;
         });
         var _str = _rest.join('、');
-        return /*#__PURE__*/_jsx(_Tooltip, {
+        return /*#__PURE__*/_jsx(Tooltip, {
           title: /*#__PURE__*/_jsx("div", {
             children: _str
           }),

package/es/ProTree/components/ProTreeSelect/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-tree-select{
     .@{ant-prefix}-select-selector{

package/es/ProTree/components/Tree.js

@@ -1,21 +1,12 @@
-import "antd/es/tree/style";
-import _Tree from "antd/es/tree";
-import "antd/es/popover/style";
-import _Popover from "antd/es/popover";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["checkedValues", "disabled", "searchStr", "originalTreeData", "showCodeName", "checkStrictly", "flatTreeData", "mode", "fieldNames", "tags", "onCheck", "optionRender", "treeData", "showLine", "switcherIcon", "checkable", "menu", "innerExpandKeys", "selectedKey", "disabledMode", "isRadioSelect"];
-/*
- *@Date: 2023-07-25 13:49:35
- * @LastEditTime: 2024-05-20 11:47:45
- *@Author: liudongliang
- *@Description: 树每行节点渲染组件，复选时阻止点击事件冒泡，只有点击树节点文本会向上触发onSelect事件
- */
 /* eslint-disable no-plusplus */
 import React, { useEffect, useState } from 'react';
+import { Tree, Popover } from 'antd';
 import { useSetState } from 'ahooks';
 import { CaretDownOutlined } from '@ant-design/icons';
 import SearchTitle from "./SearchTitle";
@@ -277,8 +268,10 @@ function List(props) {
           onClick: e => {
             e.stopPropagation();
           },
-          children: (operateButton === null || operateButton === void 0 ? void 0 : operateButton.length) > 1 ? /*#__PURE__*/_jsx(_Popover, {
-            overlayClassName: "pro-tree-operate-container",
+          children: (operateButton === null || operateButton === void 0 ? void 0 : operateButton.length) > 1 ? /*#__PURE__*/_jsx(Popover, {
+            classNames: {
+              root: 'pro-tree-operate-container'
+            },
             content: /*#__PURE__*/_jsx("div", {
               className: "pro-tree-operate-btn-popover",
               onClick: hide,
@@ -355,7 +348,7 @@ function List(props) {
   }
   return /*#__PURE__*/_jsx("div", {
     className: disabledMode === 'hide' ? 'hide-disable-node' : '',
-    children: _treeData !== null && _treeData !== void 0 && _treeData.length ? /*#__PURE__*/_jsx(_Tree, _objectSpread(_objectSpread(_objectSpread({}, others), additionProps), {}, {
+    children: _treeData !== null && _treeData !== void 0 && _treeData.length ? /*#__PURE__*/_jsx(Tree, _objectSpread(_objectSpread(_objectSpread({}, others), additionProps), {}, {
       disabled: disabled,
       style: {
         width: '100%'

package/es/ProTree/index.js

@@ -1,11 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/*
- *@Date: 2023-07-11 16:07:12
- *@LastEditTime: 2023-07-11 16:07:12
- *@Author: liudongliang
- *@Description: ProTree组件，集成了tree和treeSelect
- */
 import ProTree from "./components/ProTree";
 import ProTreeSelect from "./components/ProTreeSelect";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/ProTree/propsType.d.ts

@@ -200,7 +200,7 @@ export interface ProTreeType extends ProTreeSelectType {
      * @description value 改变的回调
      * @default undefined
      */
-    onChange?: (values: string[] | ProTreeValueType, options?: object[]) => void;
+    onChange?: (value: any, labelList?: ReactNode[], extra?: any) => void;
     /**
      * 选择回调
      * @description 点击树节点触发

package/es/ProTree/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-tree-wrap-ellipse {
   display: block;
@@ -73,6 +71,14 @@
       flex      : 1 1;
       overflow-y: auto;
       overflow-x: auto;
+      .@{ant-prefix}-tree-switcher:not(.@{ant-prefix}-tree-switcher-noop):hover:before{
+        background-color: transparent;
+      }
+      .@{ant-prefix}-tree-checkbox{
+        margin-top: 11px;
+        align-self: flex-start;
+      }
+
     }
 
     .tree-title-box {
@@ -107,10 +113,6 @@
       }
     }
 
-    .@{ant-prefix}-tree-checkbox {
-      margin-top: 11px;
-    }
-
     .@{ant-prefix}-tree-switcher {
       line-height: 44px;
     }

package/es/ProTreeModal/components/Cascader.js

@@ -1,8 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import "antd/es/checkbox/style";
-import _Checkbox from "antd/es/checkbox";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useEffect } from 'react';
+import { Checkbox } from 'antd';
 import { useSetState } from 'ahooks';
 import classNames from 'classnames';
 import SearchTitle from "./SearchTitle";
@@ -62,7 +61,7 @@ var Cascader = props => {
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-tree-modal-cascader-warp",
-        children: /*#__PURE__*/_jsx(_Checkbox.Group, {
+        children: /*#__PURE__*/_jsx(Checkbox.Group, {
           disabled: disabled,
           style: {
             width: '100%'
@@ -77,7 +76,7 @@ var Cascader = props => {
                   label: title,
                   searchStr: searchStr
                 })
-              }) : /*#__PURE__*/_jsx(_Checkbox, _objectSpread(_objectSpread({}, item), {}, {
+              }) : /*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({}, item), {}, {
                 onChange: e => handleOnChange(e, item[fieldNameValue]),
                 value: item[fieldNameValue],
                 children: /*#__PURE__*/_jsx("span", {

package/es/ProTreeModal/components/List.js

@@ -1,12 +1,7 @@
-import "antd/es/row/style";
-import _Row from "antd/es/row";
-import "antd/es/col/style";
-import _Col from "antd/es/col";
-import "antd/es/checkbox/style";
-import _Checkbox from "antd/es/checkbox";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /* eslint-disable brace-style */
 import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { Checkbox, Col, Row } from 'antd';
 import { DndContext } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useDeepCompareEffect, useSetState, useVirtualList } from 'ahooks';
@@ -30,7 +25,6 @@ function List(props, ref) {
     fieldNames = props.fieldNames,
     draggable = props.draggable,
     modeType = props.modeType,
-    flatTreeData = props.flatTreeData,
     handleOnChange = props.handleOnChange,
     handleFilterClose = props.handleFilterClose,
     optionRender = props.optionRender,
@@ -172,9 +166,9 @@ function List(props, ref) {
   }
 
   // 编辑状态
-  if (!isRowCols) {
+  if (!isRowCols && mode === 'render') {
     return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(_Checkbox.Group, {
+      children: /*#__PURE__*/_jsx(Checkbox.Group, {
         disabled: disabled,
         style: {
           width: '100%'
@@ -189,7 +183,7 @@ function List(props, ref) {
           },
           children: /*#__PURE__*/_jsx("div", {
             ref: wrapperRef,
-            children: /*#__PURE__*/_jsx(_Row, {
+            children: /*#__PURE__*/_jsx(Row, {
               children: list.map(_item => {
                 var item = _item.data;
                 var title = handleGetTitle(item);
@@ -197,14 +191,14 @@ function List(props, ref) {
                   label: title,
                   searchStr: searchStr
                 });
-                return /*#__PURE__*/_jsx(_Col, {
+                return /*#__PURE__*/_jsx(Col, {
                   span: span || 24,
                   className: !span || span === 24 ? 'pro-tree-modal-checkbox-content' : '',
                   style: {
                     marginBottom: span ? 16 : 12
                   },
-                  children: /*#__PURE__*/_jsx(_Checkbox, {
-                    onChange: e => handleOnChange(e, item[fieldNameValue]),
+                  children: /*#__PURE__*/_jsx(Checkbox, {
+                    onChange: e => handleOnChange === null || handleOnChange === void 0 ? void 0 : handleOnChange(e, item[fieldNameValue]),
                     value: item[fieldNameValue],
                     disabled: item.disabled,
                     children: content
@@ -221,26 +215,26 @@ function List(props, ref) {
   // 编辑状态
   if (isRowCols) {
     return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(_Checkbox.Group, {
+      children: /*#__PURE__*/_jsx(Checkbox.Group, {
         disabled: disabled,
         style: {
           width: '100%'
         },
         value: checkedValues,
-        children: /*#__PURE__*/_jsx(_Row, {
+        children: /*#__PURE__*/_jsx(Row, {
           children: treeData.map(item => {
             var title = handleGetTitle(item);
             var content = optionRender ? optionRender(item, searchStr) : /*#__PURE__*/_jsx(SearchTitle, {
               label: title,
               searchStr: searchStr
             });
-            return /*#__PURE__*/_jsx(_Col, {
+            return /*#__PURE__*/_jsx(Col, {
               span: span || 24,
               className: !span || span === 24 ? 'pro-tree-modal-checkbox-content' : '',
               style: {
                 marginBottom: span ? 16 : 12
               },
-              children: /*#__PURE__*/_jsx(_Checkbox, {
+              children: /*#__PURE__*/_jsx(Checkbox, {
                 onChange: e => handleOnChange(e, item[fieldNameValue]),
                 value: item[fieldNameValue],
                 disabled: item.disabled,

package/es/ProTreeModal/components/SortableItem.js

@@ -1,7 +1,6 @@
-import "antd/es/tag/style";
-import _Tag from "antd/es/tag";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
+import { Tag } from 'antd';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import ProIcon from "../../ProIcon";
@@ -38,7 +37,7 @@ var SortableItem = props => {
     style: style,
     className: `checked-item ${item.disabled || disabled ? 'disabled' : ''} ${drag ? 'dragable' : ''}`
   }, item.disabled ? {} : attributes), {}, {
-    children: /*#__PURE__*/_jsxs(_Tag, {
+    children: /*#__PURE__*/_jsxs(Tag, {
       closable: true,
       onClose: e => _onClose(e),
       children: [drag ? item.disabled || disabled ? /*#__PURE__*/_jsx(ProIcon, {