@lingxiteam/ebe-utils 0.5.1 → 0.5.2

package/lib/public/src/components/pcfactory/src/Icon/hooks/index.tsx

@@ -0,0 +1,300 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import classnames from 'classnames';
+import { useMemo } from 'react';
+import { useLocale } from '../../utils/hooks/useLocale';
+import { IconCfg, UseIconProps } from '../PropsType';
+
+export const ICON_FILE_IMAGE = 'ICON_IMAGE';
+export const ICON_FILE_ICONFONT = 'ICONFONT';
+
+/**
+ * 判断 icon 配置是否有效
+ * 注：需要与下述渲染判断逻辑保持同步！
+ * @param icon
+ */
+export const handleIsValidIconCfg = (icon: IconCfg) => {
+  if (icon?.svgContent) {
+    return true;
+  }
+
+  if (icon?.fontAddress) {
+    return true;
+  }
+
+  if (icon?.iconFile && Object.keys(icon.iconFile).length > 0) {
+    if (
+      [ICON_FILE_ICONFONT, ICON_FILE_IMAGE].includes(
+        icon?.iconFile?.fileSubType,
+      )
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  if (icon?.iconFileInfo && Object.keys(icon.iconFileInfo).length > 0) {
+    const { svgContent, materialId, fileName } = icon.iconFileInfo || {};
+    if (svgContent) {
+      return true;
+    }
+    if (materialId && fileName) {
+      return true;
+    }
+    return false;
+  }
+
+  if (icon?.isIconFont) {
+    return true;
+  }
+
+  if (icon?.type && icon?.theme) {
+    return true;
+  }
+
+  return false;
+};
+
+const useIcon = (props: UseIconProps) => {
+  const {
+    isUsePrimary: nIsUsePrimary,
+    rotate,
+    iconItems,
+    mode,
+    icon: myIcon = {},
+    placeholder = null,
+    getFileIconUrl = () => {},
+    getDesignPlatormIconUrl = () => {},
+
+    // ---- FIXME: 以下配置暂时保留，但新功能请从 icon 传入，禁止使用-----
+    type: nType,
+    theme: nTheme,
+    isIconFont: nIsIconFont,
+    fontAddress: nFontAddress,
+    svgContent: nSvgContent,
+    iconFileInfo: nIconFileInfo,
+    iconFile: nIconFile,
+    // ----------------
+
+    visible = true,
+    getEngineApis,
+    // hidden, // TODO: 不知道做什么用？
+    ...resProps
+  } = props;
+
+  const { getLocale } = useLocale(getEngineApis?.());
+
+  const {
+    type,
+    theme,
+    isIconFont,
+    fontAddress,
+    svgContent,
+    iconFileInfo,
+    iconFile,
+    isUsePrimary,
+    color,
+  } = useMemo(() => {
+    const iconInfo =
+      Array.isArray(iconItems) &&
+      (iconItems.find((c) => c.rule) || iconItems[0]);
+    if (mode === 'custom' && iconInfo && !myIcon?.isAction) {
+      return {
+        type: 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 {
+      type: myIcon.type || nType,
+      theme: myIcon.theme || nTheme,
+      isIconFont: myIcon.isIconFont || nIsIconFont,
+      fontAddress: myIcon.fontAddress || nFontAddress,
+      svgContent: myIcon.svgContent || nSvgContent,
+      iconFileInfo: myIcon.iconFileInfo || nIconFileInfo,
+      iconFile: myIcon.iconFile || nIconFile,
+      isUsePrimary: nIsUsePrimary,
+    };
+  }, [
+    iconItems,
+    mode,
+    JSON.stringify(myIcon),
+    nIconFile,
+    nIconFileInfo,
+    nSvgContent,
+    nFontAddress,
+    nIsIconFont,
+    nTheme,
+    nType,
+    nIsUsePrimary,
+  ]);
+
+  const renderIcon = () => {
+    if (svgContent) {
+      return (
+        <div
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: svgContent,
+          }}
+        />
+      );
+    }
+
+    const _style = {
+      ...resProps?.style,
+      color: isUsePrimary ? undefined : color || resProps.style?.color,
+    };
+
+    // 图标来源于 iconfont 在线
+    if (fontAddress) {
+      const IconFont = createFromIconfontCN({
+        scriptUrl: fontAddress,
+      });
+      return (
+        <IconFont
+          type={type}
+          rotate={rotate}
+          {...resProps}
+          style={_style}
+          className={`ued-icon ${resProps?.className || ''} ${
+            isUsePrimary ? 'fill-primary' : ''
+          }`}
+        />
+      );
+    }
+
+    // 图标来源于 文件资源
+    if (iconFile && Object.keys(iconFile).length > 0) {
+      const { fileId, fileCode, fileHttp } = iconFile;
+      const { getFileIconUrlByCode, getFileIconUrlById } =
+        getFileIconUrl() || {};
+
+      let iconUrl;
+      if (fileId && typeof getFileIconUrlById === 'function') {
+        iconUrl = getFileIconUrlById(fileId);
+      } else if (fileCode && typeof getFileIconUrlByCode === 'function') {
+        iconUrl = getFileIconUrlByCode(fileCode);
+      } else if (fileHttp) {
+        iconUrl = fileHttp;
+      }
+
+      switch (iconFile?.fileSubType) {
+        // 文件是图片
+        case ICON_FILE_IMAGE:
+          return (
+            <img
+              alt={getLocale?.('icon.imgFormatWarning')}
+              src={iconUrl}
+              {...resProps}
+              style={{
+                ...(resProps.style || {}),
+                color: isUsePrimary
+                  ? undefined
+                  : color || resProps.style?.color,
+                width: resProps?.style?.fontSize,
+                height: resProps?.style?.fontSize,
+              }}
+              className={`ued-icon ${resProps?.className || ''} ${
+                isUsePrimary ? 'fill-primary' : ''
+              }`}
+            />
+          );
+        // 文件是 iconfont.js
+        case ICON_FILE_ICONFONT: {
+          const IconFont = createFromIconfontCN({
+            scriptUrl: iconUrl,
+          });
+          return (
+            <IconFont
+              type={type}
+              rotate={rotate}
+              {...resProps}
+              style={_style}
+              className={`ued-icon ${resProps?.className || ''} ${
+                isUsePrimary ? 'fill-primary' : ''
+              }`}
+            />
+          );
+        }
+        default:
+          return placeholder;
+      }
+    }
+
+    // 图标来源于 设计平台
+    if (iconFileInfo && Object.keys(iconFileInfo).length > 0) {
+      const { svgContent, materialId, fileName } = iconFileInfo || {};
+      const designPlatformiconCls = 'ued-icon-of-design-platform';
+      if (svgContent) {
+        return (
+          <span
+            style={_style}
+            className={classnames(
+              'anticon',
+              `ued-icon ${designPlatformiconCls} ${resProps?.className || ''}`,
+            )}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: svgContent }}
+          />
+        );
+      }
+      if (materialId && fileName) {
+        const iconUrl = getDesignPlatormIconUrl(materialId, fileName);
+        return (
+          <img
+            className={`ued-icon ${designPlatformiconCls} ${
+              resProps?.className || ''
+            }`}
+            src={iconUrl}
+            alt=""
+          />
+        );
+      }
+      return placeholder;
+    }
+
+    // 存量存在项目本地的 iconfont 配置数据 ？？
+    if (isIconFont) {
+      return (
+        <svg
+          style={_style}
+          aria-hidden="true"
+          className={`ued-icon ${resProps?.className || ''} ${
+            isUsePrimary ? 'fill-primary' : ''
+          }`}
+        >
+          <use xlinkHref={`#${type}`} />
+        </svg>
+      );
+    }
+
+    // 其他认为，图标为 antd 默认内置图标
+    if (type && theme) {
+      return (
+        <LegacyIcon
+          type={type}
+          theme={theme}
+          rotate={rotate}
+          {...resProps}
+          style={_style}
+          className={`ued-icon ${resProps?.className || ''} ${
+            isUsePrimary ? 'fill-primary' : ''
+          }`}
+        />
+      );
+    }
+
+    return placeholder;
+  };
+
+  return visible ? renderIcon() : null;
+};
+
+export { useIcon };

