@lingxiteam/ebe-utils 0.5.1 → 0.5.2

package/lib/public/src/components/pcfactory/src/utils/formUtils/WrapperContainer.tsx

@@ -0,0 +1,123 @@
+import { Col } from 'antd';
+import { CSSProperties, FC } from 'react';
+import { getTestHelperProps } from '../hooks/useTestHelper';
+
+export interface WrapperContainerProps {
+  labelAlign: any;
+  name?: string;
+  colon: boolean;
+  wrapperStyle: CSSProperties;
+  required: boolean;
+  labelCol: string;
+  label: any;
+  showWrapperContainer: boolean;
+  isFormRootChild: boolean;
+  colProps: any;
+  fieldName: string;
+  disabled: boolean;
+}
+
+const WrapperContainer: FC<WrapperContainerProps> = (props) => {
+  const {
+    labelAlign,
+    colon,
+    wrapperStyle,
+    children,
+    required,
+    labelCol,
+    showWrapperContainer,
+    isFormRootChild,
+    fieldName,
+    disabled,
+  } = props;
+
+  // 配合测试的属性
+  const testProps = getTestHelperProps({ fieldName, disabled });
+
+  if (!showWrapperContainer && !isFormRootChild) {
+    return <>{children}</>;
+  }
+
+  if (!showWrapperContainer && isFormRootChild) {
+    return (
+      <Col {...testProps} {...props.colProps}>
+        {children}
+      </Col>
+    );
+  }
+
+  if (isFormRootChild) {
+    return (
+      <Col {...testProps} {...props.colProps}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+          }}
+        >
+          <div
+            style={{
+              width: labelCol,
+              textAlign: labelAlign,
+            }}
+          >
+            {props.label && (
+              <span>
+                {required && (
+                  <span
+                    style={{ fontSize: 12, marginRight: 4, color: '#ff4d4f' }}
+                  >
+                    *
+                  </span>
+                )}
+                {props.label}
+                <span style={{ marginLeft: 2, marginRight: 8 }}>
+                  {colon ? ':' : ''}
+                </span>
+              </span>
+            )}
+          </div>
+          <div style={wrapperStyle}>{children}</div>
+        </div>
+      </Col>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+      }}
+      {...testProps}
+    >
+      <div
+        style={{
+          width: labelCol,
+          textAlign: labelAlign,
+        }}
+      >
+        {props.label && (
+          <span>
+            {required && (
+              <span style={{ fontSize: 12, marginRight: 4, color: '#ff4d4f' }}>
+                *
+              </span>
+            )}
+            {props.label}
+            <span style={{ marginLeft: 2, marginRight: 8 }}>
+              {colon ? ':' : ''}
+            </span>
+          </span>
+        )}
+      </div>
+      <div style={wrapperStyle}>{children}</div>
+    </div>
+  );
+};
+
+export default WrapperContainer;

package/lib/public/src/components/pcfactory/src/utils/formUtils/cmdHelper.ts

