zp-bee/lib/bee-tree-multi-select/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

require("antd/es/tree-select/style");

var _treeSelect = _interopRequireDefault(require("antd/es/tree-select"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = require("react-dom");

var _utils = require("../_utils");

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 TreeNode = _treeSelect.default.TreeNode;
var InternalTreeMultiSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var label = props.label,
      className = props.className,
      injectLabel = props.injectLabel,
      onChange = props.onChange,
      others = __rest(props, ["label", "className", "injectLabel", "onChange"]);

  var _useState = (0, _react.useState)(1),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      maxTagCount = _useState2[0],
      setMaxTagCount = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      showLabelPop = _useState4[0],
      setShowLabelPop = _useState4[1];

  var container = (0, _react.useRef)(null);
  var selectRef = (0, _react.useRef)({});
  var injectRef = (0, _react.useRef)(null);
  var positionRef = (0, _react.useRef)({});
  (0, _react.useEffect)(function () {
    var _a;

    var parent = (_a = container.current) === null || _a === void 0 ? void 0 : _a.previousSibling;
    var dom = parent.querySelector('.ant-select-selector');
    var input = dom.querySelector('.ant-select-selection-search-input');
    var span = document.createElement('span');
    span.innerHTML = label;
    span.classList.add('bee-label');
    dom.prepend(span);
    var left = span.getBoundingClientRect().width + 10;
    dom.style.paddingLeft = "".concat(left, "px");
    input.style.textIndent = "".concat(left - 10, "px");
    positionRef.current = dom.getBoundingClientRect();
  }, []);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      handleChange: onSelfChange,
      onChange: onSelfChange,
      onFocus: onFocus,
      onBlur: onBlur
    };
  });
  var onFocus = (0, _react.useCallback)(function () {
    setMaxTagCount(undefined);
    setShowLabelPop(false);
  }, []);
  var onBlur = (0, _react.useCallback)(function () {
    setMaxTagCount(1);
  }, []);
  var onMouseEnter = (0, _react.useCallback)(function () {
    setShowLabelPop(true);
  }, []);
  var onMouseLeave = (0, _react.useCallback)(function () {
    setShowLabelPop(false);
  }, []);
  var onSelfChange = (0, _react.useCallback)(function (value, label, extra) {
    onChange && onChange(value, label, extra);
    selectRef.current = label;
  }, []);
  var _positionRef$current = positionRef.current,
      top = _positionRef$current.top,
      left = _positionRef$current.left,
      width = _positionRef$current.width;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_treeSelect.default, Object.assign({
    ref: injectRef,
    multiple: true,
    className: className ? className : '',
    maxTagCount: maxTagCount,
    onFocus: onFocus,
    onBlur: onBlur,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onChange: onSelfChange
  }, others)), /*#__PURE__*/_react.default.createElement("noscript", {
    ref: container
  }), showLabelPop && selectRef.current && selectRef.current.length > 0 && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
    className: "bee-hover",
    style: {
      top: top + 36,
      left: left + 40,
      width: width
    }
  }, selectRef.current.map(function (item) {
    return /*#__PURE__*/_react.default.createElement("span", {
      className: "bee-span"
    }, item, ";");
  })), (0, _utils.getPopContainer)()));
});
var BeeTreeMultiSelect = InternalTreeMultiSelect;
BeeTreeMultiSelect.MultiTreeNode = TreeNode;
var _default = BeeTreeMultiSelect;
exports.default = _default;