function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
import React from 'react';
import PropTypes from 'prop-types';
import Pane from "./Pane";
import "./index.less";
function clearSelection() {
  if (document.body.createTextRange) {
    // https://github.com/zesik/react-splitter-layout/issues/16
    // https://stackoverflow.com/questions/22914075/#37580789
    var range = document.body.createTextRange();
    range.collapse();
    range.select();
  } else if (window.getSelection) {
    if (window.getSelection().empty) {
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) {
    document.selection.empty();
  }
}
var DEFAULT_SPLITTER_SIZE = 4;
var SplitterLayout = /*#__PURE__*/function (_React$Component) {
  _inherits(SplitterLayout, _React$Component);
  var _super = _createSuper(SplitterLayout);
  function SplitterLayout(props) {
    var _this;
    _classCallCheck(this, SplitterLayout);
    _this = _super.call(this, props);
    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
    _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_this));
    _this.handleTouchMove = _this.handleTouchMove.bind(_assertThisInitialized(_this));
    _this.handleSplitterMouseDown = _this.handleSplitterMouseDown.bind(_assertThisInitialized(_this));
    _this.state = {
      secondaryPaneSize: 0,
      resizing: false
    };
    return _this;
  }
  _createClass(SplitterLayout, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.handleResize);
      document.addEventListener('mouseup', this.handleMouseUp);
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('touchend', this.handleMouseUp);
      document.addEventListener('touchmove', this.handleTouchMove);
      var secondaryPaneSize, primaryPaneSize;
      if (typeof this.props.secondaryInitialSize !== 'undefined') {
        //设置其余部分大小
        secondaryPaneSize = this.props.secondaryInitialSize;
      } else {
        if (typeof this.props.primaryInitialSize !== 'undefined') {
          //设置主要部分大小
          primaryPaneSize = this.props.primaryInitialSize;
        }
        var containerRect = this.container.getBoundingClientRect();
        var splitterRect;
        if (this.splitter) {
          splitterRect = this.splitter.getBoundingClientRect();
        } else {
          // Simulate a splitter
          splitterRect = {
            width: DEFAULT_SPLITTER_SIZE,
            height: DEFAULT_SPLITTER_SIZE
          };
        }
        var totalSize, splitterSize;
        if (this.props.vertical) {
          //垂直排列
          totalSize = containerRect.height;
          splitterSize = splitterRect.height;
        } else {
          totalSize = containerRect.width;
          splitterSize = splitterRect.width;
        }
        //计算目标对象位置
        var primarySize = this.props.primaryIndex === 1 ? totalSize - splitterSize - primaryPaneSize : primaryPaneSize || (totalSize - splitterSize) / 2;
        secondaryPaneSize = this.getSecondaryPaneSize(containerRect, splitterRect, {
          left: containerRect.left + primarySize,
          top: containerRect.top + primarySize
        }, false);
      }
      this.setState({
        secondaryPaneSize: secondaryPaneSize
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (prevState.secondaryPaneSize !== this.state.secondaryPaneSize && this.props.onSecondaryPaneSizeChange) {
        this.props.onSecondaryPaneSizeChange(this.state.secondaryPaneSize);
      }
      if (prevState.resizing !== this.state.resizing) {
        if (this.state.resizing) {
          if (this.props.onDragStart) {
            this.props.onDragStart();
          }
        } else if (this.props.onDragEnd) {
          this.props.onDragEnd();
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize);
      document.removeEventListener('mouseup', this.handleMouseUp);
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('touchend', this.handleMouseUp);
      document.removeEventListener('touchmove', this.handleTouchMove);
    }

    //获取第二块内容宽度or高度
  }, {
    key: "getSecondaryPaneSize",
    value: function getSecondaryPaneSize(containerRect, splitterRect, clientPosition, offsetMouse) {
      var totalSize;
      var splitterSize;
      var offset;
      if (this.props.vertical) {
        //垂直排列
        totalSize = containerRect.height; //总高度
        splitterSize = splitterRect.height; //划分条高度
        offset = clientPosition.top - containerRect.top; //移动位置减去原始位置
      } else {
        //默认水平排列
        totalSize = containerRect.width; //总宽度
        splitterSize = splitterRect.width; //划分条宽度
        offset = clientPosition.left - containerRect.left; //移动位置减去原始位置
      }
      if (offsetMouse) {
        //移动
        offset -= splitterSize / 2;
      }
      if (offset < 0) {
        offset = 0;
      } else if (offset > totalSize - splitterSize) {
        //移动超过容器大小
        offset = totalSize - splitterSize;
      }
      var secondaryPaneSize;
      if (this.props.primaryIndex === 1) {
        //目标对象是1
        secondaryPaneSize = offset;
      } else {
        secondaryPaneSize = totalSize - splitterSize - offset;
      }
      var primaryPaneSize = totalSize - splitterSize - secondaryPaneSize;
      if (this.props.percentage) {
        //百分比
        secondaryPaneSize = secondaryPaneSize * 100 / totalSize;
        primaryPaneSize = primaryPaneSize * 100 / totalSize;
        splitterSize = splitterSize * 100 / totalSize;
        totalSize = 100;
      }
      if (primaryPaneSize < this.props.primaryMinSize) {
        secondaryPaneSize = Math.max(secondaryPaneSize - (this.props.primaryMinSize - primaryPaneSize), 0);
      } else if (secondaryPaneSize < this.props.secondaryMinSize) {
        secondaryPaneSize = Math.min(totalSize - splitterSize - this.props.primaryMinSize, this.props.secondaryMinSize);
      }
      return secondaryPaneSize;
    }
  }, {
    key: "handleResize",
    value: function handleResize() {
      if (this.splitter && !this.props.percentage) {
        var containerRect = this.container.getBoundingClientRect();
        var splitterRect = this.splitter.getBoundingClientRect();
        var secondaryPaneSize = this.getSecondaryPaneSize(containerRect, splitterRect, {
          left: splitterRect.left,
          top: splitterRect.top
        }, false);
        this.setState({
          secondaryPaneSize: secondaryPaneSize
        });
      }
    }
  }, {
    key: "handleMouseMove",
    value: function handleMouseMove(e) {
      if (this.state.resizing) {
        var containerRect = this.container.getBoundingClientRect();
        var splitterRect = this.splitter.getBoundingClientRect();
        var secondaryPaneSize = this.getSecondaryPaneSize(containerRect, splitterRect, {
          left: e.clientX,
          top: e.clientY
        }, true);
        clearSelection();
        this.setState({
          secondaryPaneSize: secondaryPaneSize
        });
      }
    }
  }, {
    key: "handleTouchMove",
    value: function handleTouchMove(e) {
      this.handleMouseMove(e.changedTouches[0]);
    }
  }, {
    key: "handleSplitterMouseDown",
    value: function handleSplitterMouseDown() {
      clearSelection();
      this.setState({
        resizing: true
      });
    }
  }, {
    key: "handleMouseUp",
    value: function handleMouseUp() {
      this.setState(function (prevState) {
        return prevState.resizing ? {
          resizing: false
        } : null;
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var containerClasses = 'splitter-layout';
      if (this.props.customClassName) {
        containerClasses += " ".concat(this.props.customClassName);
      }
      if (this.props.vertical) {
        containerClasses += ' splitter-layout-vertical';
      }
      if (this.state.resizing) {
        containerClasses += ' layout-changing';
      }
      var children = React.Children.toArray(this.props.children).slice(0, 2);
      if (children.length === 0) {
        children.push( /*#__PURE__*/React.createElement("div", null));
      }
      var wrappedChildren = [];
      var primaryIndex = this.props.primaryIndex !== 0 && this.props.primaryIndex !== 1 ? 0 : this.props.primaryIndex;
      for (var i = 0; i < children.length; ++i) {
        var primary = true;
        var size = null;
        var classname = this.props.partClassNames[i];
        var styleObj = this.props.partStyles[i];
        if (children.length > 1 && i !== primaryIndex) {
          primary = false;
          size = this.state.secondaryPaneSize;
        }
        wrappedChildren.push( /*#__PURE__*/React.createElement(Pane, {
          vertical: this.props.vertical,
          percentage: this.props.percentage,
          primary: primary,
          size: size,
          paneClassName: classname,
          paneStyle: styleObj
        }, children[i]));
      }
      return /*#__PURE__*/React.createElement("div", {
        className: containerClasses,
        style: this.props.containerStyle,
        ref: function ref(c) {
          _this2.container = c;
        }
      }, wrappedChildren[0], wrappedChildren.length > 1 && /*#__PURE__*/React.createElement("div", {
        role: "separator",
        className: "layout-splitter ".concat(!this.props.vertical && 'layout-splitter-horizontal', " ").concat(this.props.splitterClassName),
        style: this.props.splitterStyle,
        ref: function ref(c) {
          _this2.splitter = c;
        },
        onMouseDown: this.handleSplitterMouseDown,
        onTouchStart: this.handleSplitterMouseDown
      }), wrappedChildren.length > 1 && wrappedChildren[1]);
    }
  }]);
  return SplitterLayout;
}(React.Component);
SplitterLayout.propTypes = {
  containerStyle: PropTypes.object,
  customClassName: PropTypes.string,
  splitterClassName: PropTypes.string,
  splitterStyle: PropTypes.object,
  partClassNames: PropTypes.arrayOf(PropTypes.string),
  partStyles: PropTypes.arrayOf(PropTypes.object),
  vertical: PropTypes.bool,
  percentage: PropTypes.bool,
  primaryIndex: PropTypes.number,
  primaryMinSize: PropTypes.number,
  primaryInitialSize: PropTypes.number,
  secondaryInitialSize: PropTypes.number,
  secondaryMinSize: PropTypes.number,
  onDragStart: PropTypes.func,
  onDragEnd: PropTypes.func,
  onSecondaryPaneSizeChange: PropTypes.func,
  children: PropTypes.arrayOf(PropTypes.node)
};
SplitterLayout.defaultProps = {
  customClassName: '',
  splitterClassName: '',
  partClassNames: [],
  partStyles: [],
  vertical: false,
  percentage: false,
  primaryIndex: 0,
  primaryMinSize: 0,
  secondaryInitialSize: undefined,
  secondaryMinSize: 0,
  onDragStart: null,
  onDragEnd: null,
  onSecondaryPaneSizeChange: null,
  children: []
};
export default SplitterLayout;