onResizeEnd) {
      const { width } = controlledElementNode.getBoundingClientRect();
      this.props.onResizeEnd(width);
    }
  }

  /**
   * Adjust size of the controlled panel.
   */
  onMove(x) {
    const controlledElementNode = this.props.getControlledElementNode();
    if (!this.state.dragging || !controlledElementNode) {
      return;
    }
    const nodeBounds = controlledElementNode.getBoundingClientRect();
    const { isRTLElement } = this.state;
    const { position } = this.props;

    const size =
      (isRTLElement && position === "end") ||
      (!isRTLElement && position === "start")
        ? nodeBounds.width + (nodeBounds.left - x)
        : x - nodeBounds.left;

    controlledElementNode.style.width = `${size}px`;
  }

  render() {
    if (!this.props.enabled) {
      return null;
    }

    const classNames = ["grid-element-width-resizer", this.props.position];
    if (this.props.className) {
      classNames.push(this.props.className);
    }

    return Draggable({
      className: classNames.join(" "),
      onStart: this.onStartMove,
      onStop: this.onStopMove,
      onMove: this.onMove,
    });
  }
}

module.exports = GridElementWidthResizer;
PK