@zat-design/sisyphus-react 3.4.4 → 3.4.5-beta.1

package/lib/ProIcon/index.js

@@ -12,12 +12,18 @@ var _ahooks = require("ahooks");
 var _antd = require("antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
+var _reactSvg = require("react-svg");
+var _react = require("react");
 var _ProConfigProvider = require("../ProConfigProvider");
 var _config2 = require("./config");
+var _utils = require("./utils");
 var _locale = _interopRequireDefault(require("../locale"));
-var _excluded = ["type", "onClick", "size", "color", "className", "style", "spin", "rotate", "theme", "disabled", "mode", "buttonProps", "children", "mapList"];
+var _excluded = ["type", "onClick", "size", "color", "className", "style", "spin", "rotate", "theme", "disabled", "mode", "buttonProps", "children", "mapList", "src", "actionMap"];
 var ProIcon = function ProIcon(props) {
-  var config = (0, _ProConfigProvider.useProConfig)('ProIcon') || {};
+  var _useProConfig = (0, _ProConfigProvider.useProConfig)(),
+    state = _useProConfig.state;
+  var config = state.ProIcon,
+    antdTheme = state.theme;
   var _config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), props !== null && props !== void 0 ? props : {});
   var _config$type = _config.type,
     type = _config$type === void 0 ? null : _config$type,
