@lingxiteam/ebe-utils 0.2.0 → 0.2.2

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

@@ -0,0 +1,43 @@
+.cust-icon-ed {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+.cust-icon-theme {
+  fill: var(--adm-color-primary);
+  color: var(--adm-color-primary);
+}
+
+.cust-icon-ed-xxs {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+
+.cust-icon-ed-xs {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+.cust-icon-ed-sm {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+.cust-icon-ed-md {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+.cust-icon-ed-lg {
+  width: 36px;
+  height: 36px;
+  font-size: 36px;
+}

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

@@ -0,0 +1,290 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { LingXiEdFC } from '@lingxiteam/types';
+import classnames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import './index.less';
+
+export interface IconFileEDProps {
+  fileId: string;
+  fileCode: string;
+  fileSubType: 'ICON_IMAGE' | 'ICONFONT';
+}
+
+export interface MyIconEDProps {
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  iconFileInfo?: any;
+  iconFile?: IconFileEDProps;
+}
+
+export interface IconEDProps {
+  icon?: MyIconEDProps;
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  style?: any;
+  className?: any;
+  rotate?: any;
+  iconFileInfo?: any;
+  iconFile?: IconFileEDProps;
+  size?: any;
+  color?: any;
+  mode?: string;
+  iconItems?: any;
+  isUsePrimary?: boolean;
+}
+
+const IconED: LingXiEdFC<IconEDProps> = (props) => {
+  const {
+    icon = {},
+    type,
+    rotate,
+    size,
+    style,
+    mode,
+    iconItems,
+    isUsePrimary: curIsUsePrimary,
+    theme: curTheme,
+    isIconFont: curIsIconFont,
+    fontAddress: curFontAddress,
+    svgContent: curSvgContent,
+    iconFileInfo: curIconFileInfo,
+    iconFile: curIconFile,
+    getEdEngineApi,
+    $$componentItem,
+    ...restProps
+  } = props;
+  const [scriptUrl, setScripUrl] = useState<any>();
+
+  const {
+    curType,
+    iconFile,
+    iconFileInfo,
+    fontAddress,
+    isIconFont,
+    theme,
+    svgContent,
+    isUsePrimary,
+    color,
+  } = useMemo(() => {
+    const iconInfo = Array.isArray(iconItems) && 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) {
+      const { fileId, fileCode, fileHttp } = iconFile;
+      (async () => {
+        const { getAppFileUrlById, getAppFileUrlByFileCode } =
+          getEdEngineApi?.() || {};
+        if (fileId && getAppFileUrlById) {
+          setScripUrl(getAppFileUrlById(fileId));
+        } else if (fileCode && getAppFileUrlByFileCode) {
+          setScripUrl(
+            getAppFileUrlByFileCode({
+              appId: $$componentItem?.appId || window.appId,
+              fileCode,
+            }),
+          );
+        } else if (fileHttp) {
+          setScripUrl(fileHttp);
+        }
+      })();
+    } else if (fontAddress) {
+      setScripUrl(fontAddress);
+    } else if (iconFileInfo && !iconFileInfo.svgContent) {
+      const { getMaterialFile } = getEdEngineApi?.() || {};
+      (async () => {
+        if (iconFileInfo.materialId && iconFileInfo.fileName) {
+          setScripUrl(
+            getMaterialFile({
+              materialId: iconFileInfo.materialId,
+              fileName: iconFileInfo.fileName,
+            }),
+          );
+        }
+      })();
+    } else {
+      setScripUrl('');
+    }
+  }, [iconFile, fontAddress, iconFileInfo]);
+
+  const curClassName = classnames({
+    [restProps?.className]: restProps?.className,
+    'cust-icon-ed': true,
+    'cust-icon-theme': isUsePrimary,
+    [`cust-icon-ed-${size}`]: size,
+  });
+  const curStyle = useMemo(
+    () => ({
+      width: style?.fontSize || style?.width,
+      height: style?.fontSize || style?.height,
+      fontSize: style?.fontSize || style?.width, // 兼容存量数据
+      ...(style || {}),
+      color: isUsePrimary
+        ? undefined
+        : color || style?.color || restProps?.color,
+      fill: isUsePrimary
+        ? undefined
+        : color || style?.color || restProps?.color,
+    }),
+    [isUsePrimary, style, color],
+  );
+
+  if (svgContent) {
+    return (
+      <div
+        className={curClassName}
+        style={{
+          ...curStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: svgContent,
+        }}
+      />
+    );
+  }
+
+  if (curType) {
+    if (fontAddress || iconFile?.fileSubType === 'ICONFONT' || isIconFont) {
+      if (scriptUrl) {
+        const IconFont = createFromIconfontCN({
+          scriptUrl,
+        });
+        return (
+          <IconFont
+            type={curType}
+            rotate={rotate}
+            {...restProps}
+            style={curStyle}
+            className={curClassName}
+          />
+        );
+      }
+      if (!fontAddress) {
+        // 采用项目本地的iconfont文件
+        return (
+          <svg
+            style={{
+              ...curStyle,
+              transform: `rotate(${rotate}deg)`,
+            }}
+            aria-hidden="true"
+            className={curClassName}
+          >
+            <use xlinkHref={`#${curType}`} />
+          </svg>
+        );
+      }
+    } else if (
+      theme &&
+      !['cross-circle', 'cross-circle-o'].includes(curType) &&
+      Object.keys(iconFileInfo || {})?.length < 1
+    ) {
+      // 兼容原来的antd-mobile的图标
+      return (
+        <LegacyIcon
+          type={curType}
+          rotate={rotate}
+          theme={theme}
+          {...restProps}
+          style={curStyle}
+          className={curClassName}
+        />
+      );
+    } else if (iconFileInfo && Object.keys(iconFileInfo)?.length > 0) {
+      if (iconFileInfo.svgContent) {
+        return (
+          <div
+            className={curClassName}
+            style={{
+              ...curStyle,
+              transform: `rotate(${rotate}deg)`,
+            }}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: iconFileInfo.svgContent }}
+          />
+        );
+      }
+      return (
+        <img
+          className={curClassName}
+          style={{
+            ...curStyle,
+            transform: `rotate(${rotate}deg)`,
+          }}
+          src={scriptUrl}
+          alt=""
+        />
+      );
+    } else if (curType) {
+      return (
+        <LegacyIcon
+          type={curType}
+          rotate={rotate}
+          theme={theme}
+          {...restProps}
+          style={curStyle}
+          className={curClassName}
+        />
+      );
+    }
+  }
+  if (iconFile?.fileSubType === 'ICON_IMAGE' && scriptUrl) {
+    return (
+      <img
+        alt="图片格式错误"
+        src={scriptUrl}
+        {...restProps}
+        style={{
+          ...curStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        className={curClassName}
+      />
+    );
+  }
+  return null;
+};
+
+export default IconED;

package/lib/pcpublic/src/components/pcfactory/src/ReactECharts/ReactECharts.tsx

@@ -652,7 +652,10 @@ const ReactECharts: LingXiFC<MyReactEChartsProps> = (props, ref) => {
         ...chartTooltip,
       },
     };
-    if (chartColor) {
+    if (
+      chartColor &&
+      Object.prototype.toString.call(chartColor) !== '[object Object]'
+    ) {
       finalOption = {
         ...finalOption,
         color: Array.isArray(chartColor) ? chartColor : chartColor.split(','),

package/lib/public/src/utils/useTool.ts

@@ -1,18 +1,8 @@
-import { useContext } from 'react';
-import { Context } from './Context/context';
-import {
-  getAllForm,
-  getBoframerOwnForms,
-  getBOFramerOwnFormValues,
-  getFieldsValue,
-  getFormByCompId,
-  getOwnFormValues,
-  updateNodeChildren,
-} from './formUtils';
+import { updateNodeChildren } from './formUtils';
 
 const toBool = (v: string | boolean, defaultValue?: any) => {
   let val = v;
-  if ([null, undefined].includes(val) && defaultValue !== undefined) {
+  if ([null, undefined].includes(val as any) && defaultValue !== undefined) {
     val = defaultValue;
   }
 
@@ -35,8 +25,6 @@ export interface ToolsContext {
 }
 
 export const useTool = (refs: Record<string, any>, context: ToolsContext) => {
-  const { refs: renderRefs } = useContext(Context);
-
   const { addToAwaitQueue } = context;
 
   const asyncGetValue = (id: string, stateName?: string) => {
@@ -207,157 +195,6 @@ export const useTool = (refs: Record<string, any>, context: ToolsContext) => {
       }
     });
 
-  /**
-   * 获取当前表单值
-   */
-  const getFormValue = async (compId: string): Promise<any> => {
-    // 为了兼容动态渲染引擎，表单不存在 就返回空对象
-    if (!refs[compId]) return Promise.resolve({});
-
-    // 表单的情况 可能是循环容器
-    if (refs[compId].compName === 'Form') {
-      const forms = getFormByCompId(compId, refs);
-      return getFieldsValue(forms, (form) => {
-        return form?.getFieldsValue?.();
-      });
-    }
-
-    if (refs[compId].compName === 'BOFramer') {
-      return getBOFramerOwnFormValues(
-        {
-          refs,
-          renderRefs,
-          compId,
-        },
-        (form) => form?.getFieldsValue?.(),
-      );
-    }
-
-    return Promise.reject(
-      new Error('该组件不支持使用getFormValues获取表单数据'),
-    );
-  };
-
-  /**
-   * 验证并取值
-   * @param compId
-   */
-  const validateForm = async (compId: string): Promise<any> => {
-    // 为了兼容动态渲染引擎，表单不存在 就返回空对象
-    if (!refs[compId]) return Promise.resolve({});
-
-    // 表单的情况 可能是循环容器
-    if (refs[compId].compName === 'Form') {
-      const forms = getFormByCompId(compId, refs);
-      return getFieldsValue(forms, (form) => {
-        return form?.validateFormAndScroll?.();
-      });
-    }
-
-    if (refs[compId].compName === 'BOFramer') {
-      return getBOFramerOwnFormValues(
-        {
-          refs,
-          renderRefs,
-          compId,
-        },
-        (form) => form?.validateFormAndScroll?.(),
-      );
-    }
-    return Promise.reject(
-      new Error('该组件不支持使用getFormValues获取表单数据'),
-    );
-  };
-
-  /**
-   * 重置表单值
-   * @param compId
-   */
-  const resetForm = (compId: string) => {
-    if (!refs[compId]) return;
-    const compName = refs[compId].compName;
-    if (compName === 'BOFramer') {
-      const forms = getBoframerOwnForms({
-        currentRefs: refs,
-        renderRefs,
-        compId,
-      });
-
-      forms.forEach((form) => {
-        form?.resetFields?.();
-      });
-    } else {
-      const forms = getFormByCompId(compId, refs);
-      // 支持循环容器中的表单重置
-      (Array.isArray(forms) ? forms : [forms]).forEach((form) =>
-        form?.resetFields(),
-      );
-    }
-  };
-
-  /**
-   * 设置表单值
-   * @param compId 组件id
-   * @param formValues 表单值
-   */
-  const setFormValues = (
-    compId: string,
-    formValues: Record<string, any> = {},
-  ) => {
-    if (!refs[compId]) return;
-    const compName = refs[compId].compName;
-
-    if (compName === 'BOFramer') {
-      const forms = getBoframerOwnForms({
-        currentRefs: refs,
-        renderRefs,
-        compId,
-      });
-
-      forms.forEach((form) => {
-        form?.setFieldsValue(formValues);
-      });
-    } else {
-      refs[compId]?.setFieldsValue?.(formValues);
-    }
-  };
-
-  /**
-   * 校验并获取所有表单值
-   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
-   * 不包含所有弹窗类组件的表单数据
-   */
-  const validateAllForm = () =>
-    getOwnFormValues({ currentRefs: refs, renderRefs }, (form) =>
-      form.validateFormAndScroll?.(false),
-    );
-
-  /**
-   * 获取所有表单值 但不校验
-   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
-   * 不包含所有弹窗类组件的表单数据
-   */
-  const getAllFormValues = () =>
-    getOwnFormValues({ currentRefs: refs, renderRefs }, (form) =>
-      form.getFieldsValue?.(),
-    );
-
-  /**
-   * 重置所有表单
-   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
-   * 不包含所有弹窗类组件的表单数据
-   */
-  const resetAllForm = () => {
-    const forms = getAllForm({
-      currentRefs: refs,
-      renderRefs,
-    });
-
-    forms.forEach((form) => {
-      form.resetFields();
-    });
-  };
-
   /**
    * 获取联动数据值
    * @param attrDataMap  静态数据
@@ -413,15 +250,8 @@ export const useTool = (refs: Record<string, any>, context: ToolsContext) => {
     callComponentMethod,
     setDisabled,
     getDisabled,
-    getFormValue,
-    validateForm,
-    resetForm,
     clearValue,
-    setFormValues,
     asyncCallComponentMethod,
-    validateAllForm,
-    getAllFormValues,
-    resetAllForm,
     updateNodeChildren,
     getTriggerRelDataSource,
   };