@lingxiteam/ebe-utils 0.2.2 → 0.2.3

package/lib/pcpublic/src/components/pcfactory/src/Transfer/index.tsx

@@ -673,6 +673,7 @@ const MyTransfer = LingxiForwardRef<any, MyTransferProps>((props, ref) => {
                 onSelect={(_, { node: { key } }) => {
                   onItemSelect(key as string, !isChecked(checkedKeys, key));
                 }}
+                disabled={disabled}
               />
             );
           }

package/lib/pcpublic/src/components/pcfactory/src/Tree/index.tsx

@@ -626,7 +626,7 @@ const MyTree = LingxiForwardRef<any, MyTreeProps>((props, ref) => {
     c: Record<string, any>,
     icon: any,
   ) => {
-    e.stopPropagation();
+    // e.stopPropagation();
 
     // 设置当前操作key
     setEditingKey(c.key);
@@ -654,7 +654,10 @@ const MyTree = LingxiForwardRef<any, MyTreeProps>((props, ref) => {
     dropdown?: boolean,
   ) => {
     return dropdown ? (
-      <span onClick={(e) => onClickIcon(e, c, icon)}>
+      <span
+        className="ued-tree-icon-dropdown"
+        onClick={(e) => onClickIcon(e, c, icon)}
+      >
         {icon?.title || iconMap[icon]?.name}
       </span>
     ) : (
@@ -762,7 +765,7 @@ const MyTree = LingxiForwardRef<any, MyTreeProps>((props, ref) => {
     dropdown?: boolean,
   ) =>
     dropdown ? (
-      <Menu>
+      <Menu onClick={(e) => e.domEvent.stopPropagation()}>
         {icons.map((icon) => (
           <Menu.Item key={icon?.type || icon}>
             {(icon?.type || icon) === 'delete'

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Tree.less

@@ -173,6 +173,12 @@
         color: fade(@text-color, 75%);
         font-size: @font-size-sm;
 
+        &-dropdown {
+          white-space: nowrap;
+          max-width: 240px;
+          overflow: hidden;
+        }
+
         > svg {
           fill: fade(@text-color, 75%);
         }

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

@@ -1,8 +1,18 @@
-import { updateNodeChildren } from './formUtils';
+import { useContext } from 'react';
+import { Context } from './Context/context';
+import {
+  getAllForm,
+  getBoframerOwnForms,
+  getBOFramerOwnFormValues,
+  getFieldsValue,
+  getFormByCompId,
+  getOwnFormValues,
+  updateNodeChildren,
+} from './formUtils';
 
 const toBool = (v: string | boolean, defaultValue?: any) => {
   let val = v;
-  if ([null, undefined].includes(val as any) && defaultValue !== undefined) {
+  if ([null, undefined].includes(val) && defaultValue !== undefined) {
     val = defaultValue;
   }
 
@@ -25,6 +35,8 @@ 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) => {
@@ -195,6 +207,157 @@ 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  静态数据
@@ -250,8 +413,15 @@ export const useTool = (refs: Record<string, any>, context: ToolsContext) => {
     callComponentMethod,
     setDisabled,
     getDisabled,
+    getFormValue,
+    validateForm,
+    resetForm,
     clearValue,
+    setFormValues,
     asyncCallComponentMethod,
+    validateAllForm,
+    getAllFormValues,
+    resetAllForm,
     updateNodeChildren,
     getTriggerRelDataSource,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/ebe-utils",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "",
   "keywords": [],
   "author": "",
@@ -17,9 +17,9 @@
     "@babel/parser": "^7.12.12",
     "@babel/traverse": "^7.12.12",
     "@babel/types": "^7.12.12",
-    "@lingxiteam/ebe": "0.2.2",
     "cac": "^6.7.14",
-    "fs-extra": "9.x"
+    "fs-extra": "9.x",
+    "@lingxiteam/ebe": "0.2.3"
   },
   "publishConfig": {
     "access": "public"

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

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

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