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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "children", "mode", "visiable", "lineBar", "disable", "onDragEnd", "onDragging"];
import React from 'react';
import "./style/index.css";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default class Split extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dragging: false
    };
    this.warpper = void 0;
    this.paneNumber = void 0;
    this.startX = void 0;
    this.startY = void 0;
    this.move = void 0;
    this.target = void 0;
    this.boxWidth = void 0;
    this.boxHeight = void 0;
    this.preWidth = void 0;
    this.nextWidth = void 0;
    this.preHeight = void 0;
    this.nextHeight = void 0;
    this.preSize = void 0;
    this.nextSize = void 0;
    this.onDragEnd = this.onDragEnd.bind(this);
    this.onDragging = this.onDragging.bind(this);
  }

  componentWillUnmount() {
    this.removeEvent();
  }

  removeEvent() {
    window.removeEventListener('mousemove', this.onDragging, false);
    window.removeEventListener('mouseup', this.onDragEnd, false);
  }

  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
    });
  }

  onDragging(env) {
    if (!this.move) {
      return;
    }

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

    var {
      mode,
      onDragging
    } = this.props;
    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 = this.preSize + "%";
        nextTarget.style.width = 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 = this.preSize + "%";
        nextTarget.style.height = this.nextSize + "%";
      }
    }

    onDragging && onDragging(this.preSize, this.nextSize, this.paneNumber);
  }

  onDragEnd() {
    var {
      onDragEnd
    } = this.props;
    this.move = false;
    onDragEnd && onDragEnd(this.preSize, this.nextSize, this.paneNumber);
    this.removeEvent();
    this.setState({
      dragging: false
    });
  }

  render() {
    var _this$props = this.props,
        {
      prefixCls,
      className,
      children,
      mode,
      visiable,
      lineBar,
      disable
    } = _this$props,
        other = _objectWithoutPropertiesLoose(_this$props, _excluded);

    var {
      dragging
    } = this.state;
    var cls = [prefixCls, className, prefixCls + "-" + mode, dragging ? 'dragging' : null].filter(Boolean).join(' ').trim();
    var child = React.Children.toArray(children);
    return /*#__PURE__*/_jsx("div", _extends({
      className: cls
    }, other, {
      ref: node => this.warpper = node,
      children: React.Children.map(child, (element, idx) => {
        var props = Object.assign({}, element.props, {
          className: [prefixCls + "-pane", element.props.className].filter(Boolean).join(' ').trim(),
          style: _extends({}, element.props.style)
        });
        var visiableBar = visiable === true || visiable && visiable.includes(idx + 1) || false;
        var barProps = {
          className: [prefixCls + "-bar", lineBar ? prefixCls + "-line-bar" : null, !lineBar ? 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__*/_jsxs(React.Fragment, {
          children: [idx !== 0 && visiableBar && /*#__PURE__*/React.createElement('div', _extends({}, barProps), /*#__PURE__*/_jsx("div", {
            onMouseDown: this.onMouseDown.bind(this, idx + 1)
          })), /*#__PURE__*/React.cloneElement(element, _extends({}, props))]
        });
      })
    }));
  }

}
Split.defaultProps = {
  prefixCls: 'w-split',
  visiable: true,
  mode: 'horizontal'
};
//# sourceMappingURL=index.js.map