@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/form/BaseForm/useUrlSync.js

@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from 'react';
+import { runFunction, useRefFunction, useUrlSearchParams } from "../../utils";
+/**
+ * 将 syncToUrl 的 boolean | function 形式统一转为实际参数对象。
+ * 纯函数，方便单独测试。
+ */
+export const genUrlSyncParams = (syncUrl, params, type) => {
+  if (syncUrl === true) {
+    return params;
+  }
+  return runFunction(syncUrl, params, type);
+};
+/**
+ * 管理 QueryFilter 等场景下 URL 参数与表单值之间的双向同步。
+ *
+ * 提取自 BaseForm，让 BaseForm 本身不需要关心 URL 同步细节。
+ *
+ * 职责：
+ * - 管理 `urlSearch` 状态（通过 `useUrlSearchParams`）
+ * - 初始化时从 URL 读取参数合并到 `initialValues`
+ * - 重置时清空 URL 参数
+ * - 提交时将表单值写入 URL
+ * - `syncToInitialValues=false` 时清空已合并的 URL 参数
+ * - `extraUrlParams` 变化时同步更新 URL
+ */
+export function useUrlSync({
+  syncToUrl,
+  syncToInitialValues,
+  extraUrlParams
+}) {
+  const [urlSearch, setUrlSearch] = useUrlSearchParams({}, {
+    disabled: !syncToUrl
+  });
+  const [urlParamsMergeInitialValues, setUrlParamsMergeInitialValues] = useState(() => {
+    if (!syncToUrl) return {};
+    return genUrlSyncParams(syncToUrl, urlSearch, 'get');
+  });
+
+  // syncToInitialValues=false 时，清空已合并的 URL 参数（reset 时不回填 URL 数据）
+  useEffect(() => {
+    if (syncToInitialValues) return;
+    setUrlParamsMergeInitialValues({});
+  }, [syncToInitialValues]);
+
+  // urlSearch ref，保证 onUrlSyncFinish 里拿到最新值（避免闭包陷阱）
+  const urlSearchRef = useRef(urlSearch);
+  useEffect(() => {
+    urlSearchRef.current = urlSearch;
+  }, [urlSearch]);
+
+  // extraUrlParams 变化时，同步写入 URL
+  const getExtraAndUrlParams = useRefFunction(() => ({
+    ...urlSearchRef.current,
+    ...extraUrlParams
+  }));
+  useEffect(() => {
+    if (!syncToUrl) return;
+    setUrlSearch(genUrlSyncParams(syncToUrl, getExtraAndUrlParams(), 'set'));
+  }, [extraUrlParams, getExtraAndUrlParams, syncToUrl]);
+
+  // 重置时清空 URL 参数
+  const onUrlSyncReset = useRefFunction((finalValues, currentExtraUrlParams) => {
+    if (!syncToUrl) return;
+    const params = Object.keys(finalValues).reduce((accumulated, key) => ({
+      ...accumulated,
+      [key]: finalValues[key] || undefined
+    }), currentExtraUrlParams ?? {});
+    setUrlSearch(genUrlSyncParams(syncToUrl, params, 'set'));
+  });
+
+  // 提交时同步表单值到 URL
+  const onUrlSyncFinish = useRefFunction((finalValues, allFieldKeys, currentExtraUrlParams) => {
+    if (!syncToUrl) return;
+    const syncToUrlParams = allFieldKeys.reduce((accumulated, key) => ({
+      ...accumulated,
+      [key]: finalValues[key] ?? undefined
+    }), currentExtraUrlParams ?? {});
+
+    // fix #3547: 原先在 URL 中存在的字段如果新值为 falsy（但非 false/0），置为 undefined 以触发 URL 删除
+    Object.keys(urlSearchRef.current).forEach(key => {
+      if (syncToUrlParams[key] !== false && syncToUrlParams[key] !== 0 && !syncToUrlParams[key]) {
+        syncToUrlParams[key] = undefined;
+      }
+    });
+    setUrlSearch(genUrlSyncParams(syncToUrl, syncToUrlParams, 'set'));
+  });
+  return {
+    urlParamsMergeInitialValues,
+    onUrlSyncReset,
+    onUrlSyncFinish
+  };
+}

package/es/form/FieldContext.d.ts

