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

package/lib/cjs/cascader/index.d.ts

@@ -17,8 +17,8 @@ export interface TriggerRenderProps extends BasicTriggerRenderProps {
     componentProps: CascaderProps;
     onClear: (e: React.MouseEvent) => void;
 }
-export declare type SimpleValueType = string | number | CascaderData;
-export declare type Value = SimpleValueType | Array<SimpleValueType> | Array<Array<SimpleValueType>>;
+export type SimpleValueType = string | number | CascaderData;
+export type Value = SimpleValueType | Array<SimpleValueType> | Array<Array<SimpleValueType>>;
 export interface CascaderProps extends BasicCascaderProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];

package/lib/cjs/cascader/index.js

@@ -4,91 +4,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isSet2 = _interopRequireDefault(require("lodash/isSet"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/cascader/foundation"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/cascader/constants");
-
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
-
 require("@douyinfe/semi-foundation/lib/cjs/cascader/cascader.css");
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _util = require("@douyinfe/semi-foundation/lib/cjs/cascader/util");
-
 var _treeUtil = require("@douyinfe/semi-foundation/lib/cjs/tree/treeUtil");
-
 var _context = _interopRequireDefault(require("../configProvider/context"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _index = _interopRequireDefault(require("../input/index"));
-
 var _index2 = _interopRequireDefault(require("../popover/index"));
-
 var _item = _interopRequireDefault(require("./item"));
-
 var _trigger = _interopRequireDefault(require("../trigger"));
-
 var _tag = _interopRequireDefault(require("../tag"));
-
 var _tagInput = _interopRequireDefault(require("../tagInput"));
-
 var _utils = require("../_utils");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const prefixcls = _constants.cssClasses.PREFIX;
 const resetkey = 0;
-
 class Cascader extends _baseComponent.default {
   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,
@@ -103,14 +66,14 @@ class Cascader extends _baseComponent.default {
       } = this.props;
       const nodeKey = type === _constants.strings.IS_VALUE ? (0, _util.findKeysForValues)(value, keyEntities)[0] : value;
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
-
       if (!(0, _isEmpty2.default)(keyEntities) && !(0, _isEmpty2.default)(keyEntities[nodeKey])) {
         const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
           [`${prefixcls}-selection-tag-disabled`]: isDsiabled
-        }); // custom render tags
-
+        });
+        // custom render tags
         if ((0, _isFunction2.default)(displayRender)) {
-          return displayRender(keyEntities[nodeKey], idx); // default render tags
+          return displayRender(keyEntities[nodeKey], idx);
+          // default render tags
         } else {
           return /*#__PURE__*/_react.default.createElement(_tag.default, {
             size: size === 'default' ? 'large' : size,
@@ -126,26 +89,20 @@ class Cascader extends _baseComponent.default {
           }, 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,
@@ -173,7 +130,6 @@ class Cascader extends _baseComponent.default {
       const searchable = Boolean(filterTreeNode) && isSearching;
       const popoverCls = (0, _classnames.default)(dropdownClassName, `${prefixcls}-popover`);
       const renderData = this.foundation.getRenderData();
-
       const content = /*#__PURE__*/_react.default.createElement("div", {
         className: popoverCls,
         role: "listbox",
@@ -199,10 +155,8 @@ class Cascader extends _baseComponent.default {
         halfCheckedKeys: halfCheckedKeys,
         filterRender: filterRender
       }), bottomSlot);
-
       return content;
     };
-
     this.renderPlusN = hiddenTag => {
       const {
         disabled,
@@ -212,11 +166,9 @@ class Cascader extends _baseComponent.default {
       const plusNCls = (0, _classnames.default)(`${prefixcls}-selection-n`, {
         [`${prefixcls}-selection-n-disabled`]: disabled
       });
-
       const renderPlusNChildren = /*#__PURE__*/_react.default.createElement("span", {
         className: plusNCls
       }, "+", hiddenTag.length);
-
       return showRestTagsPopover && !disabled ? /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
         content: hiddenTag,
         showArrow: true,
@@ -225,7 +177,6 @@ class Cascader extends _baseComponent.default {
         autoAdjustOverflow: true
       }, restTagsPopoverProps), renderPlusNChildren) : renderPlusNChildren;
     };
-
     this.renderMultipleTags = () => {
       const {
         autoMergeValue,
@@ -241,7 +192,6 @@ class Cascader extends _baseComponent.default {
       [...realKeys].forEach((checkedKey, idx) => {
         const notExceedMaxTagCount = !(0, _isNumber2.default)(maxTagCount) || maxTagCount >= idx + 1;
         const item = this.renderTagItem(checkedKey, idx, _constants.strings.IS_KEY);
-
         if (notExceedMaxTagCount) {
           displayTag.push(item);
         } else {
@@ -250,7 +200,6 @@ class Cascader extends _baseComponent.default {
       });
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayTag, !(0, _isEmpty2.default)(hiddenTag) && this.renderPlusN(hiddenTag));
     };
-
     this.renderDisplayText = () => {
       const {
         displayProp,
@@ -261,10 +210,8 @@ class Cascader extends _baseComponent.default {
         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 {
@@ -273,10 +220,8 @@ class Cascader extends _baseComponent.default {
           }, index < displayPath.length - 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path, separator) : path));
         }
       }
-
       return displayText;
     };
-
     this.renderSelectContent = () => {
       const {
         placeholder,
@@ -287,7 +232,6 @@ class Cascader extends _baseComponent.default {
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
-
       if (!searchable) {
         if (multiple) {
           if ((0, _isEmpty2.default)(checkedKeys)) {
@@ -295,7 +239,6 @@ class Cascader extends _baseComponent.default {
               className: `${prefixcls}-selection-placeholder`
             }, placeholder);
           }
-
           return this.renderMultipleTags();
         } else {
           const displayText = this.renderDisplayText();
@@ -307,11 +250,9 @@ class Cascader extends _baseComponent.default {
           }, displayText ? displayText : placeholder);
         }
       }
-
       const input = multiple ? this.renderTagInput() : this.renderInput();
       return input;
     };
-
     this.renderSuffix = () => {
       const {
         suffix
@@ -326,7 +267,6 @@ class Cascader extends _baseComponent.default {
         "x-semi-prop": "suffix"
       }, suffix);
     };
-
     this.renderPrefix = () => {
       const {
         prefix,
@@ -347,7 +287,6 @@ class Cascader extends _baseComponent.default {
         "x-semi-prop": "prefix,insetLabel"
       }, labelNode);
     };
-
     this.renderCustomTrigger = () => {
       const {
         disabled,
@@ -362,7 +301,6 @@ class Cascader extends _baseComponent.default {
         checkedKeys
       } = this.state;
       let realValue;
-
       if (multiple) {
         if (this.mergeType === _constants.strings.NONE_MERGE_TYPE) {
           realValue = checkedKeys;
@@ -372,7 +310,6 @@ class Cascader extends _baseComponent.default {
       } else {
         realValue = [...selectedKeys][0];
       }
-
       return /*#__PURE__*/_react.default.createElement(_trigger.default, {
         value: realValue,
         inputValue: inputValue,
@@ -387,15 +324,12 @@ class Cascader extends _baseComponent.default {
         onRemove: this.handleRemoveByKey
       });
     };
-
     this.handleMouseOver = () => {
       this.foundation.toggleHoverState(true);
     };
-
     this.handleMouseLeave = () => {
       this.foundation.toggleHoverState(false);
     };
-
     this.handleClear = e => {
       e && e.stopPropagation();
       this.foundation.handleClear();
@@ -403,15 +337,11 @@ class Cascader extends _baseComponent.default {
     /**
      * A11y: simulate clear button click
      */
-
     /* istanbul ignore next */
-
-
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
       this.foundation.handleClearEnterPress(e);
     };
-
     this.showClearBtn = () => {
       const {
         showClear,
@@ -428,14 +358,12 @@ class Cascader extends _baseComponent.default {
       const multipleWithHaveValue = multiple && checkedKeys.size;
       return showClear && (hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
     };
-
     this.renderClearBtn = () => {
       const clearCls = (0, _classnames.default)(`${prefixcls}-clearbtn`);
       const {
         clearIcon
       } = this.props;
       const allowClear = this.showClearBtn();
-
       if (allowClear) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: clearCls,
@@ -445,26 +373,21 @@ class Cascader extends _baseComponent.default {
           tabIndex: 0
         }, clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
       }
-
       return null;
     };
-
     this.renderArrow = () => {
       const {
         arrowIcon
       } = this.props;
       const showClearBtn = this.showClearBtn();
-
       if (showClearBtn) {
         return null;
       }
-
       return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(`${prefixcls}-arrow`),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
-
     this.renderSelection = () => {
       const {
         disabled,
@@ -527,7 +450,6 @@ class Cascader extends _baseComponent.default {
        * 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.default.createElement("div", Object.assign({
         className: classNames,
         style: style,
@@ -547,56 +469,39 @@ class Cascader extends _baseComponent.default {
         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
@@ -610,10 +515,8 @@ class Cascader extends _baseComponent.default {
     this.clickOutsideHandler = null;
     this.foundation = new _foundation.default(this.adapter);
   }
-
   get adapter() {
     var _this = this;
-
     const filterAdapter = {
       updateInputValue: value => {
         this.setState({
@@ -629,7 +532,6 @@ class Cascader extends _baseComponent.default {
         const {
           preventScroll
         } = this.props;
-
         if (this.inputRef && this.inputRef.current) {
           // TODO: check the reason
           this.inputRef.current.focus({
@@ -648,16 +550,12 @@ class Cascader extends _baseComponent.default {
         const clickOutsideHandler = e => {
           const optionInstance = this.optionsRef && this.optionsRef.current;
           const triggerDom = this.triggerRef && this.triggerRef.current;
-
           const optionsDom = _reactDom.default.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);
       },
@@ -720,7 +618,6 @@ class Cascader extends _baseComponent.default {
         const {
           loadData
         } = this.props;
-
         if (loadData) {
           new Promise(resolve => {
             loadData(selectedOpt).then(() => {
@@ -765,7 +662,6 @@ class Cascader extends _baseComponent.default {
       }
     });
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const {
       multiple,
@@ -780,38 +676,33 @@ class Cascader extends _baseComponent.default {
     } = prevState;
     let keyEntities = prevState.keyEntities || {};
     const newState = {};
-
     const needUpdate = name => {
       const firstInProps = (0, _isEmpty2.default)(prevProps) && name in props;
       const nameHasChange = prevProps && !(0, _isEqual2.default)(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 = (0, _util.findKeysForValues)(v, keyEntities);
@@ -819,10 +710,8 @@ class Cascader extends _baseComponent.default {
       });
       return formatKeys;
     };
-
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || (0, _isEmpty2.default)(prevProps) && defaultValue;
-
     if (multiple) {
       // when value and treedata need updated
       if (needUpdateTreeData || needUpdateValue) {
@@ -832,9 +721,8 @@ class Cascader extends _baseComponent.default {
           keyEntities = (0, _util.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);
@@ -846,52 +734,41 @@ class Cascader extends _baseComponent.default {
             realKeys = getRealKeys(realValue, keyEntities);
           }
         }
-
         if ((0, _isSet2.default)(realKeys)) {
           realKeys = [...realKeys];
         }
-
         const calRes = (0, _treeUtil.calcCheckedKeys)((0, _flatten2.default)(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 = (0, _treeUtil.calcDisabledKeys)(keyEntities);
         }
-
         const isLeafOnlyMerge = (0, _util.calcMergeType)(autoMergeValue, leafOnly) === _constants.strings.LEAF_ONLY_MERGE_TYPE;
-
         newState.prevProps = props;
         newState.checkedKeys = checkedKeys;
         newState.halfCheckedKeys = halfCheckedKeys;
         newState.resolvedCheckedKeys = new Set((0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, isLeafOnlyMerge));
       }
     }
-
     return newState;
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   componentDidUpdate(prevProps) {
     let isOptionsChanged = false;
-
     if (!(0, _isEqual2.default)(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,
@@ -934,7 +811,6 @@ class Cascader extends _baseComponent.default {
       expandRestTagsOnClick: false
     });
   }
-
   renderInput() {
     const {
       size,
@@ -971,23 +847,18 @@ class Cascader extends _baseComponent.default {
       size: size
     }, inputProps)));
   }
-
   close() {
     this.foundation.close();
   }
-
   open() {
     this.foundation.open();
   }
-
   focus() {
     this.foundation.focus();
   }
-
   blur() {
     this.foundation.blur();
   }
-
   render() {
     const {
       zIndex,
@@ -1028,9 +899,7 @@ class Cascader extends _baseComponent.default {
       afterClose: () => this.foundation.updateSearching(false)
     }, selection);
   }
-
 }
-
 Cascader.contextType = _context.default;
 Cascader.propTypes = {
   'aria-labelledby': _propTypes.default.string,
@@ -1050,7 +919,6 @@ Cascader.propTypes = {
   dropdownMargin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
   emptyContent: _propTypes.default.node,
   motion: _propTypes.default.bool,
-
   /* show search input, if passed in a function, used as custom filter */
   filterTreeNode: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
   filterLeafOnly: _propTypes.default.bool,