@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/form/src/BaseForm/EditOrReadOnlyContext.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const EditOrReadOnlyContext = React.createContext<{
+  mode: 'edit' | 'read' | 'update';
+}>({
+  mode: 'edit',
+});

package/packages/form/src/BaseForm/LightWrapper/index.tsx

@@ -0,0 +1,159 @@
+import {
+  dateArrayFormatter,
+  dateFormatterMap,
+  FieldLabel,
+  FilterDropdown,
+  useMountMergeState,
+} from '@ant-design/pro-utils';
+import { ConfigProvider } from 'antd';
+import type { TooltipPlacement } from 'antd/lib/tooltip';
+import classNames from 'classnames';
+import React, { useContext, useMemo, useState } from 'react';
+import type { LightFilterFooterRender } from '../../typing';
+import { useStyle } from './style';
+
+export type SizeType = 'small' | 'middle' | 'large' | undefined;
+
+export type LightWrapperProps = {
+  label?: React.ReactNode;
+  disabled?: boolean;
+  placeholder?: React.ReactNode;
+  size?: SizeType;
+  value?: any;
+  onChange?: (value?: any) => void;
+  onBlur?: (value?: any) => void;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+  valuePropName?: string;
+  customLightMode?: boolean;
+  light?: boolean;
+  /**
+   * @name 自定义label的值
+   *
+   * @example <caption>自定义数组的转化</caption>
+   * labelFormatter={(value) =>value.join('-')} }
+   */
+  labelFormatter?: (value: any) => React.ReactNode;
+  bordered?: boolean;
+  otherFieldProps?: any;
+  valueType?: string;
+  allowClear?: boolean;
+  footerRender?: LightFilterFooterRender;
+  placement?: TooltipPlacement;
+};
+
+const LightWrapper: React.ForwardRefRenderFunction<any, LightWrapperProps> = (
+  props,
+) => {
+  const {
+    label,
+    size,
+    disabled,
+    onChange: propsOnChange,
+    className,
+    style,
+    children,
+    valuePropName,
+    placeholder,
+    labelFormatter,
+    bordered,
+    footerRender,
+    allowClear,
+    otherFieldProps,
+    valueType,
+    placement,
+    ...rest
+  } = props;
+
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-light-wrapper');
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const [tempValue, setTempValue] = useState<string | undefined | null>(
+    (props as any)[valuePropName!],
+  );
+  const [open, setOpen] = useMountMergeState<boolean>(false);
+
+  const onChange = (...restParams: any[]) => {
+    otherFieldProps?.onChange?.(...restParams);
+    propsOnChange?.(...restParams);
+  };
+
+  const labelValue = (props as any)[valuePropName!];
+
+  /** DateRange的转化，dayjs 的 toString 有点不好用 */
+  const labelValueText = useMemo(() => {
+    if (!labelValue) return labelValue;
+    if (
+      valueType?.toLowerCase()?.endsWith('range') &&
+      valueType !== 'digitRange' &&
+      !labelFormatter
+    ) {
+      return dateArrayFormatter(
+        labelValue,
+        (dateFormatterMap as any)[valueType] || 'YYYY-MM-DD',
+      );
+    }
+    if (Array.isArray(labelValue))
+      return labelValue.map((item) => {
+        if (typeof item === 'object' && item.label && item.value) {
+          return item.label;
+        }
+        return item;
+      });
+
+    return labelValue;
+  }, [labelValue, valueType, labelFormatter]);
+
+  return wrapSSR(
+    <FilterDropdown
+      disabled={disabled}
+      open={open}
+      onOpenChange={setOpen}
+      placement={placement}
+      label={
+        <FieldLabel
+          ellipsis
+          size={size}
+          onClear={() => {
+            onChange?.();
+            setTempValue(null);
+          }}
+          bordered={bordered}
+          style={style}
+          className={className}
+          label={label}
+          placeholder={placeholder}
+          value={labelValueText}
+          disabled={disabled}
+          formatter={labelFormatter}
+          allowClear={allowClear}
+        />
+      }
+      footer={{
+        onClear: () => setTempValue(null),
+        onConfirm: () => {
+          onChange?.(tempValue);
+          setOpen(false);
+        },
+      }}
+      footerRender={footerRender}
+    >
+      <div
+        className={classNames(`${prefixCls}-container`, hashId, className)}
+        style={style}
+      >
+        {React.cloneElement(children as JSX.Element, {
+          ...rest,
+          [valuePropName!]: tempValue,
+          onChange: (e: any) => {
+            setTempValue(e?.target ? e.target.value : e);
+          },
+          ...(children as JSX.Element).props,
+        })}
+      </div>
+    </FilterDropdown>,
+  );
+};
+
+export { LightWrapper };

