@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

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

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

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

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

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

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

package/packages/form/src/FieldContext.tsx

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