@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/h5public/src/components/factory/src/Icon/Icon.tsx

@@ -0,0 +1,374 @@
+import React, { useState, useEffect, useMemo } from 'react';
+// import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import classnames from 'classnames';
+import './index.less';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import SysTemIcons from '../assets';
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+import { useAsyncIconFont } from './useAsyncIconFont';
+
+
+// 异步加载整个 @lingxiteam/icons 模块
+const LegacyIcon = Loadable({
+  loader: async () => {
+    const { Icon } = await import('@lingxiteam/icons');
+    return Icon;
+  },
+  loading: LoadingComponennt,
+});
+
+// const { createFromIconfontCN } = LegacyIcon;
+
+export interface IconFileProps {
+  fileId: string,
+  fileCode: string,
+  fileSubType: 'ICON_IMAGE' | 'ICONFONT'
+}
+
+export interface MyIconProps {
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  iconFileInfo?: any;
+  iconFile?: IconFileProps;
+  isSystem?: boolean; // 用于标识是否为系统图标
+  systemIconKey?: string; // 系统图标标识
+}
+export interface IconProps {
+  icon?: MyIconProps;
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  style?: any;
+  className?: any;
+  rotate?: any;
+  iconFileInfo?: any;
+  iconFile?: IconFileProps;
+  appId?: any;
+  color?: any;
+  size?: any;
+  visible?: boolean;
+  onClick?: () => void;
+  mode?: string;
+  iconItems?: any;
+  isUsePrimary?: boolean;
+  extendProps?: Record<string, any>;
+  name?: string;
+  isSystem?: boolean; // 用于标识是否为系统图标
+  systemIconKey?: string; // 系统图标标识
+}
+const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
+  const {
+    icon,
+    rotate,
+    size,
+    style,
+    theme: curTheme,
+    isIconFont: curIsIconFont,
+    fontAddress: curFontAddress,
+    svgContent: curSvgContent,
+    iconFileInfo: curIconFileInfo,
+    iconFile: curIconFile,
+    isSystem,
+    systemIconKey,
+    visible = true,
+    onClick,
+    mode,
+    iconItems,
+    type,
+    isUsePrimary: curIsUsePrimary,
+    getEngineApis,
+    $$componentItem,
+    extendProps,
+    ...restProps
+  } = props;
+  const {
+    getAppFileUrlByFileCode = () => {
+      console.warn('引擎能力未配置getAppFileUrlByFileCode');
+    },
+    getMaterialFile = () => {
+      console.warn('引擎能力未配置getMaterialFile');
+    },
+  } = getEngineApis?.() || {};
+
+  
+  const [scriptUrl, setScripUrl] = useState<any>();
+  const displayStyle = useHiddenStyle(visible);
+  const {
+    curType,
+    iconFile,
+    iconFileInfo,
+    fontAddress,
+    isIconFont,
+    theme,
+    svgContent,
+    isUsePrimary,
+    color,
+    mIsSystem,
+    mSystemIconKey,
+  } = useMemo(() => {
+    const iconInfo = Array.isArray(iconItems) && (iconItems.find((c) => c.rule) || iconItems[0]);
+    if (mode === 'custom' && iconInfo) {
+      return {
+        curType: iconInfo?.icon?.type,
+        theme: iconInfo?.icon?.theme,
+        isIconFont: iconInfo?.icon?.isIconFont,
+        fontAddress: iconInfo?.icon?.fontAddress,
+        svgContent: iconInfo?.icon?.svgContent,
+        iconFileInfo: iconInfo?.icon?.iconFileInfo,
+        iconFile: iconInfo?.icon?.iconFile,
+        isUsePrimary: iconInfo?.isUsePrimary,
+        color: iconInfo?.color,
+        mIsSystem: iconInfo?.icon?.isSystem,
+        mSystemIconKey: iconInfo?.icon?.systemIconKey,
+      };
+    }
+    return {
+      curType: icon?.type || type,
+      iconFile: icon?.iconFile || curIconFile,
+      iconFileInfo: icon?.iconFileInfo || curIconFileInfo,
+      fontAddress: icon?.fontAddress || curFontAddress,
+      isIconFont: icon?.isIconFont || curIsIconFont,
+      theme: icon?.theme || curTheme,
+      svgContent: icon?.svgContent || curSvgContent,
+      mIsSystem: icon?.isSystem || isSystem,
+      mSystemIconKey: icon?.systemIconKey || systemIconKey,
+    };
+  }, [
+    JSON.stringify(icon),
+    type,
+    curIconFile,
+    curIconFileInfo,
+    curFontAddress,
+    curIsIconFont,
+    curTheme,
+    curSvgContent,
+    mode,
+    iconItems,
+    isSystem,
+    systemIconKey,
+  ]);
+
+
+  useEffect(() => {
+    if (iconFile && Object.keys(iconFile).length > 0) {
+      const { fileCode, fileHttp } = iconFile;
+      setScripUrl(fileHttp || getAppFileUrlByFileCode(fileCode));
+    } else if (fontAddress) {
+      setScripUrl(fontAddress);
+    } else if (iconFileInfo && !iconFileInfo.svgContent) {
+      if (iconFileInfo.materialId && iconFileInfo.fileName) {
+        setScripUrl(getMaterialFile(iconFileInfo.materialId, iconFileInfo.fileName));
+      }
+    } else {
+      setScripUrl('');
+    }
+  }, [iconFile, fontAddress]);
+
+  // useImperativeHandle(ref, () => ({
+  //   changeContent(_content: any) {
+  //     setIcon({ ..._content });
+  //   },
+  // }));
+  
+  const curClassName = classnames({
+
+    /**
+    * 用于主题，如果是单独使用的是，在className 增加一个变量，防止在主题设置图标的时候，影响影响引用图标的其他控件
+   */
+    'factory-icon': $$componentItem?.type === 'Icon',
+    [restProps?.className]: restProps?.className,
+    'cust-icon': true,
+    'cust-icon-theme': isUsePrimary,
+    [`cust-icon-${size}`]: size,
+  });
+
+  const curStyle = useMemo(
+    () => ({
+      width: style?.fontSize || style?.width,
+      height: style?.fontSize || style?.height,
+      fontSize: style?.fontSize || style?.width, // 兼容存量数据
+      ...(style || {}), // 修复下从浩鲸D升上来图表丢失部分样式的问题
+      color: isUsePrimary ? undefined : color || style?.color || restProps?.color,
+      fill: isUsePrimary ? undefined : color || style?.color || restProps?.color,
+    }),
+    [color],
+  );
+
+  // svg字符串
+  if (svgContent) {
+    return (
+      <div
+        className={curClassName}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        onClick={onClick}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: svgContent,
+        }}
+      />
+    );
+  }
+
+  // 来源在线iconFont 在线
+  if (fontAddress || iconFile?.fileSubType === 'ICONFONT' || isIconFont) {
+    const IconFont = useAsyncIconFont(scriptUrl);
+    if (!IconFont) {
+      return null; // 或者返回 loading 占位，比如 <span>Loading icon...</span>
+    }
+    // const IconFont = createFromIconfontCN({
+    //   scriptUrl,
+    // });
+    const DynamicIcon = IconFont as React.ComponentType<any>;
+    return (
+      <DynamicIcon
+        type={curType}
+        rotate={rotate}
+        {...extendProps}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+        }}
+        className={curClassName}
+      />
+    );
+  }
+
+  // 来自PC逻辑，app显示异常
+  // if (iconFile?.fileSubType === 'ICONFONT' || isIconFont) {
+  //   const IconFont = createFromIconfontCN({
+  //     scriptUrl: iconUrl,
+  //   });
+  //   // 采用项目本地的iconfont文件
+  //   return (
+  //     <svg
+  //       style={{
+  //         ...curStyle,
+  //         ...displayStyle,
+  //         transform: `rotate(${rotate}deg)`,
+  //       }}
+  //       aria-hidden="true"
+  //       className={curClassName}
+  //     >
+  //       <use xlinkHref={`#${curType}`} />
+  //     </svg>
+  //   );
+  // }
+
+  if (mIsSystem) {
+    return (
+      <LegacyIcon
+        onClick={onClick}
+        {...extendProps}
+        className={`sys_icon ${curClassName}`}
+        rotate={rotate}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+        }}
+        component={(SysTemIcons as any)[mSystemIconKey || '']}
+      />
+    );
+  }
+
+  // 兼容antd的图标
+  if (
+    theme &&
+    !['cross-circle', 'cross-circle-o'].includes(curType) &&
+    Object.keys(iconFileInfo || {})?.length < 1
+  ) {
+    // 兼容原来的antd的图标
+    return (
+      <LegacyIcon
+        type={curType}
+        rotate={rotate}
+        theme={theme}
+        onClick={onClick}
+        {...extendProps}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+        }}
+        className={curClassName}
+      />
+    );
+  }
+
+  const shouldSysTag = curType && iconFileInfo && Object.keys(iconFileInfo)?.length > 0;
+
+  if (shouldSysTag && iconFileInfo.svgContent) {
+    return (
+      <span
+        className={curClassName}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: iconFileInfo.svgContent }}
+      />
+    );
+  }
+
+  if (shouldSysTag) {
+    return (
+      <img
+        className={curClassName}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        src={scriptUrl}
+        alt=""
+      />
+    );
+  }
+
+  if (curType) {
+    // 删除antd-v2-的icon
+    return (
+      <LegacyIcon
+        type={curType}
+        rotate={rotate}
+        theme={theme}
+        onClick={onClick}
+        {...extendProps}
+        style={curStyle}
+        className={curClassName}
+      />
+    );
+  }
+
+  if (iconFile?.fileSubType === 'ICON_IMAGE' && scriptUrl) {
+    return (
+      <img
+        onClick={onClick}
+        alt={props.name}
+        src={scriptUrl}
+        {...extendProps}
+        style={{
+          ...curStyle,
+          ...displayStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        className={curClassName}
+      />
+    );
+  }
+  return null;
+});
+
+MyIcon.displayName = 'Icon';
+export default MyIcon;

