minEndWidth: PropTypes.any,

      // A callback fired when the user drags the splitter to resize the relative
      // pane widths. The function is passed the startWidth value that would put
      // the splitter underneath the users mouse.
      onResize: PropTypes.func.isRequired,
    };
  }

  static get defaultProps() {
    return {
      startWidth: 0.5,
      minStartWidth: "20px",
      minEndWidth: "20px",
    };
  }

  constructor(props) {
    super(props);

    this.state = {
      mouseDown: false,
    };

    this._onMouseDown = this._onMouseDown.bind(this);
    this._onMouseUp = this._onMouseUp.bind(this);
    this._onMouseMove = this._onMouseMove.bind(this);
  }

  componentDidMount() {
    document.defaultView.addEventListener("mouseup", this._onMouseUp, true);
    document.defaultView.addEventListener("mousemove", this._onMouseMove, true);
  }

  componentWillUnmount() {
    document.defaultView.removeEventListener("mouseup", this._onMouseUp, true);
    document.defaultView.removeEventListener(
      "mousemove",
      this._onMouseMove,
      true
    );
  }

  _onMouseDown(event) {
    if (event.button !== 0) {
      return;
    }

    this.setState({ mouseDown: true });
    event.preventDefault();
  }

  _onMouseUp(event) {
    if (event.button !== 0 || !this.state.mouseDown) {
      return;
    }

    this.setState({ mouseDown: false });
    event.preventDefault();
  }

  _onMouseMove(event) {
    if (!this.state.mouseDown) {
      return;
    }

    const rect = this.refs.box.getBoundingClientRect();
    const { left, right } = rect;
    const width = right - left;
    const direction = this.refs.box.ownerDocument.dir;
    const relative =
      direction == "rtl" ? right - event.clientX : event.clientX - left;
    this.props.onResize(relative / width);

    event.preventDefault();
  }

  render() {
    const { start, end, startWidth, minStartWidth, minEndWidth } = this.props;

    // Values outside of [0, 1] have no effect thanks to flex + minWidth.
    const clampedStartWidth = Math.min(Math.max(startWidth, 0), 1);

    return dom.div(
      {
        className: "h-split-box",
        ref: "box",
      },

      dom.div(
        {
          className: "h-split-box-pane",
          style: { flex: clampedStartWidth, minWidth: minStartWidth },
        },
        start
      ),

      dom.div({
        className: "devtools-side-splitter",
        onMouseDown: this._onMouseDown,
      }),

      dom.div(
        {
          className: "h-split-box-pane",
          style: { flex: 1 - clampedStartWidth, minWidth: minEndWidth },
        },
        end
      )
    );
  }
}

module.exports = HSplitBox;
PK