@zat-design/sisyphus-react 3.1.5 → 3.2.0-beta.1

package/es/ProThemeTools/component/PrdTools/style/index.less

@@ -29,7 +29,7 @@
       width        : 4px;
       height       : 14px;
       background   : var(--zaui-brand, #006aff);
-      border-radius: 2px;
+      border-radius: var(zaui-border-radius-card, 2px);
     }
   }
 
@@ -49,7 +49,7 @@
       margin-right   : 34px;
 
       span {
-        font-size     : 14px;
+        font-size     : var(--zaui-font-size, 14px);
         vertical-align: -7px;
       }
 
@@ -145,7 +145,7 @@
       left     : 4px;
       z-index  : 1;
       color    : var(--zaui-text, #343434);
-      font-size: 16px;
+      font-size: var(--zaui-font-size-lg, 16px);
       transform: translateZ(100px);
 
       &:hover {

package/es/ProThemeTools/index.d.ts

@@ -1,11 +1,11 @@
 import type { ProThemeToolsProps } from './propsType';
 declare const ProThemeTools: {
-    ({ size, className, cacheTime, color, mode, theme, tableBorder, tableStripe, ...props }: ProThemeToolsProps): JSX.Element;
+    ({ size, className, cacheTime, color, mode, iconFollowTheme, tableBorder, tableStripe, theme, ...props }: ProThemeToolsProps): JSX.Element;
     defaultProps: {
         size: number;
         mode: string;
         color: string;
-        theme: boolean;
+        iconFollowTheme: boolean;
         cacheTime: boolean;
     };
     setThemes: (themes: import("./utils/index").ThemesProps, themeMapping?: import("./utils/index").ThemesProps) => boolean;

package/es/ProThemeTools/index.js

@@ -6,27 +6,27 @@ 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";
-var _excluded = ["size", "className", "cacheTime", "color", "mode", "theme", "tableBorder", "tableStripe"];
+var _excluded = ["size", "className", "cacheTime", "color", "mode", "iconFollowTheme", "tableBorder", "tableStripe", "theme"];
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable prefer-const */
 import { SettingOutlined } from '@ant-design/icons';
 import { useEffect, useState } from 'react';
 import classnames from 'classnames';
-import { getKebabCase, setThemes, setTableNoStripe, setTableBorder } from './utils/index';
+import { getKebabCase, setThemes, setTableNoStripe, setTableBorder, getMapKebabCase, getMapHumpCase } from './utils/index';
 import { PrdTools } from './component';
 var defaultCacheTime = 1; // 配置保存时间为一天
 var defaultThemeConfig = {
   zauiBrand: '#006AFF',
   zauiText: '#343434',
-  zauiFontSize: 14,
+  zauiFontSize: '14px',
   zauiFormAlign: 'left',
   zauiFormRequiredBefore: 'none',
   zauiFormRequiredAfter: 'inline',
   zauiSize: 1,
-  zauiSpaceSizeLg: 32,
-  zauiSpaceSizeMd: 16,
+  zauiSpaceSizeLg: '32px',
+  zauiSpaceSizeMd: '16px',
   zauiBigText: false,
-  zauiBaseFontSize: 0,
+  zauiBaseFontSize: '0px',
   zauiTableBorder: false,
   zauiStripe: true
 };
@@ -36,17 +36,19 @@ var ProThemeTools = function ProThemeTools(_ref) {
     cacheTime = _ref.cacheTime,
     color = _ref.color,
     mode = _ref.mode,
-    theme = _ref.theme,
+    iconFollowTheme = _ref.iconFollowTheme,
     _ref$tableBorder = _ref.tableBorder,
     tableBorder = _ref$tableBorder === void 0 ? false : _ref$tableBorder,
     _ref$tableStripe = _ref.tableStripe,
     tableStripe = _ref$tableStripe === void 0 ? false : _ref$tableStripe,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
-  var _useState3 = useState(_objectSpread({}, defaultThemeConfig)),
+  var _useState3 = useState(_objectSpread(_objectSpread({}, defaultThemeConfig), getMapHumpCase(theme))),
     _useState4 = _slicedToArray(_useState3, 2),
     state = _useState4[0],
     setState = _useState4[1];
@@ -80,9 +82,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
   };
   // 复制
   var onCopy = function onCopy() {
-    var data = JSON.stringify(Object.fromEntries(Object.entries(state).map(function (item) {
-      return ["@".concat(getKebabCase(item === null || item === void 0 ? void 0 : item[0])), item === null || item === void 0 ? void 0 : item[1]];
-    })));
+    var data = JSON.stringify(getMapKebabCase(state, '@'));
     var input = document.createElement('input');
     document.body.appendChild(input);
     input.setAttribute('value', data);
@@ -100,6 +100,10 @@ var ProThemeTools = function ProThemeTools(_ref) {
     var startTime = curThemeConfig === null || curThemeConfig === void 0 ? void 0 : curThemeConfig.startTime;
     // 默认时间间隔
     var duration = (typeof cacheTime === 'number' ? cacheTime : defaultCacheTime) * 86400000;
+    // antd4以下版本不支持主题色的动态配置
+    if (!_ConfigProvider.config) {
+      return;
+    }
     if (cacheTime && startTime && new Date().getTime() - startTime < duration) {
       var _localThemeConfig;
       var localThemeConfig;
@@ -111,15 +115,18 @@ var ProThemeTools = function ProThemeTools(_ref) {
 
       setState(_objectSpread(_objectSpread({}, state), localThemeConfig));
       setThemes(cssVariables);
-      // antd4以下版本不支持主题色的动态配置
-      if (!_ConfigProvider.config) {
-        return;
-      }
       _ConfigProvider.config({
         theme: {
           primaryColor: (_localThemeConfig = localThemeConfig) === null || _localThemeConfig === void 0 ? void 0 : _localThemeConfig.zauiBrand
         }
       });
+    } else {
+      setThemes(getMapKebabCase(state));
+      _ConfigProvider.config({
+        theme: {
+          primaryColor: state === null || state === void 0 ? void 0 : state.zauiBrand
+        }
+      });
     }
   }, []);
   // 主题色动态切换
@@ -156,7 +163,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
   }, [state, cacheTime]);
   var cls = classnames(_defineProperty({
     'pro-theme-tools': true,
-    'pro-theme-tools-follow': theme
+    'pro-theme-tools-follow': iconFollowTheme
   }, className, className));
   return _jsxs("div", _objectSpread(_objectSpread({
     className: cls
@@ -185,7 +192,7 @@ ProThemeTools.defaultProps = {
   size: 24,
   mode: 'prd',
   color: '#343434',
-  theme: false,
+  iconFollowTheme: false,
   cacheTime: false
 };
 ProThemeTools.setThemes = setThemes;

package/es/ProThemeTools/propsType.d.ts

@@ -15,8 +15,10 @@ export interface ProThemeToolsProps {
     color?: string;
     mode?: 'dev' | 'prd';
     cacheTime?: number | boolean;
-    /** 是否跟随主题色 */
-    theme?: boolean;
+    /** 主题配置信息 */
+    theme?: any;
+    /** icon是否跟随主题色 */
+    iconFollowTheme?: boolean;
     /** 是否有表格边框 */
     tableBorder?: boolean;
     /** 是否有斑马纹 */
@@ -26,18 +28,18 @@ export interface ProThemeToolsProps {
 export interface LocalThemeConfigPropsType {
     zauiBrand?: string;
     zauiText?: string;
-    zauiFontSize?: number;
+    zauiFontSize?: string;
     zauiFormAlign?: string;
     zauiFormRequiredAfter?: string;
     zauiFormRequiredBefore?: string;
     zauiSize?: number;
-    zauiSpaceSizeLg?: number;
-    zauiSpaceSizeMd?: number;
+    zauiSpaceSizeLg?: string;
+    zauiSpaceSizeMd?: string;
     /** 大字号模式 */
     zauiBigText?: boolean;
     /** 是否有表格边框 */
     zauiTableBorder?: boolean;
     /** 是否有斑马纹 */
     zauiStripe?: boolean;
-    zauiBaseFontSize?: number;
+    zauiBaseFontSize?: string;
 }

package/es/ProThemeTools/style/index.less

@@ -13,7 +13,7 @@
     color: var(--zaui-brand, #006aff);
 
     svg {
-      font-size: 24px;
+      font-size: var(--zaui-font-size-lg-title, 24px)
     }
   }
 }
@@ -52,4 +52,4 @@
   .ant-radio-button-wrapper {
     padding: 0 12px;
   }
-}
+}

package/es/ProThemeTools/utils/index.d.ts

@@ -11,7 +11,14 @@ export declare const replaceObject: (themes: ThemesProps, themeMapping: ThemesPr
  * 设置主题变量
  */
 export declare const setThemes: (themes: ThemesProps, themeMapping?: ThemesProps) => boolean;
+/** JS实现驼峰命名与横线命名的转换  */
 export declare const getKebabCase: (str: string) => string;
+/** JS实现对象驼峰命名与横线命名的转换  */
+export declare const getMapKebabCase: (obj: any, prefix?: string) => {
+    [k: string]: unknown;
+};
+/** JS实现对象横线命名与驼峰命名的转换  */
+export declare const getMapHumpCase: (obj?: {}) => {};
 /**
  * 设置表格斑马纹
  * @param stripe boolean

package/es/ProThemeTools/utils/index.js

@@ -41,7 +41,7 @@ export var setThemes = function setThemes(themes, themeMapping) {
     document.documentElement.style.setProperty("--".concat(item[0]), item[1]);
   });
 };
-// JS实现驼峰命名与横线命名的转换
+/** JS实现驼峰命名与横线命名的转换  */
 export var getKebabCase = function getKebabCase(str) {
   var temp = str.replace(/[A-Z]/g, function (i) {
     return "-".concat(i.toLowerCase());
@@ -52,6 +52,24 @@ export var getKebabCase = function getKebabCase(str) {
 
   return temp;
 };
+/** JS实现对象驼峰命名与横线命名的转换  */
+export var getMapKebabCase = function getMapKebabCase(obj) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return Object.fromEntries(Object.entries(obj).map(function (item) {
+    return ["".concat(prefix).concat(getKebabCase(item === null || item === void 0 ? void 0 : item[0])), item === null || item === void 0 ? void 0 : item[1]];
+  }));
+};
+/** JS实现对象横线命名与驼峰命名的转换  */
+export var getMapHumpCase = function getMapHumpCase() {
+  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return Object.keys(obj).reduce(function (acc, key) {
+    var transformedKey = key.replace(/-(\w)/g, function (_, letter) {
+      return letter.toUpperCase();
+    });
+    acc[transformedKey] = obj[key];
+    return acc;
+  }, {});
+};
 /**
  * 设置表格斑马纹
  * @param stripe boolean

package/es/ProTree/components/ProTree.js

@@ -22,11 +22,12 @@ import { cloneDeep, isFunction } from 'lodash';
 import { ReactSVG } from 'react-svg';
 import { useProConfig } from '../../ProConfigProvider';
 import { TreeView } from './index';
+import locale from '../../locale';
 import { getFlatTreeData, getChildrenKeys, findTreeNodeByKey, getAllKeys } from '../utils';
 import searchSVG from '../../assets/input-search.svg';
 import '../style/index.less';
 var ProTree = function ProTree(props) {
-  var _props$otherProps, _props$otherProps2, _state$innerExpandKey2, _state$innerExpandKey3;
+  var _props$otherProps, _props$otherProps2, _locale$ProTree, _state$innerExpandKey2, _state$innerExpandKey3, _locale$ProTree2, _locale$ProTree3, _locale$ProTree4;
   var _useProConfig = useProConfig('ProEnum'),
     _useProConfig$dics = _useProConfig.dics,
     dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
@@ -85,7 +86,7 @@ var ProTree = function ProTree(props) {
       checkAll: false,
       allKeys: [],
       clickShowLoading: false,
-      innerExpandKeys: []
+      innerExpandKeys: props === null || props === void 0 ? void 0 : props.expandedKeys
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     state = _useSetState2[0],
@@ -388,7 +389,7 @@ var ProTree = function ProTree(props) {
             disabled: disabled,
             allowClear: true,
             value: state.searchStr,
-            placeholder: placeholder || '请输入',
+            placeholder: placeholder || (locale === null || locale === void 0 ? void 0 : (_locale$ProTree = locale.ProTree) === null || _locale$ProTree === void 0 ? void 0 : _locale$ProTree.inputPlaceholder),
             className: "pro-tree-search",
             onChange: onSearch,
             prefix: _jsx(ReactSVG, {
@@ -406,7 +407,7 @@ var ProTree = function ProTree(props) {
               children: [_jsx("div", {
                 className: "expand-icon",
                 children: _jsx(CaretDownOutlined, {})
-              }), (state === null || state === void 0 ? void 0 : (_state$innerExpandKey3 = state.innerExpandKeys) === null || _state$innerExpandKey3 === void 0 ? void 0 : _state$innerExpandKey3.length) ? '全部收起' : '全部展开']
+              }), (state === null || state === void 0 ? void 0 : (_state$innerExpandKey3 = state.innerExpandKeys) === null || _state$innerExpandKey3 === void 0 ? void 0 : _state$innerExpandKey3.length) ? locale === null || locale === void 0 ? void 0 : (_locale$ProTree2 = locale.ProTree) === null || _locale$ProTree2 === void 0 ? void 0 : _locale$ProTree2.unExpand : locale === null || locale === void 0 ? void 0 : (_locale$ProTree3 = locale.ProTree) === null || _locale$ProTree3 === void 0 ? void 0 : _locale$ProTree3.expand]
             })]
           })]
         }), _jsx("div", {
@@ -435,7 +436,7 @@ var ProTree = function ProTree(props) {
               checked: state.checkAll,
               disabled: disabled,
               onChange: handleAllCheck,
-              children: "\u5168\u9009"
+              children: locale === null || locale === void 0 ? void 0 : (_locale$ProTree4 = locale.ProTree) === null || _locale$ProTree4 === void 0 ? void 0 : _locale$ProTree4.all
             }) : null
           }), footer]
         })]

package/es/ProTree/components/SearchTitle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare function SearchTitle(props: {
-    searchStr: string;
-    label: string;
+    searchStr?: string;
+    label?: string;
     showEllipse?: boolean;
     ellipseWidth?: string;
 }): JSX.Element;

package/es/ProTree/components/SearchTitle.js

@@ -30,9 +30,19 @@ function SearchTitle(props) {
     style: style,
     children: strTitle
   });
+  var titleTips = index > -1 ? _jsxs("span", {
+    style: style,
+    children: [beforeStr, searchStr ? _jsx("span", {
+      className: "pro-tree-modal-search-value",
+      children: searchStr
+    }) : null, afterStr]
+  }) : _jsx("span", {
+    style: style,
+    children: strTitle
+  });
   if (classEllipse) {
     return _jsx(_Tooltip, {
-      title: title,
+      title: titleTips,
       placement: "rightTop",
       children: title
     });

package/es/ProTree/components/Tree.js

@@ -19,9 +19,11 @@ import { useSetState } from 'ahooks';
 import { CaretDownOutlined } from '@ant-design/icons';
 import SearchTitle from './SearchTitle';
 import { filterCheckedNodes, getParentKey } from '../utils';
+import locale from '../../locale';
 var tagsBgColors = ['rgba(0, 106, 255,0.16)', 'rgba(0, 196, 74,0.16)', 'rgba(255, 140, 0,0.16)', 'rgba(255, 80, 80,0.16)', 'rgba(97, 97, 97, 0.16)'];
 var tagsColors = ['#006AFF', '#00C44A', '#FF8C00', '#FF5050', '#616161'];
 function List(props) {
+  var _locale$ProTree;
   var checkedValues = props.checkedValues,
     disabled = props.disabled,
     searchStr = props.searchStr,
@@ -100,8 +102,13 @@ function List(props) {
       });
     }
   }, [selectedKey]);
-  var onSelect = function onSelect(val, item) {
+  var onSelect = function onSelect(value, item) {
     var _props$onSelect;
+    var val = value;
+    if (value === currentClickTreeNode) {
+      // 如果当前点击了已经选中节点，那么取消选择
+      val = '';
+    }
     setState({
       currentClickTreeNode: val
     });
@@ -337,7 +344,7 @@ function List(props) {
       blockNode: true
     })) : _jsx("div", {
       className: "empty-tree",
-      children: "\u8BF6\u5440\uFF0C\u6CA1\u6709\u627E\u5230\u60A8\u8981\u67E5\u8BE2\u7684\u5185\u5BB9"
+      children: locale === null || locale === void 0 ? void 0 : (_locale$ProTree = locale.ProTree) === null || _locale$ProTree === void 0 ? void 0 : _locale$ProTree.emptyTips
     })
   });
 }