@ucloud-fe/react-components 1.5.6 → 1.5.7

package/lib/components/Select/Select.d.ts

@@ -1,3 +1,6 @@
+/**
+ * TODO 需求时间比较紧、大部分时间用作兼容和考虑交互各种遗漏，代码未整合，有时间可以将 selector、popup 中的代码进行抽离
+ */
 import React, { ReactNode } from 'react';
 import { Size } from '../../type';
 import { Key } from '../../hooks/group';

package/lib/components/Select/Select.js

@@ -80,7 +80,7 @@ var _this7 = void 0;
 var _excluded = ["v1"],
     _excluded2 = ["content"],
     _excluded3 = ["content"],
-    _excluded4 = ["v1", "size", "disabled", "multiple", "placeholder", "renderContent", "renderSelector", "renderPopup", "value", "onChange", "visible", "locale", "dataSource", "search", "searchValue", "setSearchValue", "wrapRef", "clearable", "styleType", "block"],
+    _excluded4 = ["v1", "size", "disabled", "multiple", "placeholder", "renderContent", "renderSelector", "renderPopup", "value", "onChange", "visible", "setVisible", "locale", "dataSource", "search", "searchValue", "setSearchValue", "wrapRef", "clearable", "styleType", "block"],
     _excluded5 = ["items", "onClose", "disabled"],
     _excluded6 = ["size", "value", "defaultValue", "onChange", "onVisibleChange", "disabled", "search", "multiple", "renderContent", "renderSelector", "placeholder", "locale", "options", "children", "emptyContent", "showSelectAll", "extra", "clearable", "customStyle", "popover", "popoverProps", "renderPopup", "virtualList", "block", "styleType"];
 
