@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProIcon/index.js

@@ -1,36 +1,31 @@
-import _uniqBy from "lodash/uniqBy";
-import { useLocalStorageState } from 'ahooks';
-import { Button, Tooltip } from 'antd';
-import classNames from 'classnames';
-import { ReactSVG } from 'react-svg';
-import React, { useEffect, useRef } from 'react';
+import { jsx } from "react/jsx-runtime";
+import { useLocalStorageState } from "ahooks";
+import { Button, Tooltip } from "antd";
+import classNames from "classnames";
+import uniqBy from "lodash/uniqBy";
+import { ReactSVG } from "react-svg";
+import React, { useEffect, useRef } from "react";
 import { useProConfig } from "../ProConfigProvider";
 import { iconMap } from "./config";
 import { onBeforeInjection } from "./utils";
 import locale from "../locale";
-
-// 提取主题色相关辅助函数
-import { jsx as _jsx } from "react/jsx-runtime";
-const extractThemeColor = target => {
-  if (!target) return null;
-  const styleAttr = Object.values(target.attributes ?? {})
-  // @ts-ignore
-  .find(item => item.nodeName === 'style');
-  if (!styleAttr) return null;
-
-  // @ts-ignore
-  const match = styleAttr.value?.match(/--zaui-brand:(.*?);/);
-  return match?.[1]?.trim() || null;
+const extractThemeColor = (target) => {
+  var _a, _b;
+  if (!target)
+    return null;
+  const styleAttr = Object.values(target.attributes ?? {}).find((item) => item.nodeName === "style");
+  if (!styleAttr)
+    return null;
+  const match = (_a = styleAttr.value) == null ? void 0 : _a.match(/--zaui-brand:(.*?);/);
+  return ((_b = match == null ? void 0 : match[1]) == null ? void 0 : _b.trim()) || null;
 };
 const updateThemeColor = (newColor, dispatch, primaryColor) => {
-  if (!newColor) return;
+  if (!newColor)
+    return;
   dispatch({
-    type: 'set',
+    type: "set",
     payload: {
-      theme: {
-        primaryColor,
-        qiankunPrimaryColor: newColor
-      },
+      theme: { primaryColor, qiankunPrimaryColor: newColor },
       forms: {}
     }
   });
@@ -41,35 +36,30 @@ const getMainAppWindow = () => {
   }
   let currentWindow = window;
   while (currentWindow.parent !== currentWindow) {
-    // @ts-ignore
     currentWindow = currentWindow.parent;
   }
   return currentWindow;
 };
 const handleMutation = (mutationsList, dispatch, primaryColor, qiankunPrimaryColor) => {
   const targetEntries = mutationsList[0];
-  if (!targetEntries?.target) return;
+  if (!(targetEntries == null ? void 0 : targetEntries.target))
+    return;
   const newColor = extractThemeColor(targetEntries.target);
-  if (!newColor || qiankunPrimaryColor === newColor) return;
+  if (!newColor || qiankunPrimaryColor === newColor)
+    return;
   updateThemeColor(newColor, dispatch, primaryColor);
 };
-const ProIcon = props => {
-  const {
-    state,
-    dispatch
-  } = useProConfig();
-  const {
-    ProIcon: config,
-    theme: antdTheme
-  } = state;
+const ProIcon = (props) => {
+  const { state, dispatch } = useProConfig();
+  const { ProIcon: config, theme: antdTheme } = state;
   const _config = {
     ...config,
-    ...(props ?? {})
+    ...props ?? {}
   };
   const {
     type = null,
     onClick,
-    size = '1em',
+    size = "1em",
     color,
     className,
     style = {},
@@ -87,68 +77,46 @@ const ProIcon = props => {
     tooltip,
     ...reset
   } = _config;
-
-  // 主题色 primaryColor 用于单应用或处于组件库文档内 qiankunPrimaryColor用于主子应用
-  const {
-    primaryColor = '#006AFF',
-    qiankunPrimaryColor = '#006AFF'
-  } = antdTheme ?? {};
-
-  // 本地存储初始化主题
-  const [themeConfig] = useLocalStorageState('themeConfig');
-
-  // 文档内部就不用判断window.top !== window.self了
-  const isQiankun =
-  // @ts-ignore
-  window?.__POWERED_BY_QIANKUN__ || window?.isMicroApp;
-
-  // 语言
-  const {
-    language
-  } = locale.ProIcon;
+  const { primaryColor = "#006AFF", qiankunPrimaryColor = "#006AFF" } = antdTheme ?? {};
+  const [themeConfig] = useLocalStorageState("themeConfig");
+  const isQiankun = (
+    // @ts-ignore
+    (window == null ? void 0 : window.__POWERED_BY_QIANKUN__) || (window == null ? void 0 : window.isMicroApp)
+  );
+  const { language } = locale.ProIcon;
   const rotateStyle = rotate ? {
     msTransform: `rotate(${rotate}deg)`,
     transform: `rotate(${rotate}deg)`
-  } : undefined;
+  } : void 0;
   const proIconClassNames = classNames(className, {
-    'pro-icon': !disabled,
-    'pro-icon-spin': !!spin,
-    'pro-icon-with-theme': theme
+    "pro-icon": !disabled,
+    "pro-icon-spin": !!spin,
+    "pro-icon-with-theme": theme
   });
-
-  // 特殊情况，如果指定了type，并且没有接收到组件内的mode，那模式就是icon
-  let _mode = mode || 'icon';
+  let _mode = mode || "icon";
   if (type && !props.mode) {
-    _mode = 'icon';
+    _mode = "icon";
   }
-  const isIconMode = _mode === 'icon';
-
-  // 观察者实例（主题色同步用）
+  const isIconMode = _mode === "icon";
   const observerRef = useRef(null);
-  const targetTextFill = `text-${language}`; // text-cn text-en
-  const mergedMapList = _uniqBy(mapList.concat(iconMap), targetTextFill);
+  const targetTextFill = `text-${language}`;
+  const mergedMapList = uniqBy(mapList.concat(iconMap), targetTextFill);
   let _type = type;
   let _text = children;
-  // svg 图标对应文本
-  let iconText = tooltip || '';
-
-  // 文本和类型映射处理函数
-  const resolveIconMapping = (isIconMode, type, text, mergedMapList, targetTextFill) => {
-    if (isIconMode && !type && text) {
-      const target = mergedMapList.find(item => item['text-cn'] === text || item['text-en'] === text);
+  let iconText = tooltip || "";
+  const resolveIconMapping = (isIconMode2, type2, text, mergedMapList2, targetTextFill2) => {
+    if (isIconMode2 && !type2 && text) {
+      const target = mergedMapList2.find(
+        (item) => item["text-cn"] === text || item["text-en"] === text
+      );
       if (target) {
-        return {
-          type: target.type,
-          text: target[targetTextFill]
-        };
+        return { type: target.type, text: target[targetTextFill2] };
       }
     }
-    if (!isIconMode && type && /[a-zA-Z]/.test(type)) {
-      const target = mergedMapList.find(item => item.type === type);
+    if (!isIconMode2 && type2 && /[a-zA-Z]/.test(type2)) {
+      const target = mergedMapList2.find((item) => item.type === type2);
       if (target) {
-        return {
-          text: target[targetTextFill]
-        };
+        return { text: target[targetTextFill2] };
       }
     }
     return null;
@@ -157,142 +125,103 @@ const ProIcon = props => {
   if (mappingResult) {
     if (mappingResult.type) {
       _type = mappingResult.type;
-      iconText = mappingResult.text || '';
+      iconText = mappingResult.text || "";
     } else if (mappingResult.text) {
       _text = mappingResult.text;
     }
   }
-
-  // disabled 时，icon 模式下拦截 onClick，仅保留视觉降级
-  const effectiveOnClick = disabled ? undefined : onClick;
+  const effectiveOnClick = disabled ? void 0 : onClick;
   const svgProps = {
     className: proIconClassNames,
-    fill: 'currentColor',
-    style: {
-      width: size,
-      height: size,
-      ...rotateStyle,
-      ...style
-    }
+    fill: "currentColor",
+    style: { width: size, height: size, ...rotateStyle, ...style }
   };
-
-  // 应用颜色到 SVG 路径元素
-  const applyColorToPaths = (svg, color) => {
-    const paths = svg.querySelectorAll('path, circle, rect, polygon, ellipse');
-    paths.forEach(path => {
-      const currentFill = path.getAttribute('fill');
-      if (!currentFill || currentFill === 'currentColor') {
-        path.setAttribute('fill', color);
+  const applyColorToPaths = (svg, color2) => {
+    const paths = svg.querySelectorAll("path, circle, rect, polygon, ellipse");
+    paths.forEach((path) => {
+      const currentFill = path.getAttribute("fill");
+      if (!currentFill || currentFill === "currentColor") {
+        path.setAttribute("fill", color2);
       }
     });
   };
-
-  // 应用颜色到 SVG
-  const applyColorToSvg = (svg, color, isComponentString = false) => {
-    if (!color) {
-      svg.style.color = 'currentColor';
+  const applyColorToSvg = (svg, color2, isComponentString = false) => {
+    if (!color2) {
+      svg.style.color = "currentColor";
       return;
     }
-    svg.setAttribute('fill', color);
-    svg.style.color = color;
-
-    // 组件字符串类型需要遍历所有路径元素设置 fill
+    svg.setAttribute("fill", color2);
+    svg.style.color = color2;
     if (isComponentString) {
-      applyColorToPaths(svg, color);
+      applyColorToPaths(svg, color2);
     }
   };
-
-  // 创建 SVG beforeInjection 处理函数
-  const createSvgBeforeInjection = (isComponentString = false) => svg => {
-    // 设置 SVG 的宽高和属性
-    svg.setAttribute('width', String(size));
-    svg.setAttribute('height', String(size));
-    svg.setAttribute('aria-hidden', 'true');
-
-    // 应用旋转
+  const createSvgBeforeInjection = (isComponentString = false) => (svg) => {
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("aria-hidden", "true");
     if (rotate) {
-      const transform = svg.getAttribute('transform') || '';
-      svg.setAttribute('transform', `${transform} rotate(${rotate})`);
+      const transform = svg.getAttribute("transform") || "";
+      svg.setAttribute("transform", `${transform} rotate(${rotate})`);
       svg.style.transform = `rotate(${rotate}deg)`;
     }
-
-    // 应用颜色
     applyColorToSvg(svg, color, isComponentString);
-
-    // 应用自定义样式
     if (style) {
-      Object.keys(style).forEach(key => {
+      Object.keys(style).forEach((key) => {
         svg.style[key] = style[key];
       });
     }
-
-    // 应用 actionMap 的主题配置
     onBeforeInjection({
       svg,
       actionMap,
       primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
     });
   };
-
-  // 渲染自定义组件 icon
-  // 注意：icon 本身不绑定 onClick，点击由外层容器（span 或 Button）统一处理，避免重复触发
-  const renderComponentIcon = (component, svgProps, color) => {
+  const renderComponentIcon = (component2, svgProps2, color2) => {
     const componentProps = {
-      ...svgProps,
-      style: {
-        color,
-        ...svgProps?.style
-      },
-      'aria-hidden': 'true'
+      ...svgProps2,
+      style: { color: color2, ...svgProps2 == null ? void 0 : svgProps2.style },
+      "aria-hidden": "true"
     };
-    return /*#__PURE__*/React.isValidElement(component) ? /*#__PURE__*/React.cloneElement(component, componentProps) : /*#__PURE__*/React.createElement(component, componentProps);
+    return React.isValidElement(component2) ? React.cloneElement(component2, componentProps) : React.createElement(component2, componentProps);
   };
-
-  // 渲染 icon 的优先级：component > src > type
-  // 所有分支都不绑定 onClick，交由外层容器处理，避免 svg + span 双重触发
   const renderIcon = () => {
-    // component 字符串类型：当作 SVG 文件路径处理
-    if (component && typeof component === 'string') {
-      return /*#__PURE__*/_jsx(ReactSVG, {
-        className: proIconClassNames,
-        src: component,
-        beforeInjection: createSvgBeforeInjection(true)
-      });
+    if (component && typeof component === "string") {
+      return /* @__PURE__ */ jsx(
+        ReactSVG,
+        {
+          className: proIconClassNames,
+          src: component,
+          beforeInjection: createSvgBeforeInjection(true)
+        }
+      );
     }
-
-    // component 组件类型或实例（排除字符串类型）
-    if (component && typeof component !== 'string') {
-      return renderComponentIcon(component, svgProps, color);
+    if (component && typeof component !== "string") {
+      return renderComponentIcon(
+        component,
+        svgProps,
+        color
+      );
     }
-
-    // src 类型：使用 ReactSVG 加载外部 SVG
     if (src) {
-      return /*#__PURE__*/_jsx(ReactSVG, {
-        ...svgProps,
-        "aria-hidden": "true",
-        src: src,
-        beforeInjection: createSvgBeforeInjection()
-      });
+      return /* @__PURE__ */ jsx(
+        ReactSVG,
+        {
+          ...svgProps,
+          "aria-hidden": "true",
+          src,
+          beforeInjection: createSvgBeforeInjection()
+        }
+      );
     }
-
-    // symbol icon
-    return /*#__PURE__*/_jsx("svg", {
-      ...svgProps,
-      style: {
-        color,
-        ...svgProps?.style
-      },
-      "aria-hidden": "true",
-      children: /*#__PURE__*/_jsx("use", {
-        xlinkHref: `#icon-${_type}`
-      })
-    });
+    return /* @__PURE__ */ jsx("svg", { ...svgProps, style: { color, ...svgProps == null ? void 0 : svgProps.style }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { xlinkHref: `#icon-${_type}` }) });
   };
   const icon = renderIcon();
   useEffect(() => {
-    // 处于主子应用情况下才会执行下方逻辑，主题色的变更以主框架的为准
-    if (!actionMap || !isQiankun) return;
-    const observer = new MutationObserver(mutationsList => {
+    var _a;
+    if (!actionMap || !isQiankun)
+      return;
+    const observer = new MutationObserver((mutationsList) => {
       handleMutation(mutationsList, dispatch, primaryColor, qiankunPrimaryColor);
     });
     observerRef.current = observer;
@@ -300,11 +229,9 @@ const ProIcon = props => {
     const zaAccessibilityTarget = mainWindow.document.documentElement;
     observer.observe(zaAccessibilityTarget, {
       attributes: true,
-      attributeFilter: ['style']
+      attributeFilter: ["style"]
     });
-
-    // 未变更时及初始化时
-    const extendFromMainColor = themeConfig?.data?.zauiBrand;
+    const extendFromMainColor = (_a = themeConfig == null ? void 0 : themeConfig.data) == null ? void 0 : _a.zauiBrand;
     if (extendFromMainColor && qiankunPrimaryColor !== extendFromMainColor) {
       updateThemeColor(extendFromMainColor, dispatch, primaryColor);
     }
@@ -313,43 +240,42 @@ const ProIcon = props => {
       observerRef.current = null;
     };
   }, []);
-
-  // mode=button：唯一走 Button 的分支
   if (!isIconMode) {
-    return /*#__PURE__*/_jsx(Tooltip, {
-      title: tooltip,
-      children: /*#__PURE__*/_jsx(Button, {
-        type: buttonProps?.type || 'link',
+    return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: (buttonProps == null ? void 0 : buttonProps.type) || "link",
         className: proIconClassNames,
-        disabled: disabled,
+        disabled,
         icon: null,
         onClick: effectiveOnClick,
         ...reset,
         ...buttonProps,
         children: _text
-      })
-    });
+      }
+    ) });
   }
-
-  // mode=icon（默认）：不套 Button
-  const wrapperClassName = classNames('anticon', proIconClassNames, {
-    'pro-icon-disabled': disabled
+  const wrapperClassName = classNames("anticon", proIconClassNames, {
+    "pro-icon-disabled": disabled
   });
-  return /*#__PURE__*/_jsx(Tooltip, {
-    title: tooltip || iconText,
-    children: /*#__PURE__*/_jsx("span", {
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltip || iconText, children: /* @__PURE__ */ jsx(
+    "span",
+    {
       className: wrapperClassName,
       style: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
         width: size,
         height: size
       },
       onClick: effectiveOnClick,
       ...reset,
       children: icon
-    })
-  });
+    }
+  ) });
+};
+var ProIcon_default = ProIcon;
+export {
+  ProIcon_default as default
 };
-export default ProIcon;

package/es/ProIcon/propsTypes.js

@@ -1 +0,0 @@
-export {};

package/es/ProIcon/utils/index.js

@@ -1,15 +1,13 @@
 import { themeMap, themeFillMap } from "../config";
-export const recurseGetNodes = (type, node, queue) => {
+const recurseGetNodes = (type, node, queue) => {
   switch (type) {
-    // 渐变
-    case 'gradation':
-      if (node.nodeName === 'stop' && node.getAttribute('stop-color')) {
+    case "gradation":
+      if (node.nodeName === "stop" && node.getAttribute("stop-color")) {
         queue.push(node);
       }
       break;
-    // 填充
-    case 'fill':
-      if (node.getAttribute && node.getAttribute('fill')) {
+    case "fill":
+      if (node.getAttribute && node.getAttribute("fill")) {
         queue.push(node);
       }
       break;
@@ -22,67 +20,54 @@ export const recurseGetNodes = (type, node, queue) => {
     }
   }
 };
-export const onBeforeInjection = ({
-  svg,
-  actionMap,
-  primaryColor
-}) => {
+const onBeforeInjection = ({ svg, actionMap, primaryColor }) => {
   if (actionMap && svg) {
-    // 项目内置的四种主题匹配渐变色
     const mergeThemeMap = {
       ...themeMap,
-      ...(actionMap.themeMap ?? {})
+      ...actionMap.themeMap ?? {}
     };
-    // 项目内置的四种双色匹配fill
     const mergeFillThemeMap = {
       ...themeFillMap,
-      ...(actionMap.themeFillMap ?? {})
+      ...actionMap.themeFillMap ?? {}
     };
     const _gradList = mergeThemeMap[primaryColor];
     const _fillList = mergeFillThemeMap[primaryColor];
-    // 渐变操作序列
-    const gradList = actionMap?.gradation ?? _gradList;
-    // 填充操作序列
-    const fillList = actionMap?.fill ?? _fillList;
-    // 节点收集
+    const gradList = (actionMap == null ? void 0 : actionMap.gradation) ?? _gradList;
+    const fillList = (actionMap == null ? void 0 : actionMap.fill) ?? _fillList;
     const nodeMap = {
       // 渐变色节点收集
       gradation: [],
       // 具有fill属性的节点收集
       fill: []
     };
-    // 目前只支持处理渐变及fill填充
     const types = Reflect.ownKeys(nodeMap ?? {});
-    types.forEach(typeKey => {
+    types.forEach((typeKey) => {
       recurseGetNodes(typeKey, svg, nodeMap[typeKey]);
     });
-    if (gradList?.length > 0) {
+    if ((gradList == null ? void 0 : gradList.length) > 0) {
       nodeMap.gradation.forEach((item, index) => {
-        // 下一步准备替换的
         const nextStr = gradList[index];
-        // 属性原本的值
-        const originStr = item.getAttribute('stop-color');
+        const originStr = item.getAttribute("stop-color");
         if (nextStr && originStr !== nextStr) {
-          item.setAttribute('stop-color', nextStr);
+          item.setAttribute("stop-color", nextStr);
         }
       });
     }
-    if (fillList?.length > 0) {
+    if ((fillList == null ? void 0 : fillList.length) > 0) {
       nodeMap.fill.forEach((item, index) => {
-        // 默认接收的
         const receiveStr = fillList[index];
-        // 下一步准备替换的
-        const nextFillStr = receiveStr === 'theme' ? primaryColor : receiveStr;
-        // 属性原本的值
-        const originFill = item.getAttribute('fill');
-        // 如果包含url(则是内链，不作替换处理
-        if (!(originFill && originFill.includes('url(')) && nextFillStr) {
-          // 不同才替换
+        const nextFillStr = receiveStr === "theme" ? primaryColor : receiveStr;
+        const originFill = item.getAttribute("fill");
+        if (!(originFill && originFill.includes("url(")) && nextFillStr) {
           if (originFill !== nextFillStr) {
-            item.setAttribute('fill', nextFillStr);
+            item.setAttribute("fill", nextFillStr);
           }
         }
       });
     }
   }
-};
+};
+export {
+  onBeforeInjection,
+  recurseGetNodes
+};