package/lib/public/src/components/pcfactory/src/Icon/index.tsx

@@ -0,0 +1,69 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle, useMemo, useState } from 'react';
+import { useIcon } from './hooks';
+import type { IconProps } from './PropsType';
+
+const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
+  const {
+    visible = true,
+    engineApis: receivedEngineApis,
+    getEngineApis,
+    $$componentItem,
+    className = '',
+    ...restProps
+  } = props;
+
+  const appId = $$componentItem?.appId || props.appId;
+
+  const [changeContent, setChangeContent] = useState({});
+
+  const engineApis = receivedEngineApis || getEngineApis?.() || {};
+
+  const myClassName = useMemo(() => {
+    if ($$componentItem?.type === 'Icon') {
+      /**
+       * 用于主题，如果是单独使用的是，在className 增加一个变量，防止在主题设置图标的时候，影响影响引用图标的其他控件
+       */
+      return `pcFactory-icon ${className || ''}`;
+    }
+    return className;
+  }, [className]);
+
+  useImperativeHandle(ref, () => ({
+    changeContent(_content: any) {
+      setChangeContent({ icon: { ..._content, type: _content.iconType } });
+    },
+  }));
+
+  const getFileIconUrl = () => {
+    return {
+      getFileIconUrlByCode: (fileCode: string) =>
+        engineApis?.service?.getAppFileUrlByFileCode(fileCode, { appId }),
+    };
+  };
+
+  const getDesignPlatormIconUrl = () => {
+    return engineApis?.service?.getMaterialFile;
+  };
+
+  if (restProps?.style?.fill) {
+    restProps.style.color = restProps.style.fill;
+  }
+
+  const icon = useIcon({
+    ...restProps,
+    ...changeContent,
+    className: myClassName,
+    getFileIconUrl,
+    getDesignPlatormIconUrl,
+    getEngineApis,
+  });
+
+  if (!visible) {
+    return null;
+  }
+
+  return icon;
+});
+
+export default MyIcon;