package/packages/form/src/BaseForm/LightWrapper/style.ts

@@ -0,0 +1,31 @@
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+export interface ProToken extends ProAliasToken {
+  componentCls: string;
+}
+
+const genProStyle: GenerateStyle<ProToken> = (token) => {
+  return {
+    [`${token.componentCls}-collapse-label`]: {
+      paddingInline: 1,
+      paddingBlock: 1,
+    },
+    [`${token.componentCls}-container`]: {
+      [`${token.antCls}-form-item`]: {
+        marginBlockEnd: 0,
+      },
+    },
+  };
+};
+
+export function useStyle(prefixCls: string) {
+  return useAntdStyle('LightWrapper', (token) => {
+    const proToken: ProToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genProStyle(proToken)];
+  });
+}

package/packages/form/src/BaseForm/createField.tsx

@@ -0,0 +1,384 @@
+import {
+  omitUndefined,
+  pickProFormItemProps,
+  stringify,
+  useDeepCompareMemo,
+  useRefFunction,
+} from '@ant-design/pro-utils';
+import type { FormItemProps } from 'antd';
+import classnames from 'classnames';
+import { FieldContext as RcFieldContext } from 'rc-field-form';
+import { noteOnce } from 'rc-util/lib/warning';
+import React, { useContext, useMemo, useState } from 'react';
+import FieldContext from '../FieldContext';
+import { ProFormDependency, ProFormItem } from '../components';
+import { useGridHelpers } from '../helpers';
+import type {
+  ExtendsProps,
+  ProFormFieldItemProps,
+  ProFormItemCreateConfig,
+} from '../typing';
+
+export const TYPE = Symbol('ProFormComponent');
+
+const WIDTH_SIZE_ENUM = {
+  // 适用于短数字，短文本或者选项
+  xs: 104,
+  s: 216,
+  // 适用于较短字段录入、如姓名、电话、ID 等。
+  sm: 216,
+  m: 328,
+  // 标准宽度，适用于大部分字段长度。
+  md: 328,
+  l: 440,
+  // 适用于较长字段录入，如长网址、标签组、文件路径等。
+  lg: 440,
+  // 适用于长文本录入，如长链接、描述、备注等，通常搭配自适应多行输入框或定高文本域使用。
+  xl: 552,
+};
+
+const ignoreWidthValueType = ['switch', 'radioButton', 'radio', 'rate'];
+
+type ProFormComponent<P, Extends> = React.ComponentType<P & Extends>;
+
+/**
+ * 处理fieldProps和formItemProps为function时传进来的方法
+ * 目前只在SchemaForm时可能会有
+ */
+type FunctionFieldProps = {
+  getFormItemProps?: () => Record<string, any>;
+  getFieldProps?: () => Record<string, any>;
+};
+
+/**
+ * 这个方法的主要作用是帮助 Field 增加 FormItem 同时也会处理 lightFilter
+ *
+ * @param Field
+ * @param config
+ */
+function createField<P extends ProFormFieldItemProps = any>(
+  Field: React.ComponentType<P> | React.ForwardRefExoticComponent<P>,
+  config?: ProFormItemCreateConfig,
+): ProFormComponent<P, ExtendsProps & FunctionFieldProps> {
+  // 标记是否是 ProForm 的组件
+  // @ts-ignore
+  // eslint-disable-next-line no-param-reassign
+  Field.displayName = 'ProFormComponent';
+
+  const FieldWithContext: React.FC<P & ExtendsProps & FunctionFieldProps> = (
+    props,
+  ) => {
+    const {
+      valueType: tmpValueType,
+      customLightMode,
+      lightFilterLabelFormatter,
+      valuePropName = 'value',
+      ignoreWidth,
+      defaultProps,
+      ...defaultFormItemProps
+    } = { ...props?.filedConfig, ...config };
+    const {
+      label,
+      tooltip,
+      placeholder,
+      width,
+      bordered,
+      messageVariables,
+      ignoreFormItem,
+      transform,
+      convertValue,
+      readonly,
+      allowClear,
+      colSize,
+      getFormItemProps,
+      getFieldProps,
+      filedConfig,
+      cacheForSwr,
+      proFieldProps,
+      ...rest
+    } = { ...defaultProps, ...props };
+    const valueType = tmpValueType || rest.valueType;
+
+    // 有些 valueType 不需要宽度
+    const isIgnoreWidth = useMemo(
+      () => ignoreWidth || ignoreWidthValueType.includes(valueType),
+      [ignoreWidth, valueType],
+    );
+
+    const [, forceUpdate] = useState<[]>();
+
+    // onChange触发fieldProps,formItemProps重新执行
+    const [onlyChange, forceUpdateByOnChange] = useState<[]>();
+
+    /**
+     * 从 context 中拿到的值
+     */
+    const contextValue = React.useContext(FieldContext);
+
+    /**
+     * dependenciesValues change to trigger re-execute of getFieldProps and getFormItemProps
+     */
+    const changedProps = useDeepCompareMemo(
+      () => {
+        return {
+          formItemProps: getFormItemProps?.(),
+          fieldProps: getFieldProps?.(),
+        };
+      },
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange],
+    );
+
+    const fieldProps: Record<string, any> = useDeepCompareMemo(() => {
+      const newFieldProps: any = {
+        ...(ignoreFormItem ? omitUndefined({ value: rest.value }) : {}),
+        placeholder,
+        disabled: props.disabled,
+        ...contextValue.fieldProps,
+        ...changedProps.fieldProps,
+        // 支持未传递getFieldProps的情况
+        // 某些特殊hack情况下覆盖原来设置的fieldProps参数
+        ...rest.fieldProps,
+      };
+
+      newFieldProps.style = omitUndefined(newFieldProps?.style);
+      return newFieldProps;
+    }, [
+      ignoreFormItem,
+      rest.value,
+      rest.fieldProps,
+      placeholder,
+      props.disabled,
+      contextValue.fieldProps,
+      changedProps.fieldProps,
+    ]);
+
+    // restFormItemProps is user props pass to Form.Item
+    const restFormItemProps = pickProFormItemProps(rest);
+
+    const formItemProps: FormItemProps = useDeepCompareMemo(
+      () => ({
+        ...contextValue.formItemProps,
+        ...restFormItemProps,
+        ...changedProps.formItemProps,
+        // 支持未传递getFormItemProps的情况
+        // 某些特殊hack情况下覆盖原来设置的formItemProps参数
+        ...rest.formItemProps,
+      }),
+      [
+        changedProps.formItemProps,
+        contextValue.formItemProps,
+        rest.formItemProps,
+        restFormItemProps,
+      ],
+    );
+
+    const otherProps = useDeepCompareMemo(
+      () => ({
+        messageVariables,
+        ...defaultFormItemProps,
+        ...formItemProps,
+      }),
+      [defaultFormItemProps, formItemProps, messageVariables],
+    );
+
+    noteOnce(
+      // eslint-disable-next-line @typescript-eslint/dot-notation
+      !rest['defaultValue'],
+      '请不要在 Form 中使用 defaultXXX。如果需要默认值请使用 initialValues 和 initialValue。',
+    );
+
+    const { prefixName } = useContext(RcFieldContext);
+
+    const proFieldKey = useDeepCompareMemo(() => {
+      let name = otherProps?.name;
+      if (Array.isArray(name)) name = name.join('_');
+      if (Array.isArray(prefixName) && name)
+        name = `${prefixName.join('.')}.${name}`;
+      const key = name && `form-${contextValue.formKey ?? ''}-field-${name}`;
+      return key;
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stringify(otherProps?.name), prefixName, contextValue.formKey]);
+
+    const onChange = useRefFunction((...restParams: any[]) => {
+      if (getFormItemProps || getFieldProps) {
+        forceUpdateByOnChange([]);
+      } else if (rest.renderFormItem) {
+        forceUpdate([]);
+      }
+      fieldProps?.onChange?.(...restParams);
+    });
+
+    const style = useDeepCompareMemo(() => {
+      const newStyle = {
+        width:
+          width && !WIDTH_SIZE_ENUM[width as 'xs']
+            ? width
+            : contextValue.grid
+            ? '100%'
+            : undefined,
+        ...fieldProps?.style,
+      };
+
+      if (isIgnoreWidth) Reflect.deleteProperty(newStyle, 'width');
+
+      return omitUndefined(newStyle);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stringify(fieldProps?.style), contextValue.grid, isIgnoreWidth, width]);
+
+    const className = useDeepCompareMemo(() => {
+      const isSizeEnum = width && WIDTH_SIZE_ENUM[width as 'xs'];
+      return (
+        classnames(fieldProps?.className, {
+          'pro-field': isSizeEnum,
+          [`pro-field-${width}`]: isSizeEnum && !isIgnoreWidth,
+        }) || undefined
+      );
+    }, [width, fieldProps?.className, isIgnoreWidth]);
+
+    const fieldProFieldProps = useDeepCompareMemo(() => {
+      return omitUndefined({
+        ...contextValue.proFieldProps,
+        mode: rest?.mode,
+        readonly,
+        params: rest.params,
+        proFieldKey: proFieldKey,
+        cacheForSwr,
+        ...proFieldProps,
+      });
+    }, [
+      contextValue.proFieldProps,
+      rest?.mode,
+      rest.params,
+      readonly,
+      proFieldKey,
+      cacheForSwr,
+      proFieldProps,
+    ]);
+
+    const fieldFieldProps = useDeepCompareMemo(() => {
+      return {
+        onChange,
+        allowClear,
+        ...fieldProps,
+        style,
+        className,
+      };
+    }, [allowClear, className, onChange, fieldProps, style]);
+
+    const field = useDeepCompareMemo(() => {
+      return (
+        <Field
+          // @ts-ignore
+          key={props.proFormFieldKey || props.name}
+          // ProXxx 上面的 props 透传给 FieldProps，可能包含 Field 自定义的 props，
+          // 比如 ProFormSelect 的 request
+          {...(rest as P)}
+          fieldProps={fieldFieldProps}
+          proFieldProps={fieldProFieldProps}
+          ref={props?.fieldRef}
+        />
+      );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fieldProFieldProps, fieldFieldProps, rest]);
+
+    // 使用useMemo包裹避免不必要的re-render
+    const formItem = useDeepCompareMemo(() => {
+      return (
+        <ProFormItem
+          // 全局的提供一个 tip 功能，可以减少代码量
+          // 轻量模式下不通过 FormItem 显示 label
+          label={label && proFieldProps?.light !== true ? label : undefined}
+          tooltip={proFieldProps?.light !== true && tooltip}
+          valuePropName={valuePropName}
+          // @ts-ignore
+          key={props.proFormFieldKey || otherProps.name?.toString()}
+          // @ts-ignore
+          {...otherProps}
+          ignoreFormItem={ignoreFormItem}
+          transform={transform}
+          dataFormat={fieldProps?.format}
+          valueType={valueType}
+          messageVariables={{
+            label: (label as string) || '',
+            ...otherProps?.messageVariables,
+          }}
+          convertValue={convertValue}
+          lightProps={omitUndefined({
+            ...fieldProps,
+            valueType,
+            bordered,
+            allowClear: field?.props?.allowClear ?? allowClear,
+            light: proFieldProps?.light,
+            label,
+            customLightMode,
+            labelFormatter: lightFilterLabelFormatter,
+            valuePropName,
+            footerRender: field?.props?.footerRender,
+            // 使用用户的配置覆盖默认的配置
+            ...rest.lightProps,
+            ...otherProps.lightProps,
+          })}
+        >
+          {field}
+        </ProFormItem>
+      );
+    }, [
+      label,
+      proFieldProps?.light,
+      tooltip,
+      valuePropName,
+      props.proFormFieldKey,
+      otherProps,
+      ignoreFormItem,
+      transform,
+      fieldProps,
+      valueType,
+      convertValue,
+      bordered,
+      field,
+      allowClear,
+      customLightMode,
+      lightFilterLabelFormatter,
+      rest.lightProps,
+    ]);
+
+    const { ColWrapper } = useGridHelpers(rest);
+
+    return <ColWrapper>{formItem}</ColWrapper>;
+  };
+
+  const DependencyWrapper: React.FC<
+    P &
+      ExtendsProps &
+      FunctionFieldProps & {
+        originDependencies?: string[];
+      }
+  > = (props) => {
+    const { dependencies } = props;
+    return dependencies ? (
+      <ProFormDependency
+        name={dependencies}
+        originDependencies={props?.originDependencies}
+      >
+        {(values) => {
+          return (
+            <FieldWithContext
+              dependenciesValues={values}
+              dependencies={dependencies}
+              {...props}
+            />
+          );
+        }}
+      </ProFormDependency>
+    ) : (
+      <FieldWithContext dependencies={dependencies} {...props} />
+    );
+  };
+
+  return DependencyWrapper;
+}
+
+export { createField };

