@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/form/src/components/SchemaForm/index.tsx

@@ -0,0 +1,241 @@
+import {
+  LabelIconTip,
+  omitUndefined,
+  runFunction,
+  stringify,
+  useDeepCompareMemo,
+  useLatest,
+  useReactiveRef,
+  useRefFunction,
+} from '@ant-design/pro-utils';
+import type { FormProps } from 'antd';
+import { Form } from 'antd';
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { ProFormInstance } from '../../BaseForm';
+import type { ProFormProps } from '../../layouts';
+import { DrawerForm } from '../../layouts/DrawerForm';
+import { LightFilter } from '../../layouts/LightFilter';
+import { ModalForm } from '../../layouts/ModalForm';
+import { ProForm } from '../../layouts/ProForm';
+import { QueryFilter } from '../../layouts/QueryFilter';
+import { StepsForm as ProStepsForm } from '../../layouts/StepsForm';
+import { Embed, StepsForm } from './layoutType';
+import type {
+  FormSchema,
+  ItemType,
+  ProFormColumnsType,
+  ProFormRenderValueTypeHelpers,
+} from './typing';
+import { renderValueType } from './valueType';
+
+export * from './typing';
+
+const FormLayoutType = {
+  DrawerForm,
+  QueryFilter,
+  LightFilter,
+  StepForm: ProStepsForm.StepForm,
+  StepsForm: StepsForm,
+  ModalForm,
+  Embed,
+  Form: ProForm,
+};
+
+/**
+ * 此组件可以根据 Json Schema 来生成相应的表单,大部分配置与 antd 的 table 列配置相同
+ *
+ * @see 此组件仍为 beta 版本，api 可能发生变化
+ */
+
+function BetaSchemaForm<T, ValueType = 'text'>(
+  props: FormSchema<T, ValueType>,
+) {
+  const {
+    columns,
+    layoutType = 'Form',
+    type = 'form',
+    action,
+    shouldUpdate = (pre, next) => stringify(pre) !== stringify(next),
+    formRef: propsFormRef,
+    ...restProps
+  } = props;
+
+  const FormRenderComponents = (FormLayoutType[layoutType as 'Form'] ||
+    ProForm) as React.FC<ProFormProps<T>>;
+
+  const [form] = Form.useForm();
+  const formInstance = Form.useFormInstance();
+
+  const [, forceUpdate] = useState<[]>([]);
+  const [formDomsDeps, updatedFormDoms] = useState<[]>(() => []);
+
+  const formRef = useReactiveRef<ProFormInstance | undefined>(
+    props.form || formInstance || form,
+  );
+  const oldValuesRef = useRef<T>();
+  const propsRef = useLatest(props);
+
+  /**
+   * 生成子项，方便被 table 接入
+   *
+   * @param items
+   */
+  const genItems: ProFormRenderValueTypeHelpers<T, ValueType>['genItems'] =
+    useRefFunction((items: ProFormColumnsType<T, ValueType>[]) => {
+      return items
+        .filter((originItem) => {
+          return !(originItem.hideInForm && type === 'form');
+        })
+        .sort((a, b) => {
+          if (b.order || a.order) {
+            return (b.order || 0) - (a.order || 0);
+          }
+          return (b.index || 0) - (a.index || 0);
+        })
+        .map((originItem, index) => {
+          const title = runFunction(
+            originItem.title,
+            originItem,
+            'form',
+            <LabelIconTip
+              label={originItem.title as string}
+              //@ts-expect-error
+              tooltip={originItem.tooltip || originItem.tip}
+            />,
+          );
+
+          const item = omitUndefined({
+            title,
+            label: title,
+            name: originItem.name,
+            valueType: runFunction(originItem.valueType, {}),
+            key: originItem.key || originItem.dataIndex || index,
+            columns: originItem.columns,
+            valueEnum: originItem.valueEnum,
+            dataIndex: originItem.dataIndex || originItem.key,
+            initialValue: originItem.initialValue,
+            width: originItem.width,
+            index: originItem.index,
+            readonly: originItem.readonly,
+            colSize: originItem.colSize,
+            colProps: originItem.colProps,
+            rowProps: originItem.rowProps,
+            className: originItem.className,
+            //@ts-expect-error
+            tooltip: originItem.tooltip || originItem.tip,
+            dependencies: originItem.dependencies,
+            proFieldProps: originItem.proFieldProps,
+            ignoreFormItem: originItem.ignoreFormItem,
+            getFieldProps: originItem.fieldProps
+              ? () =>
+                  runFunction(
+                    originItem.fieldProps,
+                    formRef.current,
+                    originItem,
+                  )
+              : undefined,
+            getFormItemProps: originItem.formItemProps
+              ? () =>
+                  runFunction(
+                    originItem.formItemProps,
+                    formRef.current,
+                    originItem,
+                  )
+              : undefined,
+            render: originItem.render,
+            renderFormItem: originItem.renderFormItem,
+            renderText: originItem.renderText,
+            request: originItem.request,
+            params: originItem.params,
+            transform: originItem.transform,
+            convertValue: originItem.convertValue,
+            debounceTime: originItem.debounceTime,
+            defaultKeyWords: originItem.defaultKeyWords,
+          }) as ItemType<any, any>;
+
+          return renderValueType(item, {
+            action,
+            type,
+            originItem,
+            formRef,
+            genItems,
+          });
+        })
+        .filter((field) => {
+          return Boolean(field);
+        });
+    });
+
+  const onValuesChange: FormProps<T>['onValuesChange'] = useCallback(
+    (changedValues: any, values: T) => {
+      const { onValuesChange: propsOnValuesChange } = propsRef.current;
+      if (
+        shouldUpdate === true ||
+        (typeof shouldUpdate === 'function' &&
+          shouldUpdate(values, oldValuesRef.current))
+      ) {
+        updatedFormDoms([]);
+      }
+      oldValuesRef.current = values;
+      propsOnValuesChange?.(changedValues, values);
+    },
+    [propsRef, shouldUpdate],
+  );
+
+  const formChildrenDoms = useDeepCompareMemo(() => {
+    if (!formRef.current) return;
+    // like StepsForm's columns but not only for StepsForm
+    if (columns.length && Array.isArray(columns[0])) return;
+    return genItems(columns as ProFormColumnsType<T, ValueType>[]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, restProps?.open, action, type, formDomsDeps, !!formRef.current]);
+
+  /**
+   * Append layoutType component specific props
+   */
+  const specificProps = useDeepCompareMemo(() => {
+    if (layoutType === 'StepsForm') {
+      return {
+        forceUpdate: forceUpdate,
+        columns: columns as ProFormColumnsType<T, ValueType>[][],
+      };
+    }
+
+    return {};
+  }, [columns, layoutType]);
+
+  useImperativeHandle(
+    propsFormRef,
+    () => {
+      return formRef.current;
+    },
+    [formRef.current],
+  );
+
+  return (
+    <FormRenderComponents
+      {...specificProps}
+      {...restProps}
+      onInit={(_, initForm) => {
+        if (propsFormRef) {
+          (propsFormRef as React.MutableRefObject<ProFormInstance<T>>).current =
+            initForm;
+        }
+        restProps?.onInit?.(_, initForm);
+        formRef.current = initForm;
+      }}
+      form={props.form || form}
+      formRef={formRef}
+      onValuesChange={onValuesChange}
+    >
+      {formChildrenDoms}
+    </FormRenderComponents>
+  );
+}
+
+export default BetaSchemaForm;

package/packages/form/src/components/SchemaForm/layoutType/Embed.tsx

@@ -0,0 +1,3 @@
+const Embed: React.FC<{ children: any }> = ({ children }) => <>{children}</>;
+
+export default Embed;

package/packages/form/src/components/SchemaForm/layoutType/StepsForm.tsx

@@ -0,0 +1,54 @@
+import { useLatest } from '@ant-design/pro-utils';
+import React, { useCallback, useMemo } from 'react';
+import { StepsForm as ProStepsForm } from '../../../layouts/StepsForm';
+import type { ProFormGridConfig } from '../../../typing';
+import BetaSchemaForm from '../index';
+import type { FormSchema, ProFormPropsType } from '../typing';
+
+type StepsFormProps<T, ValueType> = ProFormPropsType<T, ValueType> &
+  Pick<FormSchema, 'steps'> & {
+    layoutType: 'StepsForm';
+    forceUpdate: React.Dispatch<React.SetStateAction<[]>>;
+  } & Pick<ProFormGridConfig, 'grid'>;
+
+const StepsForm = <T, ValueType>({
+  steps,
+  columns,
+  forceUpdate,
+  grid,
+  ...props
+}: StepsFormProps<T, ValueType>) => {
+  const propsRef = useLatest(props);
+
+  /**
+   * Fixed StepsForm toggle step causing formRef to update
+   */
+  const onCurrentChange = useCallback(
+    (current: number) => {
+      propsRef.current.onCurrentChange?.(current);
+      forceUpdate([]);
+    },
+    [forceUpdate, propsRef],
+  );
+
+  const StepDoms = useMemo(() => {
+    return steps?.map((step, index) => (
+      <BetaSchemaForm<T, ValueType>
+        grid={grid}
+        {...(step as FormSchema<T, ValueType>)}
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        layoutType="StepForm"
+        columns={columns[index]}
+      />
+    ));
+  }, [columns, grid, steps]);
+
+  return (
+    <ProStepsForm {...props} onCurrentChange={onCurrentChange}>
+      {StepDoms}
+    </ProStepsForm>
+  );
+};
+
+export default StepsForm;

package/packages/form/src/components/SchemaForm/layoutType/index.ts

@@ -0,0 +1,2 @@
+export { default as Embed } from './Embed';
+export { default as StepsForm } from './StepsForm';

package/packages/form/src/components/SchemaForm/typing.ts

@@ -0,0 +1,171 @@
+import type {
+  ProCoreActionType,
+  ProSchema,
+  ProSchemaComponentTypes,
+  SearchConvertKeyFn,
+  SearchTransformKeyFn,
+} from '@ant-design/pro-utils';
+import type { FormInstance, FormProps } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+import type { CommonFormProps } from '../../BaseForm';
+import type {
+  DrawerFormProps,
+  LightFilterProps,
+  ModalFormProps,
+  ProFormProps,
+  QueryFilterProps,
+  StepFormProps,
+  StepsFormProps,
+} from '../../layouts';
+import type { ProFormGridConfig } from '../../typing';
+
+export type ExtraProColumnType = {
+  tooltip?: React.ReactNode;
+  key?: React.Key;
+  className?: string;
+  /**
+   * @type auto 使用组件默认的宽度
+   * @type xs=104px 适用于短数字、短文本或选项。
+   * @type sm=216px 适用于较短字段录入、如姓名、电话、ID 等。
+   * @type md=328px 标准宽度，适用于大部分字段长度。
+   * @type lg=440px 适用于较长字段录入，如长网址、标签组、文件路径等。
+   * @type xl=552px 适用于长文本录入，如长链接、描述、备注等，通常搭配自适应多行输入框或定高文本域使用。
+   */
+  width?: string | number;
+
+  name?: NamePath | NamePath[];
+  defaultKeyWords?: string;
+} & Pick<ProFormGridConfig, 'rowProps' | 'colProps'>;
+
+/**
+ * ProForm 支持的相关类型
+ */
+export type ProFormPropsType<T, ValueType = 'text'> =
+  | ((
+      | ({ layoutType?: 'Form' } & ProFormProps<T>)
+      | ({ layoutType: 'DrawerForm' } & DrawerFormProps<T>)
+      | ({ layoutType: 'ModalForm' } & ModalFormProps<T>)
+      | ({ layoutType: 'QueryFilter' } & QueryFilterProps<T>)
+      | ({ layoutType: 'LightFilter' } & LightFilterProps<T>)
+      | ({ layoutType: 'StepForm' } & StepFormProps<T>)
+      | { layoutType: 'Embed' }
+    ) & {
+      columns: ProFormColumnsType<T, ValueType>[];
+    })
+  | ({
+      layoutType: 'StepsForm';
+      columns: ProFormColumnsType<T, ValueType>[][];
+    } & StepsFormProps<T>);
+
+/** ProForm 的特色 layout */
+export type ProFormLayoutType = ProFormPropsType<any>['layoutType'];
+
+export type FormFieldType =
+  | 'group'
+  | 'formList'
+  | 'formSet'
+  | 'divider'
+  | 'dependency';
+
+export type ProFormColumnsType<T = any, ValueType = 'text'> = ProSchema<
+  T,
+  ExtraProColumnType & {
+    index?: number;
+    /**
+     * 每个表单占据的格子大小
+     *
+     * @param 总宽度 = span* colSize
+     * @param 默认为 1
+     */
+    colSize?: number;
+    /** 是否只读模式 */
+    readonly?: boolean;
+    /** 搜索表单的默认值 */
+    initialValue?: any;
+    /**
+     * @name 获取时转化值，一般用于将数据格式化为组件接收的格式
+     * @param value 字段的值
+     * @param namePath 字段的name
+     * @returns 字段新的值
+     *
+     *
+     * @example a,b => [a,b]     convertValue: (value,namePath)=> value.split(",")
+     * @example string => json   convertValue: (value,namePath)=> JSON.parse(value)
+     * @example number => date   convertValue: (value,namePath)=> Dayjs(value)
+     * @example YYYY-MM-DD => date   convertValue: (value,namePath)=> Dayjs(value,"YYYY-MM-DD")
+     * @example  string => object   convertValue: (value,namePath)=> { return {value,label:value} }
+     */
+    convertValue?: SearchConvertKeyFn;
+    /**
+     * @name 提交时转化值，一般用于将值转化为提交的数据
+     * @param value 字段的值
+     * @param namePath 字段的name
+     * @param allValues 所有的字段
+     * @returns 字段新的值，如果返回对象，会和所有值 merge 一次
+     *
+     * @example {name:[a,b] => {name:a,b }    transform: (value,namePath,allValues)=> value.join(",")
+     * @example {name: string => { newName:string }    transform: (value,namePath,allValues)=> { newName:value }
+     * @example {name:dayjs} => {name:string transform: (value,namePath,allValues)=> value.format("YYYY-MM-DD")
+     * @example {name:dayjs}=> {name:时间戳} transform: (value,namePath,allValues)=> value.valueOf()
+     * @example {name:{value,label}} => { name:string} transform: (value,namePath,allValues)=> value.value
+     * @example {name:{value,label}} => { valueName,labelName  } transform: (value,namePath,allValues)=> { valueName:value.value, labelName:value.name }
+     */
+    transform?: SearchTransformKeyFn;
+    /** Form 的排序 */
+    order?: number;
+    /** 嵌套子项 */
+    columns?:
+      | ProFormColumnsType<T, ValueType | FormFieldType>[]
+      | ((values: any) => ProFormColumnsType<T, ValueType | FormFieldType>[]);
+  },
+  ProSchemaComponentTypes,
+  ValueType | FormFieldType
+>;
+
+export type FormSchema<T = Record<string, any>, ValueType = 'text'> = {
+  title?:
+    | React.ReactNode
+    | ((
+        schema: ProFormColumnsType<T, ValueType>,
+        type: 'form',
+        dom: React.ReactNode,
+      ) => React.ReactNode);
+  description?: React.ReactNode;
+  steps?: StepFormProps[];
+  type?: any;
+  action?: React.MutableRefObject<ProCoreActionType | undefined>;
+  /**
+   * @default true
+   * Fine-grained control over when to update
+   */
+  shouldUpdate?: boolean | ((newValues: T, oldValues?: T) => boolean);
+} & Omit<FormProps<T>, 'onFinish'> &
+  ProFormPropsType<T, ValueType> &
+  CommonFormProps<T> & {
+    open?: boolean;
+  };
+
+export type ProFormRenderValueTypeItem<T, ValueType> = {
+  label: any;
+  getFieldProps?: () => any;
+  getFormItemProps?: () => any;
+} & ProFormColumnsType<T, ValueType>;
+
+export type ProFormRenderValueTypeHelpers<T, ValueType> = {
+  originItem: ProFormColumnsType<T, ValueType>;
+  type: ProSchemaComponentTypes;
+  formRef: React.MutableRefObject<FormInstance<any> | undefined>;
+  genItems: (items: ProFormColumnsType<T, ValueType>[]) => React.ReactNode[];
+} & Pick<FormSchema<T, ValueType>, 'action'>;
+
+export type ItemType<T, ValueType> = Omit<
+  ProFormRenderValueTypeItem<T, ValueType>,
+  'key'
+> & {
+  key?: React.Key | React.Key[];
+};
+
+export type ProSchemaRenderValueTypeFunction<T = any, ValueType = any> = (
+  item: ItemType<T, ValueType>,
+  helpers: ProFormRenderValueTypeHelpers<T, ValueType>,
+) => React.ReactNode;

package/packages/form/src/components/SchemaForm/valueType/dependency.tsx

@@ -0,0 +1,34 @@
+import { noteOnce } from 'rc-util/lib/warning';
+import ProFormDependency from '../../Dependency';
+import type { ItemType, ProFormRenderValueTypeHelpers } from '../typing';
+
+export const dependency = <DataType, ValueType>(
+  item: ItemType<DataType, ValueType>,
+  helpers: ProFormRenderValueTypeHelpers<DataType, ValueType>,
+) => {
+  /** ProFormDependency */
+  if (item.valueType === 'dependency') {
+    const fieldProps = item.getFieldProps?.();
+    noteOnce(
+      Array.isArray(item.name ?? fieldProps?.name),
+      'SchemaForm: fieldProps.name should be NamePath[] when valueType is "dependency"',
+    );
+    noteOnce(
+      typeof item.columns === 'function',
+      'SchemaForm: columns should be a function when valueType is "dependency"',
+    );
+
+    if (!Array.isArray(item.name ?? fieldProps?.name)) return null;
+
+    return (
+      <ProFormDependency name={item.name} {...fieldProps} key={item.key}>
+        {(values: any) => {
+          if (!item.columns || typeof item.columns !== 'function') return null;
+          return helpers.genItems(item.columns(values));
+        }}
+      </ProFormDependency>
+    );
+  }
+
+  return true;
+};

package/packages/form/src/components/SchemaForm/valueType/divider.tsx

@@ -0,0 +1,13 @@
+import { Divider } from 'antd';
+import type { ItemType } from '../typing';
+
+export const divider = <DataType, ValueType = 'divider'>(
+  item: ItemType<DataType, ValueType>,
+) => {
+  /** 分割线 */
+  if (item.valueType === 'divider') {
+    return <Divider {...item.getFieldProps?.()} key={item.key} />;
+  }
+
+  return true;
+};

package/packages/form/src/components/SchemaForm/valueType/field.tsx

@@ -0,0 +1,91 @@
+import { omitUndefined } from '@ant-design/pro-utils';
+import omit from 'omit.js';
+import React from 'react';
+import ProFormDependency from '../../Dependency';
+import type { ProFormFieldProps } from '../../Field';
+import ProFormField from '../../Field';
+import type { ProSchemaRenderValueTypeFunction } from '../typing';
+
+export const field: ProSchemaRenderValueTypeFunction<any, any> = (
+  item,
+  { action, formRef, type, originItem },
+) => {
+  /** 公用的 类型 props */
+  const formFieldProps = {
+    ...omit(item, [
+      'dataIndex',
+      'width',
+      'render',
+      'renderFormItem',
+      'renderText',
+      'title',
+    ]),
+    name: item.name || item.key || item.dataIndex,
+    width: item.width as 'md',
+    render: item?.render
+      ? (dom, entity, renderIndex) =>
+          item?.render?.(dom, entity, renderIndex, action?.current, {
+            type,
+            ...item,
+            key: item.key?.toString(),
+            formItemProps: item.getFormItemProps?.(),
+            fieldProps: item.getFieldProps?.(),
+          })
+      : undefined,
+  } as Omit<ProFormFieldProps, 'fieldProps' | 'formItemProps'>;
+
+  const defaultRender = () => {
+    return <ProFormField {...formFieldProps} ignoreFormItem={true} />;
+  };
+
+  const renderFormItem = item?.renderFormItem
+    ? (_: any, config: any) => {
+        const renderConfig = omitUndefined({ ...config, onChange: undefined });
+        return item?.renderFormItem?.(
+          {
+            type,
+            ...item,
+            key: item.key?.toString(),
+            formItemProps: item.getFormItemProps?.(),
+            fieldProps: item.getFieldProps?.(),
+            originProps: originItem,
+          },
+          {
+            ...renderConfig,
+            defaultRender,
+            type,
+          },
+          formRef.current!,
+        );
+      }
+    : undefined;
+
+  const getField = () => {
+    if (item?.renderFormItem) {
+      const dom = renderFormItem?.(null, {});
+
+      if (!dom || item.ignoreFormItem) return dom;
+    }
+
+    return (
+      <ProFormField
+        {...formFieldProps}
+        key={[item.key, item.index || 0].join('-')}
+        renderFormItem={renderFormItem}
+      />
+    );
+  };
+
+  if (item.dependencies) {
+    return (
+      <ProFormDependency
+        name={item.dependencies || []}
+        key={item.key as React.Key}
+      >
+        {getField}
+      </ProFormDependency>
+    );
+  }
+
+  return getField();
+};

package/packages/form/src/components/SchemaForm/valueType/formList.tsx

@@ -0,0 +1,27 @@
+import { ProFormList } from '../../List';
+import type { ProSchemaRenderValueTypeFunction } from '../typing';
+
+export const formList: ProSchemaRenderValueTypeFunction = (
+  item,
+  { genItems },
+) => {
+  if (item.valueType === 'formList' && item.dataIndex) {
+    if (!item.columns || !Array.isArray(item.columns)) return null;
+    return (
+      <ProFormList
+        {...item.getFormItemProps?.()}
+        key={item.key}
+        name={item.dataIndex}
+        label={item.label}
+        initialValue={item.initialValue}
+        colProps={item.colProps}
+        rowProps={item.rowProps}
+        {...item.getFieldProps?.()}
+      >
+        {genItems(item.columns)}
+      </ProFormList>
+    );
+  }
+
+  return true;
+};

package/packages/form/src/components/SchemaForm/valueType/formSet.tsx

@@ -0,0 +1,27 @@
+import ProFormFieldSet from '../../FieldSet';
+import type { ProSchemaRenderValueTypeFunction } from '../typing';
+
+export const formSet: ProSchemaRenderValueTypeFunction = (
+  item,
+  { genItems },
+) => {
+  if (item.valueType === 'formSet' && item.dataIndex) {
+    if (!item.columns || !Array.isArray(item.columns)) return null;
+    return (
+      <ProFormFieldSet
+        {...item.getFormItemProps?.()}
+        key={item.key}
+        initialValue={item.initialValue}
+        name={item.dataIndex}
+        label={item.label}
+        colProps={item.colProps}
+        rowProps={item.rowProps}
+        {...item.getFieldProps?.()}
+      >
+        {genItems(item.columns)}
+      </ProFormFieldSet>
+    );
+  }
+
+  return true;
+};

package/packages/form/src/components/SchemaForm/valueType/group.tsx

@@ -0,0 +1,22 @@
+import { ProFormGroup } from '../../../layouts';
+import type { ProSchemaRenderValueTypeFunction } from '../typing';
+
+export const group: ProSchemaRenderValueTypeFunction = (item, { genItems }) => {
+  if (item.valueType === 'group') {
+    if (!item.columns || !Array.isArray(item.columns)) return null;
+
+    return (
+      <ProFormGroup
+        key={item.key}
+        label={item.label}
+        colProps={item.colProps}
+        rowProps={item.rowProps}
+        {...item.getFieldProps?.()}
+      >
+        {genItems(item.columns)}
+      </ProFormGroup>
+    );
+  }
+
+  return true;
+};