import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
import { Popover } from '../Popover/index.js';
import { createPortal } from 'react-dom';
import { UUID } from '@iam-com/lib';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import More from '@iam-com/icons/More';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '../_verture/usePopupContainer-87febeb9.js';

var Protal = function Protal(props) {
  var children = props.children,
    className = props.className,
    anchorEl = props.anchorEl,
    onClose = props.onClose;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    styleCom = _useState2[0],
    setStyleCom = _useState2[1];
  var constData = useRef({
    uuid: $prefixCls + '-protal-box-content-' + UUID()
  });
  var domRef = useRef();
  var contentRef = useRef();
  useEffect(function () {
    handStyle();
    window.addEventListener('click', clickFunc);
    return function () {
      domRef && domRef.current && domRef.current.remove();
      window.removeEventListener('click', clickFunc);
    };
  }, []);
  /**
   * 查找元素
   * @param el 当前元素
   * @param selector 查找元素class
   */
  var closest = function closest(el, selector) {
    var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
      if (matchesSelector.call(el, selector)) {
        break;
      }
      el = el.parentElement;
    }
    return el;
  };
  /** 全局监听点击事件 */
  var clickFunc = function clickFunc(e) {
    if (!constData.current) return;
    var bol = closest(e.target, '.' + constData.current.uuid); // 是否存在下拉当中
    if (!bol) onClose && onClose();
  };
  /** 处理内容的定位样式 */
  var handStyle = function handStyle() {
    if (!anchorEl || !contentRef.current) return;
    var posDomRect = anchorEl.getBoundingClientRect();
    var contentDomRect = contentRef.current.getBoundingClientRect();
    var json = {
      opacity: 1,
      left: posDomRect.left,
      top: posDomRect.top + posDomRect.height
    };
    var winHeight = window.innerHeight;
    var winWidth = window.innerWidth;
    if (json.left + contentDomRect.width > winWidth) {
      json.left = winWidth - contentDomRect.width - 8;
      if (json.left < 0) json.left = 0;
    }
    if (json.top + contentDomRect.height > winHeight) {
      json.top = winHeight - contentDomRect.height - 8;
      if (json.top < 0) json.top = 0;
    }
    setStyleCom(json);
  };
  /** 处理className */
  var handClass = function handClass() {
    var str = $prefixCls + '-protal-box';
    if (className) str += ' ' + className;
    return str;
  };
  var handContent = function handContent() {
    return jsxs("div", Object.assign({
      className: handClass(),
      ref: domRef
    }, {
      children: [jsx("div", {
        className: "protal-mask"
      }), jsx("div", Object.assign({
        className: 'protal-content ' + constData.current.uuid,
        style: styleCom,
        ref: contentRef
      }, {
        children: children
      }))]
    }));
  };
  return jsx(Fragment, {
    children: /*#__PURE__*/createPortal(handContent(), document.getElementsByTagName('body')[0])
  });
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-auto-box {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.paraui-v3-auto-box > .auto-box-more {\n  display: inline-block;\n  height: 100%;\n  cursor: pointer;\n}\n\n.paraui-v3-auto-box-popover .auto-box-popover-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-v3-protal-box {\n  position: fixed;\n  z-index: 1500;\n  inset: 0px;\n}\n.paraui-v3-protal-box .protal-mask {\n  z-index: -1;\n  position: fixed;\n  inset: 0px;\n  background-color: transparent;\n}\n.paraui-v3-protal-box .protal-content {\n  border-radius: 4px;\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  background-color: white;\n  outline: 0;\n  position: absolute;\n  max-width: calc(100% - 32px);\n  min-width: 16px;\n  max-height: calc(100% - 32px);\n  min-height: 16px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  opacity: 0;\n  transform: none;\n  transition: opacity 243ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 162ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
styleInject(css_248z);

var AutoBox = function AutoBox(props) {
  var className = props.className,
    _props$list = props.list,
    list = _props$list === void 0 ? [] : _props$list,
    popoverClassName = props.popoverClassName,
    moreCustomize = props.moreCustomize,
    anchorEl = props.anchorEl,
    _props$hideMore = props.hideMore,
    hideMore = _props$hideMore === void 0 ? false : _props$hideMore,
    showNum = props.showNum,
    onCloseMore = props.onCloseMore,
    onShowMore = props.onShowMore,
    style = props.style,
    _props$trigger = props.trigger,
    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement;
  var _useState = useState('auto-box-' + UUID()),
    _useState2 = _slicedToArray(_useState, 1),
    classOne = _useState2[0]; // 唯一class
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    morePos = _useState4[0],
    setMorePos = _useState4[1]; // 超出在原始位置
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    openMoreCom = _useState6[0],
    setOpenMoreCom = _useState6[1]; // 显示更多
  var _useState7 = useState({}),
    _useState8 = _slicedToArray(_useState7, 1),
    timer = _useState8[0];
  var posDom = useRef();
  // 监听打开更多
  useEffect(function () {
    if (props.openMore !== undefined) {
      setOpenMoreCom(props.openMore);
    }
  }, [props.openMore]);
  useEffect(function () {
    if (props.showNum !== undefined) return;
    changeSize();
    window.addEventListener("resize", changeSize);
    return function () {
      window.removeEventListener("resize", changeSize);
      clearTimeout(timer.timer);
    };
  }, [list]);
  useEffect(function () {
    if (showNum !== undefined) {
      setMorePos(showNum);
      window.removeEventListener("resize", changeSize);
    }
  }, [showNum]);
  useEffect(function () {
    if (morePos !== null && list.length > morePos) {
      onShowMore && onShowMore(true);
    } else {
      onShowMore && onShowMore(false);
    }
  }, [list, morePos, onShowMore]);
  var onVisibleChange = function onVisibleChange(bol) {
    if (bol) return setOpenMoreCom(true);
    closeMore();
  };
  // 关闭显示更多
  var closeMore = function closeMore() {
    setOpenMoreCom(false);
    onCloseMore && onCloseMore();
  };
  // 关闭显示更多
  var handleCloseMore = function handleCloseMore() {
    closeMore();
  };
  // 不换行 计算
  var handMultiline = function handMultiline(index) {
    if (index === null || index === 0) return;
    if (index === undefined) index = list.length;
    var boxDom = document.querySelector('.' + classOne);
    if (!boxDom) return;
    if (boxDom.scrollWidth > boxDom.clientWidth) {
      var num = Number(index) - 1;
      // 超出
      setMorePos(num);
      handMultiline(num);
    } else {
      // 一个
      if (list.length <= index) handleCloseMore();
    }
  };
  // 多选 不换行
  var changeSize = function changeSize() {
    clearTimeout(timer.timer);
    closeMore();
    timer.timer = setTimeout(function () {
      setMorePos(list.length);
      handMultiline();
    }, 100);
  };
  // 处理class
  var handClass = function handClass() {
    var str = $prefixCls + '-auto-box';
    if (classOne) str += ' ' + classOne;
    if (className) str += ' ' + className;
    return str;
  };
  // 处理handClassPopover
  var handClassPopover = function handClassPopover() {
    var str = $prefixCls + '-auto-box-popover';
    if (popoverClassName) str += ' ' + popoverClassName;
    return str;
  };
  // 处理更多内容
  var handMoreDom = function handMoreDom() {
    return jsx("div", Object.assign({
      className: "auto-box-popover-content"
    }, {
      children: list && list.map(function (item, index) {
        if (morePos !== null && morePos > index) return null;
        return jsx(Fragment$1, {
          children: item
        }, index);
      })
    }));
  };
  /** 处理更多按钮 */
  var handMoreBtn = function handMoreBtn() {
    if (morePos !== null && list.length > morePos && !hideMore) {
      var handContent = function handContent() {
        if (moreCustomize) {
          if (typeof moreCustomize === 'function') {
            return moreCustomize(morePos);
          }
          return moreCustomize;
        }
        return jsx(More, {});
      };
      return jsx(Popover, Object.assign({
        open: openMoreCom,
        content: handMoreDom(),
        overlayClassName: handClassPopover(),
        placement: placement,
        trigger: trigger,
        onVisibleChange: onVisibleChange
      }, {
        children: jsx("div", Object.assign({
          className: "auto-box-more",
          ref: posDom
        }, {
          children: handContent()
        }))
      }));
    }
  };
  /** 自定义更多按钮 */
  var handCustomDialog = function handCustomDialog() {
    if (anchorEl && openMoreCom) {
      return jsx(Protal, Object.assign({
        className: handClassPopover(),
        anchorEl: anchorEl,
        onClose: closeMore
      }, {
        children: handMoreDom()
      }));
    }
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [list.map(function (item, index) {
      if (morePos !== null && morePos <= index) return null;
      return jsx(Fragment$1, {
        children: item
      }, index);
    }), handMoreBtn(), handCustomDialog()]
  }));
};

export { AutoBox, AutoBox as default };