@@ -558,6 +558,7 @@ var Selector = /*#__PURE__*/_react.default.memo(function Selector(_ref13) {
       value = _ref13.value,
       onChange = _ref13.onChange,
       visible = _ref13.visible,
+      setVisible = _ref13.setVisible,
       locale = _ref13.locale,
       dataSource = _ref13.dataSource,
       search = _ref13.search,
@@ -580,6 +581,7 @@ var Selector = /*#__PURE__*/_react.default.memo(function Selector(_ref13) {
     value: value,
     onChange: onChange,
     visible: visible,
+    setVisible: setVisible,
     locale: locale,
     dataSource: dataSource,
     search: search,
@@ -786,6 +788,7 @@ var MultipleListSelector = /*#__PURE__*/_react.default.memo(function MultipleSel
   var size = props.size,
       disabled = props.disabled,
       visible = props.visible,
+      setVisible = props.setVisible,
       dataSource = props.dataSource,
       value = props.value,
       onChange = props.onChange,
@@ -850,21 +853,20 @@ var MultipleListSelector = /*#__PURE__*/_react.default.memo(function MultipleSel
     e.preventDefault();
 
     if (!disabled) {
-      var _inputRef$current2;
+      onChange === null || onChange === void 0 ? void 0 : onChange([]); // inputRef.current?.focus();
 
-      onChange === null || onChange === void 0 ? void 0 : onChange([]);
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      setVisible(false);
     }
-  }.bind(this), [disabled, onChange]);
+  }.bind(this), [disabled, onChange, setVisible]);
   var empty = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this13);
     return !(value !== null && value !== void 0 && value.length);
   }.bind(this), [value]);
   var handleSelectorClick = (0, _react.useCallback)(function (e) {
-    var _inputRef$current3, _popupProps$onClick;
+    var _inputRef$current2, _popupProps$onClick;
 
     (0, _newArrowCheck2.default)(this, _this13);
-    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
     (_popupProps$onClick = _popupProps.onClick) === null || _popupProps$onClick === void 0 ? void 0 : _popupProps$onClick.call(_popupProps, e);
   }.bind(this), [_popupProps]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_style2.SSelectorMultiple, (0, _extends2.default)({
@@ -891,10 +893,10 @@ var MultipleListSelector = /*#__PURE__*/_react.default.memo(function MultipleSel
     clearable: clearable && !empty,
     onClick: handleClear
   }), /*#__PURE__*/_react.default.createElement(_style.InputPart, null, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
-    type: visible ? search ? 'search' : 'arrow-up' : 'arrow-down'
-  }))), items.length ? /*#__PURE__*/_react.default.createElement("div", {
+    type: visible ? 'arrow-up' : 'arrow-down'
+  }))), items.length ? /*#__PURE__*/_react.default.createElement(_Tag.default.Group, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style2.listCls
-  }, /*#__PURE__*/_react.default.createElement(_Tag.default.Group, null, items.map(renderItem))) : null);
+  }, items.map(renderItem))) : null);
 });
 
 var MultipleSelector = /*#__PURE__*/_react.default.memo(function MultipleSelector(props) {
@@ -903,6 +905,7 @@ var MultipleSelector = /*#__PURE__*/_react.default.memo(function MultipleSelecto
   var size = props.size,
       disabled = props.disabled,
       visible = props.visible,
+      setVisible = props.setVisible,
       dataSource = props.dataSource,
       value = props.value,
       onChange = props.onChange,
@@ -981,10 +984,10 @@ var MultipleSelector = /*#__PURE__*/_react.default.memo(function MultipleSelecto
     setSearchValue(e.target.value);
   }.bind(this), [setSearchValue]);
   (0, _react.useEffect)(function () {
-    var _inputRef$current4;
+    var _inputRef$current3;
 
     (0, _newArrowCheck2.default)(this, _this16);
-    if (visible) (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+    if (visible) (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
   }.bind(this), [visible]);
   var handleClear = (0, _react.useCallback)(function (e) {
     (0, _newArrowCheck2.default)(this, _this16);
@@ -992,21 +995,20 @@ var MultipleSelector = /*#__PURE__*/_react.default.memo(function MultipleSelecto
     e.preventDefault();
 
     if (!disabled) {
-      var _inputRef$current5;
+      onChange === null || onChange === void 0 ? void 0 : onChange([]); // inputRef.current?.focus();
 
-      onChange === null || onChange === void 0 ? void 0 : onChange([]);
-      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.focus();
+      setVisible(false);
     }
-  }.bind(this), [disabled, onChange]);
+  }.bind(this), [disabled, onChange, setVisible]);
   var empty = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this16);
     return !(value !== null && value !== void 0 && value.length);
   }.bind(this), [value]);
   var handleSelectorClick = (0, _react.useCallback)(function (e) {
-    var _inputRef$current6, _popupProps$onClick2;
+    var _inputRef$current4, _popupProps$onClick2;
 
     (0, _newArrowCheck2.default)(this, _this16);
-    (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.focus();
+    (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
     (_popupProps$onClick2 = _popupProps.onClick) === null || _popupProps$onClick2 === void 0 ? void 0 : _popupProps$onClick2.call(_popupProps, e);
   }.bind(this), [_popupProps]);
 
@@ -1069,6 +1071,7 @@ var SingleSelector = /*#__PURE__*/_react.default.memo(function SingleSelector(_r
       value = _ref18.value,
       onChange = _ref18.onChange,
       visible = _ref18.visible,
+      setVisible = _ref18.setVisible,
       dataSource = _ref18.dataSource,
       search = _ref18.search,
       _ref18$searchValue = _ref18.searchValue,
@@ -1120,10 +1123,10 @@ var SingleSelector = /*#__PURE__*/_react.default.memo(function SingleSelector(_r
   }, _popupProps);
 
   (0, _react.useEffect)(function () {
-    var _inputRef$current7;
+    var _inputRef$current5;
 
     (0, _newArrowCheck2.default)(this, _this19);
-    if (visible) (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : _inputRef$current7.focus();
+    if (visible) (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.focus();
   }.bind(this), [visible]);
   var handleClear = (0, _react.useCallback)(function (e) {
     (0, _newArrowCheck2.default)(this, _this19);
@@ -1131,12 +1134,11 @@ var SingleSelector = /*#__PURE__*/_react.default.memo(function SingleSelector(_r
     e.stopPropagation();
 
     if (!disabled) {
-      var _inputRef$current8;
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined); // inputRef.current?.focus();
 
-      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
-      (_inputRef$current8 = inputRef.current) === null || _inputRef$current8 === void 0 ? void 0 : _inputRef$current8.focus();
+      setVisible(false);
     }
-  }.bind(this), [disabled, onChange]);
+  }.bind(this), [disabled, onChange, setVisible]);
   return /*#__PURE__*/_react.default.createElement(_style2.SSelectorSingle, sharedProps, /*#__PURE__*/_react.default.createElement(_style.InputPart, {
     stretch: true,
     className: _style2.inputWrapCls
@@ -1160,7 +1162,7 @@ var SingleSelector = /*#__PURE__*/_react.default.memo(function SingleSelector(_r
     clearable: clearable && !empty,
     onClick: handleClear
   }), /*#__PURE__*/_react.default.createElement(_style.InputPart, null, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
-    type: visible ? search ? 'search' : 'arrow-up' : 'arrow-down'
+    type: visible ? 'arrow-up' : 'arrow-down'
   })));
 });
 
@@ -1319,6 +1321,12 @@ var Select = function Select(_ref19) {
       _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
       v1 = _useState6[0];
 
+  var handleOnChange = (0, _react.useCallback)(function (v) {
+    (0, _newArrowCheck2.default)(this, _this21);
+    onChange(v);
+    setSearchValue('');
+  }.bind(this), [onChange, setSearchValue]);
+
   var popup = /*#__PURE__*/_react.default.createElement(Popup, {
     v1: v1,
     extra: extra,
@@ -1331,7 +1339,7 @@ var Select = function Select(_ref19) {
     renderPopup: renderPopup,
     handleVisibleChange: handleVisibleChange,
     options: options,
-    onChange: onChange,
+    onChange: handleOnChange,
     locale: locale,
     hidePopup: hidePopup,
     dataSource: dataSource,
@@ -1352,6 +1360,7 @@ var Select = function Select(_ref19) {
     value: value,
     onChange: onChange,
     visible: visible,
+    setVisible: setVisible,
     locale: locale,
     dataSource: dataSource,
     clearable: clearable,