mouseEventSubscribe

handleRowResizerMove.ts

  handleRowResizerMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const { activePanel } = this.props.appStore.uiStore.queryPanelStore;
    const containerTop = this.containerRef.current.getBoundingClientRect().top;
    mouseEventSubscribe(
      (mpos: IMousePosition) => {
        const resizerTop = mpos.clientY - containerTop;
        activePanel.setFlexGlow((resizerTop * 2) / this.containerHeight);
      },
      () => {
        // onSubscribeEnd
      },
    );
  };

mouseEventSubscribe.ts

const mouseEventSubscribe = (
  callBack: MouseEventSubscribeCallbackFn,
  onEnd: () => void,
) => {
  const onMousemoveWindow = (e: MouseEvent) => {
    callBack(
      {
        pageX: e.pageX,
        pageY: e.pageY,
        clientX: e.clientX,
        clientY: e.clientY,
      },
      () => {
        onMouseupWindow();
      },
    );
  };

  const onMouseupWindow = (e?: MouseEvent) => {
    window.removeEventListener('mousemove', onMousemoveWindow);
    window.removeEventListener('mouseup', onMouseupWindow);
    window.removeEventListener('mouseleave', onMouseupWindow);
    if (onEnd) {
      onEnd();
    }
  };

  window.addEventListener('mousemove', onMousemoveWindow, false);
  window.addEventListener('mouseup', onMouseupWindow);
  window.addEventListener('mouseleave', onMouseupWindow);
};

export default mouseEventSubscribe;