@@ -41,14 +47,17 @@ var ProIcon = function ProIcon(props) {
     children = _config.children,
     _config$mapList = _config.mapList,
     mapList = _config$mapList === void 0 ? [] : _config$mapList,
+    src = _config.src,
+    actionMap = _config.actionMap,
     reset = (0, _objectWithoutProperties2.default)(_config, _excluded);
+  // 主题色
+  var _ref = antdTheme !== null && antdTheme !== void 0 ? antdTheme : {},
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? '#006AFF' : _ref$primaryColor;
   // 语言
   var language = _locale.default.ProIcon.language;
   // 加载内部icon
-  var status = (0, _ahooks.useExternal)('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
-  if (status !== 'ready') {
-    return null;
-  }
+  (0, _ahooks.useExternal)('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
   var rotateStyle = rotate ? {
     msTransform: "rotate(".concat(rotate, "deg)"),
     transform: "rotate(".concat(rotate, "deg)")
@@ -70,6 +79,8 @@ var ProIcon = function ProIcon(props) {
   var mergedMapList = (0, _lodash.uniqBy)(mapList.concat(_config2.iconMap), targetTextFill);
   var _type = type;
   var _text = children;
+  // svg图标对应文本
+  var iconText = '';
   var typeIsExistAndIncludeEnglish = _type && /[a-zA-Z]/.test(_type);
   // 模式为icon下，对传入的text进行指定语言-icon 映射
   if (isIconMode && !type) {
@@ -79,6 +90,7 @@ var ProIcon = function ProIcon(props) {
       });
       if (target) {
         _type = target === null || target === void 0 ? void 0 : target.type;
+        iconText = target[targetTextFill];
       }
     }
   }
@@ -93,27 +105,95 @@ var ProIcon = function ProIcon(props) {
       }
     }
   }
+  var svgProps = {
+    className: proIconClassNames,
+    fill: 'currentColor',
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      width: size,
+      height: size
+    }, rotateStyle), style)
+  };
   var RenderIcon = (0, _jsxRuntime.jsx)("span", (0, _objectSpread2.default)((0, _objectSpread2.default)({
     className: "anticon",
     style: {
       color: color
     }
   }, reset), {}, {
-    children: (0, _jsxRuntime.jsx)("svg", {
-      className: proIconClassNames,
-      "aria-hidden": "true",
-      onClick: onClick,
-      fill: "currentColor",
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        width: size,
-        height: size
-      }, rotateStyle), style),
-      children: (0, _jsxRuntime.jsx)("use", {
-        xlinkHref: "#icon-".concat(_type)
-      })
+    children: (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+      title: iconText,
+      children: !src ? (0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, svgProps), {}, {
+        onClick: onClick,
+        "aria-hidden": "true",
+        children: (0, _jsxRuntime.jsx)("use", {
+          xlinkHref: "#icon-".concat(_type)
+        })
+      })) : (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, svgProps), {}, {
+        // @ts-ignore
+        onClick: onClick,
+        "aria-hidden": "true",
+        src: src,
+        beforeInjection: function beforeInjection(svg) {
+          if (actionMap && svg) {
+            var _actionMap$themeMap, _actionMap$themeFillM, _actionMap$gradation, _actionMap$fill;
+            // 项目内置的四种主题匹配渐变色
+            var mergeThemeMap = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _config2.themeMap), (_actionMap$themeMap = actionMap.themeMap) !== null && _actionMap$themeMap !== void 0 ? _actionMap$themeMap : {});
+            // 项目内置的四种双色匹配fill
+            var mergeFillThemeMap = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _config2.themeFillMap), (_actionMap$themeFillM = actionMap.themeFillMap) !== null && _actionMap$themeFillM !== void 0 ? _actionMap$themeFillM : {});
+            var _gradList = mergeThemeMap[primaryColor];
+            var _fillList = mergeFillThemeMap[primaryColor];
+            // 渐变操作序列
+            var gradList = (_actionMap$gradation = actionMap === null || actionMap === void 0 ? void 0 : actionMap.gradation) !== null && _actionMap$gradation !== void 0 ? _actionMap$gradation : _gradList;
+            // 填充操作序列
+            var fillList = (_actionMap$fill = actionMap === null || actionMap === void 0 ? void 0 : actionMap.fill) !== null && _actionMap$fill !== void 0 ? _actionMap$fill : _fillList;
+            // 节点收集
+            var nodeMap = {
+              // 渐变色节点收集
+              gradation: [],
+              // 具有fill属性的节点收集
+              fill: []
+            };
+            // 目前只支持处理渐变及fill填充
+            var types = Reflect.ownKeys(nodeMap !== null && nodeMap !== void 0 ? nodeMap : {});
+            types.forEach(function (typeKey) {
+              (0, _utils.recurseGetNodes)(typeKey, svg, nodeMap[typeKey]);
+            });
+            if ((gradList === null || gradList === void 0 ? void 0 : gradList.length) > 0) {
+              nodeMap.gradation.forEach(function (item, index) {
+                // 下一步准备替换的
+                var nextStr = gradList[index];
+                // 属性原本的值
+                var originStr = item.getAttribute('stop-color');
+                if (nextStr && originStr !== nextStr) {
+                  item.setAttribute('stop-color', nextStr);
+                }
+              });
+            }
+            if ((fillList === null || fillList === void 0 ? void 0 : fillList.length) > 0) {
+              nodeMap.fill.forEach(function (item, index) {
+                // 默认接收的
+                var receiveStr = fillList[index];
+                // 下一步准备替换的
+                var nextFillStr = receiveStr === 'theme' ? primaryColor : receiveStr;
+                // 属性原本的值
+                var originFill = item.getAttribute('fill');
+                // 如果包含url(则是内链，不作替换处理
+                if (!(originFill && originFill.includes('url(')) && nextFillStr) {
+                  // 不同才替换
+                  if (originFill !== nextFillStr) {
+                    item.setAttribute('fill', nextFillStr);
+                  }
+                }
+              });
+            }
+          }
+        }
+      }))
     })
   }));