@@ -1,7 +1,8 @@
 import type { FormItemProps } from 'antd';
 import type { NamePath } from 'antd/lib/form/interface';
 import React from 'react';
-import type { ProFieldProps, ProFieldValueType, SearchTransformKeyFn } from '../utils';
+import type { ProFieldProps, SearchTransformKeyFn } from '../utils';
+import type { ProFieldValueType } from '../utils/typing';
 import type { CommonFormProps } from './BaseForm';
 import type { FieldProps, ProFormGroupProps } from './typing';
 export type FiledContextProps = {
@@ -16,11 +17,11 @@ export type FiledContextProps = {
         transform?: SearchTransformKeyFn;
     }) => void;
     /** Form 组件的类型 */
-    formComponentType?: string;
+    formComponentType?: 'DrawerForm' | 'ModalForm' | 'QueryFilter' | 'LightFilter' | (string & {});
     /** 获取表单实例计数器 */
     formKey?: string;
     /** 表单的 getPopupContainer 控制 */
-    getPopupContainer?: (e: HTMLElement) => ParentNode;
+    getPopupContainer?: (e: HTMLElement) => HTMLElement | ParentNode;
 } & Pick<CommonFormProps, 'formRef' | 'grid'>;
 declare const FieldContext: React.Context<FiledContextProps>;
 export { FieldContext };

package/es/form/components/Checkbox/index.js

@@ -34,26 +34,6 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef(({
       options,
       ...fieldProps
     },
-    lightProps: {
-      labelFormatter: () => {
-        return /*#__PURE__*/_jsx(ProFormField, {
-          ref: ref,
-          valueType: "checkbox",
-          mode: "read",
-          valueEnum: runFunction(valueEnum, undefined),
-          fieldConfig: {
-            customLightMode: true
-          },
-          fieldProps: {
-            options,
-            ...fieldProps
-          },
-          proFieldProps: proFieldProps,
-          ...rest
-        });
-      },
-      ...rest.lightProps
-    },
     proFieldProps: proFieldProps,
     ...rest
   })

package/es/form/components/ColorPicker/index.d.ts

@@ -1,27 +1,8 @@
-import type { PopoverProps } from 'antd';
-import React from 'react';
+import type { PopoverProps, ColorPickerProps } from 'antd';
 import type { ProFormFieldItemProps } from '../../typing';
-type ColorPickerProps = {
-    value?: string;
-    onChange?: (color: string) => void;
-};
 export type ProFormColorPickerProps = ProFormFieldItemProps<ColorPickerProps> & {
     popoverProps?: PopoverProps;
     colors?: string[];
 };
-declare const _default: React.ForwardRefExoticComponent<{
-    fieldProps?: Partial<import("../../typing").FieldProps<any> & ColorPickerProps> | undefined;
-    placeholder?: string | string[] | undefined;
-    secondary?: boolean | undefined;
-    emptyText?: React.ReactNode;
-    cacheForSwr?: boolean | undefined;
-    disabled?: boolean | undefined;
-    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
-    proFieldProps?: import("src/utils").ProFieldProps | undefined;
-    footerRender?: import("../../typing").LightFilterFooterRender | undefined;
-    children?: any;
-} & Omit<import("src/form/components").ProFormItemProps, "valueType"> & Pick<import("../../typing").ProFormGridConfig, "colProps"> & import("../../typing").ExtendsProps & {
-    popoverProps?: PopoverProps | undefined;
-    colors?: string[] | undefined;
-} & React.RefAttributes<any>>;
-export default _default;
+declare const ForwardedProFormColorPicker: any;
+export default ForwardedProFormColorPicker;

package/es/form/components/ColorPicker/index.js

@@ -46,4 +46,5 @@ const ProFormColorPicker = ({
     })
   });
 };
-export default /*#__PURE__*/React.forwardRef(ProFormColorPicker);
+const ForwardedProFormColorPicker = /*#__PURE__*/React.forwardRef(ProFormColorPicker);
+export default ForwardedProFormColorPicker;

package/es/form/components/DatePicker/BaseDatePicker.js

