import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-split {\n  display: flex;\n  min-height: 200px;\n  -webkit-user-select: none;\n  user-select: none;\n}\n.paraui-v3-split .split-left {\n  background-color: #ffffff;\n  position: relative;\n  min-width: 201px;\n}\n.paraui-v3-split .split-left .split-separator {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 6px;\n  height: 100%;\n  background-color: white;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);\n  cursor: col-resize;\n}\n.paraui-v3-split .split-left .split-separator i {\n  display: inline-block;\n  height: 14px;\n  width: 1px;\n  background-color: #e9e9e9;\n  margin: 0 1px;\n}\n.paraui-v3-split .split-left .split-left-content {\n  padding: 20px 34px 20px 20px;\n}\n.paraui-v3-split .split-right {\n  background-color: #ffffff;\n  flex: 1;\n}\n.paraui-v3-split .split-right-content {\n  padding: 20px;\n}";
styleInject(css_248z);

var Split = function Split(props) {
  var _props$minWidth = props.minWidth,
    minWidth = _props$minWidth === void 0 ? 200 : _props$minWidth,
    children = props.children;
  var startX, startWidth, startWidthContainer;
  var separatorRef = React__default.useRef(null);
  var scalableRef = React__default.useRef(null);
  var containerRef = React__default.useRef(null);
  var _React$useState = React__default.useState({
      left: null,
      right: null
    }),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    state = _React$useState2[0],
    setState = _React$useState2[1];
  /**
   * 陈夕 2021/4/21 下午3:34
   * desc: 开始拖拽
   * @params
   **/
  var startDrag = function startDrag(e) {
    startX = e.clientX;
    startWidthContainer = getDivWidth(containerRef.current);
    startWidth = getDivWidth(scalableRef.current);
    document.documentElement.addEventListener("mousemove", onDrag);
    document.documentElement.addEventListener("mouseup", onStopDrag);
  };
  /**
   * 陈夕 2021/4/21 下午3:34
   * desc: 拖拽计算宽度位置，不能出现滚动条，所以要设置临界值
   * @params
   **/
  var onDrag = function onDrag(e) {
    var newWidth = startWidth + e.clientX - startX;
    if (startWidthContainer - newWidth <= minWidth || newWidth <= minWidth) return;
    scalableRef.current.style.width = newWidth + "px";
  };
  /**
   * 陈夕 2021/4/21 下午3:35
   * desc: 停止拖动，移除事件
   * @params
   **/
  var onStopDrag = function onStopDrag(e) {
    document.documentElement.removeEventListener("mousemove", onDrag);
    document.documentElement.removeEventListener("mouseup", onStopDrag);
  };
  /**
   * 陈夕 2021/4/21 下午3:35
   * desc: 获取dom的宽度
   * @params
   **/
  var getDivWidth = function getDivWidth(dom) {
    return parseInt(dom.getBoundingClientRect().width, 10);
  };
  React__default.useEffect(function () {
    var _a;
    if (separatorRef.current) {
      (_a = separatorRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", startDrag);
    }
  }, [separatorRef]);
  /**
   * 陈夕 2021/4/21 下午3:35
   * desc: 切分传进来的数组的组件值
   * @params
   **/
  React__default.useEffect(function () {
    if (children && _typeof(children) === "object") {
      setState({
        left: children,
        right: null
      });
    }
    if (children && Array.isArray(children)) {
      var leftComponent = children.slice(0, Math.floor(children.length / 2));
      var rightComponent = children.slice(Math.floor(children.length / 2), children.length);
      setState({
        left: leftComponent,
        right: rightComponent
      });
    }
  }, [children]);
  return jsxs("div", Object.assign({
    className: $prefixCls + '-split',
    ref: containerRef
  }, {
    children: [jsxs("div", Object.assign({
      className: "split-left"
    }, {
      children: [jsx("div", Object.assign({
        className: "split-left-content",
        ref: scalableRef
      }, {
        children: state.left
      })), jsxs("div", Object.assign({
        className: "split-separator",
        ref: separatorRef
      }, {
        children: [jsx("i", {}), jsx("i", {})]
      }))]
    })), jsx("div", Object.assign({
      className: "split-right"
    }, {
      children: jsx("div", Object.assign({
        className: "split-right-content"
      }, {
        children: state.right
      }))
    }))]
  }));
};

export { Split as default };
