@lingxiteam/ebe-utils 0.5.4 → 0.5.5

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

@@ -1,300 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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;