package/packages/form/src/BaseForm/index.ts

@@ -0,0 +1,3 @@
+export * from './BaseForm';
+export * from './createField';
+export * from './LightWrapper';

package/packages/form/src/FieldContext.tsx

@@ -0,0 +1,39 @@
+import type {
+  ProFieldProps,
+  ProFieldValueType,
+  SearchTransformKeyFn,
+} from '@ant-design/pro-utils';
+import type { FormItemProps } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+import React from 'react';
+import type { CommonFormProps } from './BaseForm';
+import type { FieldProps, ProFormGroupProps } from './typing';
+
+export type FiledContextProps = {
+  fieldProps?: FieldProps<unknown>;
+  proFieldProps?: ProFieldProps;
+  formItemProps?: FormItemProps;
+  groupProps?: ProFormGroupProps;
+  setFieldValueType?: (
+    name: NamePath,
+    obj: {
+      valueType?: ProFieldValueType;
+      dateFormat?: string;
+      /** 数据转化的地方 */
+      transform?: SearchTransformKeyFn;
+    },
+  ) => void;
+  /** Form 组件的类型 */
+  formComponentType?: string;
+  /** 获取表单实例计数器 */
+  formKey?: string;
+
+  /** 表单的 getPopupContainer 控制 */
+  getPopupContainer?: (e: HTMLElement) => ParentNode;
+} & Pick<CommonFormProps, 'formRef' | 'grid'>;
+
+const FieldContext = React.createContext<FiledContextProps>({});
+
+export { FieldContext };
+
+export default FieldContext;