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

package/lib/es/cascader/index.js

@@ -28,26 +28,21 @@ import TagInput from '../tagInput';
 import { isSemiIcon } from '../_utils';
 const prefixcls = cssClasses.PREFIX;
 const resetkey = 0;
-
 class Cascader extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
-
     this.handleTagRemove = (e, tagValuePath) => {
       this.foundation.handleTagRemove(e, tagValuePath);
     };
-
     this.handleRemoveByKey = key => {
       const {
         keyEntities
       } = this.state;
       this.handleTagRemove(null, keyEntities[key].valuePath);
     };
-
     this.renderTagItem = (value, idx, type) => {
       const {
         keyEntities,
@@ -62,14 +57,14 @@ class Cascader extends BaseComponent {
       } = this.props;
       const nodeKey = type === strings.IS_VALUE ? findKeysForValues(value, keyEntities)[0] : value;
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
-
       if (!_isEmpty(keyEntities) && !_isEmpty(keyEntities[nodeKey])) {
         const tagCls = cls(`${prefixcls}-selection-tag`, {
           [`${prefixcls}-selection-tag-disabled`]: isDsiabled
-        }); // custom render tags
-
+        });
+        // custom render tags
         if (_isFunction(displayRender)) {
-          return displayRender(keyEntities[nodeKey], idx); // default render tags
+          return displayRender(keyEntities[nodeKey], idx);
+          // default render tags
         } else {
           return /*#__PURE__*/React.createElement(Tag, {
             size: size === 'default' ? 'large' : size,
@@ -85,26 +80,20 @@ class Cascader extends BaseComponent {
           }, keyEntities[nodeKey].data[displayProp]);
         }
       }
-
       return null;
     };
-
     this.handleItemClick = (e, item) => {
       this.foundation.handleItemClick(e, item);
     };
-
     this.handleItemHover = (e, item) => {
       this.foundation.handleItemHover(e, item);
     };
-
     this.onItemCheckboxClick = item => {
       this.foundation.onItemCheckboxClick(item);
     };
-
     this.handleListScroll = (e, ind) => {
       this.foundation.handleListScroll(e, ind);
     };
-
     this.renderContent = () => {
       const {
         inputValue,
@@ -159,7 +148,6 @@ class Cascader extends BaseComponent {
       }), bottomSlot);
       return content;
     };
-
     this.renderPlusN = hiddenTag => {
       const {
         disabled,
@@ -180,7 +168,6 @@ class Cascader extends BaseComponent {
         autoAdjustOverflow: true
       }, restTagsPopoverProps), renderPlusNChildren) : renderPlusNChildren;
     };
