@perfma/heaven/es/tree-select/index.js

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React from 'react';
import { TreeSelect, ConfigProvider, Divider, Button, Checkbox } from 'antd';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { classNames } from '../_util';
import Icon from '../icon';
import './index.less';

function ProTreeSelect(props) {
  var customizePrefixCls = props.prefixCls,
      loading = props.loading,
      customizeSuffixIcon = props.suffixIcon,
      _props$selectAllMode = props.selectAllMode,
      selectAllMode = _props$selectAllMode === void 0 ? false : _props$selectAllMode;

  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
      getPrefixCls = _React$useContext.getPrefixCls;

  var prefixCls = React.useMemo(function () {
    return getPrefixCls('select-suffix', customizePrefixCls);
  }, [customizePrefixCls, getPrefixCls]);
  var suffixIcon = React.useMemo(function () {
    if (customizeSuffixIcon) return customizeSuffixIcon;
    if (!loading) return /*#__PURE__*/React.createElement(Icon, {
      className: classNames([prefixCls, getPrefixCls('select-suffix-rotate', customizePrefixCls)]),
      type: "DownOutlined"
    });
  }, [customizeSuffixIcon]);

  var _useMergedState = useMergedState(props.defaultValue, {
    value: props.value
  }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      internalValue = _useMergedState2[0],
      setInternalValue = _useMergedState2[1]; // 合并值，且监听value变化重新setState

  /*  格式化TreeNode属性  */


  var formatTreeNode = function formatTreeNode(node) {
    if (node === null || node === void 0 ? void 0 : node.props) {
      var _arrChildren;

      var arrChildren = node.props.children;

      if (arrChildren && !Array.isArray(arrChildren)) {
        arrChildren = [node.props.children];
      }

      return _objectSpread(_objectSpread({}, node.props), {}, {
        children: (_arrChildren = arrChildren) === null || _arrChildren === void 0 ? void 0 : _arrChildren.map(function (item) {
          return formatTreeNode(item);
        })
      });
    }

    return {};
  };

  var mergedOptions = props.treeData ? props.treeData : [formatTreeNode(props.children)];
  /*  遍历并筛选节点，执行回调函数  */

  var traverseNodes = function traverseNodes(arr, cb) {
    return arr === null || arr === void 0 ? void 0 : arr.filter(function (item) {
      return !item.disabled;
    }).forEach(function (item) {
      cb(item);
      traverseNodes(item.children, cb);
    });
  };
  /*  检查是否全选  */


  var getIsAllChecked = function getIsAllChecked() {
    if (!Array.isArray(internalValue)) return false;
    var count = 0; // 保存所有选中节点(包括父节点)

    if (props.treeCheckStrictly || props.multiple && !props.treeCheckable || props.treeCheckable && props.showCheckedStrategy === TreeSelect.SHOW_ALL) {
      traverseNodes(mergedOptions, function () {
        return count++;
      });
      return count === internalValue.length;
    } // 只保存父节点(当父节点下所有子节点都选中时)


    if (props.treeCheckable && props.showCheckedStrategy === TreeSelect.SHOW_PARENT) {
      return mergedOptions.filter(function (item) {
        return !item.disabled;
      }).every(function (item) {
        if (props.labelInValue) {
          return internalValue.map(function (ele) {
            return ele.value;
          }).includes(item === null || item === void 0 ? void 0 : item.value);
        }

        return internalValue.includes(item.value);
      });
    } // 只保存子节点


    if (props.treeCheckable && (props.showCheckedStrategy === TreeSelect.SHOW_CHILD || props.showCheckedStrategy === undefined)) {
      traverseNodes(mergedOptions, function (item) {
        var _item$children;

        if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) {
          count++;
        }
      });
      return count === internalValue.length;
    }

    return false;
  };

  var handleChange = function handleChange(val, label, extra) {
    var _props$onChange;

    setInternalValue(val);
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val, label, extra);
  };
  /*  全选  */


  var handleSelectAll = function handleSelectAll() {
    // 选中所有节点，默认labelInValue
    if (props.treeCheckStrictly) {
      var allValue = [];
      traverseNodes(mergedOptions, function (item) {
        return allValue.push({
          value: item.value,
          label: item.title
        });
      });
      handleChange(allValue, null, {});
      return;
    } // 选中所有节点，并区分labelInValue


    if (props.multiple && !props.treeCheckable || props.treeCheckable && props.showCheckedStrategy === TreeSelect.SHOW_ALL) {
      var _allValue = [];
      var allLabel = [];
      traverseNodes(mergedOptions, function (item) {
        if (props.labelInValue) {
          _allValue.push({
            value: item.value,
            label: item.title
          });

          allLabel = null;
        } else {
          var _allLabel;

          _allValue.push(item.value);

          (_allLabel = allLabel) === null || _allLabel === void 0 ? void 0 : _allLabel.push(item.title);
        }
      });
      handleChange(_allValue, allLabel, {});
      return;
    } // 选中父节点


    if (props.treeCheckable && props.showCheckedStrategy === TreeSelect.SHOW_PARENT) {
      var _allValue2 = [];
      var _allLabel2 = [];
      mergedOptions.filter(function (item) {
        return !item.disabled;
      }).forEach(function (item) {
        if (props.labelInValue) {
          _allValue2.push({
            value: item.value,
            label: item.title
          });

          _allLabel2 = null;
        } else {
          var _allLabel3;

          _allValue2.push(item.value);

          (_allLabel3 = _allLabel2) === null || _allLabel3 === void 0 ? void 0 : _allLabel3.push(item.title);
        }
      });
      handleChange(_allValue2, _allLabel2, {});
      return;
    } // 选中叶子结点


    if (props.treeCheckable && (props.showCheckedStrategy === TreeSelect.SHOW_CHILD || props.showCheckedStrategy === undefined)) {
      var _allValue3 = [];
      var _allLabel4 = [];
      traverseNodes(mergedOptions, function (item) {
        var _item$children2;

        if (!((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length)) {
          if (props.labelInValue) {
            _allValue3.push({
              value: item.value,
              label: item.title
            });

            _allLabel4 = null;
          } else {
            var _allLabel5;

            _allValue3.push(item.value);

            (_allLabel5 = _allLabel4) === null || _allLabel5 === void 0 ? void 0 : _allLabel5.push(item.title);
          }
        }
      });
      handleChange(_allValue3, _allLabel4, {});
    }
  };
  /*  全选扩展菜单  */


  var selectAllDropdownRender = function selectAllDropdownRender(originNode) {
    var isAllChecked = getIsAllChecked();
    var isChecked = !!(internalValue === null || internalValue === void 0 ? void 0 : internalValue.length);

    var onCheckAllChange = function onCheckAllChange(e) {
      if (e.target.checked) {
        handleSelectAll();
      } else {
        handleChange([], [], {});
      }
    };

    return /*#__PURE__*/React.createElement(React.Fragment, null, originNode, /*#__PURE__*/React.createElement(Divider, {
      style: {
        margin: '8px 0'
      }
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        padding: '2px 16px 6px 16px'
      }
    }, props.treeCheckable ? /*#__PURE__*/React.createElement(Checkbox, {
      indeterminate: isChecked && !isAllChecked,
      onChange: onCheckAllChange,
      checked: isAllChecked
    }, "\u5168\u9009") : /*#__PURE__*/React.createElement(Button, {
      type: "link",
      disabled: isAllChecked,
      onClick: handleSelectAll
    }, "\u5168\u9009")));
  };

  var isShowSelectAll = selectAllMode && (props.multiple || props.treeCheckable) && !props.dropdownRender;
  var selectAllProps = isShowSelectAll ? {
    dropdownRender: selectAllDropdownRender,
    value: internalValue,
    onChange: handleChange
  } : null;
  return /*#__PURE__*/React.createElement(TreeSelect, _objectSpread(_objectSpread({}, props), {}, {
    suffixIcon: suffixIcon
  }, selectAllProps), props.children);
}

export default Object.assign(ProTreeSelect, {
  TreeNode: TreeSelect.TreeNode,
  SHOW_ALL: TreeSelect.SHOW_ALL,
  SHOW_PARENT: TreeSelect.SHOW_PARENT,
  SHOW_CHILD: TreeSelect.SHOW_CHILD
});