@lingxiteam/ebe-utils 0.5.1 → 0.5.2

package/lib/public/src/components/pcfactory/src/Form/Form.tsx

@@ -0,0 +1,600 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Col, Form as AntdForm, Row } from 'antd';
+import type { FormLayout } from 'antd/lib/form/Form';
+import { isEqual } from 'lodash';
+import React, {
+  Children,
+  cloneElement,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  FormContextProps,
+  FormProvider,
+  getFormItemClassName,
+  PrintContainer,
+  useDynamicData,
+  usePrintMode,
+} from '../utils';
+import { useCreation } from '../utils/ahooks';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { useFormStatus } from './useFormStatus';
+import WrapperForm from './WrapperForm';
+
+const EMPTY_COL = { span: 'none' }; // 避免每次都创建对象造成无用渲染
+const FULL_COL = { span: 24 };
+
+export interface FormProps {
+  disabled: boolean;
+  layout: FormLayout;
+  colSpan: FormContextProps['colSpan'];
+  labelCol: number;
+  wrapperCol: number;
+  colon: boolean;
+  labelAlign: FormContextProps['labelAlign'];
+  extendProps?: Record<string, any>;
+  backgroundType?: any;
+  style: React.CSSProperties;
+  rowSpace: FormContextProps['rowSpace'];
+  colSpace: FormContextProps['colSpace'];
+  onValuesChange: (name: string, value: unknown) => void;
+  formCode?: string;
+  readOnly?: boolean;
+  visible?: boolean;
+  className?: string;
+  _innerDynamicDataContainer?: boolean;
+}
+
+const useInit = (cb: () => () => void) => {
+  const initialRef = useRef(true);
+  const unmountRef = useRef(() => {});
+
+  if (initialRef.current) {
+    initialRef.current = false;
+    unmountRef.current = cb();
+  }
+
+  useEffect(
+    () => () => {
+      if (typeof unmountRef.current === 'function') {
+        unmountRef.current();
+      }
+    },
+    [unmountRef.current],
+  );
+};
+
+export const ViewFormItem = (props: any) => {
+  const {
+    schemaProps,
+    selfSpan,
+    colSpan,
+    getVisible,
+    style,
+    stateListener,
+    isBlank,
+    i,
+    uid,
+    child,
+  } = props;
+
+  const [, setUpdate] = useState(0);
+
+  // FIX 直接子容器初始状态直接设置隐藏，导致监听不到变化。在组件初始化就开启监听
+  useInit(() => {
+    // 监听当前控件显隐状态
+    const remove = stateListener(uid, 'visible', (val: any) => {
+      setUpdate(Date.now());
+    });
+    return () => {
+      remove();
+    };
+  });
+
+  // useEffect(() => {
+  //   // 监听当前控件显隐状态
+  //   const remove = stateListener(uid, 'visible', (val: any) => {
+  //     setUpdate(Date.now());
+  //   });
+  //   return () => {
+  //     remove?.();
+  //   };
+  // }, []);
+
+  const finalStyle = useMemo(() => {
+    const _style = { ...style };
+    if (getVisible?.(uid) === false) {
+      _style.display = 'none';
+    }
+    return _style;
+  }, [getVisible?.(uid)]);
+
+  if (isBlank) {
+    return <Col key={`blank-${i}`} span={colSpan} style={finalStyle} />;
+  }
+  return (
+    <Col
+      key={schemaProps['data-compid']}
+      span={selfSpan || colSpan}
+      style={finalStyle}
+    >
+      <AntdForm.Item wrapperCol={FULL_COL}>{child}</AntdForm.Item>
+    </Col>
+  );
+};
+
+type FormChildrenType = Pick<
+  FormProps,
+  'colSpan' | 'rowSpace' | 'layout' | 'colSpace'
+> & {
+  children?: React.ReactNode;
+  formRef?: any;
+  engineApis?: any;
+};
+export const FormChildren = (props: FormChildrenType) => {
+  const { children, colSpan, formRef, rowSpace, layout, colSpace, engineApis } =
+    props;
+
+  // 兼容存量数据中，表单没有列间距的情况
+  const compatColSpace = (() => {
+    if (layout !== 'horizontal') {
+      return (colSpace as number) ?? 16;
+    }
+    return colSpace as number;
+  })();
+
+  /**
+   * 布局子组件
+   */
+  const layoutChildren = () => {
+    const { getVisible, stateListener } = engineApis;
+    const components: (
+      | React.ReactChild
+      | React.ReactFragment
+      | React.ReactPortal
+    )[] = [];
+    Children.forEach(Children.toArray(children), (child, index) => {
+      if (!React.isValidElement(child)) {
+        components.push(child);
+        return;
+      }
+
+      const { schema } = child.props;
+      const { compType, props: schemaProps } = schema || {};
+
+      if (compType !== undefined && compType !== 2) {
+        const {
+          formItemIndex,
+          hidden,
+          style: childStyle,
+          selfSpan,
+        } = schemaProps;
+        const { display: customDisplay, visibility: customVisibility } =
+          childStyle || {};
+
+        const changeColStyle = () => {
+          const colStyle: React.CSSProperties = {};
+
+          if (hidden || (customDisplay && customDisplay === 'none')) {
+            colStyle.display = 'none';
+          }
+
+          if (customVisibility) {
+            colStyle.visibility = customVisibility;
+          }
+
+          return colStyle;
+        };
+
+        // 中间间隔组件的个数
+        const gap = formItemIndex - index || 0;
+        new Array(gap).fill(0).forEach((_, i) => {
+          components.push(
+            <ViewFormItem
+              i={i}
+              key={`blank-${i}`}
+              style={changeColStyle()}
+              colSpan={colSpan}
+              getVisible={getVisible}
+              stateListener={stateListener}
+              isBlank
+              // child.props.$$componentItem.uid 兼容高代码模式下
+              uid={child.props.uid || child.props.$$componentItem.uid}
+            />,
+          );
+        });
+
+        components.push(
+          <ViewFormItem
+            style={changeColStyle()}
+            schemaProps={schemaProps}
+            selfSpan={selfSpan}
+            colSpan={colSpan}
+            getVisible={getVisible}
+            stateListener={stateListener}
+            // child.props.$$componentItem.uid 兼容高代码模式下
+            uid={child.props.uid || child.props.$$componentItem.uid}
+            child={child}
+            key={child.key}
+          />,
+        );
+        return;
+      }
+
+      components.push(
+        cloneElement(child, { extendProps: { isFormRootChild: true } } as any),
+      );
+    });
+
+    return components;
+  };
+
+  return (
+    <Row
+      ref={formRef}
+      className={Number(rowSpace) < 14 ? 'form-tips' : undefined}
+      gutter={[compatColSpace, rowSpace as number]}
+    >
+      {layoutChildren()}
+    </Row>
+  );
+};
+
+const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
+  const {
+    layout,
+    colSpan,
+    colon,
+    labelAlign,
+    extendProps,
+    backgroundType,
+    getEngineApis,
+    rowSpace,
+    colSpace,
+    formCode,
+    onValuesChange,
+    $$componentItem,
+    visible = true,
+    className,
+  } = props;
+
+  const formChildRelation = useRef({});
+  const patchSetFormsValueFn = useRef<Record<string, any>>({}).current;
+
+  const [form] = AntdForm.useForm();
+  const engineApis = getEngineApis();
+  const formRef = useRef<HTMLDivElement>(null);
+  const dynamicContext = useDynamicData() || {};
+
+  const { showPrintContainer, loadPrint, selectorKey } = usePrintMode(
+    props.$$componentItem.uid,
+  );
+
+  // 保存值变化回调，
+  const valueChangeFnRef = useRef<(changedValues: any, values: any) => void>();
+
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    mode: 'engine',
+  });
+
+  const { run, addListener, removeListener, status } = useFormStatus({
+    disabled: props.disabled,
+    readonly: props.readOnly,
+  });
+
+  // 由于需要考虑loop等组件，可能存在多个相同的字段名，自行研发
+  const scrollToError = (errorInfo: any) => {
+    try {
+      const { errorFields = [] } = errorInfo ?? {};
+      if (errorFields?.length > 0) {
+        const errorFieldsName = errorFields[0].name;
+        // 表单项错误滚动使用的className
+        const className = getFormItemClassName(errorFieldsName);
+        const rowDOM = formRef.current;
+        const dom = rowDOM?.querySelector(`.${className}`);
+        dom?.scrollIntoView({ behavior: 'smooth' });
+      }
+    } catch (error) {
+      //
+    }
+  };
+
+  const uploadChildRelation = (id: string, fileProps: string) => {
+    if (id && fileProps) {
+      // @ts-ignore
+      formChildRelation.current[fileProps] = id;
+    }
+  };
+
+  /**
+   * 保存表单值预处理表单值的方法
+   */
+  const preproccessSetFormValues = (
+    fileProps: string,
+    fn: (value: any) => any,
+  ) => {
+    if (fileProps) {
+      patchSetFormsValueFn[fileProps] = fn;
+    }
+  };
+
+  /**
+   * 需要上传给动态数据容器的表单方法
+   */
+
+  const formRefHandler = useCreation(
+    () => ({
+      /**
+       * 校验并滚动到某字段
+       */
+      validateFormAndScroll: (errScroll: boolean = true) => {
+        return form.validateFields().catch((errorInfo) => {
+          if (errScroll) {
+            scrollToError(errorInfo);
+          }
+          throw errorInfo;
+        });
+      },
+
+      /**
+       * 滚动到错误的位置
+       */
+      scrollToErrorField: (errorInfo: any) => {
+        scrollToError(errorInfo);
+      },
+
+      /**
+       * 获取表单值
+       */
+      getFieldsValue: () => {
+        return form.getFieldsValue();
+      },
+
+      /**
+       * 设置表单值
+       * @param values
+       * @param refs 低代码平台引擎内所有的refs，其他平台不要使用
+       */
+      setFieldsValue(values: any, refs: Record<string, any>) {
+        const target: any = {};
+        const relation: any = formChildRelation.current;
+        Object.keys(values).forEach((key) => {
+          target[key] = values[key];
+          if (typeof patchSetFormsValueFn[key] === 'function') {
+            target[key] = patchSetFormsValueFn[key](target[key]);
+          }
+          if (refs && relation) {
+            const relation = formChildRelation.current;
+            // @ts-ignore
+            const comId = relation?.[key];
+            if (comId) {
+              refs?.[comId]?.onlySyncValue(target[key]);
+            }
+          }
+          if (
+            !isEqual(form.getFieldValue(key), target[key]) &&
+            typeof onValuesChange === 'function'
+          ) {
+            if (
+              engineApis?.compatConfig.cmd.setFieldsValueToOnValuesChange ===
+              true
+            ) {
+              onValuesChange(key, target[key]);
+            }
+          }
+        });
+
+        form.setFieldsValue(target);
+      },
+
+      /**
+       * 重置表单值
+       */
+      resetFields() {
+        form.resetFields();
+      },
+
+      // 设置禁用状态
+      setDisabled: (v: boolean | 'toggle') => {
+        run('disabled', v === 'toggle' ? !status.disabled : v);
+      },
+      // 设置只读状态
+      setReadOnly: (v: boolean | 'toggle') => {
+        run('readonly', v === 'toggle' ? !status.readonly : v);
+      },
+      scrollToError,
+      // 作为ref标志，表示form已经被渲染了
+      has: true,
+      form,
+    }),
+    [status],
+  );
+
+  /**
+   * 动态数据容器ref上报
+   */
+  if (dynamicContext._innerDynamicDataContainer) {
+    dynamicContext.updateFormChildRef(formCode!, formRefHandler);
+  }
+
+  useImperativeHandle(ref, () => ({
+    formCode: formCode || $$componentItem?.id,
+    ...formRefHandler,
+    get disabled() {
+      return status.disabled ?? false;
+    },
+    get readOnly() {
+      return status.readonly ?? false;
+    },
+    // 监听值变化回调
+    listenerOnValueChange: (fn: (changedValues: any, values: any) => void) => {
+      // 主要用来做BOFramer业务组件值变化回调，如果修改数据，请记得
+      valueChangeFnRef.current = fn;
+    },
+
+    /**
+     * 获取子组件的字段和表单项id的映射关系
+     * @returns
+     */
+    getChildRelation: () => formChildRelation.current,
+
+    /**
+     * 打印模式钩子
+     */
+    loadPrint,
+
+    /**
+     * 是否在动态数据容器内
+     */
+    get _innerDynamicDataContainer() {
+      return dynamicContext._innerDynamicDataContainer;
+    },
+  }));
+
+  // 转化成antd接收的数据
+  const labelCol = useMemo(() => ({ span: props.labelCol }), [props.labelCol]);
+  const wrapperCol = useMemo(
+    () => ({ span: props.wrapperCol }),
+    [props.wrapperCol],
+  );
+
+  const providerValue: FormContextProps = useMemo(
+    () => ({
+      form,
+      inForm: true,
+      layout,
+      colSpan,
+      labelCol,
+      wrapperCol,
+      colon,
+      labelAlign,
+      rowSpace,
+      statusMonitor: {
+        addListener,
+        removeListener,
+      },
+      uploadChildRelation,
+      preproccessSetFormValues,
+      colSpace,
+    }),
+    [
+      form,
+      layout,
+      colSpan,
+      labelCol,
+      wrapperCol,
+      colon,
+      labelAlign,
+      addListener,
+      removeListener,
+    ],
+  );
+
+  const formStyle: React.CSSProperties = {
+    ...backgroundStyle,
+    ...props.style,
+  };
+
+  if (!visible) {
+    formStyle.display = 'none';
+  }
+
+  return (
+    <>
+      <FormProvider value={providerValue}>
+        <WrapperForm>
+          <AntdForm
+            className={className}
+            form={form}
+            layout={layout}
+            labelCol={layout === 'horizontal' ? labelCol : EMPTY_COL}
+            wrapperCol={layout === 'horizontal' ? wrapperCol : EMPTY_COL}
+            style={formStyle}
+            onValuesChange={(changedValues, values) => {
+              const keys = Object.keys(changedValues || {});
+              if (typeof onValuesChange === 'function') {
+                if (keys.length > 0) {
+                  const name = keys[0];
+                  onValuesChange(name, changedValues[name]);
+                }
+              }
+              if (valueChangeFnRef.current) {
+                valueChangeFnRef.current(changedValues, values);
+              }
+              if (dynamicContext._innerDynamicDataContainer) {
+                if (keys.length > 0) {
+                  const name = keys[0];
+                  dynamicContext.onFormChange(
+                    formCode!,
+                    name,
+                    changedValues[name],
+                  );
+                }
+              }
+            }}
+            {...extendProps}
+            // @ts-ignore
+            data-compid={props['data-compid']}
+            name={formCode}
+          >
+            <FormChildren formRef={formRef} {...props} engineApis={engineApis}>
+              {props.children}
+            </FormChildren>
+          </AntdForm>
+        </WrapperForm>
+      </FormProvider>
+      {showPrintContainer && (
+        <PrintContainer containerProps={{ ...selectorKey }}>
+          <FormProvider
+            value={
+              {
+                ...providerValue,
+                layout,
+                colSpan,
+                labelCol,
+                wrapperCol,
+                colon,
+                labelAlign,
+                printMode: true,
+                inForm: true,
+              } as any
+            }
+          >
+            <WrapperForm>
+              <AntdForm
+                className={className}
+                form={form}
+                layout={layout}
+                labelCol={layout === 'horizontal' ? labelCol : EMPTY_COL}
+                wrapperCol={layout === 'horizontal' ? wrapperCol : EMPTY_COL}
+                style={formStyle}
+                {...extendProps}
+              >
+                <FormChildren
+                  formRef={formRef}
+                  {...props}
+                  engineApis={engineApis}
+                >
+                  {props.children}
+                </FormChildren>
+              </AntdForm>
+            </WrapperForm>
+          </FormProvider>
+        </PrintContainer>
+      )}
+    </>
+  );
+});
+
+Form.defaultProps = {
+  extendProps: {},
+  style: {},
+  rowSpace: 16,
+};
+
+export default Form;