-
     this.renderMultipleTags = () => {
       const {
         autoMergeValue,
@@ -196,7 +183,6 @@ class Cascader extends BaseComponent {
       [...realKeys].forEach((checkedKey, idx) => {
         const notExceedMaxTagCount = !_isNumber(maxTagCount) || maxTagCount >= idx + 1;
         const item = this.renderTagItem(checkedKey, idx, strings.IS_KEY);
-
         if (notExceedMaxTagCount) {
           displayTag.push(item);
         } else {
@@ -205,7 +191,6 @@ class Cascader extends BaseComponent {
       });
       return /*#__PURE__*/React.createElement(React.Fragment, null, displayTag, !_isEmpty(hiddenTag) && this.renderPlusN(hiddenTag));
     };
-
     this.renderDisplayText = () => {
       const {
         displayProp,
@@ -216,10 +201,8 @@ class Cascader extends BaseComponent {
         selectedKeys
       } = this.state;
       let displayText = '';
-
       if (selectedKeys.size) {
         const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
-
         if (displayRender && typeof displayRender === 'function') {
           displayText = displayRender(displayPath);
         } else {
@@ -228,10 +211,8 @@ class Cascader extends BaseComponent {
           }, index < displayPath.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, path, separator) : path));
         }
       }
-
       return displayText;
     };
-
     this.renderSelectContent = () => {
       const {
         placeholder,
@@ -242,7 +223,6 @@ class Cascader extends BaseComponent {
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
-
       if (!searchable) {
         if (multiple) {
           if (_isEmpty(checkedKeys)) {
@@ -250,7 +230,6 @@ class Cascader extends BaseComponent {
               className: `${prefixcls}-selection-placeholder`
             }, placeholder);
           }
-
           return this.renderMultipleTags();
         } else {
           const displayText = this.renderDisplayText();
@@ -262,11 +241,9 @@ class Cascader extends BaseComponent {
           }, displayText ? displayText : placeholder);
         }
       }
-
       const input = multiple ? this.renderTagInput() : this.renderInput();
       return input;
     };
-
     this.renderSuffix = () => {
       const {
         suffix
@@ -281,7 +258,6 @@ class Cascader extends BaseComponent {
         "x-semi-prop": "suffix"
       }, suffix);
     };
-
     this.renderPrefix = () => {
       const {
         prefix,
@@ -302,7 +278,6 @@ class Cascader extends BaseComponent {
         "x-semi-prop": "prefix,insetLabel"
       }, labelNode);
     };
-
     this.renderCustomTrigger = () => {
       const {
         disabled,
@@ -317,7 +292,6 @@ class Cascader extends BaseComponent {
         checkedKeys
       } = this.state;
       let realValue;
-
       if (multiple) {
         if (this.mergeType === strings.NONE_MERGE_TYPE) {
           realValue = checkedKeys;
@@ -327,7 +301,6 @@ class Cascader extends BaseComponent {
       } else {
         realValue = [...selectedKeys][0];
       }
-
       return /*#__PURE__*/React.createElement(Trigger, {
         value: realValue,
         inputValue: inputValue,
@@ -342,15 +315,12 @@ class Cascader extends BaseComponent {
         onRemove: this.handleRemoveByKey
       });
     };
-
     this.handleMouseOver = () => {
       this.foundation.toggleHoverState(true);
     };
-
     this.handleMouseLeave = () => {
       this.foundation.toggleHoverState(false);
     };
-
     this.handleClear = e => {
       e && e.stopPropagation();
       this.foundation.handleClear();
@@ -358,15 +328,11 @@ class Cascader extends BaseComponent {
     /**
      * A11y: simulate clear button click
      */
-
     /* istanbul ignore next */
-
-
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
       this.foundation.handleClearEnterPress(e);
     };
-
     this.showClearBtn = () => {
       const {
         showClear,
@@ -383,14 +349,12 @@ class Cascader extends BaseComponent {
       const multipleWithHaveValue = multiple && checkedKeys.size;
       return showClear && (hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
     };
-
     this.renderClearBtn = () => {
       const clearCls = cls(`${prefixcls}-clearbtn`);
       const {
         clearIcon
       } = this.props;
       const allowClear = this.showClearBtn();
-
       if (allowClear) {
         return /*#__PURE__*/React.createElement("div", {
           className: clearCls,
@@ -400,26 +364,21 @@ class Cascader extends BaseComponent {
           tabIndex: 0
         }, clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null));
       }
-
       return null;
     };
-
     this.renderArrow = () => {
       const {
         arrowIcon
       } = this.props;
       const showClearBtn = this.showClearBtn();
-
       if (showClearBtn) {
         return null;
       }
-
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
         className: cls(`${prefixcls}-arrow`),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
-
     this.renderSelection = () => {
       const {
         disabled,
@@ -482,7 +441,6 @@ class Cascader extends BaseComponent {
        * Reasons for disabling the a11y eslint rule:
        * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
        */
-
       return /*#__PURE__*/React.createElement("div", Object.assign({
         className: classNames,
         style: style,
@@ -502,56 +460,39 @@ class Cascader extends BaseComponent {
         tabIndex: 0
       }), inner);
     };
-
     this.state = {
       disabledKeys: new Set(),
       isOpen: props.defaultOpen,
-
       /* By changing rePosKey, the dropdown position can be refreshed */
       rePosKey: resetkey,
-
       /* A data structure for storing cascader data items */
       keyEntities: {},
-
       /* Selected and show tick icon */
       selectedKeys: new Set([]),
-
       /* The key of the activated node */
       activeKeys: new Set([]),
-
       /* The key of the filtered node */
       filteredKeys: new Set([]),
-
       /* Value of input box */
       inputValue: '',
-
       /* Is searching */
       isSearching: false,
-
       /* The placeholder of input box */
       inputPlaceHolder: props.searchPlaceholder || props.placeholder,
-
       /* Cache props */
       prevProps: {},
-
       /* Is hovering */
       isHovering: false,
-
       /* Key of checked node, when multiple */
       checkedKeys: new Set([]),
-
       /* Key of half checked node, when multiple */
       halfCheckedKeys: new Set([]),
-
       /* Auto merged checkedKeys or leaf checkedKeys, when multiple */
       resolvedCheckedKeys: new Set([]),
-
       /* Keys of loaded item */
       loadedKeys: new Set(),
-
       /* Keys of loading item */
       loadingKeys: new Set(),
-
       /* Mark whether this rendering has triggered asynchronous loading of data */
       loading: false,
       showInput: false
@@ -565,10 +506,8 @@ class Cascader extends BaseComponent {
     this.clickOutsideHandler = null;
     this.foundation = new CascaderFoundation(this.adapter);
   }
-
   get adapter() {
     var _this = this;
-
     const filterAdapter = {
       updateInputValue: value => {
         this.setState({
@@ -584,7 +523,6 @@ class Cascader extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         if (this.inputRef && this.inputRef.current) {
           // TODO: check the reason
           this.inputRef.current.focus({
@@ -605,12 +543,10 @@ class Cascader extends BaseComponent {
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = ReactDOM.findDOMNode(optionInstance);
           const target = e.target;
-
           if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target)) {
             cb(e);
           }
         };
-
         this.clickOutsideHandler = clickOutsideHandler;
         document.addEventListener('mousedown', clickOutsideHandler, false);
       },
@@ -673,7 +609,6 @@ class Cascader extends BaseComponent {
         const {
           loadData
         } = this.props;
-
         if (loadData) {
           new Promise(resolve => {
             loadData(selectedOpt).then(() => {
@@ -718,7 +653,6 @@ class Cascader extends BaseComponent {
       }
     });
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const {
       multiple,
@@ -733,38 +667,33 @@ class Cascader extends BaseComponent {
     } = prevState;
     let keyEntities = prevState.keyEntities || {};
     const newState = {};
-
     const needUpdate = name => {
       const firstInProps = _isEmpty(prevProps) && name in props;
       const nameHasChange = prevProps && !_isEqual(prevProps[name], props[name]);
       return firstInProps || nameHasChange;
     };
-
     const needUpdateData = () => {
       const firstInProps = !prevProps && 'treeData' in props;
       const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
       return firstInProps || treeDataHasChange;
     };
-
     const getRealKeys = (realValue, keyEntities) => {
       // normallizedValue is used to save the value in two-dimensional array format
       let normallizedValue = [];
-
       if (Array.isArray(realValue)) {
         normallizedValue = Array.isArray(realValue[0]) ? realValue : [realValue];
       } else {
         if (realValue !== undefined) {
           normallizedValue = [[realValue]];
         }
-      } // formatValuePath is used to save value of valuePath
-
-
+      }
+      // formatValuePath is used to save value of valuePath
       const formatValuePath = [];
       normallizedValue.forEach(valueItem => {
         const formatItem = onChangeWithObject ? valueItem.map(i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
         formatValuePath.push(formatItem);
-      }); // formatKeys is used to save key of value
-
+      });
+      // formatKeys is used to save key of value
       const formatKeys = [];
       formatValuePath.forEach(v => {
         const formatKeyItem = findKeysForValues(v, keyEntities);
@@ -772,10 +701,8 @@ class Cascader extends BaseComponent {
       });
       return formatKeys;
     };
-
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || _isEmpty(prevProps) && defaultValue;
-
     if (multiple) {
       // when value and treedata need updated
       if (needUpdateTreeData || needUpdateValue) {
@@ -785,9 +712,8 @@ class Cascader extends BaseComponent {
           keyEntities = convertDataToEntities(props.treeData);
           newState.keyEntities = keyEntities;
         }
-
-        let realKeys = prevState.checkedKeys; // when data was updated
-
+        let realKeys = prevState.checkedKeys;
+        // when data was updated
         if (needUpdateValue) {
           const realValue = needUpdate('value') ? value : defaultValue;
           realKeys = getRealKeys(realValue, keyEntities);
@@ -799,19 +725,16 @@ class Cascader extends BaseComponent {
             realKeys = getRealKeys(realValue, keyEntities);
           }
         }
-
         if (_isSet(realKeys)) {
           realKeys = [...realKeys];
         }
-
         const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
         const checkedKeys = new Set(calRes.checkedKeys);
-        const halfCheckedKeys = new Set(calRes.halfCheckedKeys); // disableStrictly
-
+        const halfCheckedKeys = new Set(calRes.halfCheckedKeys);
+        // disableStrictly
         if (props.disableStrictly) {
           newState.disabledKeys = calcDisabledKeys(keyEntities);
         }
-
         const isLeafOnlyMerge = calcMergeType(autoMergeValue, leafOnly) === strings.LEAF_ONLY_MERGE_TYPE;
         newState.prevProps = props;
         newState.checkedKeys = checkedKeys;
@@ -819,31 +742,24 @@ class Cascader extends BaseComponent {
         newState.resolvedCheckedKeys = new Set(normalizeKeyList(checkedKeys, keyEntities, isLeafOnlyMerge));
       }
     }
-
     return newState;
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   componentDidUpdate(prevProps) {
     let isOptionsChanged = false;
-
     if (!_isEqual(prevProps.treeData, this.props.treeData)) {
       isOptionsChanged = true;
       this.foundation.collectOptions();
     }
-
     if (prevProps.value !== this.props.value && !isOptionsChanged) {
       this.foundation.handleValueChange(this.props.value);
     }
   }
-
   renderTagInput() {
     const {
       size,
@@ -886,7 +802,6 @@ class Cascader extends BaseComponent {
       expandRestTagsOnClick: false
     });
   }
-
   renderInput() {
     const {
       size,
@@ -923,23 +838,18 @@ class Cascader extends BaseComponent {
       size: size
     }, inputProps)));
   }
-
   close() {
     this.foundation.close();
   }
-
   open() {
     this.foundation.open();
   }
-
   focus() {
     this.foundation.focus();
   }
-
   blur() {
     this.foundation.blur();
   }
-
   render() {
     const {
       zIndex,
@@ -980,9 +890,7 @@ class Cascader extends BaseComponent {
       afterClose: () => this.foundation.updateSearching(false)
     }, selection);
   }
-
 }
-
 Cascader.contextType = ConfigContext;
 Cascader.propTypes = {
   'aria-labelledby': PropTypes.string,
@@ -1002,7 +910,6 @@ Cascader.propTypes = {
   dropdownMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   emptyContent: PropTypes.node,
   motion: PropTypes.bool,
-
   /* show search input, if passed in a function, used as custom filter */
   filterTreeNode: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   filterLeafOnly: PropTypes.bool,