@ttk/component/es/splitPanel/index.js

ttk组件库

import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass, e as _assertThisInitialized } from '../getPrototypeOf-b95655c5.js';
import React__default, { Component, PureComponent } from 'react';
import ReactDOM from 'react-dom';
import Resizer from '../resizer';
import '../_commonjsHelpers-471920d6.js';

function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); 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 _isNativeReflectConstruct$1() { 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; } }

var Panel = /*#__PURE__*/function (_Component) {
  _inherits(Panel, _Component);

  var _super = _createSuper$1(Panel);

  function Panel(props) {
    var _this;

    _classCallCheck(this, Panel);

    _this = _super.call(this, props);
    _this.state = {};
    return _this;
  }

  _createClass(Panel, [{
    key: "render",
    value: function render() {
      var split = this.props.split;
      var classes = ['Panel', split, this.props.className];
      var style = Object.assign({}, this.props.style || {}, {
        flex: 1,
        position: 'relative',
        outline: 'none',
        overflow: 'hidden',
        display: 'flex'
      });

      if (this.state.size !== undefined) {
        if (split === 'vertical') {
          style.width = this.state.size;
        } else if (split === 'horizontal') {
          style.height = this.state.size;
        } else {
          style.height = this.state.size;
          style.display = 'flex';
        }

        style.flex = 'none';
      }

      return /*#__PURE__*/React__default.createElement("div", {
        className: classes.join(' '),
        style: style
      }, this.props.children);
    }
  }]);

  return Panel;
}(Component);

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