package/lib/public/src/components/pcfactory/src/IconFont/index.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+import React from 'react';
+
+interface IconFontProps extends React.HTMLProps<HTMLDivElement> {
+  iconClass?: any;
+}
+
+const IconFont: FC<IconFontProps> = (props) => {
+  const { className, style, iconClass, width = 13, height = 13 } = props;
+
+  return (
+    <svg
+      className={className} // eslint-disable-line
+      style={style}
+      aria-hidden="true"
+      width={width}
+      height={height}
+    >
+      <use xlinkHref={`#${iconClass}`} />
+    </svg>
+  );
+};
+
+export default IconFont;

package/lib/public/src/components/pcfactory/src/Img/BasicImage/index.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from 'react';
+
+const MyImage = (props: any) => {
+  const {
+    defaultSrc,
+    errorSrc,
+    alt,
+    getContainerStyle,
+    imgDisplay,
+    style,
+    ...restProps
+  } = props;
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [src, setSrc] = useState(props.src);
+  const [imgStyle, setImgStyle] = useState({});
+  const [complete, setComplete] = useState(false);
+  useEffect(() => {
+    if (props.src) {
+      setSrc(props.src);
+    }
+  }, [props.src]);
+
+  // useEffect(() => {
+  //   if (imageRef.current) {
+  //     if (props.src) {
+  //       imageRef.current.onload = () => {
+  //         if (getContainerStyle && imgDisplay) {
+  //           const { width, height } = getContainerStyle();
+  //           const i_width = imageRef.current?.width || style.width;
+  //           const i_height = imageRef.current?.height || style.width;
+  //           if (imgDisplay === 'fillcut') {
+  //             // 以图片最大的
+  //             setImgStyle({
+  //               width: Math.max(width, i_width),
+  //               height: Math.max(height, i_height),
+  //             });
+  //           }
+  //         }
+  //         // setSrc(props.src);
+  //       };
+  //       imageRef.current.onerror = () => setSrc(errorSrc);
+  //       imageRef.current.src = props.src;
+  //     } else if(errorSrc) {
+  //       setSrc(errorSrc)
+  //     } else {
+  //       setSrc(props.defaultSrc);
+  //     }
+  //   }
+  // }, [props.src, errorSrc, defaultSrc]);
+
+  // return <img {...restProps}  ref={imageRef} alt={alt} style={{ ...style, ...imgStyle }} />;
+
+  const myStyle = { ...style, ...imgStyle };
+  // TODO 目前需要优先展示默认图片（默认图片由配置人员配置），当图片加载完成后，再展示真实图片，（@苏楠有没有更好办好）
+  return (
+    <>
+      <img
+        {...restProps}
+        style={complete ? myStyle : { ...myStyle, display: 'none' }}
+        src={src}
+        alt={alt}
+        ref={imageRef}
+        onLoad={() => {
+          setComplete(true);
+          if (getContainerStyle && imgDisplay) {
+            const { width, height } = getContainerStyle();
+            const iWidth = imageRef.current?.width || style.width;
+            const iHeight = imageRef.current?.height || style.width;
+            if (imgDisplay === 'fillcut') {
+              // 以图片最大的
+              setImgStyle({
+                width: Math.max(width, iWidth),
+                height: Math.max(height, iHeight),
+              });
+            }
+          }
+        }}
+        onError={() => {
+          setSrc(errorSrc);
+          setComplete(true);
+        }}
+      />
+      {!complete && (
+        <img {...restProps} alt={alt} src={props.defaultSrc} style={myStyle} />
+      )}
+    </>
+  );
+};
+
+export default MyImage;

