zp-bee/lib/bee-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"));

var _select = _interopRequireDefault(require("../bee-select/select"));

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

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

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

var _beeConfig = require("../bee-config");

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 Option = _select.default.Option;
var BeeMultiSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var label = props.label,
      _props$maxTagTextSize = props.maxTagTextSize,
      maxTagTextSize = _props$maxTagTextSize === void 0 ? 3 : _props$maxTagTextSize,
      _props$required = props.required,
      required = _props$required === void 0 ? false : _props$required,
      onChange = props.onChange,
      onFocus = props.onFocus,
      onBlur = props.onBlur,
      value = props.value,
      others = __rest(props, ["label", "maxTagTextSize", "required", "onChange", "onFocus", "onBlur", "value"]);

  var _useState = (0, _react.useState)(maxTagTextSize),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      maxTagTextLength = _useState2[0],
      setMaxTagTextLength = _useState2[1];

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

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

  var container = (0, _react.useRef)(null);
  var selectRef = (0, _react.useRef)({});
  var positionRef = (0, _react.useRef)({});
  var wrapperRef = (0, _react.useRef)();
  var injectRef = (0, _react.useRef)(null);
  var isFocusRef = (0, _react.useRef)(false); // 是否激活Focus;

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      onChange: onSelfChange,
      onFocus: onSelfFocus,
      onBlur: onSelfBlur,
      onChangeNoPenetrate: onChangeNoPenetrate //仅调用内部onChange方法 不调用外部透传的onChange

    };
  });

  var _React$useContext = _react.default.useContext(_beeConfig.ConfigContext),
      getPrefixCls = _React$useContext.getPrefixCls;

  var prefixCls = getPrefixCls('select');
  (0, _react.useEffect)(function () {
    var _a; // https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API


    var options = {
      rootMargin: '0px',
      threshold: 1.0
    };
    var parent = (_a = container.current) === null || _a === void 0 ? void 0 : _a.previousSibling;
    var target = parent.querySelector(".".concat(prefixCls, "-selector"));
    var observerInter = new IntersectionObserver(function (entries, observer) {
      entries.forEach(function (entry) {
        //  可见状态下设置宽度
        if (entry.isIntersecting) {
          var dom = parent.querySelector(".".concat(prefixCls, "-selector"));
          var span = document.createElement('span');
          span.innerHTML = label;
          span.classList.add("".concat(prefixCls, "-label")); // 是否必填

          if (required) {
            var must = document.createElement('span');
            must.innerHTML = '*';
            span.prepend(must);
          }

          dom.prepend(span); //此处使用getBoundingClientRect().width 在动画过程中会计算错误

          var _left = "".concat(span.offsetWidth + 16, "px");

          dom.style.paddingLeft = _left;
          var _entry$boundingClient = entry.boundingClientRect,
              x = _entry$boundingClient.x,
              y = _entry$boundingClient.y,
              _width = _entry$boundingClient.width,
              height = _entry$boundingClient.height,
              _top = _entry$boundingClient.top,
              domLeft = _entry$boundingClient.left;
          var domRect = {
            x: x,
            y: y,
            width: _width,
            height: height,
            top: _top,
            left: domLeft
          };

          if (_width) {
            positionRef.current = domRect;
          } else {
            positionRef.current = Object.assign({}, domRect, {
              width: positionRef.current.width
            });
          } // 停止监听


          observerInter.unobserve(target);
        }
      });
    }, options);
    var observer = new ResizeObserver(function (entries, observer) {
      entries.forEach(function (entry) {
        var _entry$contentRect = entry.contentRect,
            width = _entry$contentRect.width,
            top = _entry$contentRect.top;

        if (width) {
          positionRef.current = Object.assign({}, positionRef.current, {
            width: width
          });
          observer.unobserve(target);
          observerInter.observe(target);
        }
      });
    });
    observer.observe(target);
    return function () {
      observer.disconnect();
      observerInter.disconnect();
    };
  }, []);
  var onSelfFocus = (0, _react.useCallback)(function (e) {
    isFocusRef.current = true;
    setMaxTagCount(undefined);
    setMaxTagTextLength(undefined);
    setShowLabelPop(false);
    onFocus && onFocus(e);
  }, []);
  var onSelfBlur = (0, _react.useCallback)(function (e) {
    isFocusRef.current = false;
    setMaxTagCount(1);
    setMaxTagTextLength(maxTagTextSize);
    onBlur && onBlur(e);
  }, []);
  var onMouseEnter = (0, _react.useCallback)(function () {
    if (!isFocusRef.current) {
      setShowLabelPop(true);
    }
  }, []);
  var onMouseLeave = (0, _react.useCallback)(function () {
    setShowLabelPop(false);
  }, []);
  (0, _react.useEffect)(function () {
    // labelInValue 直接从value中取label拼接
    if (others.labelInValue) {
      if (Array.isArray(value)) {
        selectRef.current = value.map(function (i) {
          return {
            children: "".concat(i.label)
          };
        });
      } else {
        selectRef.current = [];
      }
    } // else {
    //   selectRef.current = option;
    // }

  }, [value]);
  var onSelfChange = (0, _react.useCallback)(function (value, option) {
    onChange === null || onChange === void 0 ? void 0 : onChange(value, option);
    onChangeNoPenetrate(value, option);
  }, []);
  var onChangeNoPenetrate = (0, _react.useCallback)(function (value, option) {
    if (others.labelInValue) {
      if (Array.isArray(value)) {
        selectRef.current = value.map(function (i) {
          return {
            children: "".concat(i.label)
          };
        });
      } else {
        selectRef.current = [];
      }
    } else {
      selectRef.current = option;
    }
  }, []);
  var _positionRef$current = positionRef.current,
      top = _positionRef$current.top,
      left = _positionRef$current.left,
      width = _positionRef$current.width;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-wrapper"),
    ref: wrapperRef,
    style: others.style
  }, /*#__PURE__*/_react.default.createElement(_select.default, Object.assign({
    ref: injectRef,
    mode: "multiple",
    allowClear: true,
    maxTagCount: maxTagCount,
    maxTagTextLength: maxTagTextLength,
    onChange: onSelfChange,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    value: value
  }, others, {
    onFocus: onSelfFocus,
    onBlur: onSelfBlur
  })), /*#__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: "".concat(top + 36, "px"),
      left: "".concat(left + 40, "px"),
      width: width,
      maxHeight: "calc(100vh - ".concat(top + 36, "px)"),
      overflow: 'hidden'
    }
  }, selectRef.current.map(function (item) {
    return /*#__PURE__*/_react.default.createElement("span", {
      className: "bee-span"
    }, item.children, ";");
  })), (0, _utils.getPopContainer)()));
});
BeeMultiSelect.Option = Option;
var _default = BeeMultiSelect;
exports.default = _default;