-  return !isExtendButtonMode ? RenderIcon : (0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+  var _RenderIcon = (0, _react.useMemo)(function () {
+    return RenderIcon;
+  }, [primaryColor]);
+  return !isExtendButtonMode ? _RenderIcon : (0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
     type: isIconMode ? 'text' : (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) || 'link',
     className: proIconClassNames,
     disabled: disabled,

package/lib/ProIcon/propsTypes.d.ts

@@ -6,7 +6,21 @@ interface iconMap {
     'text-cn'?: string;
     'text-en'?: string;
 }
+interface themeMap {
+    [key: string]: string[];
+}
+interface actionMap {
+    themeMap?: themeMap;
+    themeFillMap?: themeMap;
+    gradation?: string[];
+    fill?: string[];
+}
 export interface ProIconProps {
+    /**
+     * @description        本地import引入
+     * @default            ""
+     */
+    src?: string;
     /**
      * @description       图标的名称
      * @default           -
@@ -75,5 +89,10 @@ export interface ProIconProps {
      * @default            项目内认默映射
      */
     mapList?: iconMap[];
+    /**
+     * @description        svg变更操作表 请到 ProThemeTools 主题配置查看示例
+     * @default
+     */
+    actionMap?: actionMap;
 }
 export {};

package/lib/ProIcon/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const recurseGetNodes: (type: any, node: any, queue: any) => void;

package/lib/ProIcon/utils/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.recurseGetNodes = void 0;
+var recurseGetNodes = exports.recurseGetNodes = function recurseGetNodes(type, node, queue) {
+  switch (type) {
+    // 渐变
+    case 'gradation':
+      if (node.nodeName === 'stop' && node.getAttribute('stop-color')) {
+        queue.push(node);
+      }
+      break;
+    // 填充
+    case 'fill':
+      if (node.getAttribute && node.getAttribute('fill')) {
+        queue.push(node);
+      }
+      break;
+    default:
+      break;
+  }
+  if (node.childNodes) {
+    for (var i = 0; i < node.childNodes.length; i++) {
+      recurseGetNodes(type, node.childNodes[i], queue);
+    }
+  }
+};

package/lib/ProLayout/components/ProCollapse/index.js

@@ -12,9 +12,9 @@ var _react = require("react");
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactSvg = require("react-svg");
 var _lodash = require("lodash");
 var _fold = _interopRequireDefault(require("../../../assets/fold.svg"));
+var _index = _interopRequireDefault(require("../../../ProIcon/index"));
 var Panel = _antd.Collapse.Panel;
 var ProCollapse = function ProCollapse(props) {
   var title = props.title,
@@ -79,8 +79,11 @@ var ProCollapse = function ProCollapse(props) {
         align: "center",
         children: [(0, _jsxRuntime.jsx)("div", {
           className: "pro-collapse-icon",
-          children: (0, _lodash.isBoolean)(icon) ? (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-            src: _fold.default
+          children: (0, _lodash.isBoolean)(icon) ? (0, _jsxRuntime.jsx)(_index.default, {
+            src: _fold.default,
+            actionMap: {
+              fill: []
+            }
           }) : icon
         }), title]
       });

package/lib/ProStep/components/Step/index.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
-var _reactSvg = require("react-svg");
+var _index = _interopRequireDefault(require("../../../ProIcon/index"));
 var _catalog = _interopRequireDefault(require("../../../assets/catalog.svg"));
 var _Anchor = _interopRequireDefault(require("../Anchor"));
 var _locale = _interopRequireDefault(require("../../../locale"));
@@ -67,10 +67,11 @@ var Step = exports.Step = function Step(_ref) {
     onMouseLeave: handleMouseLeave,
     children: [(0, _jsxRuntime.jsxs)("div", {
       className: "step-menu",
-      children: [(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+      children: [(0, _jsxRuntime.jsx)(_index.default, {
+        src: _catalog.default,
         className: "menu-icon",
-        src: _catalog.default
-      }), onOff && (0, _jsxRuntime.jsx)("div", {
+        actionMap: {}
+      }), true && (0, _jsxRuntime.jsx)("div", {
         children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProStep = _locale.default.ProStep) === null || _locale$ProStep === void 0 ? void 0 : _locale$ProStep.catalogue
       })]
     }), options.map(function (item) {

package/lib/ProStep/style/index.less

@@ -27,6 +27,26 @@
     height: 48px;
     font-size: var(--zaui-font-size-lg, 16px);
     border-bottom: 1px solid var(--zaui-line, #dddddd);
+    > .anticon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 24px;
+      > .menu-icon {
+        width: auto !important;
+        height: auto !important;
+        font-size: var(--zaui-font-size-lg-title, 24px);
+        fill: var(--zaui-brand, #006aff);
+        > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 48px;
+          height: 24px;
+        }
+      }
+    }
 
     > .menu-icon {
       font-size: var(--zaui-font-size-lg-title, 24px);

package/lib/ProThemeTools/component/PrdTools/index.js

@@ -46,6 +46,9 @@ var PrdTools = function PrdTools(_ref) {
     }, {
       color: '#A00F20',
       active: false
+    }, {
+      color: '#31AF96',
+      active: false
     }]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     active = _useState2[0],
@@ -65,8 +68,17 @@ var PrdTools = function PrdTools(_ref) {
         };
       });
       setActive(newArray);
+      dispatch({
+        type: 'set',
+        payload: {
+          theme: {
+            primaryColor: zauiBrand
+          }
+        }
+      });
     }
   }, []);
+  console.log('我看看zg', active);
   return (0, _jsxRuntime.jsxs)(NewDrawer, {
     className: "pro-theme-prd-tools-drawer",
     width: 400,
@@ -105,6 +117,14 @@ var PrdTools = function PrdTools(_ref) {
               (0, _index.setThemes)({
                 'zaui-brand': item.color
               });
+              dispatch({
+                type: 'set',
+                payload: {
+                  theme: {
+                    primaryColor: item.color
+                  }
+                }
+              });
             },
             children: item.active ? (0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}) : null
           }, item.color);

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

@@ -16,20 +16,20 @@
   }
 
   p {
-    padding-left : 12px;
-    position     : relative;
+    position: relative;
     margin-bottom: var(--zaui-space-size-md, 16px);
-    font-size    : var(--zaui-font-size, 14px);
+    padding-left: 12px;
+    font-size: var(--zaui-font-size, 14px);
 
     &:before {
-      content      : '';
-      position     : absolute;
-      left         : 0;
-      top          : 4px;
-      width        : 4px;
-      height       : 14px;
-      background   : var(--zaui-brand, #006aff);
+      position: absolute;
+      top: 4px;
+      left: 0;
+      width: 4px;
+      height: 14px;
+      background: var(--zaui-brand, #006aff);
       border-radius: var(zaui-border-radius-card, 4px);
+      content: '';
     }
   }
 
@@ -37,19 +37,19 @@
     display: flex;
 
     li {
-      width          : 38px;
-      height         : 38px;
-      border-radius  : 50%;
-      background     : #fff;
-      display        : flex;
+      display: flex;
+      align-items: center;
       justify-content: center;
-      align-items    : center;
-      border         : 6px solid #fff;
-      color          : #fff;
-      margin-right   : 34px;
+      width: 38px;
+      height: 38px;
+      margin-right: 34px;
+      color: #fff;
+      background: #fff;
+      border: 6px solid #fff;
+      border-radius: 50%;
 
       span {
-        font-size     : var(--zaui-font-size, 14px);
+        font-size: var(--zaui-font-size, 14px);
         vertical-align: -7px;
       }
 
@@ -81,8 +81,16 @@
       }
 
       &:nth-child(4) {
+        background: #a00f20;
+
+        &.active,
+        &:hover {
+          border-color: #f2dbdb;
+        }
+      }
+      &:nth-child(5) {
         margin-right: 0;
-        background  : #a00f20;
+        background: #31af96;
 
         &.active,
         &:hover {
@@ -98,16 +106,16 @@
 
   .copy-btn {
     position: absolute;
-    width   : calc(100% - 64px);
-    bottom  : 20px;
-    left    : 32px;
-    z-index : 10;
+    bottom: 20px;
+    left: 32px;
+    z-index: 10;
+    width: calc(100% - 64px);
   }
 
   .pro-theme-tools-box {
-    display        : flex;
+    display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    flex-wrap      : wrap;
   }
 
   .pro-theme-tools-space {
@@ -129,22 +137,22 @@
   }
 
   .pro-drawer-close {
-    position       : absolute;
-    top            : 6px;
-    left           : -37px;
-    display        : flex;
-    align-items    : center;
+    position: absolute;
+    top: 6px;
+    left: -37px;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    width          : 32px;
-    height         : 38px;
-    color          : #fff;
-    cursor         : pointer;
+    width: 32px;
+    height: 38px;
+    color: #fff;
+    cursor: pointer;
 
     .close-icon {
-      position : relative;
-      left     : 4px;
-      z-index  : 1;
-      color    : var(--zaui-text, #343434);
+      position: relative;
+      left: 4px;
+      z-index: 1;
+      color: var(--zaui-text, #343434);
       font-size: var(--zaui-font-size-lg, 16px);
       transform: translateZ(100px);
 
@@ -155,14 +163,14 @@
   }
 
   .pro-drawer-close::after {
-    position        : absolute;
-    top             : 0;
-    right           : 0;
-    bottom          : 0;
-    left            : 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     background-color: #fff;
-    border-radius   : 4px 0px 0px 4px;
-    transform       : perspective(0.15em) rotateY(-2deg);
-    content         : '';
+    border-radius: 4px 0px 0px 4px;
+    transform: perspective(0.15em) rotateY(-2deg);
+    content: '';
   }
 }

package/lib/ProTreeModal/index.js

@@ -207,10 +207,11 @@ var ProTreeModal = function ProTreeModal(props) {
       setState({
         checkedValues: checkedValues,
         checkAll: checkedValues.length === allKeys.length,
-        treeViewData: treeViewData
+        treeViewData: treeViewData,
+        beforeClearAllValues: checkedValues
       });
     }
-  }, [value, state.allKeys]);
+  }, [value, state.allKeys, state.open]);
   var handleClick = function handleClick() {
     setState({
       open: true
@@ -277,24 +278,19 @@ var ProTreeModal = function ProTreeModal(props) {
       treeViewData: [],
       checkAll: false
     });
-    onChange === null || onChange === void 0 ? void 0 : onChange(_checkedValues);
+    /* ******** fix:3.4.4-beta.4 点击清空全部不应该回调、所有的都是应该走统一的确定 *********  */
+    // onChange?.(_checkedValues);
   };
   /**
    * Drawer close
    */
   var handleClose = function handleClose() {
-    var _state$beforeClearAll;
-    if ((_state$beforeClearAll = state.beforeClearAllValues) === null || _state$beforeClearAll === void 0 ? void 0 : _state$beforeClearAll.length) {
-      setState({
-        open: false,
-        checkedValues: state.beforeClearAllValues,
-        beforeClearAllValues: []
-      });
-    } else {
-      setState({
-        open: false
-      });
-    }
+    setState({
+      open: false,
+      checkedValues: state.beforeClearAllValues,
+      beforeClearAllValues: []
+    });
+    // onChange?.(state.beforeClearAllValues);
     openChange === null || openChange === void 0 ? void 0 : openChange(false);
   };
   /**

package/lib/ProWaterMark/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render ProWaterMark with dumi 1`] = `
+<span>
+  123
+</span>
+`;

package/lib/global.less

@@ -1,5 +1,41 @@
-@import "./style/index.less";
+@import './style/index.less';
 
-pre * {
+pre {
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
+
+* {
+  // 火狐浏览器
+  scrollbar-width: thin;
+  scrollbar-color: #d2d3d7 transparent;
+  // ie浏览器
+  scrollbar-face-color: #d2d3d7;
+  scrollbar-highlight-color: #979797;
+  scrollbar-3dlight-color: #979797;
+}
+
+::-webkit-scrollbar  {
+  width: 16px;
+}
+
+// // 滑块
+::-webkit-scrollbar-thumb {
+  background-color: #d2d3d7;
+  background-clip: padding-box;
+  border-color: transparent;
+  border-style: dashed;
+  border-width: 4px;
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+}
+
+// 轨道
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 10px;
+}
+
+// 悬浮轨道
+::-webkit-scrollbar-thumb:hover {
+  background-color: #979797;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.4.4",
+  "version": "3.4.5-beta.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -58,7 +58,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@pansy/react-watermark": "^3.1.13",
-    "@zat-design/utils": "1.1.16",
+    "@zat-design/utils": "^1.1.16",
     "ahooks": "3.7.4",
     "antd": "4.24.8",
     "big.js": "^6.2.1",
@@ -77,7 +77,10 @@
   "devDependencies": {
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
+    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/react": "12.1.5",
     "@types/classnames": "^2.3.1",
+    "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.171",
     "@types/mockjs": "^1.0.6",
     "@types/react": "^17.0.53",
@@ -104,6 +107,7 @@
     "father-build": "^1.18.1",
     "gh-pages": "^3.0.0",
     "husky": "^4.0.7",
+    "jest-canvas-mock": "^2.5.2",
     "lint-staged": "^10.0.0",
     "mockjs": "^1.1.0",
     "prettier": "^2.5.0",