@ant-design/pro-components 3.0.2-0 → 3.1.1-0

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

@@ -1,11 +1,5 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["optionItemRender", "mode", "onSearch", "onFocus", "onChange", "autoClearSearchValue", "searchOnFocus", "resetAfterSelect", "fetchDataOnSearch", "optionFilterProp", "optionLabelProp", "className", "disabled", "options", "fetchData", "resetData", "prefixCls", "onClear", "searchValue", "showSearch", "fieldNames", "defaultSearchValue", "preserveOriginalLabel"],
-  _excluded2 = ["className", "optionType"];
 import { ConfigProvider, Select } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { nanoid } from "../../../../utils";
 
@@ -15,117 +9,147 @@ import { nanoid } from "../../../../utils";
 
 /** 可能单选，可能多选 */
 import { jsx as _jsx } from "react/jsx-runtime";
-var SearchSelect = function SearchSelect(props, ref) {
-  var optionItemRender = props.optionItemRender,
-    mode = props.mode,
-    onSearch = props.onSearch,
-    _onFocus = props.onFocus,
-    _onChange = props.onChange,
-    _props$autoClearSearc = props.autoClearSearchValue,
-    autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
-    _props$searchOnFocus = props.searchOnFocus,
-    searchOnFocus = _props$searchOnFocus === void 0 ? false : _props$searchOnFocus,
-    _props$resetAfterSele = props.resetAfterSelect,
-    resetAfterSelect = _props$resetAfterSele === void 0 ? false : _props$resetAfterSele,
-    _props$fetchDataOnSea = props.fetchDataOnSearch,
-    fetchDataOnSearch = _props$fetchDataOnSea === void 0 ? true : _props$fetchDataOnSea,
-    _props$optionFilterPr = props.optionFilterProp,
-    optionFilterProp = _props$optionFilterPr === void 0 ? 'label' : _props$optionFilterPr,
-    _props$optionLabelPro = props.optionLabelProp,
-    optionLabelProp = _props$optionLabelPro === void 0 ? 'label' : _props$optionLabelPro,
-    className = props.className,
-    disabled = props.disabled,
-    options = props.options,
-    fetchData = props.fetchData,
-    resetData = props.resetData,
-    customizePrefixCls = props.prefixCls,
-    _onClear = props.onClear,
-    propsSearchValue = props.searchValue,
-    showSearch = props.showSearch,
-    fieldNames = props.fieldNames,
-    defaultSearchValue = props.defaultSearchValue,
-    _props$preserveOrigin = props.preserveOriginalLabel,
-    preserveOriginalLabel = _props$preserveOrigin === void 0 ? false : _props$preserveOrigin,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var _ref = fieldNames || {},
-    _ref$label = _ref.label,
-    labelPropsName = _ref$label === void 0 ? 'label' : _ref$label,
-    _ref$value = _ref.value,
-    valuePropsName = _ref$value === void 0 ? 'value' : _ref$value,
-    _ref$options = _ref.options,
-    optionsPropsName = _ref$options === void 0 ? 'options' : _ref$options;
-  var _useState = useState(propsSearchValue !== null && propsSearchValue !== void 0 ? propsSearchValue : defaultSearchValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  var selectRef = useRef();
-  useImperativeHandle(ref, function () {
-    return selectRef.current;
-  });
-  useEffect(function () {
+const SearchSelect = (props, ref) => {
+  const {
+    optionItemRender,
+    mode,
+    onSearch,
+    onFocus,
+    onChange,
+    autoClearSearchValue = true,
+    searchOnFocus = false,
+    resetAfterSelect = false,
+    fetchDataOnSearch = true,
+    optionFilterProp = 'label',
+    optionLabelProp = 'label',
+    className,
+    disabled,
+    options,
+    fetchData,
+    resetData,
+    prefixCls: customizePrefixCls,
+    onClear,
+    searchValue: propsSearchValue,
+    showSearch,
+    fieldNames,
+    defaultSearchValue,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    preserveOriginalLabel: _preserveOriginalLabel = false,
+    ...restProps
+  } = props;
+  const {
+    label: labelPropsName = 'label',
+    value: valuePropsName = 'value',
+    options: optionsPropsName = 'options'
+  } = fieldNames || {};
+  const [searchValue, setSearchValue] = useState(propsSearchValue ?? defaultSearchValue);
+  const selectRef = useRef();
+  useImperativeHandle(ref, () => selectRef.current);
+  useEffect(() => {
     if (restProps.autoFocus) {
-      var _selectRef$current;
-      selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || _selectRef$current.focus();
+      selectRef?.current?.focus();
     }
   }, [restProps.autoFocus]);
-  useEffect(function () {
+  useEffect(() => {
     setSearchValue(propsSearchValue);
   }, [propsSearchValue]);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-filed-search-select', customizePrefixCls);
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-filed-search-select', customizePrefixCls);
 
   // 兼容 renderXXX API。
 
-  var classString = classNames(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled));
-  var getMergeValue = function getMergeValue(value, option) {
+  const classString = clsx(prefixCls, className, {
+    [`${prefixCls}-disabled`]: disabled
+  });
+
+  // 获取原始 label 的辅助函数
+  const getOriginalLabel = (item, fallbackValue) => {
+    // 优先使用 dataItem.label（原始字符串），避免使用 value.label（可能是 optionItemRender 渲染的组件）
+    if (item && typeof item.label === 'string' && item.label) {
+      return item.label;
+    }
+    if (item && item.text && typeof item.text === 'string') {
+      return item.text;
+    }
+    if (item && item.label) {
+      return String(item.label);
+    }
+    if (item && 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);
+    }
+    return '';
+  };
+  const getMergeValue = (value, option) => {
     if (Array.isArray(value) && Array.isArray(option) && value.length > 0) {
       // 多选情况且用户有选择
 
-      return value.map(function (item, index) {
-        var optionItem = option === null || option === void 0 ? void 0 : option[index];
-        var dataItem = optionItem === null || optionItem === void 0 ? void 0 : optionItem['data-item'];
-        return _objectSpread(_objectSpread(_objectSpread({}, dataItem || {}), item), {}, {
-          label: preserveOriginalLabel && dataItem ? dataItem.label : item.label
-        });
+      return value.map((item, index) => {
+        const optionItem = option?.[index];
+        const dataItem = optionItem?.['data-item'];
+        const originalLabel = getOriginalLabel(dataItem, item);
+        return {
+          ...(dataItem || {}),
+          ...item,
+          label: originalLabel || item.label
+        };
       });
     }
     return [];
   };
-  var genOptions = function genOptions(mapOptions) {
-    return mapOptions.map(function (item, index) {
-      var _item$optionsPropsNam;
-      var _ref2 = item,
-        itemClassName = _ref2.className,
-        optionType = _ref2.optionType,
-        resetItem = _objectWithoutProperties(_ref2, _excluded2);
-      var label = item[labelPropsName];
-      var value = item[valuePropsName];
-      var itemOptions = (_item$optionsPropsNam = item[optionsPropsName]) !== null && _item$optionsPropsNam !== void 0 ? _item$optionsPropsNam : [];
+  const genOptions = mapOptions => {
+    return mapOptions.map((item, index) => {
+      const {
+        className: itemClassName,
+        optionType,
+        ...resetItem
+      } = item;
+
+      // 获取 label，优先使用 labelPropsName，如果没有则使用 text（valueEnum 的情况）
+      const label = item[labelPropsName] ?? item.text;
+      const value = item[valuePropsName];
+      const itemOptions = item[optionsPropsName] ?? [];
       if (optionType === 'optGroup' || item.options) {
-        return _objectSpread(_objectSpread({
-          label: label
-        }, resetItem), {}, {
+        return {
+          label: label,
+          ...resetItem,
           data_title: label,
           title: label,
-          key: value !== null && value !== void 0 ? value : "".concat(label === null || label === void 0 ? void 0 : label.toString(), "-").concat(index, "-").concat(nanoid()),
+          key: value ?? `${label?.toString()}-${index}-${nanoid()}`,
           // 防止因key相同导致虚拟滚动出问题
           children: genOptions(itemOptions)
-        });
+        };
       }
-      return _objectSpread(_objectSpread({
-        title: label
-      }, resetItem), {}, {
+      return {
+        title: label,
+        ...resetItem,
         data_title: label,
-        value: value !== null && value !== void 0 ? value : index,
-        key: value !== null && value !== void 0 ? value : "".concat(label === null || label === void 0 ? void 0 : label.toString(), "-").concat(index, "-").concat(nanoid()),
+        value: value ?? index,
+        key: value ?? `${label?.toString()}-${index}-${nanoid()}`,
         'data-item': item,
-        className: "".concat(prefixCls, "-option ").concat(itemClassName || '').trim(),
-        label: (optionItemRender === null || optionItemRender === void 0 ? void 0 : optionItemRender(item)) || label
-      });
+        className: `${prefixCls}-option ${itemClassName || ''}`.trim(),
+        label: optionItemRender?.(item) || label
+      };
     });
   };
-  return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Select, {
     ref: selectRef,
     className: classString,
     allowClear: true,
@@ -136,37 +160,44 @@ var SearchSelect = function SearchSelect(props, ref) {
     searchValue: searchValue,
     optionFilterProp: optionFilterProp,
     optionLabelProp: optionLabelProp,
-    onClear: function onClear() {
-      _onClear === null || _onClear === void 0 || _onClear();
+    onClear: () => {
+      onClear?.();
       fetchData(undefined);
       if (showSearch) {
-        setSearchValue(undefined);
+        onSearch?.('');
+        setSearchValue('');
+      }
+    },
+    ...restProps,
+    filterOption: restProps.filterOption == false ? false : (inputValue, option) => {
+      // 当 inputValue 为空或 searchValue 为空时，显示所有选项
+      // 这样可以确保 searchOnFocus 时能够显示所有选项
+      const effectiveSearchValue = searchValue === '' ? '' : inputValue || searchValue;
+      if (!effectiveSearchValue) {
+        return true;
       }
-    }
-  }, restProps), {}, {
-    filterOption: restProps.filterOption == false ? false : function (inputValue, option) {
-      var _option$data_title, _option$optionFilterP;
       if (restProps.filterOption && typeof restProps.filterOption === 'function') {
-        return restProps.filterOption(inputValue, _objectSpread(_objectSpread({}, option), {}, {
-          label: option === null || option === void 0 ? void 0 : option.data_title
-        }));
+        return restProps.filterOption(effectiveSearchValue, {
+          ...option,
+          label: option?.data_title
+        });
       }
-      return !!(option !== null && option !== void 0 && (_option$data_title = option.data_title) !== null && _option$data_title !== void 0 && _option$data_title.toString().toLowerCase().includes(inputValue.toLowerCase()) || option !== null && option !== void 0 && (_option$optionFilterP = option[optionFilterProp]) !== null && _option$optionFilterP !== void 0 && _option$optionFilterP.toString().toLowerCase().includes(inputValue.toLowerCase()));
+      return !!(option?.data_title?.toString().toLowerCase().includes(effectiveSearchValue.toLowerCase()) || option?.[optionFilterProp]?.toString().toLowerCase().includes(effectiveSearchValue.toLowerCase()));
     } // 这里使用pro-components的过滤逻辑
     ,
-    onSearch: showSearch ? function (value) {
+    onSearch: showSearch ? value => {
       if (fetchDataOnSearch) {
         fetchData(value);
       }
-      onSearch === null || onSearch === void 0 || onSearch(value);
+      onSearch?.(value);
       setSearchValue(value);
     } : undefined,
-    onChange: function onChange(value, optionList) {
+    onChange: (value, optionList, ...rest) => {
       // 将搜索框置空 和 antd 行为保持一致
       if (showSearch && autoClearSearchValue) {
         fetchData(undefined);
-        onSearch === null || onSearch === void 0 || onSearch('');
-        setSearchValue(undefined);
+        onSearch?.('');
+        setSearchValue('');
       } else if (showSearch && !autoClearSearchValue) {
         // 当 autoClearSearchValue 为 false 时，保持搜索值不变
         // 但是需要确保我们的状态与 Ant Design 的内部状态同步
@@ -177,44 +208,73 @@ var SearchSelect = function SearchSelect(props, ref) {
           // 我们不需要做任何特殊处理，让 Ant Design 自然处理
         }
       }
-      for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-        rest[_key - 2] = arguments[_key];
-      }
       if (!props.labelInValue) {
-        _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [value, optionList].concat(rest));
+        onChange?.(value, optionList, ...rest);
         return;
       }
       if (mode !== 'multiple' && !Array.isArray(optionList)) {
         // 单选情况且用户选择了选项
-        var dataItem = optionList && optionList['data-item'];
+        let dataItem = optionList && optionList['data-item'];
+
+        // 如果 dataItem 不存在，尝试从 options 中查找对应的原始数据
+        let foundDataItem = dataItem;
+        if (!foundDataItem && value && options) {
+          const optionValue = value[valuePropsName] ?? value.value;
+          const findDataItem = opts => {
+            for (const opt of opts) {
+              const optValue = opt[valuePropsName] ?? opt.value;
+              if (optValue === optionValue) {
+                return opt;
+              }
+              if (opt[optionsPropsName] || opt.options) {
+                const found = findDataItem(opt[optionsPropsName] || opt.options || []);
+                if (found) return found;
+              }
+            }
+            return null;
+          };
+          foundDataItem = findDataItem(options);
+        }
+
         // 如果value值为空则是清空时产生的回调,直接传值就可以了
-        if (!value || !dataItem) {
-          var changedValue = value ? _objectSpread(_objectSpread({}, value), {}, {
-            // 这里有一种情况，如果用户使用了 request和labelInValue，保存之后，刷新页面，正常回显，但是再次添加会出现 label 丢失的情况。所以需要兼容
-            label: preserveOriginalLabel && dataItem ? (dataItem === null || dataItem === void 0 ? void 0 : dataItem.label) || value.label : value.label
-          }) : value;
-          _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [changedValue, optionList].concat(rest));
+        if (!value || !foundDataItem) {
+          const originalLabel = getOriginalLabel(foundDataItem, value);
+          const changedValue = value ? {
+            ...value,
+            label: originalLabel
+          } : value;
+          onChange?.(changedValue, optionList, ...rest);
         } else {
-          _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [_objectSpread(_objectSpread(_objectSpread({}, value), dataItem), {}, {
-            label: preserveOriginalLabel && dataItem ? dataItem.label : value.label
-          }), optionList].concat(rest));
+          // 确保使用 dataItem.label（原始字符串），避免使用 value.label（可能是 optionItemRender 渲染的组件）
+          const originalLabel = getOriginalLabel(foundDataItem, value);
+          onChange?.({
+            ...value,
+            ...foundDataItem,
+            label: originalLabel
+          }, optionList, ...rest);
         }
         return;
       }
       // 合并值
-      var mergeValue = getMergeValue(value, optionList);
-      _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [mergeValue, optionList].concat(rest));
+      const mergeValue = getMergeValue(value, optionList);
+      onChange?.(mergeValue, optionList, ...rest);
 
       // 将搜索结果置空，重新搜索
       if (resetAfterSelect) resetData();
     },
-    onFocus: function onFocus(e) {
+    onFocus: e => {
       if (searchOnFocus) {
-        fetchData(searchValue);
+        // 当 searchOnFocus 为 true 时，应该清空搜索关键词以显示所有选项
+        fetchData(undefined);
+        // 同时清空搜索值
+        if (showSearch) {
+          onSearch?.('');
+          setSearchValue('');
+        }
       }
-      _onFocus === null || _onFocus === void 0 || _onFocus(e);
+      onFocus?.(e);
     },
     options: genOptions(options || [])
-  }));
+  });
 };
 export default /*#__PURE__*/React.forwardRef(SearchSelect);

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

@@ -1,5 +1,4 @@
 import type { SelectProps } from 'antd';
-import type { ReactNode } from 'react';
 import React from 'react';
 import { ProFieldRequestData, ProFieldValueEnumType, RequestOptionsType } from '../../../utils';
 import type { ProFieldLightProps } from '../../PureProField';
@@ -18,7 +17,6 @@ export type FieldSelectProps<FieldProps = any> = {
     fieldProps?: FieldProps;
     variant?: 'outlined' | 'filled' | 'borderless';
     id?: string;
-    children?: ReactNode;
     /** 默认搜素条件 */
     defaultKeyWords?: string;
 } & ProFieldLightProps;
@@ -45,10 +43,9 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     params?: any;
     /** 组件的全局设置 */
     fieldProps?: any;
-    variant?: "filled" | "outlined" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
-    children?: ReactNode;
     /** 默认搜素条件 */
     defaultKeyWords?: string | undefined;
-} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "className" | "style" | "fieldNames"> & React.RefAttributes<any>>;
+} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
 export default _default;