@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/select/index.js

@@ -4,9 +4,7 @@ import _get from "lodash/get";
 import _noop from "lodash/noop";
 import _isString from "lodash/isString";
 import _isEqual from "lodash/isEqual";
-
 /* eslint-disable max-len */
-
 /* eslint-disable max-lines-per-function */
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
@@ -38,18 +36,15 @@ import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
 import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
 const prefixcls = cssClasses.PREFIX;
-const key = 0; // Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
-
+const key = 0;
+// Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
 class Select extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.setOptionContainerEl = node => this.optionContainerEl = {
       current: node
     };
-
     this.handleInputChange = (value, event) => this.foundation.handleInputChange(value, event);
-
     this.getTagItem = (item, i, renderSelectedItem) => {
       const {
         size,
@@ -60,7 +55,6 @@ class Select extends BaseComponent {
         value
       } = item[1];
       const disabled = item[1].disabled || selectDisabled;
-
       const onClose = (tagContent, e) => {
         if (e && typeof e.preventDefault === 'function') {
           e.preventDefault(); // make sure that tag will not hidden immediately in controlled mode
@@ -71,7 +65,6 @@ class Select extends BaseComponent {
           value
         });
       };
-
       const {
         content,
         isRenderInTag
@@ -85,7 +78,6 @@ class Select extends BaseComponent {
         closable: !disabled,
         onClose
       };
-
       if (isRenderInTag) {
         return /*#__PURE__*/React.createElement(Tag, Object.assign({}, basic, {
           color: "white",
@@ -99,7 +91,6 @@ class Select extends BaseComponent {
         }, content);
       }
     };
-
     this.state = {
       isOpen: false,
       isFocus: false,
@@ -118,7 +109,6 @@ class Select extends BaseComponent {
       overflowItemCount: 0
     };
     /* Generate random string */
-
     this.selectOptionListID = '';
     this.selectID = '';
     this.virtualizeListRef = /*#__PURE__*/React.createRef();
@@ -136,10 +126,8 @@ class Select extends BaseComponent {
     this.eventManager = new Event();
     this.foundation = new SelectFoundation(this.adapter);
   }
-
   get adapter() {
     var _this = this;
-
     const keyboardAdapter = {
       registerKeyDown: cb => {
         const keyboardEventSet = {
@@ -179,7 +167,6 @@ class Select extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         if (this.inputRef && this.inputRef.current) {
           this.inputRef.current.focus({
             preventScroll
@@ -193,16 +180,15 @@ class Select extends BaseComponent {
       registerClickOutsideHandler: cb => {
         const clickOutsideHandler = e => {
           const optionInstance = this.optionsRef && this.optionsRef.current;
-          const triggerDom = this.triggerRef && this.triggerRef.current; // eslint-disable-next-line react/no-find-dom-node
-
-          const optionsDom = ReactDOM.findDOMNode(optionInstance); // let isInPanel = optionsDom && optionsDom.contains(e.target);
+          const triggerDom = this.triggerRef && this.triggerRef.current;
+          // eslint-disable-next-line react/no-find-dom-node
+          const optionsDom = ReactDOM.findDOMNode(optionInstance);
+          // let isInPanel = optionsDom && optionsDom.contains(e.target);
           // let isInTrigger = triggerDom && triggerDom.contains(e.target);
-
           if (optionsDom && !optionsDom.contains(e.target) && triggerDom && !triggerDom.contains(e.target)) {
             cb(e);
           }
         };
-
         this.clickOutsideHandler = clickOutsideHandler;
         document.addEventListener('mousedown', clickOutsideHandler, false);
       },
@@ -239,7 +225,6 @@ class Select extends BaseComponent {
         const {
           optionList
         } = _this.props;
-
         if (optionList && optionList.length) {
           options = optionList.map((itemOpt, index) => Object.assign({
             _show: true,
@@ -255,11 +240,9 @@ class Select extends BaseComponent {
           optionGroups = result.optionGroups;
           options = result.options;
         }
-
         _this.setState({
           optionGroups
         });
-
         return options;
       },
       updateOptions: options => {
@@ -373,18 +356,14 @@ class Select extends BaseComponent {
       updateScrollTop: index => {
         // eslint-disable-next-line max-len
         let optionClassName = `.${prefixcls}-option-selected`;
-
         if (index !== undefined) {
           optionClassName = `.${prefixcls}-option:nth-child(${index})`;
         }
-
         let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`);
-
         if (Array.isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
           destNode = destNode[0];
         }
-
         if (destNode) {
           /**
            * Scroll the first selected item into view.
@@ -396,28 +375,23 @@ class Select extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
     this.selectOptionListID = getUuidShort();
     this.selectID = this.props.id || getUuidShort();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   componentDidUpdate(prevProps, prevState) {
     const prevChildrenKeys = React.Children.toArray(prevProps.children).map(child => child.key);
     const nowChildrenKeys = React.Children.toArray(this.props.children).map(child => child.key);
     let isOptionsChanged = false;
-
     if (!_isEqual(prevChildrenKeys, nowChildrenKeys) || !_isEqual(prevProps.optionList, this.props.optionList)) {
       isOptionsChanged = true;
       this.foundation.handleOptionListChange();
-    } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
-
-
+    }
+    // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
     if (!_isEqual(this.props.value, prevProps.value) || isOptionsChanged) {
       if ('value' in this.props) {
         this.foundation.handleValueChange(this.props.value);
@@ -426,7 +400,6 @@ class Select extends BaseComponent {
       }
     }
   }
-
   renderInput() {
     const {
       size,
@@ -435,9 +408,7 @@ class Select extends BaseComponent {
       inputProps,
       filter
     } = this.props;
-
     const inputPropsCls = _get(inputProps, 'className');
-
     const inputcls = cls(`${prefixcls}-input`, {
       [`${prefixcls}-input-single`]: !multiple,
       [`${prefixcls}-input-multiple`]: multiple
@@ -452,15 +423,14 @@ class Select extends BaseComponent {
       className: inputcls,
       onChange: this.handleInputChange
     }, inputProps);
-    let style = {}; // Multiple choice mode
-
+    let style = {};
+    // Multiple choice mode
     if (multiple) {
       style = {
         width: inputValue ? `${inputValue.length * 16}px` : '2px'
       };
       selectInputProps.style = style;
     }
-
     return /*#__PURE__*/React.createElement(Input, Object.assign({
       ref: this.inputRef,
       size: size,
@@ -472,66 +442,54 @@ class Select extends BaseComponent {
           this.setState({
             isFocus: true
           });
-        } // prevent event bubbling which will fire trigger onFocus event
-
-
-        e.stopPropagation(); // e.nativeEvent.stopImmediatePropagation();
+        }
+        // prevent event bubbling which will fire trigger onFocus event
+        e.stopPropagation();
+        // e.nativeEvent.stopImmediatePropagation();
       },
       onBlur: e => this.foundation.handleInputBlur(e)
     }, selectInputProps));
   }
-
   close() {
     this.foundation.close();
   }
-
   open() {
     this.foundation.open();
   }
-
   clearInput() {
     this.foundation.clearInput();
   }
-
   selectAll() {
     this.foundation.selectAll();
   }
-
   deselectAll() {
     this.foundation.clearSelected();
   }
-
   focus() {
     this.foundation.focus();
   }
-
   onSelect(option, optionIndex, e) {
     this.foundation.onSelect(option, optionIndex, e);
   }
-
   onClear(e) {
     e.nativeEvent.stopImmediatePropagation();
     this.foundation.handleClearClick(e);
   }
-
   search(value, event) {
     this.handleInputChange(value, event);
   }
-
   renderEmpty() {
     return /*#__PURE__*/React.createElement(Option, {
       empty: true,
       emptyContent: this.props.emptyContent
     });
   }
-
   renderLoading() {
     const loadingWrapperCls = `${prefixcls}-loading-wrapper`;
     return /*#__PURE__*/React.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/React.createElement(Spin, null));
   }
-
   renderOption(option, optionIndex, style) {
     const {
       focusIndex,
@@ -543,11 +501,9 @@ class Select extends BaseComponent {
     let optionContent;
     const isFocused = optionIndex === focusIndex;
     let optionStyle = style || {};
-
     if (option.style) {
       optionStyle = Object.assign(Object.assign({}, optionStyle), option.style);
     }
-
     if (option._inputCreateOnly) {
       optionContent = this.renderCreateOption(option, isFocused, optionIndex, style);
     } else {
@@ -555,7 +511,6 @@ class Select extends BaseComponent {
       if ('key' in option) {
         option._keyInOptionList = option.key;
       }
-
       optionContent = /*#__PURE__*/React.createElement(Option, Object.assign({
         showTick: true
       }, option, {
@@ -570,15 +525,13 @@ class Select extends BaseComponent {
         id: `${this.selectID}-option-${optionIndex}`
       }), option.label);
     }
-
     return optionContent;
   }
-
   renderCreateOption(option, isFocused, optionIndex, style) {
     const {
       renderCreateItem
-    } = this.props; // default render method
-
+    } = this.props;
+    // default render method
     if (typeof renderCreateItem === 'undefined') {
       const defaultCreateItem = /*#__PURE__*/React.createElement(Option, Object.assign({
         key: option.key || option.label + option.value,
@@ -595,7 +548,6 @@ class Select extends BaseComponent {
       }, locale.createText), option.value)));
       return defaultCreateItem;
     }
-
     const customCreateItem = renderCreateItem(option.value, isFocused);
     return (
       /*#__PURE__*/
@@ -608,18 +560,15 @@ class Select extends BaseComponent {
       }, customCreateItem)
     );
   }
-
   onOptionHover(optionIndex) {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
-
   renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new Map();
     visibleOptions.forEach((option, optionIndex) => {
       const parentGroup = option._parentGroup;
       const optionContent = this.renderOption(option, optionIndex);
-
       if (parentGroup && !groupStatus.has(parentGroup.label)) {
         // when use with OptionGroup and group content not already insert
         const groupContent = /*#__PURE__*/React.createElement(OptionGroup, Object.assign({}, parentGroup, {
@@ -628,12 +577,10 @@ class Select extends BaseComponent {
         groupStatus.set(parentGroup.label, true);
         content.push(groupContent);
       }
-
       content.push(optionContent);
     });
     return content;
   }
-
   renderVirtualizeList(visibleOptions) {
     const {
       virtualize
@@ -661,7 +608,6 @@ class Select extends BaseComponent {
       }
     }, VirtualRow);
   }
-
   renderOptions(children) {
     const {
       dropdownMinWidth,
@@ -680,15 +626,13 @@ class Select extends BaseComponent {
       virtualize,
       multiple,
       emptyContent
-    } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
-
+    } = this.props;
+    // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
     const visibleOptions = options.filter(item => item._show);
     let listContent = this.renderWithGroup(visibleOptions);
-
     if (virtualize) {
       listContent = this.renderVirtualizeList(visibleOptions);
     }
-
     const style = Object.assign({
       minWidth: dropdownMinWidth
     }, dropdownStyle);
@@ -733,7 +677,6 @@ class Select extends BaseComponent {
       }, outerBottomSlot) : null)
     );
   }
-
   renderSingleSelection(selections, filterable) {
     let {
       renderSelectedItem
@@ -747,23 +690,20 @@ class Select extends BaseComponent {
     } = this.state;
     let renderText = '';
     const selectedItems = [...selections];
-
     if (typeof renderSelectedItem === 'undefined') {
       renderSelectedItem = optionNode => optionNode.label;
     }
-
     if (selectedItems.length) {
       const selectedItem = selectedItems[0][1];
       renderText = renderSelectedItem(selectedItem);
     }
-
     const spanCls = cls({
       [`${prefixcls}-selection-text`]: true,
       [`${prefixcls}-selection-placeholder`]: !renderText && renderText !== 0,
       [`${prefixcls}-selection-text-hide`]: inputValue && showInput,
       [`${prefixcls}-selection-text-inactive`]: !inputValue && showInput // Stack Input & RenderText(opacity 0.4)
-
     });
+
     const contentWrapperCls = `${prefixcls}-content-wrapper`;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
@@ -772,7 +712,6 @@ class Select extends BaseComponent {
       "x-semi-prop": "placeholder"
     }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
   }
-
   renderTag(item, i, isCollapseItem) {
     const {
       size,
@@ -786,7 +725,6 @@ class Select extends BaseComponent {
       value
     } = item[1];
     const disabled = item[1].disabled || selectDisabled;
-
     const onClose = (tagContent, e) => {
       if (e && typeof e.preventDefault === 'function') {
         e.preventDefault(); // make sure that tag will not hidden immediately in controlled mode
@@ -797,14 +735,12 @@ class Select extends BaseComponent {
         value
       });
     };
-
     if (typeof renderSelectedItem === 'undefined') {
       renderSelectedItem = optionNode => ({
         isRenderInTag: true,
         content: optionNode.label
       });
     }
-
     const {
       content,
       isRenderInTag
@@ -833,7 +769,6 @@ class Select extends BaseComponent {
         }
       }
     }, content) : content;
-
     if (isRenderInTag) {
       return /*#__PURE__*/React.createElement(Tag, Object.assign({}, basic, {
         color: "white",
@@ -849,7 +784,6 @@ class Select extends BaseComponent {
       }, realContent);
     }
   }
-
   renderNTag(n, restTags) {
     const {
       size,
@@ -867,7 +801,6 @@ class Select extends BaseComponent {
         flexShrink: 0
       }
     }, "+", n);
-
     if (showRestTagsPopover) {
       nTag = /*#__PURE__*/React.createElement(Popover, Object.assign({
         showArrow: true,
@@ -885,15 +818,12 @@ class Select extends BaseComponent {
         key: `_+${n}_Popover`
       }), nTag);
     }
-
     return nTag;
   }
-
   renderOverflow(items, index) {
     const isCollapse = true;
     return items.length && items[0] ? this.renderTag(items[0], index, isCollapse) : null;
   }
-
   handleOverflow(items) {
     const {
       overflowItemCount,
@@ -904,12 +834,10 @@ class Select extends BaseComponent {
     } = this.props;
     const maxVisibleCount = selections.size - maxTagCount;
     const newOverFlowItemCount = maxVisibleCount > 0 ? maxVisibleCount + items.length - 1 : items.length - 1;
-
     if (items.length > 1 && overflowItemCount !== newOverFlowItemCount) {
       this.foundation.updateOverflowItemCount(selections.size, newOverFlowItemCount);
     }
   }
-
   renderCollapsedTags(selections, length) {
     const {
       overflowItemCount
@@ -924,7 +852,6 @@ class Select extends BaseComponent {
       visibleItemRenderer: (item, index) => this.renderTag(item, index)
     }), overflowItemCount > 0 && this.renderNTag(overflowItemCount, selections.slice(selections.length - overflowItemCount)));
   }
-
   renderOneLineTags(selectedItems, n) {
     let {
       renderSelectedItem
@@ -938,14 +865,12 @@ class Select extends BaseComponent {
       isFullTags
     } = this.state;
     let tagContent;
-
     if (typeof renderSelectedItem === 'undefined') {
       renderSelectedItem = optionNode => ({
         isRenderInTag: true,
         content: optionNode.label
       });
     }
-
     if (showRestTagsPopover) {
       // showRestTagsPopover = true，
       const mapItems = isFullTags ? selectedItems : selectedItems.slice(0, maxTagCount);
@@ -980,10 +905,8 @@ class Select extends BaseComponent {
         mode: "custom"
       });
     }
-
     return tagContent;
   }
-
   renderMultipleSelection(selections, filterable) {
     let {
       renderSelectedItem
@@ -999,14 +922,12 @@ class Select extends BaseComponent {
       isOpen
     } = this.state;
     const selectedItems = [...selections];
-
     if (typeof renderSelectedItem === 'undefined') {
       renderSelectedItem = optionNode => ({
         isRenderInTag: true,
         content: optionNode.label
       });
     }
-
     const contentWrapperCls = cls({
       [`${prefixcls}-content-wrapper`]: true,
       [`${prefixcls}-content-wrapper-one-line`]: maxTagCount && !isOpen,
@@ -1028,21 +949,16 @@ class Select extends BaseComponent {
       className: contentWrapperCls
     }, selectedItems && selectedItems.length ? tagContent : placeholderText, !filterable ? null : this.renderInput()));
   }
-
   onMouseEnter(e) {
     this.foundation.handleMouseEnter(e);
   }
-
   onMouseLeave(e) {
     this.foundation.handleMouseLeave(e);
   }
-
   onKeyPress(e) {
     this.foundation.handleKeyPress(e);
   }
   /* Processing logic when popover visible changes */
-
-
   handlePopoverVisibleChange(status) {
     const {
       virtualize
@@ -1050,23 +966,18 @@ class Select extends BaseComponent {
     const {
       selections
     } = this.state;
-
     if (!status) {
       return;
     }
-
     if (virtualize) {
       let minItemIndex = -1;
       selections.forEach(item => {
         const itemIndex = _get(item, '_scrollIndex');
         /* When the itemIndex is legal */
-
-
         if (_isNumber(itemIndex) && itemIndex >= 0) {
           minItemIndex = minItemIndex !== -1 && minItemIndex < itemIndex ? minItemIndex : itemIndex;
         }
       });
-
       if (minItemIndex !== -1) {
         try {
           this.virtualizeListRef.current.scrollToItem(minItemIndex, 'center');
@@ -1076,7 +987,6 @@ class Select extends BaseComponent {
       this.foundation.updateScrollTop();
     }
   }
-
   renderSuffix() {
     const {
       suffix
@@ -1091,7 +1001,6 @@ class Select extends BaseComponent {
       "x-semi-prop": "suffix"
     }, suffix);
   }
-
   renderPrefix() {
     const {
       prefix,
@@ -1111,7 +1020,6 @@ class Select extends BaseComponent {
       "x-semi-prop": "prefix,insetLabel"
     }, labelNode);
   }
-
   renderSelection() {
     const {
       disabled,
@@ -1144,7 +1052,6 @@ class Select extends BaseComponent {
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
     const filterable = Boolean(filter); // filter（boolean || function）
-
     const selectionCls = useCustomTrigger ? cls(className) : cls(prefixcls, className, {
       [`${prefixcls}-borderless`]: borderless,
       [`${prefixcls}-open`]: isOpen,
@@ -1168,8 +1075,8 @@ class Select extends BaseComponent {
     }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
       className: `${prefixcls}-arrow-empty`
     });
-    const clear = clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null); // semantics of onSearch are more in line with behavior, onChange is alias of onSearch, will be deprecate next major version
-
+    const clear = clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null);
+    // semantics of onSearch are more in line with behavior, onChange is alias of onSearch, will be deprecate next major version
     const inner = useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
       value: Array.from(selections.values()),
       inputValue: inputValue,
@@ -1204,11 +1111,9 @@ class Select extends BaseComponent {
      * 在disabled，可搜索单选且显示input框，以及可搜索多选情况下
      * 让combobox无法通过tab聚焦
      */
-
     const tabIndex = disabled || filterable && showInput || filterable && multiple ? -1 : 0;
     return (
       /*#__PURE__*/
-
       /* eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex */
       React.createElement("div", Object.assign({
         role: "combobox",
@@ -1237,7 +1142,6 @@ class Select extends BaseComponent {
       }, keyboardEventSet), inner)
     );
   }
-
   render() {
     const {
       direction
@@ -1284,9 +1188,7 @@ class Select extends BaseComponent {
       afterClose: () => this.foundation.handlePopoverClose()
     }, selection);
   }
-
 }
-
 Select.contextType = ConfigContext;
 Select.Option = Option;
 Select.OptGroup = OptionGroup;
@@ -1373,10 +1275,11 @@ Select.propTypes = {
   renderOptionItem: PropTypes.func,
   onListScroll: PropTypes.func,
   arrowIcon: PropTypes.node,
-  preventScroll: PropTypes.bool // open: PropTypes.bool,
+  preventScroll: PropTypes.bool
+  // open: PropTypes.bool,
   // tagClosable: PropTypes.bool,
-
 };
+
 Select.defaultProps = {
   stopPropagation: true,
   motion: true,
@@ -1417,10 +1320,11 @@ Select.defaultProps = {
   showRestTagsPopover: false,
   restTagsPopoverProps: {},
   expandRestTagsOnClick: false,
-  ellipsisTrigger: false // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
+  ellipsisTrigger: false
+  // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
   // renderSelectedItem: (optionNode) => optionNode.label,
   // The default creator rendering is related to i18, so it is not declared here
   // renderCreateItem: (input) => input
-
 };
+
 export default Select;