package/lib/public/src/components/pcfactory/src/Img/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+// @ts-ignore
+import IconPlaceholder from './assets/placeholder.png';
+import Img from './BasicImage';
+
+export interface MyImgProps {
+  visible?: boolean;
+  name?: string;
+  alt: string;
+  imgSrc?: string;
+  fileId?: string;
+  src: string;
+  fileName?: string;
+  fileCode?: string;
+  errorSrc?: string;
+  srcType?: 'fileCode' | 'src';
+  style?: React.CSSProperties;
+  getContainerStyle?: () => React.CSSProperties;
+  imgDisplay?: string;
+  onClick?: () => void;
+  getEngineApis?: any;
+}
+
+const MyImg = React.forwardRef<any, MyImgProps>((props, ref) => {
+  const {
+    visible = true,
+    alt,
+    fileId,
+    src,
+    fileName = '',
+    fileCode,
+    srcType,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const [imgSrc, setImgSrc] = useState<string>();
+  const [errorSrc, setErrorSrc] = useState<string>();
+
+  useEffect(() => {
+    // srcType设置兼容存量数据，当存量数据无srcType时根据旧的资源优先级进行赋值
+    let mySrcType = srcType;
+    if (!mySrcType) {
+      // 存量数据判断，建议三个月以上的时间之后再进行删除
+      if (fileCode) {
+        mySrcType = 'fileCode';
+      } else {
+        mySrcType = 'src';
+      }
+    }
+    if (mySrcType === 'fileCode' && fileCode) {
+      setImgSrc(engineApis?.service?.getAppFileUrlByFileCode(fileCode));
+    } else {
+      setImgSrc(src);
+    }
+  }, [src, fileName, fileId, srcType, fileCode]);
+
+  useEffect(() => {
+    if (props.errorSrc) {
+      const tempSrc = engineApis?.service?.getAppFileUrlByFileCode(
+        props.errorSrc,
+      );
+      setErrorSrc(tempSrc);
+    }
+  }, [props.errorSrc]);
+
+  useImperativeHandle(ref, () => ({
+    setSrc: (href: string) => {
+      setImgSrc(href);
+    },
+    setCompFileId: (fileId: string) => {
+      setImgSrc(engineApis?.service?.getAppFileUrlById(fileId));
+    },
+    get value() {
+      return { url: imgSrc };
+    },
+  }));
+
+  return visible ? (
+    <Img
+      {...restProps}
+      src={imgSrc}
+      alt={alt}
+      errorSrc={errorSrc}
+      defaultSrc={IconPlaceholder}
+    />
+  ) : null;
+});
+export default MyImg;