package/lib/public/src/components/pcfactory/src/Form/WrapperForm.ts

@@ -0,0 +1,14 @@
+import { cloneElement } from 'react';
+
+interface WrapperFormProps {
+  children: React.ReactElement;
+}
+
+const FORM_WRAPPER_CLASSNAME = 'ued-legacy-form-wrap';
+
+const WrapperForm: React.FC<WrapperFormProps> = ({ children }) =>
+  cloneElement(children, {
+    className: `${FORM_WRAPPER_CLASSNAME} ${children.props.className || ''}`,
+  });
+
+export default WrapperForm;

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

@@ -0,0 +1,15 @@
+import { FormFields as Item, useForm } from '../utils';
+import Form from './Form';
+
+type FormType = typeof Form;
+
+(Form as any).Item = Item;
+
+(Form as any).useForm = useForm;
+
+const formInstance = Form as FormType & {
+  Item: typeof Item;
+  useForm: typeof useForm;
+};
+
+export default formInstance;

package/lib/public/src/components/pcfactory/src/Form/useFormStatus.ts

@@ -0,0 +1,47 @@
+import { isUndefined } from 'lodash';
+import { useRef } from 'react';
+import { useUpdateEffect } from '../utils/ahooks';
+import { StatusType } from '../utils/formUtils/FormContext';
+import useMonitor from './useMonitor';
+
+export type FormStatusType = {
+  [key in StatusType]?: unknown;
+};
+
+const useSubscriptionStatus = (options: {
+  run: (type: StatusType, v: unknown) => void;
+  type: StatusType;
+  listened: unknown;
+}) => {
+  const { run, type, listened } = options;
+  useUpdateEffect(() => {
+    if (!isUndefined(listened)) {
+      run(type, listened);
+    }
+  }, [listened]);
+};
+
+/**
+ * 表单状态管理
+ */
+export const useFormStatus = (value: FormStatusType) => {
+  const refValue = useRef<FormStatusType>({});
+  refValue.current = value;
+
+  const { addListener, removeListener, execListeners } = useMonitor();
+
+  const run = (type: StatusType, v: unknown) => {
+    refValue.current[type] = v;
+    execListeners(v, type);
+  };
+
+  useSubscriptionStatus({ run, type: 'disabled', listened: value.disabled });
+  useSubscriptionStatus({ run, type: 'readonly', listened: value.readonly });
+
+  return {
+    addListener,
+    removeListener,
+    run,
+    status: refValue.current,
+  };
+};

package/lib/public/src/components/pcfactory/src/Form/useMonitor.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef } from 'react';
+import type { MonitorFn, StatusType } from '../utils/formUtils/FormContext';
+
+const useMonitor = () => {
+  const monitor = useRef<MonitorFn[]>([]).current;
+
+  /**
+   * 增加监听事件
+   */
+  const addListener = useCallback((fn: MonitorFn) => {
+    if (!monitor.includes(fn)) {
+      monitor.push(fn);
+    }
+  }, []);
+
+  /**
+   * 移除监听事件
+   */
+  const removeListener = useCallback((fn: MonitorFn) => {
+    const index = monitor.findIndex((v) => v === fn);
+    if (index > -1) {
+      monitor.splice(index, 1);
+    }
+  }, []);
+
+  /**
+   * 执行监听事件
+   */
+  const execListeners = useCallback((v: unknown, type: StatusType) => {
+    monitor.forEach((fn) => fn(v, type));
+  }, []);
+
+  return {
+    addListener,
+    removeListener,
+    execListeners,
+  };
+};
+
+export default useMonitor;