refactor: Move notes_view to React (#761)

app/assets/javascripts/components/PanelResizer.tsx

@@ -0,0 +1,60 @@
+import {
+  PanelResizerProps,
+  PanelResizerState,
+} from '@/ui_models/panel_resizer';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+export const PanelResizer: FunctionComponent<PanelResizerProps> = observer(
+  ({
+    alwaysVisible,
+    application,
+    defaultWidth,
+    hoverable,
+    collapsable,
+    minWidth,
+    panel,
+    prefKey,
+    resizeFinishCallback,
+    side,
+    widthEventCallback,
+  }) => {
+    const [panelResizerState] = useState(
+      () =>
+        new PanelResizerState({
+          alwaysVisible,
+          application,
+          defaultWidth,
+          hoverable,
+          collapsable,
+          minWidth,
+          panel,
+          prefKey,
+          resizeFinishCallback,
+          side,
+          widthEventCallback,
+        })
+    );
+    const panelResizerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (panelResizerRef.current) {
+        panelResizerState.setMinWidth(panelResizerRef.current.offsetWidth + 2);
+      }
+    }, [panelResizerState]);
+
+    return (
+      <div
+        className={`panel-resizer ${panelResizerState.side} ${
+          panelResizerState.hoverable ? 'hoverable' : ''
+        } ${panelResizerState.alwaysVisible ? 'alwaysVisible' : ''} ${
+          panelResizerState.pressed ? 'dragging' : ''
+        } ${panelResizerState.collapsed ? 'collapsed' : ''}`}
+        onMouseDown={panelResizerState.onMouseDown}
+        onDblClick={panelResizerState.onDblClick}
+        ref={panelResizerRef}
+      ></div>
+    );
+  }
+);