var SplitPanelComponent = /*#__PURE__*/function (_PureComponent) {
  _inherits(SplitPanelComponent, _PureComponent);

  var _super = _createSuper(SplitPanelComponent);

  function SplitPanelComponent(props) {
    var _this;

    _classCallCheck(this, SplitPanelComponent);

    _this = _super.call(this, props);
    _this.state = {
      active: false,
      resized: false
    };
    _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
    _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_this));
    _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(SplitPanelComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setSize(this.props, this.state);
      var win = window;

      if (win.addEventListener) {
        win.addEventListener('mouseup', this.onMouseUp);
        win.addEventListener('mousemove', this.onMouseMove);
      } else if (win.attachEvent) {
        win.attachEvent('onmouseup', this.onMouseUp);
        win.attachEvent('mousemove', this.onMouseMove);
      } else {
        win.onmouseup = this.onMouseUp;
        win.mousemove = this.mousemove;
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(props) {
      this.setSize(props, this.state);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var win = window;

      if (win.removeEventListener) {
        win.removeEventListener('mouseup', this.onMouseUp);
        win.removeEventListener('mousemove', this.onMouseMove);
      } else if (win.detachEvent) {
        win.detachEvent('onmouseup', this.onMouseUp);
        win.detachEvent('mousemove', this.onMouseMove);
      } else {
        win.onmouseup = undefined;
        win.mousemove = undefined;
      }
    }
  }, {
    key: "onMouseDown",
    value: function onMouseDown(event) {
      if (this.props.allowResize && !this.props.size) {
        this.unFocus();
        var position = this.props.split === 'vertical' ? event.clientX : event.clientY;

        if (typeof this.props.onDragStarted === 'function') {
          this.props.onDragStarted();
        }

        this.setState({
          active: true,
          position: position
        });
      }
    }
  }, {
    key: "onMouseMove",
    value: function onMouseMove(event) {
      if (this.props.allowResize && !this.props.size) {
        if (this.state.active) {
          this.unFocus();
          var isPrimaryFirst = this.props.primary === 'first';
          var ref = isPrimaryFirst ? this.refs.pane1 : this.refs.pane2;

          if (ref) {
            var node = ReactDOM.findDOMNode(ref);

            if (node.getBoundingClientRect) {
              var width = node.getBoundingClientRect().width;
              var height = node.getBoundingClientRect().height;
              var current = this.props.split === 'vertical' ? event.clientX : event.clientY;
              var size = this.props.split === 'vertical' ? width : height;
              var position = this.state.position;
              var newPosition = isPrimaryFirst ? position - current : current - position;
              var maxSize = this.props.maxSize;

              if (this.props.maxSize !== undefined && this.props.maxSize <= 0) {
                var splPanel = ReactDOM.findDOMNode(this.refs.splitPanel);

                if (this.props.split === 'vertical') {
                  maxSize = splPanel.getBoundingClientRect().width + this.props.maxSize;
                } else if (this.props.split === 'horizontal') {
                  maxSize = splPanel.getBoundingClientRect().height + this.props.maxSize;
                } else {
                  maxSize = splPanel.getBoundingClientRect().height + this.props.maxSize;
                }
              }

              var newSize = size - newPosition;

              if (newSize < this.props.minSize) {
                newSize = this.props.minSize;
              } else if (this.props.maxSize !== undefined && newSize > maxSize) {
                newSize = maxSize;
              } else {
                this.setState({
                  position: current,
                  resized: true
                });
              }

              if (this.props.onChange) {
                this.props.onChange(newSize);
              }

              this.setState({
                draggedSize: newSize
              });
              ref.setState({
                size: newSize
              });
            }
          }
        }
      }
    }
  }, {
    key: "onMouseUp",
    value: function onMouseUp() {
      if (this.props.allowResize && !this.props.size) {
        if (this.state.active) {
          if (typeof this.props.onDragFinished === 'function') {
            this.props.onDragFinished();
          }

          this.setState({
            active: false
          });
        }
      }
    }
  }, {
    key: "setSize",
    value: function setSize(props, state) {
      var ref = this.props.primary === 'first' ? this.refs.pane1 : this.refs.pane2;
      var newSize;

      if (ref) {
        newSize = props.size || state && state.draggedSize || props.defaultSize || props.minSize;
        ref.setState({
          size: newSize
        });
      }
    }
  }, {
    key: "unFocus",
    value: function unFocus() {
      if (document.selection) {
        document.selection.empty();
      } else {
        window.getSelection().removeAllRanges();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          split = _this$props.split,
          allowResize = _this$props.allowResize;
      var disabledClass = allowResize ? '' : 'disabled';
      var style = Object.assign({}, this.props.style || {}, {
        display: 'flex',
        flex: 1,
        position: 'relative',
        outline: 'none',
        overflow: 'hidden',
        MozUserSelect: 'text',
        WebkitUserSelect: 'text',
        msUserSelect: 'text',
        userSelect: 'text'
      });

      if (split === 'vertical') {
        Object.assign(style, {
          flexDirection: 'row',
          //height: '100%',
          //position: 'absolute',
          left: 0,
          right: 0
        });
      } else if (split === 'horizontal') {
        Object.assign(style, {
          flexDirection: 'column',
          //height: '100%',
          //minHeight: '100%',
          //position: 'absolute',
          top: 0,
          bottom: 0 //width: '100%',

        });
      } else {
        Object.assign(style, {
          flexDirection: 'column',
          //height: '100%',
          //minHeight: '100%',
          //position: 'absolute',
          top: 0,
          bottom: 0 //width: '100%',

        });
      }

      var children = this.props.children;
      var classes = ['SplitPanel', this.props.className, split, disabledClass];
      var pane1Style = Object.assign({}, this.props.paneStyle || {}, this.props.pane1Style || {});
      var pane2Style = Object.assign({}, this.props.paneStyle || {}, this.props.pane2Style || {});
      return /*#__PURE__*/React__default.createElement("div", {
        className: classes.join(' '),
        style: style,
        ref: "splitPanel"
      }, /*#__PURE__*/React__default.createElement(Panel, {
        ref: "pane1",
        key: "pane1",
        className: "Pane1",
        style: pane1Style,
        split: split
      }, children[0]), /*#__PURE__*/React__default.createElement(Resizer, {
        ref: "resizer",
        key: "resizer",
        className: disabledClass,
        onMouseDown: this.onMouseDown,
        style: this.props.resizerStyle || {},
        split: split
      }), /*#__PURE__*/React__default.createElement(Panel, {
        ref: "pane2",
        key: "pane2",
        className: "Pane2",
        style: pane2Style,
        split: split
      }, children[1]));
    }
  }]);

  return SplitPanelComponent;
}(PureComponent);

SplitPanelComponent.defaultProps = {
  prefixCls: 'z-splitpanel'
};

export { SplitPanelComponent as default };