zp-bee/lib/bee-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 _isVisible = _interopRequireDefault(require("rc-util/es/Dom/isVisible"));

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

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

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; // span占位符样式

var spanPlaceholderStyle = {
  position: 'relative',
  display: 'inline-block',
  zIndex: -1000,
  height: 0
};
var BeeSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var label = props.label,
      _props$required = props.required,
      required = _props$required === void 0 ? false : _props$required,
      others = __rest(props, ["label", "required"]);

  var _React$useContext = _react.default.useContext(_beeConfig.ConfigContext),
      getPrefixCls = _React$useContext.getPrefixCls;
  /** 初始化计算标志位 */


  var isInited = (0, _react.useRef)(false);
  var prefixCls = getPrefixCls('select');
  var container = (0, _react.useRef)(null);
  var injectRef = (0, _react.useRef)(null);
  var spanRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    var _a, _b;

    return {
      onFocus: (_a = injectRef.current) === null || _a === void 0 ? void 0 : _a.focus,
      onBlur: (_b = injectRef.current) === null || _b === void 0 ? void 0 : _b.blur
    };
  });
  var insertLabel = (0, _react.useCallback)(function () {
    var _a;

    if (!isInited.current && (0, _isVisible.default)(spanRef.current)) {
      var parent = (_a = container.current) === null || _a === void 0 ? void 0 : _a.previousSibling;
      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);
      dom.style.paddingLeft = "".concat(span.getBoundingClientRect().width + 16, "px"); // 仅单选

      if (!others.mode) {
        // 输入框的样式同样left
        var search = parent.querySelector(".".concat(prefixCls, "-selection-search"));

        if (search) {
          search.style.left = "".concat(span.getBoundingClientRect().width + 16, "px");
        }

        var searchplaceholder = parent.querySelector(".".concat(prefixCls, "-selection-placeholder"));

        if (searchplaceholder) {
          searchplaceholder.style.left = "".concat(span.getBoundingClientRect().width + 16, "px");
        }
      }

      isInited.current = true;
    }
  }, []);
  (0, _react.useEffect)(function () {
    if (isInited.current) {
      isInited.current = false; // label变化重新计算

      insertLabel();
    }
  }, [label]);
  (0, _react.useEffect)(insertLabel);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.default, Object.assign({
    ref: injectRef,
    placeholder: '请选择'
  }, others)), /*#__PURE__*/_react.default.createElement("noscript", {
    ref: container
  }), /*#__PURE__*/_react.default.createElement("span", {
    ref: spanRef,
    style: spanPlaceholderStyle
  }));
});
BeeSelect.Option = Option;
var _default = BeeSelect;
exports.default = _default;