qt-public-ui/es/CascaderMultiSelect/index.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["className", "options", "defaultValue", "value", "disabledOptions", "placeholder", "searchPlaceholder", "footer", "dropdownHeight", "mode", "secondSelect", "thirdSelect", "customReset", "onChange", "max", "maxTagCount"];
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable spaced-comment */
/* eslint-disable react/jsx-closing-bracket-location */
/* eslint-disable no-console */
import React, { useState, useEffect } from 'react';
import { IconSlim as Icon, Input, Select, Default } from '..';
import { useDropdownClickAway } from 'qt-public-hooks';
import classnames from 'classnames';
import { get, isArray, isFunction } from 'lodash';
import { Checkbox } from 'antd';
import './style.less';
var getSubItems = function getSubItems(options, lv1Value, lv2Value) {
  if (lv1Value === void 0) {
    lv1Value = undefined;
  }
  if (lv2Value === void 0) {
    lv2Value = undefined;
  }
  if (lv1Value) {
    if (lv2Value) {
      var l1Idx = options.findIndex(function (item) {
        return item.value === lv1Value;
      });
      var lv1Children = l1Idx >= 0 ? options[l1Idx].children : [];
      var l2Idx = lv1Children.findIndex(function (item) {
        return item.value === lv2Value;
      });
      var children = l2Idx >= 0 ? lv1Children[l2Idx].children : [];
      return children;
    } else {
      var index = options.findIndex(function (item) {
        return item.value === lv1Value;
      });
      var _children = index >= 0 ? options[index].children : [];
      return _children;
    }
  } else {
    return options;
  }
};
var defaultSearch = function defaultSearch(value, options) {
  if (value === void 0) {
    value = '';
  }
  var res = options.filter(function (opt) {
    return String(opt.label).toLowerCase().includes(value.toLowerCase()) || String(opt.value).toLowerCase().includes(value.toLowerCase());
  });
  return res;
};
var resolveValue = function resolveValue(value, mode, secondSelect, thirdSelect, max) {
  if (mode === void 0) {
    mode = undefined;
  }
  if (max === void 0) {
    max = Infinity;
  }
  var lessThanMax = true;
  if (value && value.length > 0 && secondSelect && secondSelect.length > 0 && thirdSelect && thirdSelect.length > 0) {
    var _value$find, _value$find2;
    var sencodKey = secondSelect[0];
    var thirdKey = thirdSelect[0];
    var secondArray = ((_value$find = value.find(function (i) {
      return i.value === sencodKey;
    })) === null || _value$find === void 0 ? void 0 : _value$find.children) || [];
    var thirdArray = (((_value$find2 = value.find(function (i) {
      return i.value === thirdKey;
    })) === null || _value$find2 === void 0 ? void 0 : _value$find2.children) || []).reduce(function (arrV2, curV2) {
      return arrV2.concat(curV2.children);
    }, []) || [];
    if (secondArray.length + thirdArray.length > max) {
      lessThanMax = false;
    }
  }
  if (value && value.length > 0 && lessThanMax) {
    if (mode) {
      var rs = value.reduce(function (arrV1, curV1) {
        var l1 = curV1;
        if (secondSelect.find(function (i) {
          return i === l1.value;
        })) {
          var l1Children = curV1 && curV1.children && curV1.children.length > 0 ? curV1.children : [];
          var l2Arr = l1Children.map(function (i) {
            return {
              key: l1.value + "-" + i.value,
              value: l1.value + "-" + i.value,
              label: l1.label + "/" + i.label
            };
          });
          return arrV1.concat(l2Arr);
        } else if (thirdSelect.find(function (i) {
          return i === l1.value;
        })) {
          var lv1Children = curV1 && curV1.children && curV1.children.length > 0 ? curV1.children : [];
          var l2Res = lv1Children.reduce(function (arrV2, curV2) {
            var l2 = curV2;
            var lv2Children = curV2 !== null && curV2 !== void 0 && curV2.children && curV2.children.length > 0 ? curV2.children : [];
            var l2Arr = lv2Children.map(function (i) {
              return {
                key: l2.value + "-" + i.value,
                value: l2.value + "-" + i.value,
                label: l2.label + "/" + i.label
              };
            });
            return arrV2.concat(l2Arr);
          }, []);
          return arrV1.concat(l2Res.map(function (i) {
            return {
              key: l1.value + "-" + i.value,
              value: l1.value + "-" + i.value,
              label: l1.label + "/" + i.label
            };
          }));
        } else {
          return [];
        }
      }, []);
      return rs;
    } else {
      var l1 = value[value.length - 1];
      if (secondSelect.find(function (i) {
        return i === l1.value;
      })) {
        var l2 = l1.children && l1.children[l1.children.length - 1];
        if (l2) {
          return [{
            value: l1.value + "-" + l2.value,
            label: l1.label + "/" + l2.label
          }];
        } else {
          return undefined;
        }
      } else if (thirdSelect.find(function (i) {
        return i === l1.value;
      })) {
        var _l = l1.children && l1.children[l1.children.length - 1];
        var l3 = _l && _l.children && _l.children[_l.children.length - 1];
        if (_l && l3) {
          return [{
            value: l1.value + "-" + _l.value + "-" + l3.value,
            label: l1.label + "/" + _l.label + "/" + l3.label
          }];
        }
        return undefined;
      } else {
        return undefined;
      }
    }
  } else {
    return undefined;
  }
};
var checkFirstActiveTab = function checkFirstActiveTab(dataSource, grandKey) {
  if (dataSource.length === 0 || !grandKey) {
    return false;
  }
  var l1 = dataSource.find(function (i) {
    return i.value === grandKey;
  });
  return !!l1 && l1.children && l1.children.length > 0;
};
var checkSecondActiveTab = function checkSecondActiveTab(dataSource, grandKey, parentKey, type) {
  if (dataSource.length === 0 || !grandKey || !parentKey) {
    return false;
  }
  var l1 = dataSource.find(function (i) {
    return i.value === grandKey;
  });
  var l2 = l1 && l1.children && l1.children.length > 0 && l1.children.find(function (i) {
    return i.value === parentKey;
  });
  return type === 'cascader' ? !!(l1 && l2 && l2.children && l2.children.length > 0) : !!(l1 && l2);
};
var checkThirdActiveTab = function checkThirdActiveTab(dataSource, grandKey, parentKey, value) {
  if (dataSource.length === 0 || !value || !grandKey || !parentKey) {
    return false;
  }
  var l1 = dataSource.find(function (i) {
    return i.value === grandKey;
  });
  var l2 = l1 && l1.children && l1.children.length > 0 && l1.children.find(function (i) {
    return i.value === parentKey;
  });
  var l3 = l2 && l2.children && l2.children.length > 0 && l2.children.find(function (i) {
    return i.value === value;
  });
  return !!(l1 && l2 && l3);
};
var CascaderMultiSelect = function CascaderMultiSelect(props) {
  var className = props.className,
    _props$options = props.options,
    options = _props$options === void 0 ? [] : _props$options,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
    _props$value = props.value,
    propValue = _props$value === void 0 ? [] : _props$value,
    _props$disabledOption = props.disabledOptions,
    propDisableValue = _props$disabledOption === void 0 ? [] : _props$disabledOption,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
    _props$searchPlacehol = props.searchPlaceholder,
    searchPlaceholder = _props$searchPlacehol === void 0 ? '搜索...' : _props$searchPlacehol,
    footer = props.footer,
    _props$dropdownHeight = props.dropdownHeight,
    dropdownHeight = _props$dropdownHeight === void 0 ? 'auto' : _props$dropdownHeight,
    _props$mode = props.mode,
    mode = _props$mode === void 0 ? undefined : _props$mode,
    _props$secondSelect = props.secondSelect,
    secondSelect = _props$secondSelect === void 0 ? [] : _props$secondSelect,
    _props$thirdSelect = props.thirdSelect,
    thirdSelect = _props$thirdSelect === void 0 ? [] : _props$thirdSelect,
    customReset = props.customReset,
    onChange = props.onChange,
    _props$max = props.max,
    max = _props$max === void 0 ? Infinity : _props$max,
    maxTagCount = props.maxTagCount,
    selectProps = _objectWithoutPropertiesLoose(props, _excluded);
  var isControlled = ('value' in props);
  var _useState = useState(false),
    open = _useState[0],
    setOpen = _useState[1];
  var _useState2 = useState(isControlled ? propValue || [] : defaultValue),
    controledValue = _useState2[0],
    setControledValue = _useState2[1];
  var _useState3 = useState([]),
    lv2Items = _useState3[0],
    setLv2Items = _useState3[1];
  var _useState4 = useState([]),
    lv3Items = _useState4[0],
    setLv3Items = _useState4[1];
  var _useState5 = useState(),
    search = _useState5[0],
    setSearch = _useState5[1];
  var _useState6 = useState([]),
    searchItems = _useState6[0],
    setSearchItems = _useState6[1];
  var _useState7 = useState(undefined),
    l1Tab = _useState7[0],
    setL1Tab = _useState7[1];
  var finalControledValue = propValue || controledValue;
  var resp = resolveValue(finalControledValue, mode, secondSelect, thirdSelect, max) || [];
  var lessThanMax = (resp === null || resp === void 0 ? void 0 : resp.length) < max;
  var isMultiple = /^tag|multiple$/.test(mode);
  useEffect(function () {
    var _props$onSearch = props.onSearch,
      onSearch = _props$onSearch === void 0 ? defaultSearch : _props$onSearch;
    setSearchItems(onSearch(search || '', lv2Items || [], []) || []);
  }, [search, lv2Items, props]);
  useEffect(function () {
    var _props$onSearch2 = props.onSearch,
      onSearch = _props$onSearch2 === void 0 ? defaultSearch : _props$onSearch2;
    // 默认展开第一个tab
    if (options.length > 0) {
      var l1o = options[0];
      setL1Tab(l1o.value);
      if (l1o.children) {
        setLv2Items(l1o.children.map(function (i) {
          return _extends({}, i, {
            parent: l1o
          });
        }));
        setSearchItems(onSearch('', l1o.children.map(function (i) {
          return _extends({}, i, {
            parent: l1o
          });
        }) || [], []) || []);
      }
    }
  }, []);
  var dropDownCls = useDropdownClickAway(function () {
    setOpen(false);
    setSearch(undefined);
  }, []);
  var onLv1ListItemClick = function onLv1ListItemClick(item) {
    var value = item.value;
    var subItems = getSubItems(options, value);
    //这里就有个问题，key对不上， items中的key 还是原始数据中的key, 但是selectValue中是拼接好的, 所以需要将当前lv1的key补上
    setLv2Items(subItems.map(function (i) {
      return _extends({}, i, {
        parent: item
      });
    }));
    setLv3Items([]);
    setL1Tab(value);
  };
  var onLv2AllCheckBoxChange = function onLv2AllCheckBoxChange(checked) {
    var finalValue = isArray(finalControledValue) ? finalControledValue.filter(function (item) {
      return item.value !== l1Tab;
    }) : [];
    if (checked) {
      finalValue.push(options.find(function (opt) {
        return opt.value === l1Tab;
      }));
    }
    setControledValue(finalValue);
    isFunction(onChange) && onChange(finalValue);
  };
  var onLv2ListItemClick = function onLv2ListItemClick(item) {
    var value = item.value,
      label = item.label,
      parent = item.parent;
    if (secondSelect.find(function (i) {
      return i === parent.value;
    })) {
      //  1.如果是单选，选中一个菜单收起，并带回onChange
      //  2.如果是多选，选中之后菜单不收起，并且可选选择其他
      if (mode) {
        //1.如果当前二级的一级是选中状态，并且当前二级是选中状态，点击则反选
        //2.如果当前二级的一级是选中状态，并且当前二级是未选中状态，则选中
        //3.如果当前二级的一级是未选中状态，并且当前二级也是未选中状态，则选中彼此
        //4.如果当前二级的一级是未选中状态, 但当前二级是选中状态，不存在！
        var copyAll = JSON.parse(JSON.stringify(finalControledValue));
        var l1 = copyAll.find(function (i) {
          return i.value === parent.value;
        });
        if (l1) {
          var l2 = l1.children.find(function (i) {
            return i.value === value;
          });
          if (l2) {
            l1.children = l1.children.filter(function (i) {
              return i.value !== value;
            }); //利用数组的引用关系
          } else {
            if (!lessThanMax) return;
            l1.children.push({
              value: value,
              label: label
            });
          }
        } else {
          if (!lessThanMax) return;
          copyAll.push({
            value: parent.value,
            label: parent.label,
            children: [{
              value: value,
              label: label
            }]
          });
        }
        setControledValue(copyAll);
        onChange && onChange(copyAll);
      } else {
        setOpen(false); //收起小桌板
        var res = [{
          value: parent.value,
          label: parent.label,
          children: [{
            value: value,
            label: label
          }]
        }];
        setControledValue(res);
        onChange && onChange(res);
      }
    } else if (thirdSelect.find(function (i) {
      return i === parent.value;
    })) {
      var subItems = getSubItems(options, parent.value, value);
      setLv3Items(subItems.map(function (i) {
        return _extends({}, i, {
          parent: item,
          grand: parent
        });
      }));
    } else {
      throw 'options dont contains primary keys';
    }
  };
  var onLv3ListItemClick = function onLv3ListItemClick(item) {
    var parent = item.parent,
      grand = item.grand,
      value = item.value,
      label = item.label;
    if (secondSelect.find(function (i) {
      return i === grand.value;
    })) {
      throw 'could not hit this branch';
    } else if (thirdSelect.find(function (i) {
      return i === grand.value;
    })) {
      if (mode) {
        // 1.如果当前三级的二级和一级没有选中，则三级选中
        // 2.如果当前三级的二级和一级没有选中，三级是选中状态下，不存在这种情况
        // 3.如果当前三级的二级和一级已经选中，当前三级没有选中，则选中
        // 4.如果当前三级的二级和一级已经选中，当前三级也已经选中，则反选
        var copyAll = JSON.parse(JSON.stringify(finalControledValue));
        var l1 = copyAll.find(function (i) {
          return i.value === grand.value;
        });
        if (l1) {
          var l2 = l1.children.find(function (i) {
            return i.value === parent.value;
          });
          if (l2) {
            var l3 = l2.children.find(function (i) {
              return i.value === value;
            });
            if (l3) {
              l2.children = l2.children.filter(function (i) {
                return i.value !== value;
              }); //反选
              l1.children = l1.children.filter(function (i) {
                return i.children && i.children.length > 0;
              });
            } else {
              if (!lessThanMax) return;
              l2.children.push({
                value: value,
                label: label
              });
            }
          } else {
            if (!lessThanMax) return;
            l1.children.push({
              value: parent.value,
              label: parent.label,
              children: [{
                value: value,
                label: label
              }]
            });
          }
        } else {
          if (!lessThanMax) return;
          copyAll.push({
            value: grand.value,
            label: grand.label,
            children: [{
              value: parent.value,
              label: parent.label,
              children: [{
                value: value,
                label: label
              }]
            }]
          });
        }
        onChange && onChange(copyAll);
        setControledValue(copyAll);
      } else {
        var _l2 = finalControledValue.length > 0 && finalControledValue[finalControledValue.length - 1];
        var _l3 = _l2 && _l2.children && _l2.children[_l2.children.length - 1];
        var _l4 = _l3 && _l3.children && _l3.children[_l3.children.length - 1];
        if (_l2 && _l3 && _l4 && _l2.value === grand.value && _l3.value === parent.value && _l4.value === value) {
          onChange && onChange([]);
          setControledValue([]);
        } else {
          var res = [{
            value: grand.value,
            label: grand.label,
            children: [{
              value: parent.value,
              label: parent.label,
              children: [{
                value: value,
                label: label
              }]
            }]
          }];
          onChange && onChange(res);
          setControledValue(res);
        }
      }
    } else {
      throw 'options dont contains primary keys';
    }
  };

  //二级菜单Item
  var renderL2Item = function renderL2Item(item) {
    var value = item.value,
      label = item.label,
      children = item.children,
      parent = item.parent;
    if (parent) {
      if (secondSelect.find(function (i) {
        return i === parent.value;
      }) || value === 'all') {
        var disabled = checkSecondActiveTab(propDisableValue, parent.value, value, 'select');
        var isActive = checkSecondActiveTab(finalControledValue, parent.value, value, 'select');
        return /*#__PURE__*/React.createElement("div", {
          key: value,
          onClick: disabled ? undefined : function () {
            onLv2ListItemClick(item);
          },
          className: classnames('umui-level-2-item-with-children', {
            active: !isMultiple && checkSecondActiveTab(finalControledValue, parent.value, value, 'select')
          }, {
            disabled: disabled
          })
        }, isMultiple && /*#__PURE__*/React.createElement(Checkbox, {
          style: {
            marginRight: 9
          },
          checked: isActive
        }), /*#__PURE__*/React.createElement("div", {
          style: {
            flex: 1
          }
        }, label), !isMultiple && checkSecondActiveTab(finalControledValue, parent.value, value, 'select') && /*#__PURE__*/React.createElement(Icon, {
          type: "umicon-success",
          style: {
            fontSize: 16,
            color: '#97A1AF'
          }
        }));
      } else if (thirdSelect.find(function (i) {
        return i === parent.value;
      })) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, children && (children === null || children === void 0 ? void 0 : children.length) > 0 && /*#__PURE__*/React.createElement("div", {
          onClick: function onClick() {
            onLv2ListItemClick(item);
          },
          key: value,
          className: classnames('umui-level-2-item', {
            active: checkSecondActiveTab(finalControledValue, parent.value, value, 'cascader')
          })
        }, label, /*#__PURE__*/React.createElement(Icon, {
          type: "umicon-arrow-right",
          style: {
            fontSize: 12,
            color: '#97A1AF'
          }
        })), (!children || (children === null || children === void 0 ? void 0 : children.length) === 0) && /*#__PURE__*/React.createElement("div", {
          onClick: function onClick() {
            onLv2ListItemClick(item);
          },
          key: value,
          className: classnames('umui-level-2-item', {
            active: checkSecondActiveTab(finalControledValue, parent.value, value, 'cascader')
          })
        }, label));
      } else {
        return undefined;
      }
    } else {
      return undefined;
    }
  };
  var extra = function extra() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, lv3Items.map(function (opt) {
      var parent = opt.parent,
        grand = opt.grand,
        value = opt.value,
        label = opt.label;
      var isChecked = checkThirdActiveTab(finalControledValue, grand.value, parent.value, value);
      var disabled = checkThirdActiveTab(propDisableValue, grand.value, parent.value, value);
      return /*#__PURE__*/React.createElement("div", {
        className: "umui-cascader-select-tabs-level-3",
        key: opt.value
      }, /*#__PURE__*/React.createElement(Checkbox, {
        key: value,
        onChange: function onChange() {
          return onLv3ListItemClick(opt);
        },
        checked: isChecked,
        disabled: disabled
      }, label));
    }));
  };
  var onDeselect = function onDeselect(val) {
    if (!mode) return;
    var key = val.key;
    var _key$split = key.split('-'),
      l1 = _key$split[0],
      l2 = _key$split[1],
      l3 = _key$split[2];
    var copyAll = JSON.parse(JSON.stringify(finalControledValue));
    if (secondSelect.find(function (i) {
      return i === l1;
    })) {
      var l1o = copyAll.find(function (i) {
        return String(i.value) === l1;
      });
      if (l1o) {
        l1o.children = l1o.children.filter(function (i) {
          return String(i.value) !== l2;
        }) || [];
        if (l1o.children.length === 0) {
          copyAll = copyAll.filter(function (i) {
            return String(i.value) !== l1;
          }) || [];
        }
        // setControledValue(copyAll);
      }
    } else if (thirdSelect.find(function (i) {
      return i === l1;
    })) {
      var _l1o = copyAll.find(function (i) {
        return i.value === l1;
      });
      var l2o = _l1o && _l1o.children && _l1o.children.find(function (i) {
        return String(i.value) === l2;
      });
      if (l2o) {
        l2o.children = l2o.children.filter(function (i) {
          return String(i.value) !== l3;
        }) || [];
        if (l2o.children.length === 0) {
          _l1o.children = _l1o.children.filter(function (i) {
            return String(i.value) !== l2;
          }) || [];
          if (_l1o.children.length === 0) {
            copyAll = copyAll.filter(function (i) {
              return String(i.value) !== l1;
            }) || [];
          }
        }
      }
    }
    setControledValue(copyAll);
    onChange && onChange(copyAll);
  };
  var dropDownRender = function dropDownRender() {
    var _props$showDropDownSe = props.showDropDownSearch,
      showDropDownSearch = _props$showDropDownSe === void 0 ? [] : _props$showDropDownSe;
    var selectedL1Tab = options.find(function (i) {
      return i.value === l1Tab;
    });
    var matchedL1TabControledValue = finalControledValue.find(function (item) {
      return item.value === l1Tab;
    });
    var isAllChecked = isArray(finalControledValue) && get(matchedL1TabControledValue, 'children.length') === get(searchItems, 'length') && get(selectedL1Tab, 'children.length') > 0;
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        maxHeight: dropdownHeight
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-cascader-select-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-cascader-select-block"
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-cascader-select-tabs"
    }, /*#__PURE__*/React.createElement("ul", {
      className: "umui-cascader-select-tabs-level-1"
    }, options.map(function (item) {
      var label = item.label,
        value = item.value;
      return /*#__PURE__*/React.createElement("li", {
        key: label + "-" + value,
        onClick: function onClick() {
          onLv1ListItemClick(item);
        },
        className: classnames({
          'tab-active': checkFirstActiveTab(finalControledValue, value)
        })
      }, label, /*#__PURE__*/React.createElement(Icon, {
        style: {
          fontSize: 12
        },
        type: "umicon-arrow-right"
      }));
    })), /*#__PURE__*/React.createElement("div", {
      className: "umui-cascader-select-tabs-level-2"
    }, showDropDownSearch.find(function (i) {
      return i === l1Tab;
    }) && /*#__PURE__*/React.createElement("div", {
      className: "search-box"
    }, /*#__PURE__*/React.createElement(Input.Search, {
      value: search,
      placeholder: searchPlaceholder,
      styleType: "underline",
      onChange: function onChange(_ref) {
        var value = _ref.target.value;
        setSearch(value);
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        height: 'calc(100% - 32px)',
        overflow: 'auto'
      }
    }, isMultiple && !search && isArray(searchItems) && searchItems.length > 0 && get(selectedL1Tab, 'allText') && /*#__PURE__*/React.createElement("div", {
      className: "umui-level-2-item-with-children"
    }, /*#__PURE__*/React.createElement(Checkbox, {
      checked: isAllChecked,
      indeterminate: !isAllChecked && get(matchedL1TabControledValue, 'children.length') > 0,
      onChange: function onChange(e) {
        return onLv2AllCheckBoxChange(e.target.checked);
      }
    }, get(selectedL1Tab, 'allText'))), isArray(searchItems) && searchItems.length > 0 ? searchItems.map(function (item) {
      return renderL2Item(item);
    }) : /*#__PURE__*/React.createElement(Default, {
      type: "nothing",
      style: {
        margin: '10px 0'
      }
    }))))), footer && /*#__PURE__*/React.createElement("div", {
      className: "umui-cascader-select-footer"
    }, footer)), (lv3Items === null || lv3Items === void 0 ? void 0 : lv3Items.length) > 0 && extra && /*#__PURE__*/React.createElement("div", {
      className: "umui-cascader-select-custom-template-new"
    }, extra()));
  };
  var onClear = function onClear(initValue) {
    if (initValue === void 0) {
      initValue = [];
    }
    !isControlled && setControledValue(initValue);
    onChange && onChange(initValue);
  };
  var onSingleModeClear = function onSingleModeClear() {
    if (typeof customReset === 'function') {
      onClear(customReset());
    } else {
      onClear();
    }
    setOpen(false);
    setSearch(undefined);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-cascader-select"
  }, /*#__PURE__*/React.createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      !props.disabled && setOpen(true);
    }
  }, /*#__PURE__*/React.createElement(Select, _extends({
    className: classnames(className, {
      'umui-select-tag-no-border': isMultiple && maxTagCount === 0
    }),
    open: open,
    dropdownClassName: classnames('umui-cascader-popup', dropDownCls),
    style: {
      width: 200
    },
    value: resp,
    dropdownMatchSelectWidth: false,
    dropdownRender: dropDownRender,
    placeholder: placeholder,
    onDeselect: onDeselect,
    mode: mode,
    labelInValue: true
  }, selectProps)), !mode && finalControledValue.length > 0 && /*#__PURE__*/React.createElement("span", {
    onClick: onSingleModeClear,
    className: 'umui-cascader-select-reset'
  }, "\u91CD\u7F6E")));
};
CascaderMultiSelect.displayName = 'CascaderMultiSelect';
export default CascaderMultiSelect;