@@ -28,10 +28,38 @@ export const BaseDatePicker = /*#__PURE__*/React.forwardRef(({
   }, [fieldProps, valueType]);
   const renderFieldDatePicker = useCallback((text, props) => {
     const fieldPropsFromContext = props.fieldProps ?? mergedFieldProps;
-    const format = valueType === 'dateTime' ? fieldPropsFromContext?.format ?? 'YYYY-MM-DD HH:mm:ss' : fieldPropsFromContext?.format;
+    const fieldFormat = fieldPropsFromContext?.format;
+    let format;
+    let picker;
+    switch (valueType) {
+      case 'dateTime':
+        format = fieldFormat ?? 'YYYY-MM-DD HH:mm:ss';
+        break;
+      case 'dateWeek':
+        picker = 'week';
+        format = fieldFormat ?? 'gggg-wo';
+        break;
+      case 'dateMonth':
+        picker = 'month';
+        format = fieldFormat ?? 'YYYY-MM';
+        break;
+      case 'dateQuarter':
+        picker = 'quarter';
+        format = fieldFormat ?? 'YYYY-[Q]Q';
+        break;
+      case 'dateYear':
+        picker = 'year';
+        format = fieldFormat ?? 'YYYY';
+        break;
+      case 'date':
+      default:
+        format = fieldFormat ?? 'YYYY-MM-DD';
+        break;
+    }
     return /*#__PURE__*/_jsx(FieldDatePicker, {
       ...props,
       format: format,
+      picker: picker,
       text: text
     });
   }, [mergedFieldProps, valueType]);

package/es/form/components/DateRangePicker/BaseDateRanger.js

@@ -27,7 +27,7 @@ export const BaseDateRanger = /*#__PURE__*/React.forwardRef(({
       case 'dateTimeRange':
         return 'YYYY-MM-DD HH:mm:ss';
       case 'dateWeekRange':
-        return 'YYYY-wo';
+        return 'gggg-wo';
       case 'dateMonthRange':
         return 'YYYY-MM';
       case 'dateQuarterRange':
@@ -40,10 +40,38 @@ export const BaseDateRanger = /*#__PURE__*/React.forwardRef(({
   }, [mergedFieldProps.format, valueType]);
   const renderFieldRangePicker = useCallback((text, props) => {
     const fieldPropsFromContext = props.fieldProps ?? mergedFieldProps;
-    const format = valueType === 'dateTimeRange' ? fieldPropsFromContext?.format ?? 'YYYY-MM-DD HH:mm:ss' : fieldPropsFromContext?.format;
+    const fieldFormat = fieldPropsFromContext?.format;
+    let format;
+    let picker;
+    switch (valueType) {
+      case 'dateTimeRange':
+        format = fieldFormat ?? 'YYYY-MM-DD HH:mm:ss';
+        break;
+      case 'dateWeekRange':
+        picker = 'week';
+        format = fieldFormat ?? 'gggg-wo';
+        break;
+      case 'dateMonthRange':
+        picker = 'month';
+        format = fieldFormat ?? 'YYYY-MM';
+        break;
+      case 'dateQuarterRange':
+        picker = 'quarter';
+        format = fieldFormat ?? 'YYYY-[Q]Q';
+        break;
+      case 'dateYearRange':
+        picker = 'year';
+        format = fieldFormat ?? 'YYYY';
+        break;
+      case 'dateRange':
+      default:
+        format = fieldFormat ?? 'YYYY-MM-DD';
+        break;
+    }
     return /*#__PURE__*/_jsx(FieldRangePicker, {
       ...props,
       format: format,
+      picker: picker,
       text: text
     });
   }, [mergedFieldProps, valueType]);

package/es/form/components/DateRangePicker/DateMonthRangePicker.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateArrayFormatter } from "../../../utils";
 import { BaseDateRanger } from "./BaseDateRanger";
 import { jsx as _jsx } from "react/jsx-runtime";
 const valueType = 'dateMonthRange';
@@ -21,11 +20,6 @@ export const ProFormDateMonthRangePicker = /*#__PURE__*/React.forwardRef(({
     },
     valueType: valueType,
     proFieldProps: proFieldProps,
-    fieldConfig: {
-      valueType,
-      customLightMode: true,
-      lightFilterLabelFormatter: value => dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD')
-    },
     ...rest
   });
 });

package/es/form/components/DateRangePicker/DateQuarterRangePicker.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateArrayFormatter } from "../../../utils";
 import { BaseDateRanger } from "./BaseDateRanger";
 import { jsx as _jsx } from "react/jsx-runtime";
 const valueType = 'dateQuarterRange';
@@ -21,11 +20,6 @@ export const ProFormDateQuarterRangePicker = /*#__PURE__*/React.forwardRef(({
     },
     valueType: valueType,
     proFieldProps: proFieldProps,
-    fieldConfig: {
-      valueType,
-      customLightMode: true,
-      lightFilterLabelFormatter: value => dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD')
-    },
     ...rest
   });
 });

