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

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

@@ -1,272 +1,226 @@
-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/LightSelect/index.tsx
-import { SearchOutlined } from "@ant-design/icons";
-import { ConfigProvider, Input, Select } from "antd";
-import classNames from "classnames";
-import toArray from "rc-util/lib/Children/toArray";
-import React, { useContext, useMemo, 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";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["label", "prefixCls", "onChange", "value", "mode", "children", "defaultValue", "size", "showSearch", "disabled", "style", "className", "options", "onSearch", "allowClear", "labelInValue", "fieldNames", "lightLabel", "labelTrigger", "optionFilterProp", "optionLabelProp", "valueMaxLength", "fetchDataOnSearch", "fetchData", "variant"];
+import { SearchOutlined } from '@ant-design/icons';
+import { toArray } from '@rc-component/util';
+import { ConfigProvider, Input, Select } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useMemo, useState } from 'react';
 import { FieldLabel, useStyle } from "../../../../utils";
-var getValueOrLabel = (valueMap, v) => {
-  if (typeof v !== "object") {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 如果有 label 就优先使用 label
+ *
+ * @param valueMap
+ * @param v
+ */
+var getValueOrLabel = function getValueOrLabel(valueMap, v) {
+  if (_typeof(v) !== 'object') {
     return valueMap[v] || v;
   }
-  return valueMap[v == null ? void 0 : v.value] || v.label;
+  return valueMap[v === null || v === void 0 ? void 0 : v.value] || v.label;
 };
-var LightSelect = (props, ref) => {
-  const _a = props, {
-    label,
-    prefixCls: customizePrefixCls,
-    onChange,
-    value,
-    mode,
-    children,
-    defaultValue,
-    size,
-    showSearch,
-    disabled,
-    style,
-    className,
-    options,
-    onSearch,
-    allowClear,
-    labelInValue,
-    fieldNames,
-    lightLabel,
-    labelTrigger,
-    optionFilterProp,
-    optionLabelProp = "",
-    valueMaxLength = 41,
-    fetchDataOnSearch = false,
-    fetchData,
-    variant = "outlined"
-  } = _a, restProps = __objRest(_a, [
-    "label",
-    "prefixCls",
-    "onChange",
-    "value",
-    "mode",
-    "children",
-    "defaultValue",
-    "size",
-    "showSearch",
-    "disabled",
-    "style",
-    "className",
-    "options",
-    "onSearch",
-    "allowClear",
-    "labelInValue",
-    "fieldNames",
-    "lightLabel",
-    "labelTrigger",
-    "optionFilterProp",
-    "optionLabelProp",
-    "valueMaxLength",
-    "fetchDataOnSearch",
-    "fetchData",
-    "variant"
-  ]);
-  const { placeholder = label } = props;
-  const { label: labelPropsName = "label", value: valuePropsName = "value" } = fieldNames || {};
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("pro-field-select-light-select");
-  const [open, setOpen] = useState(false);
-  const [keyword, setKeyword] = useState("");
-  const { wrapSSR, hashId } = useStyle("LightSelect", (token) => {
-    return {
-      [`.${prefixCls}`]: {
-        [`${token.antCls}-select`]: {
-          position: "absolute",
-          width: "153px",
-          height: "28px",
-          visibility: "hidden",
-          "&-selector": {
-            height: 28
-          }
-        },
-        [`&.${prefixCls}-searchable`]: {
-          [`${token.antCls}-select`]: {
-            width: "200px",
-            "&-selector": {
-              height: 28
-            }
-          }
+export var LightSelect = function LightSelect(props, ref) {
+  var label = props.label,
+    customizePrefixCls = props.prefixCls,
+    _onChange = props.onChange,
+    value = props.value,
+    mode = props.mode,
+    children = props.children,
+    defaultValue = props.defaultValue,
+    size = props.size,
+    showSearch = props.showSearch,
+    disabled = props.disabled,
+    style = props.style,
+    className = props.className,
+    options = props.options,
+    onSearch = props.onSearch,
+    allowClear = props.allowClear,
+    labelInValue = props.labelInValue,
+    fieldNames = props.fieldNames,
+    lightLabel = props.lightLabel,
+    labelTrigger = props.labelTrigger,
+    optionFilterProp = props.optionFilterProp,
+    _props$optionLabelPro = props.optionLabelProp,
+    optionLabelProp = _props$optionLabelPro === void 0 ? '' : _props$optionLabelPro,
+    _props$valueMaxLength = props.valueMaxLength,
+    valueMaxLength = _props$valueMaxLength === void 0 ? 41 : _props$valueMaxLength,
+    _props$fetchDataOnSea = props.fetchDataOnSearch,
+    fetchDataOnSearch = _props$fetchDataOnSea === void 0 ? false : _props$fetchDataOnSea,
+    fetchData = props.fetchData,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? label : _props$placeholder;
+  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;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('pro-field-select-light-select');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    keyword = _useState4[0],
+    setKeyword = _useState4[1];
+
+  // css
+  var _useStyle = useStyle('LightSelect', function (token) {
+      return _defineProperty({}, ".".concat(prefixCls), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-select"), {
+        position: 'absolute',
+        width: '153px',
+        height: '28px',
+        visibility: 'hidden',
+        '&-selector': {
+          height: 28
         }
-      }
-    };
-  });
-  const valueMap = useMemo(() => {
-    const values = {};
-    options == null ? void 0 : options.forEach((item) => {
-      const optionLabel = item[optionLabelProp] || item[labelPropsName];
-      const optionValue = item[valuePropsName];
+      }), "&.".concat(prefixCls, "-searchable"), _defineProperty({}, "".concat(token.antCls, "-select"), {
+        width: '200px',
+        '&-selector': {
+          height: 28
+        }
+      })));
+    }),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var valueMap = useMemo(function () {
+    var values = {};
+    options === null || options === void 0 || options.forEach(function (item) {
+      var optionLabel = item[optionLabelProp] || item[labelPropsName];
+      var optionValue = item[valuePropsName];
       values[optionValue] = optionLabel || optionValue;
     });
     return values;
   }, [labelPropsName, options, valuePropsName, optionLabelProp]);
-  const mergeOpen = useMemo(() => {
-    if (Reflect.has(restProps, "open")) {
-      return restProps == null ? void 0 : restProps.open;
+
+  // 修复用户在使用ProFormSelect组件时，在fieldProps中使用open属性，不生效。
+  // ProComponents文档中写到"与select相同，且fieldProps同antd组件中的props"描述方案不相符
+  var mergeOpen = useMemo(function () {
+    if (Reflect.has(restProps, 'open')) {
+      return restProps === null || restProps === void 0 ? void 0 : restProps.open;
     }
     return open;
   }, [open, restProps]);
-  const filterValue = Array.isArray(value) ? value.map((v) => getValueOrLabel(valueMap, v)) : getValueOrLabel(valueMap, value);
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(
-          prefixCls,
-          hashId,
-          {
-            [`${prefixCls}-searchable`]: showSearch
-          },
-          `${prefixCls}-container-${restProps.placement || "bottomLeft"}`,
-          className
-        ),
-        style,
-        onClick: (e) => {
-          var _a2, _b, _c;
-          if (disabled)
-            return;
-          const isLabelClick = (_c = (_b = (_a2 = lightLabel == null ? void 0 : lightLabel.current) == null ? void 0 : _a2.labelRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(
-            e.target
-          );
-          if (!isLabelClick) {
-            setOpen(true);
-          }
+  var filterValue = Array.isArray(value) ? value.map(function (v) {
+    return getValueOrLabel(valueMap, v);
+  }) : getValueOrLabel(valueMap, value);
+  return wrapSSR( /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls, hashId, _defineProperty({}, "".concat(prefixCls, "-searchable"), showSearch), "".concat(prefixCls, "-container-").concat(restProps.placement || 'bottomLeft'), className),
+    style: style,
+    onClick: function onClick(e) {
+      var _lightLabel$current;
+      if (disabled) return;
+      // Only handle clicks outside the label
+      var isLabelClick = lightLabel === null || lightLabel === void 0 || (_lightLabel$current = lightLabel.current) === null || _lightLabel$current === void 0 || (_lightLabel$current = _lightLabel$current.labelRef) === null || _lightLabel$current === void 0 || (_lightLabel$current = _lightLabel$current.current) === null || _lightLabel$current === void 0 ? void 0 : _lightLabel$current.contains(e.target);
+      if (!isLabelClick) {
+        setOpen(true);
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, restProps), {}, {
+      allowClear: allowClear,
+      value: value,
+      mode: mode,
+      labelInValue: labelInValue,
+      size: size,
+      disabled: disabled,
+      variant: variant,
+      onChange: function onChange(v, option) {
+        _onChange === null || _onChange === void 0 || _onChange(v, option);
+        if (mode !== 'multiple') {
+          setOpen(false);
         }
       },
-      /* @__PURE__ */ React.createElement(
-        Select,
-        __spreadProps(__spreadValues({}, restProps), {
-          allowClear,
-          value,
-          mode,
-          labelInValue,
-          size,
-          disabled,
-          variant,
-          onChange: (v, option) => {
-            onChange == null ? void 0 : onChange(v, option);
-            if (mode !== "multiple") {
-              setOpen(false);
-            }
-          },
-          showSearch,
-          onSearch: showSearch ? (keyValue) => {
-            if (fetchDataOnSearch && fetchData) {
-              fetchData(keyValue);
-            }
-            onSearch == null ? void 0 : onSearch(keyValue);
-          } : void 0,
-          style,
-          popupRender: (menuNode) => {
-            return /* @__PURE__ */ React.createElement("div", { ref }, showSearch && /* @__PURE__ */ React.createElement("div", { style: { margin: "4px 8px" } }, /* @__PURE__ */ React.createElement(
-              Input,
-              {
-                value: keyword,
-                allowClear: !!allowClear,
-                onChange: (e) => {
-                  setKeyword(e.target.value);
-                  if (fetchDataOnSearch && fetchData) {
-                    fetchData(e.target.value);
-                  }
-                  onSearch == null ? void 0 : onSearch(e.target.value);
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Backspace") {
-                    e.stopPropagation();
-                    return;
-                  }
-                  if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-                    e.preventDefault();
-                  }
-                },
-                style: { width: "100%" },
-                prefix: /* @__PURE__ */ React.createElement(SearchOutlined, null)
-              }
-            )), menuNode);
-          },
-          open: mergeOpen,
-          onOpenChange: (isOpen) => {
-            var _a2;
-            if (!isOpen) {
-              setKeyword("");
-            }
-            if (!labelTrigger) {
-              setOpen(isOpen);
-            }
-            (_a2 = restProps == null ? void 0 : restProps.onOpenChange) == null ? void 0 : _a2.call(restProps, isOpen);
-          },
-          prefixCls: customizePrefixCls,
-          options: onSearch || !keyword ? options : options == null ? void 0 : options.filter((o) => {
-            var _a2, _b, _c, _d, _e;
-            if (optionFilterProp) {
-              return toArray(o[optionFilterProp]).join("").toLowerCase().includes(keyword);
-            }
-            return ((_b = (_a2 = String(o[labelPropsName])) == null ? void 0 : _a2.toLowerCase()) == null ? void 0 : _b.includes(keyword == null ? void 0 : keyword.toLowerCase())) || ((_e = (_d = (_c = o[valuePropsName]) == null ? void 0 : _c.toString()) == null ? void 0 : _d.toLowerCase()) == null ? void 0 : _e.includes(keyword == null ? void 0 : keyword.toLowerCase()));
-          })
-        })
-      ),
-      /* @__PURE__ */ React.createElement(
-        FieldLabel,
-        {
-          ellipsis: true,
-          label,
-          placeholder,
-          disabled,
-          variant,
-          allowClear: !!allowClear,
-          value: filterValue || (value == null ? void 0 : value.label) || value,
-          onClear: () => {
-            onChange == null ? void 0 : onChange(void 0, void 0);
-          },
-          onClick: () => {
-            if (disabled)
-              return;
-            setOpen(!open);
-          },
-          ref: lightLabel,
-          valueMaxLength
+      showSearch: showSearch,
+      onSearch: showSearch ? function (keyValue) {
+        if (fetchDataOnSearch && fetchData) {
+          fetchData(keyValue);
         }
-      )
-    )
-  );
-};
-var LightSelect_default = React.forwardRef(LightSelect);
-export {
-  LightSelect,
-  LightSelect_default as default
+        onSearch === null || onSearch === void 0 || onSearch(keyValue);
+      } : void 0,
+      style: style,
+      popupRender: function popupRender(menuNode) {
+        return /*#__PURE__*/_jsxs("div", {
+          ref: ref,
+          children: [showSearch && /*#__PURE__*/_jsx("div", {
+            style: {
+              margin: '4px 8px'
+            },
+            children: /*#__PURE__*/_jsx(Input, {
+              value: keyword,
+              allowClear: !!allowClear,
+              onChange: function onChange(e) {
+                setKeyword(e.target.value);
+                if (fetchDataOnSearch && fetchData) {
+                  fetchData(e.target.value);
+                }
+                onSearch === null || onSearch === void 0 || onSearch(e.target.value);
+              },
+              onKeyDown: function onKeyDown(e) {
+                // 避免按下删除键把选项也删除了
+                if (e.key === 'Backspace') {
+                  e.stopPropagation();
+                  return;
+                }
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                  e.preventDefault();
+                }
+              },
+              style: {
+                width: '100%'
+              },
+              prefix: /*#__PURE__*/_jsx(SearchOutlined, {})
+            })
+          }), menuNode]
+        });
+      },
+      open: mergeOpen,
+      onOpenChange: function onOpenChange(isOpen) {
+        var _restProps$onOpenChan;
+        if (!isOpen) {
+          //  测试环境下直接跑
+          setKeyword('');
+        }
+        if (!labelTrigger) {
+          setOpen(isOpen);
+        }
+        restProps === null || restProps === void 0 || (_restProps$onOpenChan = restProps.onOpenChange) === null || _restProps$onOpenChan === void 0 || _restProps$onOpenChan.call(restProps, isOpen);
+      },
+      prefixCls: customizePrefixCls,
+      options: onSearch || !keyword ? options : options === null || options === void 0 ? void 0 : options.filter(function (o) {
+        var _String, _o$valuePropsName;
+        if (optionFilterProp) {
+          return toArray(o[optionFilterProp]).join('').toLowerCase().includes(keyword);
+        }
+        return ((_String = String(o[labelPropsName])) === null || _String === void 0 || (_String = _String.toLowerCase()) === null || _String === void 0 ? void 0 : _String.includes(keyword === null || keyword === void 0 ? void 0 : keyword.toLowerCase())) || ((_o$valuePropsName = o[valuePropsName]) === null || _o$valuePropsName === void 0 || (_o$valuePropsName = _o$valuePropsName.toString()) === null || _o$valuePropsName === void 0 || (_o$valuePropsName = _o$valuePropsName.toLowerCase()) === null || _o$valuePropsName === void 0 ? void 0 : _o$valuePropsName.includes(keyword === null || keyword === void 0 ? void 0 : keyword.toLowerCase()));
+      })
+    })), /*#__PURE__*/_jsx(FieldLabel, {
+      ellipsis: true,
+      label: label,
+      placeholder: placeholder,
+      disabled: disabled,
+      variant: variant,
+      allowClear: !!allowClear,
+      value: filterValue || (value === null || value === void 0 ? void 0 : value.label) || value,
+      onClear: function onClear() {
+        _onChange === null || _onChange === void 0 || _onChange(undefined, undefined);
+      },
+      onClick: function onClick() {
+        if (disabled) return;
+        setOpen(!open);
+      },
+      ref: lightLabel,
+      valueMaxLength: valueMaxLength
+    })]
+  }));
 };
+export default /*#__PURE__*/React.forwardRef(LightSelect);