@@ -0,0 +1,411 @@
+/* eslint-disable no-continue */
+import { EngineRelationMethods } from '@lingxiteam/types';
+
+type RefsType = Record<string, any>;
+
+const getFormsIdByUid = (uid: string, refs: RefsType) => {
+  // 不是表单组件
+  if (refs[uid].compName !== 'Form') {
+    return null;
+  }
+
+  const list = uid.match(/@@@([\d\w_]*)&&&/g);
+  if (!Array.isArray(list)) {
+    return list;
+  }
+  return list.map((it) => it.replace(/(@@@)|(&&&)/g, ''));
+};
+
+/**
+ * 通过循环容器id获取 循环容器内的表单
+ * @param loopId
+ * @param refs
+ */
+export const getFormOfInLoopByLoopId = (options: {
+  loopId: string;
+  engineRelation: EngineRelationMethods;
+  routerId: string;
+  refs: RefsType;
+  forms?: RefsType[];
+  inLoop?: boolean;
+}) => {
+  const {
+    loopId,
+    routerId,
+    engineRelation,
+    forms = [],
+    refs,
+    inLoop = false,
+  } = options;
+  const uids = Object.keys(refs);
+  for (let index = 0; index < uids.length; index += 1) {
+    const uid = uids[index];
+
+    if (inLoop) {
+      if (refs[uid].compName === 'Form') {
+        forms.push(refs[uid]);
+        continue;
+      }
+    }
+
+    // 先用---分割，解决多层循环块嵌套问题
+    const result = uid
+      .split('---')
+      .filter(Boolean)
+      .find((id) => {
+        const [compId] = id.split('@@@');
+        return compId === loopId;
+      });
+
+    const engineRefs = engineRelation.getEngineRefsByUid(uid, routerId);
+    // 页面容器或者BOFramer在循环容器下
+    if ((result || inLoop) && engineRefs) {
+      // 页面容器和业务组件下也可能存在表单
+      getFormOfInLoopByLoopId({
+        loopId,
+        routerId,
+        engineRelation,
+        refs: engineRelation.getEngineRefsByUid(uid, routerId)?.refs || {},
+        forms,
+        inLoop: true,
+      });
+    }
+
+    // 不是表单 或者不在循环容器内
+    if (refs[uid].compName !== 'Form' || !/[@@@|&&&]/.test(uid)) {
+      continue;
+    }
+
+    if (result) {
+      forms.push(refs[uid]);
+    }
+  }
+  return forms;
+};
+
+/**
+ * 获取gridview组件
+ * @param forms
+ * @param getFieldsValue
+ * @returns
+ */
+export const getLoopForms = async (
+  forms: RefsType[],
+  getFieldsValue: (form: any) => void,
+) => {
+  const fieldValues: any = {};
+  let firstErrorInfo: any = null;
+  for (let index = 0; index < forms.length; index += 1) {
+    const form = forms[index];
+    const { formCode, scrollToErrorField } = form;
+    fieldValues[formCode] = fieldValues[formCode] ?? [];
+    try {
+      const values = await getFieldsValue(form);
+      fieldValues[formCode].push(values);
+    } catch (error) {
+      if (!firstErrorInfo) {
+        firstErrorInfo = {
+          error,
+          form,
+          scrollToErrorField,
+        };
+      }
+    }
+  }
+
+  if (firstErrorInfo) {
+    const { scrollToErrorField, error } = firstErrorInfo;
+    scrollToErrorField(error);
+    return Promise.reject(error);
+  }
+  return Promise.resolve(fieldValues);
+};
+
+/**
+ * 通过组件id获取表单列表
+ */
+export const getFormByCompId = (compId: string, refs: RefsType) => {
+  // 获取是否是表单
+  const form = refs[compId];
+  if (form) {
+    return form;
+  }
+  const uidArr = Object.keys(refs).filter((uid) => {
+    const ids = getFormsIdByUid(uid, refs);
+    if (!ids) {
+      return false;
+    }
+    return ids.includes(compId);
+  });
+
+  if (uidArr.length === 0) {
+    return null;
+  }
+
+  return uidArr.map((uid) => refs[uid]);
+};
+
+export const getFieldsValue = async (
+  forms: RefsType | RefsType[],
+  getFieldsValue: (form: any) => void,
+) => {
+  // 当表单不存在时，应该获取的是undefined
+  if (!forms) {
+    return undefined;
+  }
+
+  if (Array.isArray(forms)) {
+    return Promise.all(forms.map((form) => getFieldsValue(form)));
+  }
+  return getFieldsValue(forms);
+};
+
+/**
+ * 获取表单类型
+ */
+export const getFormType = (uid: string) => {
+  // uid中包含@符号包含&符号
+  const hasAtOrAnd = /[@@@|&&&]/.test(uid);
+  const [loopId, formId, itemId] = uid.split(/@@@|&&&/g);
+  return {
+    type: hasAtOrAnd ? 'inLoop' : 'default',
+    loopId,
+    formId,
+    itemId,
+  };
+};
+
+interface FirstErrorInfoType {
+  error: any;
+  form?: any;
+  scrollToErrorField: any;
+}
+
+/**
+ * 当前的refs
+ * @param options
+ * @param getFieldsValue
+ */
+export const getOwnFormValues = async (
+  options: {
+    currentRefs: RefsType;
+    engineRelation: EngineRelationMethods;
+    routerId: string;
+    compId?: string;
+  },
+  getFieldsValue: (form: any) => void,
+) => {
+  const { currentRefs, engineRelation, routerId, compId } = options;
+
+  let firstErrorInfo: FirstErrorInfoType | null = null;
+  const values: any = {};
+
+  const formCodeTypes: Record<string, 'default' | 'array'> = {};
+
+  /**
+   * 获取单个引擎下的表单值
+   */
+  const getRenderRefsFormValues = async (
+    refs: RefsType = {},
+    compId?: string,
+  ) => {
+    const uidArr = Object.keys(refs);
+
+    for (let index = 0; index < uidArr.length; index += 1) {
+      const uid = uidArr[index];
+      // 有指定组件时只获取该组件里的form
+      if (!compId || compId === uid) {
+        const ref = refs[uid];
+        if (!['Form', 'DynamicDataContainer'].includes(ref.compName)) {
+          // 需要处理BOFramer和PageView这种渲染逻辑
+          const uidRefs = engineRelation.getEngineRefsByUid(uid, routerId);
+          if (uidRefs) {
+            await getRenderRefsFormValues(uidRefs.refs);
+          }
+        } else {
+          const {
+            formCode,
+            form,
+            scrollToErrorField,
+            compName,
+            _innerDynamicDataContainer,
+          } = ref;
+          if (!formCode) {
+            continue;
+          }
+
+          if (compName === 'Form' && _innerDynamicDataContainer) {
+            continue;
+          }
+
+          const { type } = getFormType(uid);
+          try {
+            const value = await getFieldsValue(ref);
+            if (type === 'default') {
+              // 1. 首次赋值， 包含循环容器内逻辑
+              if (!values[formCode]) {
+                values[formCode] = value;
+                formCodeTypes[formCode] = 'default';
+                continue;
+              }
+              // 2. 存在编码相同时，切换成数组类型
+              if (formCodeTypes[formCode] === 'default') {
+                // 处理页面中存在多个相同的表单，但是表单编码一样。这时候表现为数组形式
+                values[formCode] = [values[formCode]];
+                formCodeTypes[formCode] = 'array';
+              }
+
+              // 3. 给数组添加当前值
+              if (formCodeTypes[formCode] === 'array') {
+                values[formCode].push(value);
+              }
+            } else if (type === 'inLoop') {
+              // 1. 或许存在一个没包含在循环容器内表单，并且该表单和循环容器下的表单编码相同，
+              if (formCodeTypes[formCode] === 'default') {
+                values[formCode] = [values[formCode]];
+              }
+
+              formCodeTypes[formCode] = 'array';
+              values[formCode] = Array.isArray(values[formCode])
+                ? values[formCode]
+                : [];
+              values[formCode].push(value);
+            }
+          } catch (error) {
+            if (!firstErrorInfo) {
+              firstErrorInfo = {
+                error,
+                form,
+                scrollToErrorField,
+              };
+            }
+          }
+        }
+      } else {
+        continue;
+      }
+    }
+  };
+
+  await getRenderRefsFormValues(currentRefs, compId);
+
+  // 存在错误时，滚动到第一个出现错误的位置
+  if (firstErrorInfo) {
+    const { scrollToErrorField, error } = firstErrorInfo as FirstErrorInfoType;
+    scrollToErrorField(error);
+    return Promise.reject(error);
+  }
+  return Promise.resolve(values);
+};
+
+export const getAllFormValues = (options: {
+  currentRefs: RefsType;
+  engineRelation: EngineRelationMethods;
+  routerId: string;
+}) => {
+  const { currentRefs, engineRelation, routerId } = options;
+  const forms: RefsType[] = [];
+  const getRenderRefsFormValues = (refs: RefsType = {}) => {
+    const uidArr = Object.keys(refs);
+
+    for (let index = 0; index < uidArr.length; index += 1) {
+      const uid = uidArr[index];
+
+      const ref = refs[uid];
+      if (ref.compName !== 'Form') {
+        // 需要处理BOFramer和PageView这种渲染逻辑
+        const uidRefs = engineRelation.getEngineRefsByUid(uid, routerId);
+        if (uidRefs) {
+          getRenderRefsFormValues(uidRefs.refs);
+        }
+      } else if (ref.has) {
+        forms.push(ref);
+      }
+    }
+  };
+  getRenderRefsFormValues(currentRefs);
+  return forms;
+};
+
+/**
+ * 获取业务组件列表 可能存在
+ * @param compId
+ * @param refs
+ */
+export const getBOFramers = (compId: string, refs: RefsType = {}) => {
+  const boframerUids = Object.keys(refs).filter(
+    (id) => refs[id].compId === compId,
+  );
+  // 如果没找到组件，就返回null
+  if (!boframerUids.length) {
+    return null;
+  }
+
+  const boframerRefs: RefsType = {};
+
+  boframerUids.forEach((uid) => {
+    boframerRefs[uid] = refs[uid];
+  });
+
+  return boframerRefs;
+};
+
+export const getBOFramerOwnFormValues = async (
+  options: {
+    refs: RefsType;
+    engineRelation: EngineRelationMethods;
+    routerId: string;
+    compId: string;
+  },
+  getFieldsValue: (form: any) => void,
+) => {
+  const { engineRelation, routerId, refs, compId } = options;
+
+  // 2种情况 1只有单个业务组件 2 业务组件放在循环容器下
+  const boframerRefs = getBOFramers(compId, refs);
+
+  let values = {};
+  if (boframerRefs) {
+    values = await getOwnFormValues(
+      { currentRefs: boframerRefs, engineRelation, routerId },
+      getFieldsValue,
+    );
+  }
+
+  // 理论上获取业务组件 应该都带有表单编码，但是由于需要兼容旧数据 需要把值展开
+  if (Object.keys(values).length === 1) {
+    const val = Object.values(values)[0] as Object;
+    if (Object.prototype.toString.call(val) === '[object Object]') {
+      values = val;
+    }
+  }
+  return values;
+};
+
+// 获取BOFramer下所有表单
+export const getBoframerOwnForms = (options: {
+  currentRefs: RefsType;
+  engineRelation: EngineRelationMethods;
+  routerId: string;
+  compId: string;
+}) => {
+  const { compId, currentRefs, engineRelation, routerId } = options;
+  const boframers = getBOFramers(compId, currentRefs);
+
+  const forms: RefsType[] = [];
+  const getAllForms = (refs: RefsType | null) => {
+    Object.keys(refs || {}).forEach((uid) => {
+      const engineRef = engineRelation.getEngineRefsByUid(uid, routerId);
+      Object.keys(engineRef?.refs || {}).forEach((compUid) => {
+        const r = engineRef?.refs[compUid];
+        getAllForms(r);
+        if (r.compName === 'Form') {
+          forms.push(r);
+        }
+      });
+    });
+  };
+
+  getAllForms(boframers);
+  return forms;
+};

