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

package/es/field/components/Select/SearchSelect/index.js

@@ -12,7 +12,6 @@ import { nanoid } from "../../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SearchSelect = (props, ref) => {
   const {
-    optionItemRender,
     mode,
     onSearch,
     onFocus,
@@ -34,7 +33,6 @@ const SearchSelect = (props, ref) => {
     showSearch,
     fieldNames,
     defaultSearchValue,
-    preserveOriginalLabel: _preserveOriginalLabel = false,
     ...restProps
   } = props;
   const {
@@ -64,33 +62,21 @@ const SearchSelect = (props, ref) => {
   // 获取原始 label 的辅助函数
   const getOriginalLabel = (item, fallbackValue) => {
     // 优先使用 dataItem.label（原始字符串），避免使用 value.label（可能是 optionItemRender 渲染的组件）
-    if (item && typeof item.label === 'string' && item.label) {
+    if (item?.label && typeof item.label === 'string') {
       return item.label;
     }
-    if (item && item.text && typeof item.text === 'string') {
+    if (item?.text && typeof item.text === 'string') {
       return item.text;
     }
-    if (item && item.label) {
+    if (item?.label) {
       return String(item.label);
     }
-    if (item && item.text) {
+    if (item?.text) {
       return String(item.text);
     }
     // 如果 dataItem 不存在，尝试从 value 中提取原始 label
-    // 但 value.label 可能是组件，需要从组件中提取原始 label
-    if (fallbackValue && fallbackValue.label) {
-      // 如果是 React 元素（Highlight 组件），尝试提取其 props.label
-      // 检查多种可能的 React 元素格式
-      const labelValue = fallbackValue.label;
-      if (( /*#__PURE__*/React.isValidElement(labelValue) || labelValue && typeof labelValue === 'object' && 'props' in labelValue) && labelValue.props && labelValue.props.label) {
-        return String(labelValue.props.label);
-      }
-      // 如果是字符串，直接返回
-      if (typeof labelValue === 'string') {
-        return labelValue;
-      }
-      // 最后尝试转换为字符串
-      return String(labelValue);
+    if (fallbackValue?.label) {
+      return fallbackValue.label;
     }
     return '';
   };
@@ -125,7 +111,7 @@ const SearchSelect = (props, ref) => {
       const itemOptions = item[optionsPropsName] ?? [];
       if (optionType === 'optGroup' || item.options) {
         return {
-          label: label,
+          label,
           ...resetItem,
           data_title: label,
           title: label,
@@ -142,7 +128,7 @@ const SearchSelect = (props, ref) => {
         key: value ?? `${label?.toString()}-${index}-${nanoid()}`,
         'data-item': item,
         className: `${prefixCls}-option ${itemClassName || ''}`.trim(),
-        label: optionItemRender?.(item) || label
+        label
       };
     });
   };

package/es/field/components/Select/index.d.ts

@@ -1,25 +1,9 @@
 import type { SelectProps } from 'antd';
 import React from 'react';
-import { ProFieldRequestData, ProFieldValueEnumType, RequestOptionsType } from '../../../utils';
-import type { ProFieldLightProps } from '../../PureProField';
+import { ProFieldValueEnumType, RequestOptionsType } from '../../../utils';
+import type { FieldSelectProps } from './types';
+export type { FieldSelectProps };
 type SelectOptionType = Partial<RequestOptionsType>[];
-export type FieldSelectProps<FieldProps = any> = {
-    text: string;
-    /** 值的枚举，如果存在枚举，Search 中会生成 select */
-    valueEnum?: ProFieldValueEnumType;
-    /** 防抖动时间 默认10 单位ms */
-    debounceTime?: number;
-    /** 从服务器读取选项 */
-    request?: ProFieldRequestData;
-    /** 重新触发的时机 */
-    params?: any;
-    /** 组件的全局设置 */
-    fieldProps?: FieldProps;
-    variant?: 'outlined' | 'filled' | 'borderless';
-    id?: string;
-    /** 默认搜素条件 */
-    defaultKeyWords?: string;
-} & ProFieldLightProps;
 /**
  * 把 value 的枚举转化为数组
  *
@@ -33,19 +17,13 @@ export declare const useFieldFetchData: (props: FieldSelectProps & {
 }) => [boolean, SelectOptionType, (keyWord?: string) => void, () => void];
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string;
-    /** 值的枚举，如果存在枚举，Search 中会生成 select */
     valueEnum?: ProFieldValueEnumType | undefined;
-    /** 防抖动时间 默认10 单位ms */
     debounceTime?: number | undefined;
-    /** 从服务器读取选项 */
-    request?: ProFieldRequestData | undefined;
-    /** 重新触发的时机 */
+    request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
-    /** 组件的全局设置 */
     fieldProps?: any;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
-    /** 默认搜素条件 */
     defaultKeyWords?: string | undefined;
-} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
+} & import("../../types").ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Select/index.js

@@ -1,61 +1,14 @@
 import { useControlledState } from '@rc-component/util';
-import { ConfigProvider, Spin } from 'antd';
-import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { ConfigProvider } from 'antd';
+import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
 import useSWR from 'swr';
 import { useIntl } from "../../../provider";
-import { nanoid, objectToMap, proFieldParsingText, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useRefFunction, useStyle } from "../../../utils";
-import LightSelect from "./LightSelect";
-import SearchSelect from "./SearchSelect";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { nanoid, objectToMap, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useRefFunction } from "../../../utils";
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldSelectLightEdit } from "./FieldSelectLightEdit";
+import { FieldSelectRead } from "./FieldSelectRead";
+import { FieldSelectSearchEdit } from "./FieldSelectSearchEdit";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Highlight = ({
-  label,
-  words
-}) => {
-  const {
-    getPrefixCls
-  } = useContext(ConfigProvider.ConfigContext);
-  const lightCls = getPrefixCls('pro-select-item-option-content-light');
-  const optionCls = getPrefixCls('pro-select-item-option-content');
-
-  // css
-  const {
-    wrapSSR
-  } = useStyle('Highlight', token => {
-    return {
-      [`.${lightCls}`]: {
-        color: token.colorPrimary
-      },
-      [`.${optionCls}`]: {
-        flex: 'auto',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
-      }
-    };
-  });
-  const matchKeywordsRE = new RegExp(words.map(word => word.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')).join('|'), 'gi');
-  let matchText = label;
-  const elements = [];
-  while (matchText.length) {
-    const match = matchKeywordsRE.exec(matchText);
-    if (!match) {
-      elements.push(matchText);
-      break;
-    }
-    const start = match.index;
-    const matchLength = match[0].length + start;
-    elements.push(matchText.slice(0, start), /*#__PURE__*/React.createElement('span', {
-      className: lightCls
-    }, matchText.slice(start, matchLength)));
-    matchText = matchText.slice(matchLength);
-  }
-  return wrapSSR( /*#__PURE__*/React.createElement('div', {
-    title: label,
-    className: optionCls
-  }, ...elements));
-};
-
 /**
  * 递归筛选 item
  *
@@ -236,39 +189,35 @@ const FieldSelect = (props, ref) => {
     valueEnum,
     render,
     formItemRender,
-    request,
+    request: _request,
     fieldProps,
     light,
-    proFieldKey,
-    params,
+    proFieldKey: _proFieldKey,
+    params: _params,
     label,
     variant,
     id,
     lightLabel,
-    labelTrigger,
-    ...rest
+    labelTrigger
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef(null);
   const intl = useIntl();
-  const keyWordsRef = useRef('');
   const {
     fieldNames
   } = fieldProps;
-  useEffect(() => {
-    keyWordsRef.current = fieldProps?.searchValue;
-  }, [fieldProps?.searchValue]);
   const [loading, options, fetchData, resetData] = useFieldFetchData(props);
   const {
-    componentSize
+    componentSize: componentSizeFromConfig
   } = ConfigProvider?.useConfig?.() || {
-    componentSize: 'middle'
+    componentSize: undefined
   };
+  const componentSize = componentSizeFromConfig ?? 'middle';
   useImperativeHandle(ref, () => ({
     ...(inputRef.current || {}),
     fetchData: keyWord => fetchData(keyWord)
   }), [fetchData]);
   const optionsValueEnum = useMemo(() => {
-    if (mode !== 'read') return;
+    if (!isProFieldReadMode(mode)) return;
     const {
       label: labelPropsName = 'label',
       value: valuePropsName = 'value',
@@ -290,85 +239,43 @@ const FieldSelect = (props, ref) => {
     };
     return traverseOptions(options);
   }, [fieldNames, mode, options]);
-  if (mode === 'read') {
-    const dom = /*#__PURE__*/_jsx(_Fragment, {
-      children: proFieldParsingText(rest.text, objectToMap(valueEnum || optionsValueEnum))
+  if (isProFieldReadMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldSelectRead, {
+      mode: mode,
+      valueEnum: valueEnum,
+      render: render,
+      fieldProps: fieldProps,
+      optionsValueEnum: optionsValueEnum,
+      ...props
     });
-    if (render) {
-      return render(dom, {
-        mode,
-        ...fieldProps
-      }, dom) ?? null;
-    }
-    return dom;
   }
-  if (mode === 'edit' || mode === 'update') {
-    const renderDom = () => {
-      if (light) {
-        return /*#__PURE__*/_jsx(LightSelect, {
-          id: id,
-          loading: loading,
-          ref: inputRef,
-          allowClear: true,
-          size: componentSize,
-          options: options,
-          label: label,
-          labelVariant: variant,
-          placeholder: intl.getMessage('tableForm.selectPlaceholder', '请选择'),
-          lightLabel: lightLabel,
-          labelTrigger: labelTrigger,
-          fetchData: fetchData,
-          ...fieldProps
-        });
-      }
-      return /*#__PURE__*/_jsx(SearchSelect, {
-        className: rest.className,
-        style: {
-          minWidth: 100,
-          ...rest.style
-        },
-        id: id,
-        loading: loading,
-        ref: inputRef,
-        allowClear: true,
-        defaultSearchValue: props.defaultKeyWords,
-        notFoundContent: loading ? /*#__PURE__*/_jsx(Spin, {
-          size: "small"
-        }) : fieldProps?.notFoundContent,
-        fetchData: keyWord => {
-          keyWordsRef.current = keyWord ?? '';
-          fetchData(keyWord);
-          // 当 keyWord 为 undefined 时，清空 keyWordsRef 以确保 filterOption 不进行过滤
-          if (keyWord === undefined) {
-            keyWordsRef.current = '';
-          }
-        },
-        resetData: resetData,
-        optionItemRender: item => {
-          if (typeof item.label === 'string' && keyWordsRef.current) {
-            return /*#__PURE__*/_jsx(Highlight, {
-              label: item.label,
-              words: [keyWordsRef.current]
-            });
-          }
-          return item.label;
-        },
-        placeholder: intl.getMessage('tableForm.selectPlaceholder', '请选择'),
-        label: label,
-        ...fieldProps,
-        options: options
-      }, "SearchSelect");
+  if (isProFieldEditOrUpdateMode(mode)) {
+    const sharedEditProps = {
+      mode,
+      formItemRender,
+      fieldProps,
+      id,
+      label,
+      variant,
+      intl,
+      loading,
+      options,
+      fetchData,
+      resetData,
+      inputRef,
+      ...props
     };
-    const dom = renderDom();
-    if (formItemRender) {
-      return formItemRender(rest.text, {
-        mode,
-        ...fieldProps,
-        options,
-        loading
-      }, dom) ?? null;
+    if (light) {
+      return /*#__PURE__*/_jsx(FieldSelectLightEdit, {
+        lightLabel: lightLabel,
+        labelTrigger: labelTrigger,
+        ...sharedEditProps,
+        componentSize: componentSize
+      });
     }
-    return dom;
+    return /*#__PURE__*/_jsx(FieldSelectSearchEdit, {
+      ...sharedEditProps
+    });
   }
   return null;
 };

package/es/field/components/Select/types.d.ts

@@ -0,0 +1,19 @@
+import type { ProFieldRequestData, ProFieldValueEnumType } from '../../../utils';
+import type { ProFieldLightProps } from '../../types';
+export type FieldSelectProps<FieldProps = any> = {
+    text: string;
+    /** 值的枚举，如果存在枚举，Search 中会生成 select */
+    valueEnum?: ProFieldValueEnumType;
+    /** 防抖动时间 默认10 单位ms */
+    debounceTime?: number;
+    /** 从服务器读取选项 */
+    request?: ProFieldRequestData;
+    /** 重新触发的时机 */
+    params?: any;
+    /** 组件的全局设置 */
+    fieldProps?: FieldProps;
+    variant?: 'outlined' | 'filled' | 'borderless';
+    id?: string;
+    /** 默认搜素条件 */
+    defaultKeyWords?: string;
+} & ProFieldLightProps;

package/es/field/components/Select/types.js

@@ -0,0 +1 @@
+export {};

package/es/field/components/Slider/FieldSliderEdit.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+export declare function FieldSliderEdit(props: Parameters<ProFieldFC<{
+    text: string;
+}>>[0], ref: React.Ref<unknown>): React.JSX.Element;

package/es/field/components/Slider/FieldSliderEdit.js

@@ -0,0 +1,26 @@
+import { Slider } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldSliderEdit(props, ref) {
+  const {
+    text,
+    mode,
+    formItemRender,
+    fieldProps
+  } = props;
+  const dom = /*#__PURE__*/_jsx(Slider, {
+    ref: ref,
+    ...fieldProps,
+    style: {
+      minWidth: 120,
+      ...fieldProps?.style
+    }
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/Slider/FieldSliderRead.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ProFieldFC } from '../../types';
+export declare function FieldSliderRead(props: Parameters<ProFieldFC<{
+    text: string;
+}>>[0]): import("react").JSX.Element;

package/es/field/components/Slider/FieldSliderRead.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldSliderRead(props) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps
+  } = props;
+  const dom = text;
+  if (render) {
+    return render(text, {
+      mode,
+      ...fieldProps
+    }, /*#__PURE__*/_jsx(_Fragment, {
+      children: dom
+    }));
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: dom
+  });
+}

package/es/field/components/Slider/index.js

@@ -1,49 +1,20 @@
-import { Slider } from 'antd';
 import React from 'react';
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldSliderEdit } from "./FieldSliderEdit";
+import { FieldSliderRead } from "./FieldSliderRead";
+
 /**
  * 评分组件
- *
- * @param
  */
-const FieldSlider = ({
-  text,
-  mode,
-  render,
-  formItemRender,
-  fieldProps
-}, ref) => {
-  if (mode === 'read') {
-    const dom = text;
-    if (render) {
-      return render(text, {
-        mode,
-        ...fieldProps
-      }, /*#__PURE__*/_jsx(_Fragment, {
-        children: dom
-      }));
-    }
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: dom
-    });
+const FieldSlider = (props, ref) => {
+  const {
+    mode
+  } = props;
+  if (isProFieldReadMode(mode)) {
+    return FieldSliderRead(props);
   }
-  if (mode === 'edit' || mode === 'update') {
-    const dom = /*#__PURE__*/_jsx(Slider, {
-      ref: ref,
-      ...fieldProps,
-      style: {
-        minWidth: 120,
-        ...fieldProps?.style
-      }
-    });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+  if (isProFieldEditOrUpdateMode(mode)) {
+    return FieldSliderEdit(props, ref);
   }
   return null;
 };

package/es/field/components/Switch/FieldSwitchEdit.d.ts

@@ -0,0 +1,12 @@
+import type { SwitchProps } from 'antd';
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: boolean;
+    fieldProps?: SwitchProps;
+    variant?: 'outlined' | 'borderless' | 'filled';
+}>>[0] & {
+    variant: 'outlined' | 'borderless' | 'filled' | undefined;
+};
+export declare function FieldSwitchEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/Switch/FieldSwitchEdit.js

@@ -0,0 +1,24 @@
+import { omit } from '@rc-component/util';
+import { Switch } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldSwitchEdit(props, ref) {
+  const {
+    text,
+    mode,
+    formItemRender,
+    fieldProps
+  } = props;
+  const editDom = /*#__PURE__*/_jsx(Switch, {
+    ref: ref,
+    ...omit(fieldProps || {}, ['value']),
+    checked: fieldProps?.checked ?? fieldProps?.value
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, editDom);
+  }
+  return editDom;
+}

package/es/field/components/Switch/FieldSwitchLightEdit.d.ts

@@ -0,0 +1,12 @@
+import type { SwitchProps } from 'antd';
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: boolean;
+    fieldProps?: SwitchProps;
+    variant?: 'outlined' | 'borderless' | 'filled';
+}>>[0] & {
+    variant: 'outlined' | 'borderless' | 'filled' | undefined;
+};
+export declare function FieldSwitchLightEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/Switch/FieldSwitchLightEdit.js

@@ -0,0 +1,41 @@
+import { omit } from '@rc-component/util';
+import { Switch } from 'antd';
+import React from 'react';
+import { FieldLabel } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldSwitchLightEdit(props, ref) {
+  const {
+    text,
+    mode,
+    label,
+    formItemRender,
+    fieldProps,
+    variant
+  } = props;
+  const editDom = /*#__PURE__*/_jsx(Switch, {
+    ref: ref,
+    size: "small",
+    ...omit(fieldProps || {}, ['value']),
+    checked: fieldProps?.checked ?? fieldProps?.value
+  });
+  const dom = /*#__PURE__*/_jsx(FieldLabel, {
+    label: label,
+    disabled: fieldProps?.disabled,
+    variant: variant,
+    downIcon: false,
+    value: /*#__PURE__*/_jsx("div", {
+      style: {
+        paddingInlineStart: 8
+      },
+      children: editDom
+    }),
+    allowClear: false
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/Switch/FieldSwitchRead.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled';
+}>>[0] & {
+    readLabel: React.ReactNode;
+};
+export declare function FieldSwitchRead(props: Props): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+export {};

package/es/field/components/Switch/FieldSwitchRead.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldSwitchRead(props) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps,
+    readLabel
+  } = props;
+  if (render) {
+    return render(text, {
+      mode,
+      ...fieldProps
+    }, /*#__PURE__*/_jsx(_Fragment, {
+      children: readLabel
+    }));
+  }
+  return readLabel ?? '-';
+}

package/es/field/components/Switch/index.d.ts

@@ -3,6 +3,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: boolean;
     fieldProps?: SwitchProps | undefined;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
 } & React.RefAttributes<any>>;
 export default _default;