acud/lib/cascader/index.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _get = _interopRequireDefault(require("lodash/get"));
var _map = _interopRequireDefault(require("lodash/map"));
var _first = _interopRequireDefault(require("lodash/first"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _toLower = _interopRequireDefault(require("lodash/toLower"));
var _reduce = _interopRequireDefault(require("lodash/reduce"));
var _react = _interopRequireWildcard(require("react"));
var _classnames7 = _interopRequireDefault(require("classnames"));
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
var _arrayTreeFilter = _interopRequireDefault(require("array-tree-filter"));
var _OutlinedLeft = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLeft"));
var _OutlinedRight = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedRight"));
var _OutlinedLoading = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLoading"));
var _OutlinedDown = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedDown"));
var _input = _interopRequireDefault(require("../input"));
var _tag = _interopRequireDefault(require("../tag"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _clear = _interopRequireDefault(require("../clear"));
var _Cascader = _interopRequireDefault(require("./Cascader"));
var _renderEmpty = _interopRequireDefault(require("./renderEmpty"));
var _configProvider = require("../config-provider");
var _SizeContext = _interopRequireDefault(require("../config-provider/SizeContext"));
var _LocaleReceiver = _interopRequireWildcard(require("../locale-provider/LocaleReceiver"));
var _reactNode = require("../_util/reactNode");
var _devWarning = _interopRequireDefault(require("../_util/devWarning"));
var _motion = require("../_util/motion");
var _utils = require("./utils");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/*
 * @author: xuemin02
 * @Date: 2021-05-11 15:52:07
 */
var __rest = void 0 && (void 0).__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;
};
;
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["default"].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 (0, _reduce["default"])(label, function (prev, labelItem, labelIndex) {
    var isLast = labelIndex === labelLength - 1;
    var seperator = isLast ? '' : '>';
    if ((0, _utils.isPureType)(prev) && (0, _utils.isPureType)(labelItem)) {
      return prev + labelItem + seperator;
    }
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, prev, labelItem, seperator);
  }, '');
};
var defaultFilterOption = function defaultFilterOption(inputValue, path, names) {
  return path.some(function (option) {
    if (typeof option[names.label] === 'string') {
      return (0, _toLower["default"])(option[names.label]).indexOf((0, _toLower["default"])(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 (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, 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 = (0, _LocaleReceiver.useLocaleReceiver)('Cascader'),
    _useLocaleReceiver2 = (0, _slicedToArray2["default"])(_useLocaleReceiver, 1),
    defaultLocale = _useLocaleReceiver2[0];
  var locale = (0, _extends2["default"])((0, _extends2["default"])({}, defaultLocale), cascaderLocale);
  var inputRef = (0, _react.useRef)();
  var cachedRef = (0, _react.useRef)({});
  var measureRef = (0, _react.useRef)();
  var pickerRef = (0, _react.useRef)();
  var pickerLabelRef = (0, _react.useRef)();
  var tagsRef = (0, _react.useRef)();
  var _useState = (0, _react.useState)(props.value || props.defaultValue),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    inputValue = _useState4[0],
    setInputValue = _useState4[1];
  var _useState5 = (0, _react.useState)(0),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    inputWidth = _useState6[0],
    setInputWidth = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    inputFocused = _useState8[0],
    setInputFocused = _useState8[1];
  var _useState9 = (0, _react.useState)(false),
    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
    inputCompositionStart = _useState0[0],
    setInputCompositionStart = _useState0[1];
  var _useState1 = (0, _react.useState)(props.popupVisible),
    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
    popupVisible = _useState10[0],
    setPopupVisible = _useState10[1];
  var _useState11 = (0, _react.useState)(false),
    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
    pickerLabelOverflow = _useState12[0],
    setPickerLabelOverflow = _useState12[1];
  var isMulti = mode === 'multiple';
  var flattenOptions = (0, _react.useMemo)(function () {
    var showSearch = props.showSearch,
      options = props.options;
    return showSearch ? _flattenTree(options, props) : undefined;
  }, [props]);
  var disabledValue = (0, _react.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 = (0, _react.useCallback)(function () {
    var _a;
    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
  }, []);
  var blur = (0, _react.useCallback)(function () {
    var _a;
    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
  }, []);
  var getPopupPlacement = (0, _react.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 = (0, _react.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 {
      (0, _devWarning["default"])(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 (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
          __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 = (0, _react.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 = (0, _react.useCallback)(function (e) {
    e.preventDefault();
  }, []);
  var handlePickerLabelHover = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 ? (0, _first["default"])(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 = (0, _react.useCallback)(function (e) {
    if (inputFocused || popupVisible) {
      e.stopPropagation();
    }
  }, [inputFocused, popupVisible]);
  var handleInputBlur = (0, _react.useCallback)(function () {
    return setInputFocused(false);
  }, []);
  var handleInputFocus = (0, _react.useCallback)(function () {
    return setInputFocused(true);
  }, []);
  var handleInputKeyDown = (0, _react.useCallback)(function (e, firstFilteredOptionValue) {
    if (e.keyCode === _KeyCode["default"].BACKSPACE || e.keyCode === _KeyCode["default"].SPACE) {
      e.stopPropagation();
    }
    if (e.keyCode === _KeyCode["default"].ENTER && firstFilteredOptionValue) {
      var options = props.options;
      var names = getFilledFieldNames(props);
      var newValue = isMulti ? function () {
        if ((0, _utils.isIncludeArray)(value, firstFilteredOptionValue)) {
          return value;
        }
        return [].concat((0, _toConsumableArray2["default"])(value), [firstFilteredOptionValue]);
      }() : firstFilteredOptionValue;
      var selectedOptions = isMulti ? (0, _map["default"])(newValue, function (valueItem) {
        return (0, _arrayTreeFilter["default"])(options, function (o, level) {
          return o[names.value] === valueItem[level];
        }, {
          childrenKeyName: names.children
        });
      }) : (0, _arrayTreeFilter["default"])(options, function (o, level) {
        return o[names.value] === (0, _get["default"])(firstFilteredOptionValue, level);
      }, {
        childrenKeyName: names.children
      });
      updateValue(newValue, selectedOptions);
      setInputValue('');
      handlePopupVisibleChange(false);
    }
  }, [isMulti, value, props, updateValue, handlePopupVisibleChange]);
  var handleInputChange = (0, _react.useCallback)(function (e) {
    if (!popupVisible) {
      handlePopupVisibleChange(true);
    }
    var inputValue = e.target.value;
    setInputValue(inputValue);
  }, [popupVisible, handlePopupVisibleChange]);
  var handleCompositionStart = (0, _react.useCallback)(function (compositionStart) {
    setInputCompositionStart(compositionStart);
  }, []);
  var handleSelectionItemClear = (0, _react.useCallback)(function (e, valueIndex) {
    e.preventDefault();
    e.stopPropagation();
    var newValue = value.filter(function (valueItem) {
      return !(0, _utils.isEqualArrays)(valueItem, value[valueIndex]);
    });
    var options = props.options;
    var names = getFilledFieldNames(props);
    var selectedOptions = (0, _map["default"])(newValue, function (valueItem) {
      return (0, _arrayTreeFilter["default"])(options, function (o, level) {
        return o[names.value] === valueItem[level];
      }, {
        childrenKeyName: names.children
      });
    });
    updateValue(newValue, selectedOptions);
  }, [value, updateValue, props]);
  var handleSelectionClear = (0, _react.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 = (0, _react.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 = (0, _map["default"])(value, function (valueItem) {
        return (0, _arrayTreeFilter["default"])(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 (0, _map["default"])(_label, function (labelItem) {
        return displayRender(labelItem, _selectedOptions);
      });
    }
    var unwrappedValue = Array.isArray((0, _first["default"])(value)) ? (0, _first["default"])(value) : value;
    var selectedOptions = (0, _arrayTreeFilter["default"])(options, function (o, level) {
      return o[names.value] === (0, _get["default"])(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 = (0, _react.useCallback)(function (context, defaultLocale, size) {
    var _a, _b;
    var locale = (0, _extends2["default"])((0, _extends2["default"])({}, 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 = (0, _classnames7["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(inputPrefixCls, "-lg"), mergedSize === 'large'), "".concat(inputPrefixCls, "-sm"), mergedSize === 'small'));
    var pickerCls = (0, _classnames7["default"])("".concat(prefixCls, "-picker"), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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 = (0, _classnames7["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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 (0, _renderEmpty["default"])(locale.filterEmpty);
        });
      }
    } else {
      options = [getEmptyNode(names, notFoundContent || (0, _renderEmpty["default"])(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["default"].createElement(_OutlinedLeft["default"], null) : /*#__PURE__*/_react["default"].createElement(_OutlinedRight["default"], null));
    var loadingIcon = /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-menu-item-loading-icon")
    }, /*#__PURE__*/_react["default"].createElement(_OutlinedLoading["default"], {
      animation: "spin"
    }));
    var clearIcon = allowClear && !disabled && (0, _get["default"])(value, 'length') > 0 || inputValue ? /*#__PURE__*/_react["default"].createElement(_clear["default"], {
      className: "".concat(prefixCls, "-picker-clear"),
      onClick: handleSelectionClear
    }) : null;
    var inputIcon = suffixIcon ? (0, _reactNode.replaceElement)(suffixIcon, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-picker-arrow"),
      "aria-disabled": disabled
    }, suffixIcon), function () {
      return {
        className: (0, _classnames7["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, suffixIcon.props.className, suffixIcon.props.className), "".concat(prefixCls, "-picker-arrow"), true)),
        disabled: disabled
      };
    }) : /*#__PURE__*/_react["default"].createElement(_OutlinedDown["default"], {
      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["default"].createElement("div", {
              className: "".concat(prefixCls, "-tag-tooltip-label-item")
            }, label);
          });
        }
      }
      return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, multiLabel.map(function (labelItem, labelIndex) {
        var displayLabel = labelItem;
        var isPure = typeof maxTagTextLength === 'number' && (0, _utils.isPureType)(labelItem);
        if (isPure) {
          var strLabel = String(displayLabel);
          if (strLabel.length > maxTagTextLength) {
            displayLabel = "".concat(strLabel.slice(0, maxTagTextLength), "...");
          }
        }
        var tagCls = (0, _classnames7["default"])("".concat(prefixCls, "-tag"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-tag-mixed"), !isPure));
        var currentItemValue = value[labelIndex];
        var closable = !(0, _utils.isIncludeArray)(disabledValue, currentItemValue);
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-tag-wrap"),
          key: labelIndex
        }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
          title: labelItem,
          overlayClassName: "".concat(prefixCls, "-tag-tooltip")
        }, /*#__PURE__*/_react["default"].createElement(_tag["default"], {
          className: tagCls,
          disabled: disabled,
          closable: closable,
          onClose: function onClose(e) {
            return !disabled && handleSelectionItemClear(e, labelIndex);
          }
        }, displayLabel)));
      }), extraCount > 0 && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
        title: extraLabelsTip,
        overlayClassName: "".concat(prefixCls, "-tag-tooltip")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-tag-wrap"),
        key: "extra"
      }, /*#__PURE__*/_react["default"].createElement(_tag["default"], {
        className: "".concat(prefixCls, "-tag")
      }, "+ ", extraCount, " ..."))));
    }();
    var getPopupContainer = props.getPopupContainer || getContextPopupContainer;
    var rcCascaderPopupClassName = (0, _classnames7["default"])(popupClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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["default"].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 = (0, _omit["default"])(
    // 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 = (0, _first["default"])(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["default"].createElement("div", {
      ref: pickerRef,
      style: style,
      className: pickerCls,
      "aria-disabled": disabled,
      onClick: showSearch ? handleClick : undefined,
      onMouseDown: showSearch ? handleMouseDown : undefined
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-tags ").concat(sizeCls),
      ref: tagsRef
    }, multiLabelContent, /*#__PURE__*/_react["default"].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["default"].createElement(_input["default"], (0, _extends2["default"])({}, 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["default"].createElement("span", {
      ref: measureRef,
      className: "".concat(prefixCls, "-mirror"),
      "aria-hidden": true
    }, inputValue, "\xA0"))), clearIcon, inputIcon) : /*#__PURE__*/_react["default"].createElement("span", {
      ref: pickerRef,
      style: style,
      className: pickerCls,
      "aria-disabled": disabled,
      onClick: showSearch ? handleClick : undefined
    }, label && !inputValue && !inputCompositionStart && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
      title: pickerLabelOverflow ? label : undefined,
      overlayClassName: "".concat(prefixCls, "-picker-label-tooltip")
    }, /*#__PURE__*/_react["default"].createElement("span", {
      ref: pickerLabelRef,
      className: "".concat(prefixCls, "-picker-label"),
      "aria-disabled": disabled,
      onMouseOver: handlePickerLabelHover
    }, label)), /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, 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 = (0, _omit["default"])(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered', 'className']);
    var rootPrefixCls = getPrefixCls();
    var firstOptionValue = (0, _get["default"])(props, 'options[0].value');
    var initialActiveValue = firstOptionValue !== undefined ? [firstOptionValue] : undefined;
    return /*#__PURE__*/_react["default"].createElement(_Cascader["default"], (0, _extends2["default"])({}, 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: (0, _motion.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]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      focus: focus,
      blur: blur
    };
  });
  (0, _react.useLayoutEffect)(function () {
    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
  }, [inputValue]);
  (0, _react.useEffect)(function () {
    var _a;
    var clearSelectionTimer = (_a = cachedRef.current) === null || _a === void 0 ? void 0 : _a.clearSelectionTimer;
    return function () {
      if (clearSelectionTimer) {
        clearTimeout(clearSelectionTimer);
      }
    };
  }, []);
  (0, _react.useEffect)(function () {
    setValue(function (prevValue) {
      return 'value' in props && !(0, _isEqual["default"])(prevValue, props.value) ? props.value : prevValue;
    });
  }, [props.value]);
  (0, _react.useEffect)(function () {
    if ('popupVisible' in props) {
      setPopupVisible(props.popupVisible);
    }
  }, [props.popupVisible]);
  return /*#__PURE__*/_react["default"].createElement(_configProvider.ConfigConsumer, null, function (context) {
    return /*#__PURE__*/_react["default"].createElement(_LocaleReceiver["default"], {
      componentName: "Cascader"
    }, function (locale) {
      return /*#__PURE__*/_react["default"].createElement(_SizeContext["default"].Consumer, null, function (size) {
        return renderCascader(context, locale, size);
      });
    });
  });
};
var _default = exports["default"] = /*#__PURE__*/(0, _react.forwardRef)(Cascader);