package/lib/public/src/components/pcfactory/src/utils/formUtils/common.ts

@@ -0,0 +1,28 @@
+export type mode = 'grid' | 'pixel' | 'percentage' | '';
+
+/**
+ * 获取布局模式
+ * @param col
+ * @returns
+ */
+export const getMode = (col: string | number): mode => {
+  if (!Number.isNaN(Number(col))) {
+    return 'grid';
+  }
+  if (typeof col === 'string' && col.includes('px')) {
+    return 'pixel';
+  }
+  if (typeof col === 'string' && col.includes('%')) {
+    return 'percentage';
+  }
+  return '';
+};
+
+/**
+ * 表单项错误滚动使用的className
+ * @param fieldName
+ * @returns
+ */
+export const getFormItemClassName = (fieldName: string) => {
+  return `formItem-error-${fieldName}`;
+};

package/lib/public/src/components/pcfactory/src/utils/getExportDefaultObj.ts

@@ -0,0 +1,11 @@
+export const getExportDefaultObj = (obj: any) => {
+  if (typeof obj === 'object') {
+    if (
+      obj.__esModule === true &&
+      Object.prototype.hasOwnProperty.call(obj, 'default')
+    ) {
+      return obj.default;
+    }
+  }
+  return obj;
+};

package/lib/public/src/components/pcfactory/src/utils/hooks/useCommonImperativeHandle.ts

