@uiw/react-split/cjs/index.js

A piece of view can be divided into areas where the width or height can be adjusted by dragging.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["prefixCls", "className", "children", "mode", "visiable", "lineBar", "disable", "onDragEnd", "onDragging"];

var Split = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(Split, _React$Component);

  var _super = (0, _createSuper2.default)(Split);

  function Split(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Split);
    _this = _super.call(this, props);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      dragging: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "warpper", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "paneNumber", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startX", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startY", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "move", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "target", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "boxWidth", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "boxHeight", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preWidth", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nextWidth", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preHeight", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nextHeight", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preSize", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nextSize", void 0);
    _this.onDragEnd = _this.onDragEnd.bind((0, _assertThisInitialized2.default)(_this));
    _this.onDragging = _this.onDragging.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  (0, _createClass2.default)(Split, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.removeEvent();
    }
  }, {
    key: "removeEvent",
    value: function removeEvent() {
      window.removeEventListener('mousemove', this.onDragging, false);
      window.removeEventListener('mouseup', this.onDragEnd, false);
    }
  }, {
    key: "onMouseDown",
    value: function onMouseDown(paneNumber, env) {
      if (!env.target || !this.warpper) {
        return;
      }

      this.paneNumber = paneNumber;
      this.startX = env.clientX;
      this.startY = env.clientY;
      this.move = true;
      this.target = env.target.parentNode;
      var prevTarget = this.target.previousElementSibling;
      var nextTarget = this.target.nextElementSibling;
      this.boxWidth = this.warpper.clientWidth;
      this.boxHeight = this.warpper.clientHeight;

      if (prevTarget) {
        this.preWidth = prevTarget.clientWidth;
        this.preHeight = prevTarget.clientHeight;
      }

      if (nextTarget) {
        this.nextWidth = nextTarget.clientWidth;
        this.nextHeight = nextTarget.clientHeight;
      }

      window.addEventListener('mousemove', this.onDragging);
      window.addEventListener('mouseup', this.onDragEnd, false);
      this.setState({
        dragging: true
      });
    }
  }, {
    key: "onDragging",
    value: function onDragging(env) {
      if (!this.move) {
        return;
      }

      if (!this.state.dragging) {
        this.setState({
          dragging: true
        });
      }

      var _this$props = this.props,
          mode = _this$props.mode,
          onDragging = _this$props.onDragging;
      var nextTarget = this.target.nextElementSibling;
      var prevTarget = this.target.previousElementSibling;
      var x = env.clientX - this.startX;
      var y = env.clientY - this.startY;
      this.preSize = 0;
      this.nextSize = 0;

      if (mode === 'horizontal') {
        this.preSize = this.preWidth + x > -1 ? this.preWidth + x : 0;
        this.nextSize = this.nextWidth - x > -1 ? this.nextWidth - x : 0;

        if (this.preSize === 0 || this.nextSize === 0) {
          return;
        }

        this.preSize = (this.preSize / this.boxWidth >= 1 ? 1 : this.preSize / this.boxWidth) * 100;
        this.nextSize = (this.nextSize / this.boxWidth >= 1 ? 1 : this.nextSize / this.boxWidth) * 100;

        if (prevTarget && nextTarget) {
          prevTarget.style.width = "".concat(this.preSize, "%");
          nextTarget.style.width = "".concat(this.nextSize, "%");
        }
      }

      if (mode === 'vertical' && this.preHeight + y > -1 && this.nextHeight - y > -1) {
        this.preSize = this.preHeight + y > -1 ? this.preHeight + y : 0;
        this.nextSize = this.nextHeight - y > -1 ? this.nextHeight - y : 0;
        this.preSize = (this.preSize / this.boxHeight >= 1 ? 1 : this.preSize / this.boxHeight) * 100;
        this.nextSize = (this.nextSize / this.boxHeight >= 1 ? 1 : this.nextSize / this.boxHeight) * 100;

        if (this.preSize === 0 || this.nextSize === 0) {
          return;
        }

        if (prevTarget && nextTarget) {
          prevTarget.style.height = "".concat(this.preSize, "%");
          nextTarget.style.height = "".concat(this.nextSize, "%");
        }
      }

      onDragging && onDragging(this.preSize, this.nextSize, this.paneNumber);
    }
  }, {
    key: "onDragEnd",
    value: function onDragEnd() {
      var onDragEnd = this.props.onDragEnd;
      this.move = false;
      onDragEnd && onDragEnd(this.preSize, this.nextSize, this.paneNumber);
      this.removeEvent();
      this.setState({
        dragging: false
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          children = _this$props2.children,
          mode = _this$props2.mode,
          visiable = _this$props2.visiable,
          lineBar = _this$props2.lineBar,
          disable = _this$props2.disable,
          onDragEnd = _this$props2.onDragEnd,
          onDragging = _this$props2.onDragging,
          other = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
      var dragging = this.state.dragging;
      var cls = [prefixCls, className, "".concat(prefixCls, "-").concat(mode), dragging ? 'dragging' : null].filter(Boolean).join(' ').trim();

      var child = _react.default.Children.toArray(children);

      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
        className: cls
      }, other), {}, {
        ref: function ref(node) {
          return _this2.warpper = node;
        },
        children: _react.default.Children.map(child, function (element, idx) {
          var props = Object.assign({}, element.props, {
            className: ["".concat(prefixCls, "-pane"), element.props.className].filter(Boolean).join(' ').trim(),
            style: (0, _objectSpread2.default)({}, element.props.style)
          });
          var visiableBar = visiable === true || visiable && visiable.includes(idx + 1) || false;
          var barProps = {
            className: ["".concat(prefixCls, "-bar"), lineBar ? "".concat(prefixCls, "-line-bar") : null, !lineBar ? "".concat(prefixCls, "-large-bar") : null].filter(Boolean).join(' ').trim()
          };

          if (disable === true || disable && disable.includes(idx + 1)) {
            barProps.className = [barProps.className, disable ? 'disable' : null].filter(Boolean).join(' ').trim();
          }

          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
            children: [idx !== 0 && visiableBar && /*#__PURE__*/_react.default.createElement('div', (0, _objectSpread2.default)({}, barProps), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              onMouseDown: _this2.onMouseDown.bind(_this2, idx + 1)
            })), /*#__PURE__*/_react.default.cloneElement(element, (0, _objectSpread2.default)({}, props))]
          });
        })
      }));
    }
  }]);
  return Split;
}(_react.default.Component);

exports.default = Split;
(0, _defineProperty2.default)(Split, "defaultProps", {
  prefixCls: 'w-split',
  visiable: true,
  mode: 'horizontal'
});
//# sourceMappingURL=index.js.map