acud/es/cascader/index.js

acg react 组件库

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/*
 * @author: xuemin02
 * @Date: 2021-05-11 15:52:07
 */
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import get from 'lodash/get';
import map from 'lodash/map';
import first from 'lodash/first';
import isEqual from 'lodash/isEqual';
import toLower from 'lodash/toLower';
import reduce from 'lodash/reduce';
import React, { useImperativeHandle, forwardRef, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect, Fragment } from 'react';
import classnames from 'classnames';
import KeyCode from "rc-util/es/KeyCode";
import omit from "rc-util/es/omit";
import arrayTreeFilter from 'array-tree-filter';
import OutlinedLeft from "acud-icon/es/icons/OutlinedLeft";
import OutlinedRight from "acud-icon/es/icons/OutlinedRight";
import OutlinedLoading from "acud-icon/es/icons/OutlinedLoading";
import OutlinedDown from "acud-icon/es/icons/OutlinedDown";
import Input from '../input';
import Tag from '../tag';
import Tooltip from '../tooltip';
import Clear from '../clear';
import RcCascader from './Cascader';
import renderEmpty from './renderEmpty';
import { ConfigConsumer } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import LocaleReceiver, { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import { replaceElement } from '../_util/reactNode';
import devWarning from '../_util/devWarning';
import { getTransitionName } from '../_util/motion';
import { isEqualArrays, isIncludeArray, isPureType } from './utils';
;
var keepFilteredValueField = '__KEEP_FILTERED_OPTION_VALUE';
// limit the filtered item count by default
var defaultLimit = 50;
var highlightKeyword = function highlightKeyword(str, keyword, prefixCls) {
  return str.split(keyword).map(function (node, index) {
    return index === 0 ? node : [/*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-menu-item-keyword"),
      key: "seperator"
    }, keyword), node];
  });
};
var _flattenTree = function flattenTree(options, props) {
  var ancestor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  var names = getFilledFieldNames(props);
  var flattenOptions = [];
  var childrenName = names.children;
  options.forEach(function (option) {
    var path = ancestor.concat(option);
    if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
      flattenOptions.push(path);
    }
    if (option[childrenName]) {
      flattenOptions = flattenOptions.concat(_flattenTree(option[childrenName], props, path));
    }
  });
  return flattenOptions;
};
var defaultDisplayRender = function defaultDisplayRender() {
  var label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var labelLength = label.length;
  return reduce(label, function (prev, labelItem, labelIndex) {
    var isLast = labelIndex === labelLength - 1;
    var seperator = isLast ? '' : '>';
    if (isPureType(prev) && isPureType(labelItem)) {
      return prev + labelItem + seperator;
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null, prev, labelItem, seperator);
  }, '');
};
var defaultFilterOption = function defaultFilterOption(inputValue, path, names) {
  return path.some(function (option) {
    if (typeof option[names.label] === 'string') {
      return toLower(option[names.label]).indexOf(toLower(inputValue)) > -1;
    }
    return false;
  });
};
var defaultRenderFilteredOption = function defaultRenderFilteredOption(inputValue, path, prefixCls, names) {
  return path.map(function (option, index) {
    var label = option[names.label];
    var node = label;
    if (typeof label === 'string' && label.indexOf(inputValue) > -1) {
      node = highlightKeyword(label, inputValue, prefixCls);
    }
    return index === 0 ? node : ['>', node];
  });
};
var defaultSortFilteredOption = function defaultSortFilteredOption(a, b, inputValue, names) {
  var callback = function callback(elem) {
    if (typeof elem[names.label] === 'string') {
      return elem[names.label].indexOf(inputValue) > -1;
    }
    return false;
  };
  return a.findIndex(callback) - b.findIndex(callback);
};
var getFieldNames = function getFieldNames(_ref) {
  var fieldNames = _ref.fieldNames;
  return fieldNames;
};
var getFilledFieldNames = function getFilledFieldNames(props) {
  var fieldNames = getFieldNames(props) || {};
  var names = {
    children: fieldNames.children || 'children',
    label: fieldNames.label || 'label',
    value: fieldNames.value || 'value'
  };
  return names;
};
var getEmptyNode = function getEmptyNode(names, notFoundContent) {
  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, names.value, 'ACUD_CASCADER_NOT_FOUND'), names.label, notFoundContent), "disabled", true), "isEmptyNode", true);
};
var Cascader = function Cascader(props, ref) {
  var mode = props.mode,
    popupPlacement = props.popupPlacement,
    cascaderLocale = props.locale,
    onClear = props.onClear;
  var _useLocaleReceiver = useLocaleReceiver('Cascader'),
    _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
    defaultLocale = _useLocaleReceiver2[0];
  var locale = _extends(_extends({}, defaultLocale), cascaderLocale);
  var inputRef = useRef();
  var cachedRef = useRef({});
  var measureRef = useRef();
  var pickerRef = useRef();
  var pickerLabelRef = useRef();
  var tagsRef = useRef();
  var _useState = useState(props.value || props.defaultValue),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    inputValue = _useState4[0],
    setInputValue = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    inputWidth = _useState6[0],
    setInputWidth = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    inputFocused = _useState8[0],
    setInputFocused = _useState8[1];
  var _useState9 = useState(false),
    _useState0 = _slicedToArray(_useState9, 2),
    inputCompositionStart = _useState0[0],
    setInputCompositionStart = _useState0[1];
  var _useState1 = useState(props.popupVisible),
    _useState10 = _slicedToArray(_useState1, 2),
    popupVisible = _useState10[0],
    setPopupVisible = _useState10[1];
  var _useState11 = useState(false),
    _useState12 = _slicedToArray(_useState11, 2),
    pickerLabelOverflow = _useState12[0],
    setPickerLabelOverflow = _useState12[1];
  var isMulti = mode === 'multiple';
  var flattenOptions = useMemo(function () {
    var showSearch = props.showSearch,
      options = props.options;
    return showSearch ? _flattenTree(options, props) : undefined;
  }, [props]);
  var disabledValue = useMemo(function () {
    var options = props.options;
    var flattenOptions = _flattenTree(options, props);
    var disabledOptions = flattenOptions.filter(function (options) {
      return options.some(function (option) {
        return option.disabled;
      });
    });
    var names = getFilledFieldNames(props);
    return disabledOptions.map(function (options) {
      return options.map(function (o) {
        return o[names.value];
      });
    });
  }, [props]);
  var focus = useCallback(function () {
    var _a;
    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
  }, []);
  var blur = useCallback(function () {
    var _a;
    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
  }, []);
  var getPopupPlacement = useCallback(function () {
    var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ltr';
    if (popupPlacement !== undefined) {
      return popupPlacement;
    }
    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
  }, [popupPlacement]);
  var generateFilteredOptions = useCallback(function (prefixCls, renderEmpty) {
    var showSearch = props.showSearch,
      notFoundContent = props.notFoundContent;
    var names = getFilledFieldNames(props);
    var _showSearch$filter = showSearch.filter,
      filter = _showSearch$filter === void 0 ? defaultFilterOption : _showSearch$filter,
      _showSearch$render = showSearch.render,
      render = _showSearch$render === void 0 ? defaultRenderFilteredOption : _showSearch$render,
      _showSearch$sort = showSearch.sort,
      sort = _showSearch$sort === void 0 ? defaultSortFilteredOption : _showSearch$sort,
      _showSearch$limit = showSearch.limit,
      limit = _showSearch$limit === void 0 ? defaultLimit : _showSearch$limit;
    var filtered;
    if (limit > 0) {
      filtered = [];
      var matchCount = 0;
      flattenOptions.some(function (path) {
        var match = filter(inputValue, path, names);
        if (match) {
          filtered.push(path);
          matchCount += 1;
        }
        return matchCount >= limit;
      });
    } else {
      devWarning(typeof limit !== 'number', 'Cascader', "'limit' of showSearch should be positive number or false.");
      filtered = flattenOptions.filter(function (path) {
        return filter(inputValue, path, names);
      });
    }
    filtered = filtered.sort(function (a, b) {
      return sort(a, b, inputValue, names);
    });
    if (filtered.length > 0) {
      var field = names.value === names.label ? keepFilteredValueField : names.value;
      return filtered.map(function (path) {
        return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
          __IS_FILTERED_OPTION: true,
          path: path
        }, field, path.map(function (o) {
          return o[names.value];
        })), names.label, render(inputValue, path, prefixCls, names)), "disabled", path.some(function (o) {
          return !!o.disabled;
        })), "isEmptyNode", true);
      });
    }
    return [getEmptyNode(names, notFoundContent || renderEmpty(locale.empty))];
  }, [props, inputValue, flattenOptions, locale.empty]);
  var updateValue = useCallback(function (value) {
    var selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
    var _a;
    if (!('value' in props)) {
      setValue(value);
    }
    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, selectedOptions);
  }, [props]);
  var handleMouseDown = useCallback(function (e) {
    e.preventDefault();
  }, []);
  var handlePickerLabelHover = useCallback(function () {
    var ele = pickerLabelRef.current;
    var overflow = (ele === null || ele === void 0 ? void 0 : ele.scrollWidth) > (ele === null || ele === void 0 ? void 0 : ele.clientWidth);
    setPickerLabelOverflow(overflow);
  }, []);
  var handleClick = useCallback(function (e) {
    if (e.target !== inputRef.current) {
      var isIE = document.body.style.msTouchAction !== undefined;
      if (isIE) {
        window.setTimeout(function () {
          focus();
        });
      } else {
        focus();
      }
    }
  }, [focus]);
  var handlePopupVisibleChange = useCallback(function (popupVisible) {
    var _a;
    if (!('popupVisible' in props)) {
      setPopupVisible(popupVisible);
      setInputFocused(popupVisible);
      setInputValue(function (prevInputValue) {
        return popupVisible ? prevInputValue : '';
      });
    }
    (_a = props.onPopupVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, popupVisible);
  }, [props]);
  var handleValueChange = useCallback(function (value, selectedOptions) {
    !isMulti && setInputValue('');
    var selectedOptionFirst = isMulti ? {} : selectedOptions[0];
    if (selectedOptionFirst === null || selectedOptionFirst === void 0 ? void 0 : selectedOptionFirst.__IS_FILTERED_OPTION) {
      var unwrappedValue = selectedOptionFirst[keepFilteredValueField] === undefined ? first(value) : selectedOptionFirst[keepFilteredValueField];
      var unwrappedSelectedOptions = selectedOptionFirst.path;
      updateValue(unwrappedValue, unwrappedSelectedOptions);
      return;
    }
    updateValue(value, selectedOptions);
    if (isMulti) {
      window.setTimeout(function () {
        var _tagsRef$current = tagsRef.current,
          scrollHeight = _tagsRef$current.scrollHeight,
          clientHeight = _tagsRef$current.clientHeight;
        var maxScrollTop = scrollHeight - clientHeight;
        tagsRef.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
      }, 100);
    }
  }, [isMulti, updateValue]);
  var handleInputClick = useCallback(function (e) {
    if (inputFocused || popupVisible) {
      e.stopPropagation();
    }
  }, [inputFocused, popupVisible]);
  var handleInputBlur = useCallback(function () {
    return setInputFocused(false);
  }, []);
  var handleInputFocus = useCallback(function () {
    return setInputFocused(true);
  }, []);
  var handleInputKeyDown = useCallback(function (e, firstFilteredOptionValue) {
    if (e.keyCode === KeyCode.BACKSPACE || e.keyCode === KeyCode.SPACE) {
      e.stopPropagation();
    }
    if (e.keyCode === KeyCode.ENTER && firstFilteredOptionValue) {
      var options = props.options;
      var names = getFilledFieldNames(props);
      var newValue = isMulti ? function () {
        if (isIncludeArray(value, firstFilteredOptionValue)) {
          return value;
        }
        return [].concat(_toConsumableArray(value), [firstFilteredOptionValue]);
      }() : firstFilteredOptionValue;
      var selectedOptions = isMulti ? map(newValue, function (valueItem) {
        return arrayTreeFilter(options, function (o, level) {
          return o[names.value] === valueItem[level];
        }, {
          childrenKeyName: names.children
        });
      }) : arrayTreeFilter(options, function (o, level) {
        return o[names.value] === get(firstFilteredOptionValue, level);
      }, {
        childrenKeyName: names.children
      });
      updateValue(newValue, selectedOptions);
      setInputValue('');
      handlePopupVisibleChange(false);
    }
  }, [isMulti, value, props, updateValue, handlePopupVisibleChange]);
  var handleInputChange = useCallback(function (e) {
    if (!popupVisible) {
      handlePopupVisibleChange(true);
    }
    var inputValue = e.target.value;
    setInputValue(inputValue);
  }, [popupVisible, handlePopupVisibleChange]);
  var handleCompositionStart = useCallback(function (compositionStart) {
    setInputCompositionStart(compositionStart);
  }, []);
  var handleSelectionItemClear = useCallback(function (e, valueIndex) {
    e.preventDefault();
    e.stopPropagation();
    var newValue = value.filter(function (valueItem) {
      return !isEqualArrays(valueItem, value[valueIndex]);
    });
    var options = props.options;
    var names = getFilledFieldNames(props);
    var selectedOptions = map(newValue, function (valueItem) {
      return arrayTreeFilter(options, function (o, level) {
        return o[names.value] === valueItem[level];
      }, {
        childrenKeyName: names.children
      });
    });
    updateValue(newValue, selectedOptions);
  }, [value, updateValue, props]);
  var handleSelectionClear = useCallback(function (e) {
    e.preventDefault();
    e.stopPropagation();
    if (!inputValue) {
      handlePopupVisibleChange(false);
      cachedRef.current.clearSelectionTimer = window.setTimeout(function () {
        updateValue([]);
      }, 200);
    } else {
      setInputValue('');
    }
    // 调用onClear清空函数
    onClear && onClear();
  }, [inputValue, updateValue, handlePopupVisibleChange, onClear]);
  var label = useMemo(function () {
    var options = props.options,
      _props$displayRender = props.displayRender,
      displayRender = _props$displayRender === void 0 ? defaultDisplayRender : _props$displayRender;
    var names = getFilledFieldNames(props);
    if (isMulti) {
      var _selectedOptions = map(value, function (valueItem) {
        return arrayTreeFilter(options, function (o, level) {
          return o[names.value] === valueItem[level];
        }, {
          childrenKeyName: names.children
        });
      });
      var _label = _selectedOptions.length ? _selectedOptions.map(function (o) {
        return o.map(function (q) {
          return q[names.label];
        });
      }) : value;
      return map(_label, function (labelItem) {
        return displayRender(labelItem, _selectedOptions);
      });
    }
    var unwrappedValue = Array.isArray(first(value)) ? first(value) : value;
    var selectedOptions = arrayTreeFilter(options, function (o, level) {
      return o[names.value] === get(unwrappedValue, level);
    }, {
      childrenKeyName: names.children
    });
    var label = selectedOptions.length ? selectedOptions.map(function (o) {
      return o[names.label];
    }) : value;
    return displayRender(label, selectedOptions);
  }, [isMulti, value, props]);
  var renderCascader = useCallback(function (context, defaultLocale, size) {
    var _a, _b;
    var locale = _extends(_extends({}, defaultLocale), props.locale);
    var customizePrefixCls = props.prefixCls,
      customizeInputPrefixCls = props.inputPrefixCls,
      className = props.className,
      customizeSize = props.size,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      _props$bordered = props.bordered,
      bordered = _props$bordered === void 0 ? true : _props$bordered,
      _props$allowClear = props.allowClear,
      allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
      _props$showSearch = props.showSearch,
      showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
      style = props.style,
      _props$placeholder = props.placeholder,
      placeholder = _props$placeholder === void 0 ? locale.placeholder || 'Please select' : _props$placeholder,
      expandIcon = props.expandIcon,
      suffixIcon = props.suffixIcon,
      popupClassName = props.popupClassName,
      notFoundContent = props.notFoundContent,
      _props$maxTagTextLeng = props.maxTagTextLength,
      maxTagTextLength = _props$maxTagTextLeng === void 0 ? 8 : _props$maxTagTextLeng,
      maxTagCount = props.maxTagCount,
      _props$showCheckAll = props.showCheckAll,
      showCheckAll = _props$showCheckAll === void 0 ? true : _props$showCheckAll,
      dropdownRender = props.dropdownRender,
      children = props.children,
      otherProps = __rest(props, ["prefixCls", "inputPrefixCls", "className", "size", "disabled", "bordered", "allowClear", "showSearch", "style", "placeholder", "expandIcon", "suffixIcon", "popupClassName", "notFoundContent", "maxTagTextLength", "maxTagCount", "showCheckAll", "dropdownRender", "children"]);
    var getContextPopupContainer = context.getPopupContainer,
      getPrefixCls = context.getPrefixCls,
      direction = context.direction;
    var isRtlLayout = direction === 'rtl';
    var mergedSize = customizeSize || size;
    var prefixCls = getPrefixCls('cascader', customizePrefixCls);
    var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
    var sizeCls = classnames(_defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-lg"), mergedSize === 'large'), "".concat(inputPrefixCls, "-sm"), mergedSize === 'small'));
    var pickerCls = classnames("".concat(prefixCls, "-picker"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-picker-multi"), isMulti), "".concat(prefixCls, "-picker-rtl"), isRtlLayout), "".concat(prefixCls, "-picker-with-input-value"), inputValue), "".concat(prefixCls, "-picker-disabled"), disabled), "".concat(prefixCls, "-picker-lg"), mergedSize === 'large'), "".concat(prefixCls, "-picker-sm"), mergedSize === 'small'), "".concat(prefixCls, "-picker-show-search"), !!showSearch), "".concat(prefixCls, "-picker-focused"), inputFocused), "".concat(prefixCls, "-picker-expand"), popupVisible), "".concat(prefixCls, "-picker-borderless"), !bordered), className);
    var arrowCls = classnames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-picker-arrow"), true), "".concat(prefixCls, "-picker-arrow-expand"), popupVisible));
    var options = props.options;
    var names = getFilledFieldNames(props);
    var isOptionsEmpty = !(options && options.length > 0);
    if (!isOptionsEmpty) {
      if (inputValue) {
        options = generateFilteredOptions(prefixCls, function () {
          return renderEmpty(locale.filterEmpty);
        });
      }
    } else {
      options = [getEmptyNode(names, notFoundContent || renderEmpty(locale.empty))];
    }
    if (!popupVisible) {
      options = ((_a = cachedRef.current) === null || _a === void 0 ? void 0 : _a.options) || [];
    } else {
      cachedRef.current.options = options;
    }
    var expandIconNode = expandIcon || (isRtlLayout ? /*#__PURE__*/React.createElement(OutlinedLeft, null) : /*#__PURE__*/React.createElement(OutlinedRight, null));
    var loadingIcon = /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-menu-item-loading-icon")
    }, /*#__PURE__*/React.createElement(OutlinedLoading, {
      animation: "spin"
    }));
    var clearIcon = allowClear && !disabled && get(value, 'length') > 0 || inputValue ? /*#__PURE__*/React.createElement(Clear, {
      className: "".concat(prefixCls, "-picker-clear"),
      onClick: handleSelectionClear
    }) : null;
    var inputIcon = suffixIcon ? replaceElement(suffixIcon, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-picker-arrow"),
      "aria-disabled": disabled
    }, suffixIcon), function () {
      return {
        className: classnames(_defineProperty(_defineProperty({}, suffixIcon.props.className, suffixIcon.props.className), "".concat(prefixCls, "-picker-arrow"), true)),
        disabled: disabled
      };
    }) : /*#__PURE__*/React.createElement(OutlinedDown, {
      className: arrowCls,
      disabled: disabled
    });
    var multiLabelContent = function () {
      if (!isMulti) {
        return null;
      }
      var multiLabel = label;
      var extraCount = 0;
      var extraLabelsTip;
      if (typeof maxTagCount === 'number' && maxTagCount >= 0) {
        multiLabel = label.slice(0, maxTagCount);
        extraCount = label.length - maxTagCount;
        if (extraCount > 0) {
          var extraLabels = label.slice(maxTagCount);
          extraLabelsTip = extraLabels.map(function (label) {
            return /*#__PURE__*/React.createElement("div", {
              className: "".concat(prefixCls, "-tag-tooltip-label-item")
            }, label);
          });
        }
      }
      return /*#__PURE__*/React.createElement(Fragment, null, multiLabel.map(function (labelItem, labelIndex) {
        var displayLabel = labelItem;
        var isPure = typeof maxTagTextLength === 'number' && isPureType(labelItem);
        if (isPure) {
          var strLabel = String(displayLabel);
          if (strLabel.length > maxTagTextLength) {
            displayLabel = "".concat(strLabel.slice(0, maxTagTextLength), "...");
          }
        }
        var tagCls = classnames("".concat(prefixCls, "-tag"), _defineProperty({}, "".concat(prefixCls, "-tag-mixed"), !isPure));
        var currentItemValue = value[labelIndex];
        var closable = !isIncludeArray(disabledValue, currentItemValue);
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-tag-wrap"),
          key: labelIndex
        }, /*#__PURE__*/React.createElement(Tooltip, {
          title: labelItem,
          overlayClassName: "".concat(prefixCls, "-tag-tooltip")
        }, /*#__PURE__*/React.createElement(Tag, {
          className: tagCls,
          disabled: disabled,
          closable: closable,
          onClose: function onClose(e) {
            return !disabled && handleSelectionItemClear(e, labelIndex);
          }
        }, displayLabel)));
      }), extraCount > 0 && /*#__PURE__*/React.createElement(Tooltip, {
        title: extraLabelsTip,
        overlayClassName: "".concat(prefixCls, "-tag-tooltip")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-tag-wrap"),
        key: "extra"
      }, /*#__PURE__*/React.createElement(Tag, {
        className: "".concat(prefixCls, "-tag")
      }, "+ ", extraCount, " ..."))));
    }();
    var getPopupContainer = props.getPopupContainer || getContextPopupContainer;
    var rcCascaderPopupClassName = classnames(popupClassName, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-menu-").concat(direction), direction === 'rtl'), "".concat(prefixCls, "-menu-search"), showSearch && inputValue), "".concat(prefixCls, "-menu-empty"), options.length === 1 && (options[0][names.value] === 'ACUD_CASCADER_NOT_FOUND' || /*#__PURE__*/React.isValidElement(options[0][names.value]))));
    var dropdownMenuColumnStyle = {};
    var isNotFound = (options || []).length === 1 && options[0].isEmptyNode;
    if (isNotFound) {
      dropdownMenuColumnStyle.height = 'auto';
    }
    var resultListMatchInputWidth = showSearch.matchInputWidth !== false;
    if (resultListMatchInputWidth && (inputValue || isNotFound) && pickerRef.current) {
      var pickerWidth = (_b = pickerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth;
      dropdownMenuColumnStyle.width = pickerWidth;
      dropdownMenuColumnStyle.maxWidth = pickerWidth;
    }
    var inputProps = omit(
    // Not know why these props left
    otherProps, ['onChange', 'onClear', 'options', 'popupPlacement', 'transitionName', 'displayRender', 'onPopupVisibleChange', 'onDropdownMenuScroll', 'changeOnSelect', 'expandTrigger', 'popupVisible', 'getPopupContainer', 'loadData', 'filterOption', 'renderFilteredOption', 'sortFilteredOption', 'fieldNames', 'mode', 'menusEdgeBuffer', 'dropdownMenuRender', 'virtual']);
    var firstFilteredOptionValue = function () {
      var firstOption = first(options);
      var _ref4 = firstOption || {},
        isFilteredOption = _ref4.__IS_FILTERED_OPTION,
        disabled = _ref4.disabled,
        value = _ref4.value;
      if (isFilteredOption && !disabled) {
        return value;
      }
    }();
    var customInput = isMulti ? /*#__PURE__*/React.createElement("div", {
      ref: pickerRef,
      style: style,
      className: pickerCls,
      "aria-disabled": disabled,
      onClick: showSearch ? handleClick : undefined,
      onMouseDown: showSearch ? handleMouseDown : undefined
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-tags ").concat(sizeCls),
      ref: tagsRef
    }, multiLabelContent, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-input-wrap"),
      style: {
        width: value && value.length ? inputWidth : '100%'
      },
      onClick: showSearch ? focus : undefined,
      onFocus: showSearch ? focus : undefined,
      onBlur: showSearch ? blur : undefined
    }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
      tabIndex: -1,
      ref: inputRef,
      prefixCls: inputPrefixCls,
      placeholder: value && value.length > 0 ? '' : placeholder,
      className: "".concat(prefixCls, "-input ").concat(sizeCls),
      value: inputValue,
      disabled: disabled,
      readOnly: !showSearch,
      autoComplete: inputProps.autoComplete || 'off',
      onClick: showSearch ? handleInputClick : undefined,
      onBlur: showSearch ? handleInputBlur : undefined,
      onFocus: showSearch ? handleInputFocus : undefined,
      onKeyDown: function onKeyDown(e) {
        return handleInputKeyDown(e, firstFilteredOptionValue);
      },
      onChange: showSearch ? handleInputChange : undefined
    })), /*#__PURE__*/React.createElement("span", {
      ref: measureRef,
      className: "".concat(prefixCls, "-mirror"),
      "aria-hidden": true
    }, inputValue, "\xA0"))), clearIcon, inputIcon) : /*#__PURE__*/React.createElement("span", {
      ref: pickerRef,
      style: style,
      className: pickerCls,
      "aria-disabled": disabled,
      onClick: showSearch ? handleClick : undefined
    }, label && !inputValue && !inputCompositionStart && /*#__PURE__*/React.createElement(Tooltip, {
      title: pickerLabelOverflow ? label : undefined,
      overlayClassName: "".concat(prefixCls, "-picker-label-tooltip")
    }, /*#__PURE__*/React.createElement("span", {
      ref: pickerLabelRef,
      className: "".concat(prefixCls, "-picker-label"),
      "aria-disabled": disabled,
      onMouseOver: handlePickerLabelHover
    }, label)), /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
      tabIndex: -1,
      ref: inputRef,
      prefixCls: inputPrefixCls,
      placeholder: value && value.length > 0 ? '' : placeholder,
      className: "".concat(prefixCls, "-input ").concat(sizeCls),
      value: inputValue,
      disabled: disabled,
      readOnly: !showSearch,
      autoComplete: inputProps.autoComplete || 'off',
      onClick: showSearch ? handleInputClick : undefined,
      onBlur: showSearch ? handleInputBlur : undefined,
      onKeyDown: function onKeyDown(e) {
        return handleInputKeyDown(e, firstFilteredOptionValue);
      },
      onChange: showSearch ? handleInputChange : undefined,
      onCompositionStart: showSearch ? function () {
        return handleCompositionStart(true);
      } : undefined,
      onCompositionEnd: showSearch ? function () {
        return handleCompositionStart(false);
      } : undefined
    })), clearIcon, inputIcon);
    var input = children || customInput;
    var rcCascaderProps = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered', 'className']);
    var rootPrefixCls = getPrefixCls();
    var firstOptionValue = get(props, 'options[0].value');
    var initialActiveValue = firstOptionValue !== undefined ? [firstOptionValue] : undefined;
    return /*#__PURE__*/React.createElement(RcCascader, _extends({}, rcCascaderProps, {
      value: value,
      initialActiveValue: initialActiveValue,
      options: options,
      originOptions: props.options,
      keyword: inputValue,
      prefixCls: prefixCls,
      expandIcon: expandIconNode,
      loadingIcon: loadingIcon,
      size: mergedSize,
      withCheckAll: inputValue ? false : showCheckAll,
      locale: locale,
      getPopupContainer: getPopupContainer,
      popupVisible: popupVisible,
      popupClassName: rcCascaderPopupClassName,
      popupPlacement: getPopupPlacement(direction),
      dropdownMenuColumnStyle: dropdownMenuColumnStyle,
      dropdownRender: dropdownRender,
      transitionName: getTransitionName(rootPrefixCls, 'slide-up', props.transitionName),
      onPopupVisibleChange: handlePopupVisibleChange,
      onChange: handleValueChange
    }), input);
  }, [props, isMulti, label, value, disabledValue, pickerLabelOverflow, inputValue, inputWidth, inputFocused, inputCompositionStart, popupVisible, blur, focus, getPopupPlacement, generateFilteredOptions, handleClick, handleMouseDown, handlePickerLabelHover, handleInputClick, handleInputBlur, handleInputFocus, handleInputKeyDown, handleInputChange, handleCompositionStart, handleSelectionClear, handleSelectionItemClear, handleValueChange, handlePopupVisibleChange]);
  useImperativeHandle(ref, function () {
    return {
      focus: focus,
      blur: blur
    };
  });
  useLayoutEffect(function () {
    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
  }, [inputValue]);
  useEffect(function () {
    var _a;
    var clearSelectionTimer = (_a = cachedRef.current) === null || _a === void 0 ? void 0 : _a.clearSelectionTimer;
    return function () {
      if (clearSelectionTimer) {
        clearTimeout(clearSelectionTimer);
      }
    };
  }, []);
  useEffect(function () {
    setValue(function (prevValue) {
      return 'value' in props && !isEqual(prevValue, props.value) ? props.value : prevValue;
    });
  }, [props.value]);
  useEffect(function () {
    if ('popupVisible' in props) {
      setPopupVisible(props.popupVisible);
    }
  }, [props.popupVisible]);
  return /*#__PURE__*/React.createElement(ConfigConsumer, null, function (context) {
    return /*#__PURE__*/React.createElement(LocaleReceiver, {
      componentName: "Cascader"
    }, function (locale) {
      return /*#__PURE__*/React.createElement(SizeContext.Consumer, null, function (size) {
        return renderCascader(context, locale, size);
      });
    });
  });
};
export default /*#__PURE__*/forwardRef(Cascader);