@@ -0,0 +1,140 @@
+import React, { useEffect, useImperativeHandle } from 'react';
+import { MonitorFn, useForm } from '../formUtils/FormContext';
+import { FormFieldsHooks } from '../formUtils/FormFields';
+import { useListenProps } from './useListenState';
+import { useLocale } from './useLocale';
+import useRules, { RuleInterface } from './useRules';
+
+/**
+ *
+ * @param ref ref
+ * @param handle 额外的方法
+ * @param depends 依赖监听
+ */
+export const useCommonImperativeHandle = (
+  ref: any,
+  props: any,
+  handle: any = {},
+) => {
+  const {
+    disabled: propsDisabled,
+    required: propsRequired,
+    readOnly: propsReadOnly,
+    getEngineApis,
+  } = props;
+
+  const engineApis = getEngineApis();
+
+  const formContext = useForm();
+
+  const formFieldsRef = React.createRef<FormFieldsHooks>();
+
+  // 控件禁用状态
+  const [disabled, setDisabled] = useListenProps<boolean>(propsDisabled);
+
+  // 设置必填
+  const [required, setRequired] = useListenProps<boolean>(propsRequired);
+
+  const [readOnly, setReadOnly] = useListenProps<boolean>(propsReadOnly);
+
+  const { getLocale, lang } = useLocale(engineApis);
+
+  // 通用规则生成
+  const [finalRules, setExtendRules] = useRules(
+    {
+      required,
+      regexp: props.regexp,
+      rules: props.rules,
+      message: props.message,
+      name: props.name,
+    },
+    getLocale,
+    lang,
+  );
+
+  const clearValue = () => {
+    let initValue: any = '';
+    if (handle && handle.hasOwnProperty('clearValue')) {
+      // 如果存在clearValue 并且clearValue 是方法的时候执行, 否则就是值
+      if (typeof handle.clearValue === 'function') {
+        handle.clearValue();
+        return;
+      }
+      // 说明是值的情况
+      initValue = handle.clearValue;
+    }
+    // 默认清空成空字符串
+    if (typeof engineApis?.onlySyncValue === 'function') {
+      engineApis?.onlySyncValue(initValue);
+    } else {
+      props?.onChange(initValue);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    disabled,
+    setDisabled: (val: boolean | 'toggle') => {
+      setDisabled(val === 'toggle' ? !disabled : val);
+    },
+    required,
+    setRequired: (val: boolean | 'toggle') => {
+      setRequired(val === 'toggle' ? !required : val);
+    },
+    readOnly,
+    setReadOnly: (val: boolean | 'toggle') => {
+      setReadOnly(val === 'toggle' ? !readOnly : val);
+    },
+    changeValidateStatus: formFieldsRef.current?.changeValidateStatus,
+    ...handle,
+    clearValue,
+    // 同步hoc vlaue使用，目前在设置表单数据的时候需要同步使用
+    onlySyncValue: (initValue: any) => {
+      if (typeof engineApis?.onlySyncValue === 'function') {
+        engineApis?.onlySyncValue(initValue);
+      }
+    },
+
+    /**
+     *  追加rules，目前只有在零代码使用
+     * @param newRules
+     * @param isAppendLastTime 是否累计上一次的
+     */
+    appendRules: (
+      newRules: RuleInterface[],
+      isAppendLastTime: boolean = true,
+    ) => {
+      setExtendRules(newRules, isAppendLastTime);
+    },
+  }));
+
+  /**
+   * 表单被设置禁用 只读时同步更新子组件状态
+   */
+  useEffect(() => {
+    const fn: MonitorFn = (value, type) => {
+      if (type === 'disabled') {
+        setDisabled(!!value);
+      } else if (type === 'readonly') {
+        setReadOnly(!!value);
+      }
+    };
+    if (formContext.inForm && formContext.statusMonitor) {
+      formContext.statusMonitor.addListener(fn);
+      return () => {
+        formContext.statusMonitor.removeListener(fn);
+      };
+    }
+    return () => {};
+  }, []);
+
+  return {
+    disabled,
+    required,
+    formFieldsRef,
+    finalRules,
+    setExtendRules,
+    readOnly: formContext.inForm && formContext.printMode ? true : readOnly,
+  };
+};
+
+export default useCommonImperativeHandle;