package/lib/h5public/src/components/factory/src/Icon/index.less

@@ -44,3 +44,7 @@
   fill: var(--adm-color-primary);
   color: var(--adm-color-primary);
 }
+
+.sys_icon {
+  fill: @brand-primary;
+}

package/lib/h5public/src/components/factory/src/Icon/index.tsx

@@ -1,290 +1,20 @@
-import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import React, { useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import classnames from 'classnames';
-import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import IconLoader from './loader';
 import { useListenProps } from '../utils/hooks/useListenState';
-import './index.less';
-
-const { createFromIconfontCN } = LegacyIcon;
-
-export interface IconFileProps {
-  fileId: string;
-  fileCode: string;
-  fileSubType: 'ICON_IMAGE' | 'ICONFONT';
-}
-
-export interface MyIconProps {
-  type?: string;
-  isIconFont?: boolean;
-  fontAddress?: string;
-  svgContent?: string;
-  theme?: string;
-  iconFileInfo?: any;
-  iconFile?: IconFileProps;
-}
-export interface IconProps {
-  icon?: MyIconProps;
-  type?: string;
-  isIconFont?: boolean;
-  fontAddress?: string;
-  svgContent?: string;
-  theme?: string;
-  style?: any;
-  className?: any;
-  rotate?: any;
-  iconFileInfo?: any;
-  iconFile?: IconFileProps;
-  appId?: any;
-  color?: any;
-  size?: any;
-  visible?: boolean;
-  onClick?: () => void;
-  mode?: string;
-  iconItems?: any;
-  isUsePrimary?: boolean;
-  extendProps?: Record<string, any>;
-  name?: string;
-}
-const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
-  const {
-    icon: propsIcon = {},
-    rotate,
-    size,
-    style,
-    theme: curTheme,
-    isIconFont: curIsIconFont,
-    fontAddress: curFontAddress,
-    svgContent: curSvgContent,
-    iconFileInfo: curIconFileInfo,
-    iconFile: curIconFile,
-    visible = true,
-    onClick,
-    mode,
-    iconItems,
-    type,
-    isUsePrimary: curIsUsePrimary,
-    getEngineApis,
-    $$componentItem,
-    extendProps,
-    ...restProps
-  } = props;
-  const {
-    getAppFileUrlByFileCode = () => {
-      console.warn('引擎能力未配置getAppFileUrlByFileCode');
-    },
-    getMaterialFile = () => {
-      console.warn('引擎能力未配置getMaterialFile');
-    },
-  } = getEngineApis?.() || {};
 
+const Icon = LingxiForwardRef<unknown, any>((props, ref) => {
+  const { icon: propsIcon, ...restProps } = props;
   const [icon, setIcon] = useListenProps(propsIcon);
-  const [scriptUrl, setScripUrl] = useState<any>();
-  const displayStyle = useHiddenStyle(visible);
-  const { curType, iconFile, iconFileInfo, fontAddress, isIconFont, theme, svgContent, isUsePrimary, color } = useMemo(() => {
-    const iconInfo = Array.isArray(iconItems) && (iconItems.find(c => c.rule) || iconItems[0]);
-    if (mode === 'custom' && iconInfo) {
-      return {
-        curType: iconInfo?.icon?.type,
-        theme: iconInfo?.icon?.theme,
-        isIconFont: iconInfo?.icon?.isIconFont,
-        fontAddress: iconInfo?.icon?.fontAddress,
-        svgContent: iconInfo?.icon?.svgContent,
-        iconFileInfo: iconInfo?.icon?.iconFileInfo,
-        iconFile: iconInfo?.icon?.iconFile,
-        isUsePrimary: iconInfo?.isUsePrimary,
-        color: iconInfo?.color,
-      };
-    }
-    return {
-      curType: icon?.type || type,
-      iconFile: icon?.iconFile || curIconFile,
-      iconFileInfo: icon?.iconFileInfo || curIconFileInfo,
-      fontAddress: icon?.fontAddress || curFontAddress,
-      isIconFont: icon?.isIconFont || curIsIconFont,
-      theme: icon?.theme || curTheme,
-      svgContent: icon?.svgContent || curSvgContent,
-    };
-  }, [JSON.stringify(icon), type, curIconFile, curIconFileInfo, curFontAddress, curIsIconFont, curTheme, curSvgContent, mode, iconItems]);
-
-  useEffect(() => {
-    if (iconFile && Object.keys(iconFile).length > 0) {
-      const { fileCode, fileHttp } = iconFile;
-      setScripUrl(fileHttp || getAppFileUrlByFileCode(fileCode));
-    } else if (fontAddress) {
-      setScripUrl(fontAddress);
-    } else if (iconFileInfo && !iconFileInfo.svgContent) {
-      if (iconFileInfo.materialId && iconFileInfo.fileName) {
-        setScripUrl(getMaterialFile(iconFileInfo.materialId, iconFileInfo.fileName));
-      }
-    } else {
-      setScripUrl('');
-    }
-  }, [iconFile, fontAddress]);
 
   useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法
     changeContent(_content: any) {
-      setIcon({ ..._content, type: _content.iconType });
+      setIcon({ ..._content });
     },
   }));