package/es/form/components/DateRangePicker/DateTimeRangePicker.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateArrayFormatter } from "../../../utils";
 import { BaseDateRanger } from "./BaseDateRanger";
 import { jsx as _jsx } from "react/jsx-runtime";
 const valueType = 'dateTimeRange';
@@ -19,11 +18,6 @@ export const ProFormDateTimeRangePicker = /*#__PURE__*/React.forwardRef(({
     fieldProps: fieldProps,
     valueType: valueType,
     proFieldProps: proFieldProps,
-    fieldConfig: {
-      valueType,
-      customLightMode: true,
-      lightFilterLabelFormatter: value => dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD')
-    },
     ...rest
   });
 });

package/es/form/components/DateRangePicker/DateWeekRangePicker.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateArrayFormatter } from "../../../utils";
 import { BaseDateRanger } from "./BaseDateRanger";
 import { jsx as _jsx } from "react/jsx-runtime";
 const valueType = 'dateWeekRange';
@@ -21,11 +20,6 @@ export const ProFormDateWeekRangePicker = /*#__PURE__*/React.forwardRef(({
     },
     valueType: valueType,
     proFieldProps: proFieldProps,
-    fieldConfig: {
-      valueType,
-      customLightMode: true,
-      lightFilterLabelFormatter: value => dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD')
-    },
     ...rest
   });
 });

package/es/form/components/DateRangePicker/DateYearRangePicker.d.ts

@@ -2,7 +2,7 @@ import type { RangePickerProps } from 'antd/lib/date-picker';
 import React from 'react';
 import type { ProFormFieldItemProps } from '../../typing';
 /**
- * 季度份区间选择组件
+ * 年份区间选择组件
  *
  * @param
  */

package/es/form/components/DateRangePicker/DateYearRangePicker.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { dateArrayFormatter } from "../../../utils";
 import { BaseDateRanger } from "./BaseDateRanger";
 import { jsx as _jsx } from "react/jsx-runtime";
 const valueType = 'dateYearRange';
 
 /**
- * 季度份区间选择组件
+ * 年份区间选择组件
  *
  * @param
  */
@@ -21,11 +20,6 @@ export const ProFormDateYearRangePicker = /*#__PURE__*/React.forwardRef(({
     },
     valueType: valueType,
     proFieldProps: proFieldProps,
-    fieldConfig: {
-      valueType,
-      customLightMode: true,
-      lightFilterLabelFormatter: value => dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD')
-    },
     ...rest
   });
 });

package/es/form/components/DateRangePicker/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateArrayFormatter } from "../../../utils";
 import { BaseDateRanger } from "./BaseDateRanger";
 import { jsx as _jsx } from "react/jsx-runtime";
 const valueType = 'dateRange';
@@ -21,11 +20,6 @@ const ProFormDateRangePicker = /*#__PURE__*/React.forwardRef(({
     },
     valueType: valueType,
     proFieldProps: proFieldProps,
-    fieldConfig: {
-      valueType,
-      customLightMode: true,
-      lightFilterLabelFormatter: value => dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD')
-    },
     ...rest
   });
 });

package/es/form/components/Dependency/index.d.ts

@@ -10,7 +10,7 @@ export type ProFormDependencyProps<T = Record<string, any>> = Omit<FormItemProps
     children: RenderChildren<T>;
 };
 declare const ProFormDependency: {
-    <T>({ name: nameList, originDependencies, children, ignoreFormListField, ...rest }: ProFormDependencyProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T>({ name: nameList, originDependencies, children, ignoreFormListField, ...rest }: ProFormDependencyProps<T>): React.JSX.Element;
     displayName: string;
 };
 export default ProFormDependency;

package/es/form/components/Digit/DigitRange.d.ts

@@ -13,7 +13,7 @@ export type ProFormDigitRangeProps = ProFormFieldItemProps<RangeInputNumberProps
     separatorWidth?: number;
 };
 declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
