@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -1,253 +1,220 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/field/components/Select/SearchSelect/index.tsx
-import { ConfigProvider, Select } from "antd";
-import classNames from "classnames";
-import React, {
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from "react";
+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 React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { nanoid } from "../../../../utils";
-var SearchSelect = (props, ref) => {
-  const _a = props, {
-    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,
-    preserveOriginalLabel = false
-  } = _a, restProps = __objRest(_a, [
-    "optionItemRender",
-    "mode",
-    "onSearch",
-    "onFocus",
-    "onChange",
-    "autoClearSearchValue",
-    "searchOnFocus",
-    "resetAfterSelect",
-    "fetchDataOnSearch",
-    "optionFilterProp",
-    "optionLabelProp",
-    "className",
-    "disabled",
-    "options",
-    "fetchData",
-    "resetData",
-    "prefixCls",
-    "onClear",
-    "searchValue",
-    "showSearch",
-    "fieldNames",
-    "defaultSearchValue",
-    "preserveOriginalLabel"
-  ]);
-  const {
-    label: labelPropsName = "label",
-    value: valuePropsName = "value",
-    options: optionsPropsName = "options"
-  } = fieldNames || {};
-  const [searchValue, setSearchValue] = useState(
-    propsSearchValue != null ? propsSearchValue : defaultSearchValue
-  );
-  const selectRef = useRef();
-  useImperativeHandle(ref, () => selectRef.current);
-  useEffect(() => {
-    var _a2;
+
+// 支持 key, value, label，兼容 UserSearch 中只填写了 key 的情况。
+
+/** 用户扩展数据后的值类型 */
+
+/** 可能单选，可能多选 */
+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 () {
     if (restProps.autoFocus) {
-      (_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.focus();
+      var _selectRef$current;
+      selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || _selectRef$current.focus();
     }
   }, [restProps.autoFocus]);
-  useEffect(() => {
+  useEffect(function () {
     setSearchValue(propsSearchValue);
   }, [propsSearchValue]);
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("pro-filed-search-select", customizePrefixCls);
-  const classString = classNames(prefixCls, className, {
-    [`${prefixCls}-disabled`]: disabled
-  });
-  const getMergeValue = (value, option) => {
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var 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) {
     if (Array.isArray(value) && Array.isArray(option) && value.length > 0) {
-      return value.map((item, index) => {
-        const optionItem = option == null ? void 0 : option[index];
-        const dataItem = optionItem == null ? void 0 : optionItem["data-item"];
-        return __spreadProps(__spreadValues(__spreadValues({}, dataItem || {}), item), {
+      // 多选情况且用户有选择
+
+      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 [];
   };
-  const genOptions = (mapOptions) => {
-    return mapOptions.map((item, index) => {
-      var _b;
-      const _a2 = item, {
-        className: itemClassName,
-        optionType
-      } = _a2, resetItem = __objRest(_a2, [
-        "className",
-        "optionType"
-      ]);
-      const label = item[labelPropsName];
-      const value = item[valuePropsName];
-      const itemOptions = (_b = item[optionsPropsName]) != null ? _b : [];
-      if (optionType === "optGroup" || item.options) {
-        return __spreadProps(__spreadValues({
-          label
-        }, resetItem), {
+  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 : [];
+      if (optionType === 'optGroup' || item.options) {
+        return _objectSpread(_objectSpread({
+          label: label
+        }, resetItem), {}, {
           data_title: label,
           title: label,
-          key: value != null ? value : `${label == null ? void 0 : label.toString()}-${index}-${nanoid()}`,
+          key: value !== null && value !== void 0 ? value : "".concat(label === null || label === void 0 ? void 0 : label.toString(), "-").concat(index, "-").concat(nanoid()),
           // 防止因key相同导致虚拟滚动出问题
           children: genOptions(itemOptions)
         });
       }
-      return __spreadProps(__spreadValues({
+      return _objectSpread(_objectSpread({
         title: label
-      }, resetItem), {
+      }, resetItem), {}, {
         data_title: label,
-        value: value != null ? value : index,
-        key: value != null ? value : `${label == null ? void 0 : label.toString()}-${index}-${nanoid()}`,
-        "data-item": item,
-        className: `${prefixCls}-option ${itemClassName || ""}`.trim(),
-        label: (optionItemRender == null ? void 0 : optionItemRender(item)) || 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()),
+        'data-item': item,
+        className: "".concat(prefixCls, "-option ").concat(itemClassName || '').trim(),
+        label: (optionItemRender === null || optionItemRender === void 0 ? void 0 : optionItemRender(item)) || label
       });
     });
   };
-  return /* @__PURE__ */ React.createElement(
-    Select,
-    __spreadProps(__spreadValues({
-      ref: selectRef,
-      className: classString,
-      allowClear: true,
-      autoClearSearchValue,
-      disabled,
-      mode,
-      showSearch,
-      searchValue,
-      optionFilterProp,
-      optionLabelProp,
-      onClear: () => {
-        onClear == null ? void 0 : onClear();
-        fetchData(void 0);
-        if (showSearch) {
-          setSearchValue(void 0);
-        }
+  return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+    ref: selectRef,
+    className: classString,
+    allowClear: true,
+    autoClearSearchValue: autoClearSearchValue,
+    disabled: disabled,
+    mode: mode,
+    showSearch: showSearch,
+    searchValue: searchValue,
+    optionFilterProp: optionFilterProp,
+    optionLabelProp: optionLabelProp,
+    onClear: function onClear() {
+      _onClear === null || _onClear === void 0 || _onClear();
+      fetchData(undefined);
+      if (showSearch) {
+        setSearchValue(undefined);
       }
-    }, restProps), {
-      filterOption: restProps.filterOption == false ? false : (inputValue, option) => {
-        var _a2, _b;
-        if (restProps.filterOption && typeof restProps.filterOption === "function") {
-          return restProps.filterOption(inputValue, __spreadProps(__spreadValues({}, option), {
-            label: option == null ? void 0 : option.data_title
-          }));
-        }
-        return !!(((_a2 = option == null ? void 0 : option.data_title) == null ? void 0 : _a2.toString().toLowerCase().includes(inputValue.toLowerCase())) || ((_b = option == null ? void 0 : option[optionFilterProp]) == null ? void 0 : _b.toString().toLowerCase().includes(inputValue.toLowerCase())));
-      },
-      onSearch: showSearch ? (value) => {
-        if (fetchDataOnSearch) {
-          fetchData(value);
-        }
-        onSearch == null ? void 0 : onSearch(value);
-        setSearchValue(value);
-      } : void 0,
-      onChange: (value, optionList, ...rest) => {
-        if (showSearch && autoClearSearchValue) {
-          fetchData(void 0);
-          onSearch == null ? void 0 : onSearch("");
-          setSearchValue(void 0);
-        } else if (showSearch && !autoClearSearchValue) {
-          if (mode === "multiple") {
-          }
-        }
-        if (!props.labelInValue) {
-          onChange == null ? void 0 : onChange(value, optionList, ...rest);
-          return;
-        }
-        if (mode !== "multiple" && !Array.isArray(optionList)) {
-          const dataItem = optionList && optionList["data-item"];
-          if (!value || !dataItem) {
-            const changedValue = value ? __spreadProps(__spreadValues({}, value), {
-              // 这里有一种情况，如果用户使用了 request和labelInValue，保存之后，刷新页面，正常回显，但是再次添加会出现 label 丢失的情况。所以需要兼容
-              label: preserveOriginalLabel && dataItem ? (dataItem == null ? void 0 : dataItem.label) || value.label : value.label
-            }) : value;
-            onChange == null ? void 0 : onChange(changedValue, optionList, ...rest);
-          } else {
-            onChange == null ? void 0 : onChange(
-              __spreadProps(__spreadValues(__spreadValues({}, value), dataItem), {
-                label: preserveOriginalLabel && dataItem ? dataItem.label : value.label
-              }),
-              optionList,
-              ...rest
-            );
-          }
-          return;
+    }
+  }, 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 !!(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()));
+    } // 这里使用pro-components的过滤逻辑
+    ,
+    onSearch: showSearch ? function (value) {
+      if (fetchDataOnSearch) {
+        fetchData(value);
+      }
+      onSearch === null || onSearch === void 0 || onSearch(value);
+      setSearchValue(value);
+    } : undefined,
+    onChange: function onChange(value, optionList) {
+      // 将搜索框置空 和 antd 行为保持一致
+      if (showSearch && autoClearSearchValue) {
+        fetchData(undefined);
+        onSearch === null || onSearch === void 0 || onSearch('');
+        setSearchValue(undefined);
+      } else if (showSearch && !autoClearSearchValue) {
+        // 当 autoClearSearchValue 为 false 时，保持搜索值不变
+        // 但是需要确保我们的状态与 Ant Design 的内部状态同步
+        // 在 multiple 模式下，Ant Design 可能会自动清除搜索值，我们需要重新设置它
+        if (mode === 'multiple') {
+          // 在 multiple 模式下，即使 autoClearSearchValue 为 false，
+          // Ant Design 仍可能会清除搜索值，这是正常行为
+          // 我们不需要做任何特殊处理，让 Ant Design 自然处理
         }
-        const mergeValue = getMergeValue(value, optionList);
-        onChange == null ? void 0 : onChange(mergeValue, optionList, ...rest);
-        if (resetAfterSelect)
-          resetData();
-      },
-      onFocus: (e) => {
-        if (searchOnFocus) {
-          fetchData(searchValue);
+      }
+      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));
+        return;
+      }
+      if (mode !== 'multiple' && !Array.isArray(optionList)) {
+        // 单选情况且用户选择了选项
+        var dataItem = optionList && optionList['data-item'];
+        // 如果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));
+        } 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));
         }
-        onFocus == null ? void 0 : onFocus(e);
-      },
-      options: genOptions(options || [])
-    })
-  );
-};
-var SearchSelect_default = React.forwardRef(SearchSelect);
-export {
-  SearchSelect_default as default
+        return;
+      }
+      // 合并值
+      var mergeValue = getMergeValue(value, optionList);
+      _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [mergeValue, optionList].concat(rest));
+
+      // 将搜索结果置空，重新搜索
+      if (resetAfterSelect) resetData();
+    },
+    onFocus: function onFocus(e) {
+      if (searchOnFocus) {
+        fetchData(searchValue);
+      }
+      _onFocus === null || _onFocus === void 0 || _onFocus(e);
+    },
+    options: genOptions(options || [])
+  }));
 };
+export default /*#__PURE__*/React.forwardRef(SearchSelect);

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

@@ -45,10 +45,10 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     params?: any;
     /** 组件的全局设置 */
     fieldProps?: any;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
     children?: ReactNode;
     /** 默认搜素条件 */
     defaultKeyWords?: string | undefined;
-} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
+} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "className" | "style" | "fieldNames"> & React.RefAttributes<any>>;
 export default _default;