-
-  const curClassName = classnames({
-
-    /**
-     * 用于主题，如果是单独使用的是，在className 增加一个变量，防止在主题设置图标的时候，影响影响引用图标的其他控件
-     */
-    'factory-icon': $$componentItem?.type === 'Icon',
-    [restProps?.className]: restProps?.className,
-    'cust-icon': true,
-    'cust-icon-theme': isUsePrimary,
-    [`cust-icon-${size}`]: size,
-  });
-
-  const curStyle = useMemo(
-    () => ({
-      width: style?.fontSize || style?.width,
-      height: style?.fontSize || style?.height,
-      fontSize: style?.fontSize || style?.width, // 兼容存量数据
-      ...(style || {}), // 修复下从浩鲸D升上来图表丢失部分样式的问题
-      color: isUsePrimary ? undefined : color || style?.color || restProps?.color,
-      fill: isUsePrimary ? undefined : color || style?.color || restProps?.color,
-    }),
-    [color]
-  );
-
-  // svg字符串
-  if (svgContent) {
-    return (
-      <div
-        className={curClassName}
-        style={{
-          ...curStyle,
-          ...displayStyle,
-          transform: `rotate(${rotate}deg)`,
-        }}
-        onClick={onClick}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: svgContent,
-        }}
-      />
-    );
-  }
-
-  // 来源在线iconFont 在线
-  if (fontAddress || iconFile?.fileSubType === 'ICONFONT' || isIconFont) {
-    const IconFont = createFromIconfontCN({
-      scriptUrl,
-    });
-    return (
-      <IconFont
-        type={curType}
-        rotate={rotate}
-        {...extendProps}
-        style={{
-          ...curStyle,
-          ...displayStyle,
-        }}
-        className={curClassName}
-      />
-    );
-  }
-
-  // 来自PC逻辑，app显示异常
-  // if (iconFile?.fileSubType === 'ICONFONT' || isIconFont) {
-  //   const IconFont = createFromIconfontCN({
-  //     scriptUrl: iconUrl,
-  //   });
-  //   // 采用项目本地的iconfont文件
-  //   return (
-  //     <svg
-  //       style={{
-  //         ...curStyle,
-  //         ...displayStyle,
-  //         transform: `rotate(${rotate}deg)`,
-  //       }}
-  //       aria-hidden="true"
-  //       className={curClassName}
-  //     >
-  //       <use xlinkHref={`#${curType}`} />
-  //     </svg>
-  //   );
-  // }
-
-  // 兼容antd的图标
-  if (theme && !['cross-circle', 'cross-circle-o'].includes(curType) && Object.keys(iconFileInfo || {})?.length < 1) {
-    // 兼容原来的antd的图标
-    return (
-      <LegacyIcon
-        type={curType}
-        rotate={rotate}
-        theme={theme}
-        onClick={onClick}
-        {...extendProps}
-        style={{
-          ...curStyle,
-          ...displayStyle,
-        }}
-        className={curClassName}
-      />
-    );
-  }
-
-  const shouldSysTag = curType && iconFileInfo && Object.keys(iconFileInfo)?.length > 0;
-
-  if (shouldSysTag && iconFileInfo.svgContent) {
-    return (
-      <span
-        className={curClassName}
-        style={{
-          ...curStyle,
-          ...displayStyle,
-          transform: `rotate(${rotate}deg)`,
-        }}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: iconFileInfo.svgContent }}
-      />
-    );
-  }
-
-  if (shouldSysTag) {
-    return (
-      <img
-        className={curClassName}
-        style={{
-          ...curStyle,
-          ...displayStyle,
-          transform: `rotate(${rotate}deg)`,
-        }}
-        src={scriptUrl}
-        alt=""
-      />
-    );
-  }
-
-  if (curType) {
-    // 删除antd-v2-的icon
-    return <LegacyIcon type={curType} rotate={rotate} theme={theme} onClick={onClick} {...extendProps} style={curStyle} className={curClassName} />;
-  }
-
-  if (iconFile?.fileSubType === 'ICON_IMAGE' && scriptUrl) {
-    return (
-      <img
-        onClick={onClick}
-        alt={props.name}
-        src={scriptUrl}
-        {...extendProps}
-        style={{
-          ...curStyle,
-          ...displayStyle,
-          transform: `rotate(${rotate}deg)`,
-        }}
-        className={curClassName}
-      />
-    );
-  }
-  return null;
+  
+  return <IconLoader {...restProps} icon={icon} />;
 });
 
-MyIcon.displayName = 'Icon';
-export default MyIcon;
+export default Icon;

package/lib/h5public/src/components/factory/src/Icon/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableIcon = Loadable({
+  loader: async () => (await import(/* webpackChunkName: 'factory-Icon' */ './Icon')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableIcon;

package/lib/h5public/src/components/factory/src/Icon/useAsyncIconFont.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+// 异步加载 @lingxiteam/icons 并返回 IconFont 组件
+export function useAsyncIconFont(scriptUrl: string) {
+  const [IconFont, setIconFont] = useState<React.ComponentType<any> | null>(null);
+  useEffect(() => {
+    if (!scriptUrl) return;
+
+    import('@lingxiteam/icons').then((mod: any) => {
+      const createFromIconfontCN = mod?.Icon?.createFromIconfontCN || mod?.createFromIconfontCN;
+      if (createFromIconfontCN) {
+        const IconFontComponent = createFromIconfontCN({ scriptUrl });
+        setIconFont(() => IconFontComponent);
+      }
+    });
+  }, [scriptUrl]);
+
+  return IconFont;
+}