-    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "defaultValue" | "onChange" | "placeholder"> & {
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "onChange" | "placeholder" | "defaultValue"> & {
         value?: ValuePair | undefined;
         defaultValue?: ValuePair | undefined;
         onChange?: ((value?: ValuePair) => void) | undefined;

package/es/form/components/Field/index.js

@@ -76,7 +76,7 @@ const BaseProFormField = props => {
     text: fieldProps?.[valuePropName],
     render: render,
     formItemRender: formItemRender,
-    valueType: valueType || 'text',
+    valueType: valueType ?? 'text',
     cacheForSwr: cacheForSwr,
     fieldProps: memoFieldProps,
     valueEnum: runFunction(valueEnum),

package/es/form/components/FieldSet/index.d.ts

@@ -1,7 +1,6 @@
 import type { SpaceProps } from 'antd';
 import type { GroupProps } from 'antd/lib/input';
 import React from 'react';
-import type { LightWrapperProps } from '../../BaseForm';
 import type { ProFormItemProps } from '../FormItem';
 export type ProFormFieldSetProps<T = any> = {
     value?: T[];
@@ -13,7 +12,6 @@ export type ProFormFieldSetProps<T = any> = {
     convertValue?: ProFormItemProps['convertValue'];
     transform?: ProFormItemProps['transform'];
     children?: ((value: T[], props: ProFormFieldSetProps) => React.ReactNode) | React.ReactNode;
-    lightProps?: LightWrapperProps;
 };
 export declare function defaultGetValueFromEvent(valuePropName: string, ...args: any): any;
 declare const _default: React.FC<Omit<ProFormItemProps, "children"> & ProFormFieldSetProps<any>>;

package/es/form/components/FieldSet/index.js

@@ -28,7 +28,6 @@ const FieldSet = props => {
     type = 'space',
     transform,
     convertValue,
-    lightProps,
     ...rest
   } = props;
   /**

package/es/form/components/FormItem/FormItemRender/index.d.ts

@@ -125,10 +125,9 @@ export declare const FormItemRender: React.FC<Omit<import("antd").FormItemProps<
  */
 export declare const ProFormItemRender: React.FC<Omit<import("antd").FormItemProps<any> & {
     ignoreFormItem?: boolean | undefined;
-    valueType?: import("src/utils").ProFieldValueType | undefined;
+    valueType?: keyof import("src/utils").ProFieldValueTypeWithFieldProps | undefined;
     transform?: import("src/utils").SearchTransformKeyFn | undefined;
     dataFormat?: string | undefined;
-    lightProps?: import("src/form").LightWrapperProps | undefined;
     proFormFieldKey?: any;
     fieldProps?: Record<string, any> | undefined;
 } & {

package/es/form/components/FormItem/index.d.ts

@@ -1,8 +1,8 @@
 import type { FormItemProps } from 'antd';
 import type { NamePath } from 'antd/lib/form/interface';
 import React from 'react';
-import { ProFieldValueType, SearchConvertKeyFn, SearchTransformKeyFn } from '../../../utils';
-import type { LightWrapperProps } from '../../BaseForm';
+import type { ProFieldValueType } from '../../../utils';
+import { SearchConvertKeyFn, SearchTransformKeyFn } from '../../../utils';
 declare const FormItemProvide: React.Context<{
     name?: NamePath;
     label?: React.ReactNode;
@@ -41,8 +41,8 @@ export type ProFormItemProps = FormItemProps & {
     /**
      * @name 提交时转化值，一般用于将值转化为提交的数据
      * @param value 字段的值
-     * @param namePath 字段的name
-     * @param allValues 所有的字段
+     * @param namePath 从根到当前字段的路径（string[]），如 `['user','profile','name']`
+     * @param allValues 根级表单对象（与 `transformKeySubmitValue` 中传入的 values 同源引用，提交转换过程中会随其它字段一并变化）
      * @returns 字段新的值，如果返回对象，会和所有值 merge 一次
      *
      * @example {name:[a,b] => {name:a,b }    transform: (value,namePath,allValues)=> value.join(",")
@@ -54,7 +54,6 @@ export type ProFormItemProps = FormItemProps & {
      */
     transform?: SearchTransformKeyFn;
     dataFormat?: string;
-    lightProps?: LightWrapperProps;
     proFormFieldKey?: any;
     fieldProps?: Record<string, any>;
 } & WarpFormItemProps;