zp-bee/es/bee-tree-select/index.js

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import "antd/es/tree-select/style";
import _TreeSelect from "antd/es/tree-select";

var __rest = this && this.__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;
};

import React, { useEffect, useRef, forwardRef, useImperativeHandle, useCallback, useState } from 'react';
var TreeNode = _TreeSelect.TreeNode;
var InternalTreeSelect = /*#__PURE__*/forwardRef(function (props, ref) {
  var label = props.label,
      className = props.className,
      value = props.value,
      onChange = props.onChange,
      others = __rest(props, ["label", "className", "value", "onChange"]);

  var _useState = useState(value),
      _useState2 = _slicedToArray(_useState, 2),
      selfValue = _useState2[0],
      setSelfValue = _useState2[1];

  var container = useRef(null);
  var injectRef = useRef(null);
  useImperativeHandle(ref, function () {
    var _a, _b;

    return {
      handleChange: onSelfChange,
      onChange: onSelfChange,
      onFocus: (_a = injectRef.current) === null || _a === void 0 ? void 0 : _a.focus,
      onBlur: (_b = injectRef.current) === null || _b === void 0 ? void 0 : _b.blur
    };
  });
  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 + 16;
    dom.style.paddingLeft = "".concat(left, "px");
    input.style.textIndent = "".concat(left - 12, "px");
  }, []);
  useEffect(function () {
    setSelfValue(value);
  }, [value]);
  var onSelfChange = useCallback(function (value, label, extra) {
    onChange && onChange(value, label, extra);
    setSelfValue(value);
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_TreeSelect, Object.assign({
    ref: injectRef,
    className: className ? className : '',
    value: selfValue,
    onChange: onSelfChange
  }, others)), /*#__PURE__*/React.createElement("noscript", {
    ref: container
  }));
});
var BeeTreeSelect = InternalTreeSelect;
BeeTreeSelect.TreeNode = TreeNode;
export default BeeTreeSelect;