ui: replace stupid react-split-pane with allotment

packages/ui-default/components/scratchpad/index.tsx

@@ -1,39 +1,17 @@
 import ProblemIcon from '@vscode/codicons/src/icons/file.svg?react';
+import { Allotment } from 'allotment';
 import $ from 'jquery';
 import _ from 'lodash';
 import type * as monaco from 'monaco-editor';
 import React from 'react';
 import { useDispatch, useSelector, useStore } from 'react-redux';
-import SplitPane from 'react-split-pane';
 import Dom from 'vj/components/react/DomComponent';
-import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 import { Context, ctx, Service } from 'vj/context';
 import ScratchpadEditor from './ScratchpadEditorContainer';
 import ScratchpadPretest from './ScratchpadPretestContainer';
 import ScratchpadRecords from './ScratchpadRecordsContainer';
 import ScratchpadToolbar from './ScratchpadToolbarContainer';
 
-function buildNestedPane([a, ...panes], mode: 'horizontal' | 'vertical' = 'horizontal') {
-  const elements = [
-    a,
-    ...panes.filter((p) => p.props.visible),
-  ];
-  if (elements.length === 1) return a;
-  return elements
-    .reduce((prev, curr) => (
-      <SplitPane
-        split={mode}
-        primary="second"
-        defaultSize={curr.props.size}
-        key={curr.element.key}
-        onChange={curr.onChange}
-      >
-        {prev}
-        {curr.element}
-      </SplitPane>
-    ));
-}
-
 const pages = {
   problem: {
     icon: () => <ProblemIcon />,
@@ -88,14 +66,7 @@ export default function ScratchpadContainer() {
   const dispatch = useDispatch();
   const ui = useSelector<any, any>((state) => state.ui, _.isEqual);
 
-  const handleChangeSize = _.debounce((uiElement, size) => {
-    dispatch({
-      type: 'SCRATCHPAD_UI_CHANGE_SIZE',
-      payload: {
-        uiElement,
-        size,
-      },
-    });
+  const handleChangeSize = _.debounce(() => {
     $('#scratchpad').trigger('vjScratchpadRelayout');
     forceUpdate();
   }, 500);
@@ -109,31 +80,20 @@ export default function ScratchpadContainer() {
   const showSidebar = Object.keys(pages).length > 1;
 
   return (
-    <SplitPane
-      split="vertical"
-      primary="first"
-      size={showSidebar ? 50 : 0}
-      allowResize={false}
-    >
-      <div className="scratchpad__tablist" style={{ display: showSidebar ? 'block' : 'none' }}>
-        {Object.keys(pages).map((key) => {
-          const Component = pages[key].icon;
-          return (
-            <div key={key} className={key === ui.activePage ? 'scratchpad__tab-active' : ''} onClick={() => switchToPage(key)}>
-              <Component />
-            </div>
-          );
-        })}
-      </div>
-      <SplitPane
-        defaultSize={ui.main.size}
-        size={ui.main.size}
-        minSize={ui.activePage !== null ? 250 : 0}
-        split="vertical"
-        primary="first"
-        onChange={(size) => handleChangeSize('main', size)}
-        allowResize={ui.activePage !== null}
-      >
+    <Allotment onChange={handleChangeSize}>
+      <Allotment.Pane visible={showSidebar} minSize={50} maxSize={50}>
+        <div className="scratchpad__tablist" style={{ display: showSidebar ? 'block' : 'none' }}>
+          {Object.keys(pages).map((key) => {
+            const Component = pages[key].icon;
+            return (
+              <div key={key} className={key === ui.activePage ? 'scratchpad__tab-active' : ''} onClick={() => switchToPage(key)}>
+                <Component />
+              </div>
+            );
+          })}
+        </div>
+      </Allotment.Pane>
+      <Allotment.Pane visible={!!ui.activePage}>
         <div className="scratchpad__problem">
           {Object.keys(pages).map((key) => {
             const Component = pages[key].component;
@@ -144,23 +104,19 @@ export default function ScratchpadContainer() {
             );
           })}
         </div>
-        {buildNestedPane([
-          <SplitPaneFillOverlay key="editor" className="flex-col">
-            <ScratchpadToolbar />
-            <ScratchpadEditor />
-          </SplitPaneFillOverlay>,
-          {
-            props: ui.pretest,
-            onChange: (size) => handleChangeSize('pretest', size),
-            element: <ScratchpadPretest key="pretest" />,
-          },
-          {
-            props: ui.records,
-            onChange: (size) => handleChangeSize('records', size),
-            element: <ScratchpadRecords key="records" />,
-          },
-        ])}
-      </SplitPane>
-    </SplitPane>
+      </Allotment.Pane>
+      <Allotment vertical onChange={handleChangeSize}>
+        <div key="editor" className="flex-col splitpane-fill">
+          <ScratchpadToolbar />
+          <ScratchpadEditor />
+        </div>
+        <Allotment.Pane visible={ui.pretest.visible}>
+          <ScratchpadPretest key="pretest" />
+        </Allotment.Pane>
+        <Allotment.Pane visible={ui.records.visible}>
+          <ScratchpadRecords key="records" />
+        </Allotment.Pane>
+      </Allotment>
+    </Allotment>
   );
 }