@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/lib/tree-select/tree-select.js

@@ -0,0 +1,519 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../_utils/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+var _utils = require("../_utils");
+var _index = require("../index");
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
+function flattenTreeData(treeData) {
+  var map = new _map.default();
+  function flatten(node) {
+    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var _a;
+    var key = node.key;
+    var data = (0, _extends2.default)((0, _extends2.default)({}, node), {
+      childrenKeys: [],
+      parentKeys: parentKeys
+    });
+    map.set(key, data);
+    if (node.children) {
+      var keys = [];
+      (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
+        var _context, _data$childrenKeys, _context2;
+        var childKey = flatten(child, (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(parentKeys), [key]));
+        keys.push(childKey);
+        var grandchildrenKeys = map.get(childKey).childrenKeys;
+        (_data$childrenKeys = data.childrenKeys).push.apply(_data$childrenKeys, (0, _concat.default)(_context2 = [childKey]).call(_context2, (0, _toConsumableArray2.default)(grandchildrenKeys)));
+      });
+    }
+    return key;
+  }
+  treeData.forEach(function (node) {
+    flatten(node);
+  });
+  return map;
+}
+var InternalTreeSelect = function InternalTreeSelect(props, ref) {
+  var _context3, _classNames4, _classNames10;
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var treeSelectProps = (0, _utils.getCompProps)('TreeSelect', userDefaultProps, props);
+  var size = treeSelectProps.size,
+    value = treeSelectProps.value,
+    autoFocus = treeSelectProps.autoFocus,
+    className = treeSelectProps.className,
+    defaultOpen = treeSelectProps.defaultOpen,
+    dropdownClassName = treeSelectProps.dropdownClassName,
+    disabled = treeSelectProps.disabled,
+    borderType = treeSelectProps.borderType,
+    _treeSelectProps$show = treeSelectProps.showArrow,
+    showArrow = _treeSelectProps$show === void 0 ? true : _treeSelectProps$show,
+    allowClear = treeSelectProps.allowClear,
+    customPrefixcls = treeSelectProps.prefixCls,
+    onFocus = treeSelectProps.onFocus,
+    onBlur = treeSelectProps.onBlur,
+    onClear = treeSelectProps.onClear,
+    onVisibleChange = treeSelectProps.onVisibleChange,
+    mode = treeSelectProps.mode,
+    showSearch = treeSelectProps.showSearch,
+    onChange = treeSelectProps.onChange,
+    onSearch = treeSelectProps.onSearch,
+    defaultValue = treeSelectProps.defaultValue,
+    placeholder = treeSelectProps.placeholder,
+    dropdownStyle = treeSelectProps.dropdownStyle,
+    style = treeSelectProps.style,
+    clearIcon = treeSelectProps.clearIcon,
+    filterTreeNode = treeSelectProps.filterTreeNode,
+    treeNodeFilterProp = treeSelectProps.treeNodeFilterProp,
+    treeNodeLabelProp = treeSelectProps.treeNodeLabelProp,
+    _treeSelectProps$popp = treeSelectProps.popperStyle,
+    popperStyle = _treeSelectProps$popp === void 0 ? {} : _treeSelectProps$popp,
+    tagRender = treeSelectProps.tagRender,
+    treeData = treeSelectProps.treeData,
+    virtual = treeSelectProps.virtual,
+    treeIcon = treeSelectProps.treeIcon,
+    showTreeIcon = treeSelectProps.showTreeIcon,
+    switcherIcon = treeSelectProps.switcherIcon,
+    treeDefaultExpandAll = treeSelectProps.treeDefaultExpandAll,
+    treeDefaultExpandedKeys = treeSelectProps.treeDefaultExpandedKeys,
+    treeCheckStrictly = treeSelectProps.treeCheckStrictly,
+    treeExpandedKeys = treeSelectProps.treeExpandedKeys,
+    treeExpandOnClickNode = treeSelectProps.treeExpandOnClickNode,
+    treeLoadData = treeSelectProps.treeLoadData,
+    onTreeExpand = treeSelectProps.onTreeExpand,
+    onSelect = treeSelectProps.onSelect,
+    onCheck = treeSelectProps.onCheck;
+  var isMultiple = mode === 'multiple'; // 是否多选
+  var _useMergedState = (0, _hooks.useMergedState)(isMultiple ? [] : undefined, {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    initValue = _useMergedState2[0],
+    setInitValue = _useMergedState2[1];
+  var _useState = (0, _react.useState)(treeExpandedKeys),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
+  var innerRef = (0, _react.useRef)();
+  var selectRef = ref || innerRef;
+  var searchRef = (0, _react.useRef)(null); // 搜索框ref
+  var selectionRef = (0, _react.useRef)(null);
+  var dropDownRef = (0, _react.useRef)(null);
+  var measureRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(!!props.visible || defaultOpen),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    optionShow = _useState6[0],
+    setOptionShow = _useState6[1]; // 下拉列表是否展示
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1]; // 搜索框定时器
+  var _useState9 = (0, _react.useState)(INPUT_MIN_WIDTH),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    inputWidth = _useState10[0],
+    setInputWidth = _useState10[1]; // 输入框宽度
+  var _useState11 = (0, _react.useState)(autoFocus),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    focusd = _useState12[0],
+    setFocusd = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    selectTreeNodes = _useState14[0],
+    setSelectTreeNodes = _useState14[1];
+  var TreeMap = (0, _react.useMemo)(function () {
+    return flattenTreeData(treeData);
+  }, [treeData]);
+  var isSelected = (0, _react.useMemo)(function () {
+    return !!(selectTreeNodes === null || selectTreeNodes === void 0 ? void 0 : selectTreeNodes.length);
+  }, [selectTreeNodes]);
+  var selectPrefixCls = getPrefixCls(prefixCls, 'tree-select', customPrefixcls);
+  // 选择器样式
+  var selectCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true));
+  // 下拉列表框样式
+  var dropDownCls = (0, _classnames.default)(dropdownClassName, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown"), true));
+  // 多选，单选公共样式
+  var commCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-size-")).call(_context3, size), size), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-wrapper"), true), _classNames4));
+  (0, _react.useEffect)(function () {
+    var arr = [];
+    if (isMultiple && (initValue === null || initValue === void 0 ? void 0 : initValue.length)) {
+      for (var index = 0; index < initValue.length; index++) {
+        var key = initValue[index];
+        if (TreeMap.has(key)) {
+          arr.push(TreeMap.get(key));
+        }
+      }
+    } else {
+      if (TreeMap.has(initValue)) {
+        arr.push(TreeMap.get(initValue));
+      }
+    }
+    setSelectTreeNodes(arr);
+  }, [initValue, TreeMap, isMultiple]);
+  (0, _react.useEffect)(function () {
+    if (optionShow === false) {
+      handleClear();
+    }
+  }, [optionShow]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setFocusd(true);
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setFocusd(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  (0, _react.useEffect)(function () {
+    selectionRef.current.addEventListener('mouseup', function (e) {
+      var _a;
+      var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
+      if (isCloseBtn) {
+        e.stopPropagation();
+      }
+    });
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
+  }, [searchValue]);
+  var getTreeNodeLabel = function getTreeNodeLabel(node) {
+    return (node === null || node === void 0 ? void 0 : node[treeNodeLabelProp]) || (node === null || node === void 0 ? void 0 : node.title);
+  };
+  // 输入框变化搜索内容
+  var handleSearchChange = (0, _react.useCallback)(function (event) {
+    var val = event.currentTarget.value;
+    setOptionShow(true);
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]);
+  // 清除搜索内容
+  var handleClear = (0, _react.useCallback)(function () {
+    if (searchRef.current) {
+      searchRef.current.value = '';
+      setSearchValue('');
+    }
+  }, [searchRef]);
+  // 清空选择器内容
+  var handleReset = function handleReset(e) {
+    e.stopPropagation();
+    if (isMultiple) {
+      setInitValue([]);
+    } else {
+      setInitValue('');
+    }
+    onClear === null || onClear === void 0 ? void 0 : onClear('');
+    setSearchValue('');
+    onChange === null || onChange === void 0 ? void 0 : onChange(undefined, undefined);
+  };
+  // 多选模式下清除某一项
+  var handleRemove = function handleRemove(e, key) {
+    var _context4;
+    var _a, _b;
+    if (disabled) return;
+    var allRemoveKeys = (0, _concat.default)(_context4 = []).call(_context4, (0, _toConsumableArray2.default)(((_a = TreeMap.get(key)) === null || _a === void 0 ? void 0 : _a.childrenKeys) || []), (0, _toConsumableArray2.default)(((_b = TreeMap.get(key)) === null || _b === void 0 ? void 0 : _b.parentKeys) || []), [key]);
+    var newSelectTreeNodes = (0, _filter.default)(selectTreeNodes).call(selectTreeNodes, function (item) {
+      return !(0, _includes.default)(allRemoveKeys).call(allRemoveKeys, item.key);
+    });
+    var newKeys = (0, _map2.default)(newSelectTreeNodes).call(newSelectTreeNodes, function (_ref) {
+      var key = _ref.key;
+      return key;
+    });
+    if (!Object.hasOwnProperty.call(treeSelectProps, 'value')) {
+      setInitValue(newKeys);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(newKeys, newSelectTreeNodes);
+    e.stopPropagation();
+  };
+  var handleSelect = function handleSelect(keys, state) {
+    !isMultiple && !Object.hasOwnProperty.call(treeSelectProps, 'value') && setInitValue(keys[0]);
+    setSelectedKeys(keys);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(keys, state);
+    !isMultiple && (onChange === null || onChange === void 0 ? void 0 : onChange(keys[0], [TreeMap.get(keys[0])]));
+    if (!isMultiple) {
+      setOptionShow(false);
+    }
+  };
+  var handleCheck = function handleCheck(keys, state) {
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(keys, state);
+    console.log(1111, state);
+    onChange === null || onChange === void 0 ? void 0 : onChange(keys);
+    !Object.hasOwnProperty.call(treeSelectProps, 'value') && setInitValue(keys);
+  };
+  var handleExpand = function handleExpand(keys, state) {
+    !Object.hasOwnProperty.call(treeSelectProps, 'treeExpandedKeys') && setExpandedKeys(keys);
+    onTreeExpand === null || onTreeExpand === void 0 ? void 0 : onTreeExpand(keys, state);
+  };
+  // 渲染后缀图标
+  var renderSuffix = function renderSuffix() {
+    var _classNames5;
+    var suffixIcon = treeSelectProps.suffixIcon;
+    // 选择器下拉icon样式
+    var arrowIconCls = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames5));
+    var iconShow = allowClear && !disabled && (isMultiple ? !!selectTreeNodes.length : (initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-icon-clear"), true));
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
+      onClick: handleReset,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      className: clearIconCls
+    }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "close-solid"
+    })), showArrow && /*#__PURE__*/_react.default.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-down"
+    })));
+  };
+  var defFilterTreeNode = function defFilterTreeNode(node) {
+    var _a;
+    if (typeof filterTreeNode === 'function') {
+      return filterTreeNode(node, searchValue);
+    }
+    if ((_a = node === null || node === void 0 ? void 0 : node[treeNodeFilterProp]) === null || _a === void 0 ? void 0 : (0, _includes.default)(_a).call(_a, searchValue)) {
+      return true;
+    }
+    return false;
+  };
+  var dropRender = function dropRender() {
+    var treeProps = {
+      expandOnClickNode: treeExpandOnClickNode,
+      loadData: treeLoadData,
+      treeData: treeData,
+      virtual: virtual,
+      defaultExpandAll: treeDefaultExpandAll,
+      defaultExpandedKeys: treeDefaultExpandedKeys,
+      checkStrictly: treeCheckStrictly,
+      selectedKeys: selectedKeys,
+      expandedKeys: expandedKeys,
+      filterValue: searchValue,
+      icon: treeIcon,
+      showIcon: showTreeIcon,
+      switcherIcon: switcherIcon,
+      notFoundContent: renderNotContent(),
+      filterTreeNode: defFilterTreeNode,
+      onSelect: handleSelect,
+      onExpand: handleExpand
+    };
+    if (isMultiple) {
+      treeProps.checkable = true;
+      treeProps.checkedKeys = initValue;
+      treeProps.onCheck = handleCheck;
+    }
+    return /*#__PURE__*/_react.default.createElement(_index.Tree, (0, _extends2.default)({}, treeProps));
+  };
+  // 下拉列表为空时显示的内容
+  var renderNotContent = function renderNotContent() {
+    // 下拉列表为空
+    var emptyListCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown-empty"), true));
+    var notFoundContent = treeSelectProps.notFoundContent;
+    var emptyContent = notFoundContent || '暂无数据';
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: emptyListCls
+    }, emptyContent);
+  };
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (showSearch && autoFocus && !disabled) {
+      (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [showSearch, autoFocus, disabled]);
+  // 渲染下拉列表框
+  var renderContent = function renderContent() {
+    var dropDownStyle = (0, _extends2.default)({
+      width: style === null || style === void 0 ? void 0 : style.width
+    }, dropdownStyle);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: dropDownCls,
+      style: dropDownStyle,
+      ref: dropDownRef
+    }, dropRender()));
+  };
+  // 处理多选tag
+  var handleMaxTagHolder = (0, _react.useCallback)(function () {
+    var maxTagPlaceholder = treeSelectProps.maxTagPlaceholder;
+    if (typeof maxTagPlaceholder === 'function') {
+      return /*#__PURE__*/_react.default.createElement(_index.Tag, {
+        type: "edit",
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder(selectTreeNodes));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_index.Tag, {
+        type: "edit",
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder);
+    }
+  }, [selectTreeNodes]);
+  var renderSingle = function renderSingle() {
+    var label = '';
+    if (isSelected) {
+      label = getTreeNodeLabel(selectTreeNodes[0]);
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: singleCls,
+      ref: selectionRef,
+      title: label
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search")
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !showSearch || !!disabled
+    })), isSelected && !searchValue && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item")
+    }, label), !isSelected && !searchValue && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
+  };
+  var renderMultiple = function renderMultiple() {
+    var _context5, _classNames8, _context6, _classNames9;
+    var maxTagCount = treeSelectProps.maxTagCount,
+      maxTagPlaceholder = treeSelectProps.maxTagPlaceholder;
+    var multipleCls = (0, _classnames.default)(commCls, (_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), (0, _defineProperty2.default)(_classNames8, (0, _concat.default)(_context5 = "".concat(selectPrefixCls, "-")).call(_context5, mode), mode), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-focused"), focusd || optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-placeholder"), placeholder && !selectTreeNodes.length), _classNames8));
+    var itemCls = (0, _classnames.default)((_classNames9 = {}, (0, _defineProperty2.default)(_classNames9, "".concat(selectPrefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames9, (0, _concat.default)(_context6 = "".concat(selectPrefixCls, "-selection-item-")).call(_context6, size), size), _classNames9));
+    var TagStyle = {
+      margin: '2px 8px 2px 0',
+      maxWidth: '100%'
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: multipleCls,
+      ref: selectionRef
+    }, Array.isArray(selectTreeNodes) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map2.default)(selectTreeNodes).call(selectTreeNodes, function (item, index) {
+      var key = item.key;
+      var label = getTreeNodeLabel(item);
+      return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement("span", {
+        key: key,
+        className: (0, _classnames.default)("".concat(selectPrefixCls, "-selection-tag")),
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        }
+      }, typeof tagRender === 'function' ? tagRender === null || tagRender === void 0 ? void 0 : tagRender((0, _extends2.default)({
+        onClose: handleRemove,
+        disabled: disabled,
+        size: size
+      }, item)) : /*#__PURE__*/_react.default.createElement(_index.Tag, {
+        type: "edit",
+        style: TagStyle,
+        size: size,
+        closable: true,
+        disabled: disabled,
+        onClose: function onClose(e) {
+          return handleRemove(e, key);
+        },
+        "data-tag": key
+      }, label));
+    }), maxTagCount && selectTreeNodes.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/_react.default.createElement("span", {
+      className: itemCls
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item-content")
+    }, "\u5171", selectTreeNodes.length, "\u9879")) : null), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search"),
+      style: {
+        width: inputWidth
+      }
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !showSearch || !!disabled
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      ref: measureRef,
+      className: "".concat(selectPrefixCls, "-selection-search-mirror")
+    }, searchValue, "\xA0")), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, !(selectTreeNodes === null || selectTreeNodes === void 0 ? void 0 : selectTreeNodes.length) && !searchValue && placeholder), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix()));
+  };
+  var singleCls = (0, _classnames.default)(commCls, (_classNames10 = {}, (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames10));
+  var renderSelect = function renderSelect() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: selectCls,
+      ref: selectRef,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: selectionCls,
+      tabIndex: disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      onBlur: function onBlur() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, !isMultiple ? renderSingle() : renderMultiple()));
+  };
+  var catchStyle = function catchStyle() {
+    var _a;
+    if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
+      var _ref2 = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+        width = _ref2.width;
+      return (0, _extends2.default)({
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),
+        zIndex: 1050
+      }, popperStyle);
+    }
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
+    }
+  };
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, treeSelectProps), {
+    prefixCls: selectPrefixCls,
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !(showSearch && searchValue)
+  });
+  return (0, _usePopper.default)(renderSelect(), renderContent(), popperProps);
+};
+var TreeSelect = /*#__PURE__*/_react.default.forwardRef(InternalTreeSelect);
+TreeSelect.displayName = 'TreeSelect';
+var _default = TreeSelect;
+exports.default = _default;

package/lib/typography/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/upload/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.6.40",
+  "version": "1.7.1",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [
@@ -83,10 +83,12 @@
     "axios": "^0.21.1",
     "big.js": "^6.0.2",
     "classnames": "^2.2.6",
+    "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.1",
     "cropperjs": "^1.5.12",
     "date-fns": "2.28.0",
     "lodash": "^4.17.20",
+    "react-color": "^2.19.3",
     "react-draggable": "^4.4.3",
     "react-popper": "^2.2.3",
     "resize-observer-polyfill": "^1.5.1",
@@ -106,12 +108,14 @@
     "@types/babel__traverse": "7.17.1",
     "@types/big.js": "^6.0.0",
     "@types/classnames": "^2.2.10",
+    "@types/color": "^3.0.3",
     "@types/enzyme": "^3.10.7",
     "@types/jest": "^26.0.14",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "ts3.9",
     "@types/puppeteer": "^3.0.2",
     "@types/react": "^16.9.21",
+    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^16.9.5",
     "@types/responselike": "ts3.9",
     "@typescript-eslint/eslint-plugin": "^3.0.0",