fix(core-blocks): CB-1933 splitter

webapp/packages/core-blocks/package.json

@@ -15,7 +15,7 @@
     "lint-fix": "eslint ./src/ --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "go-split": "^3.0.0"
+    "go-split": "^3.0.1"
   },
   "peerDependencies": {
     "@cloudbeaver/core-authentication": "~0.1.0",

webapp/packages/core-blocks/src/Split/SplitControls.tsx

@@ -7,11 +7,12 @@
  */
 
 import { SplitContext } from 'go-split';
-import { useCallback, useContext } from 'react';
+import { useContext } from 'react';
 import styled, { use } from 'reshadow';
 
 import { useStyles } from '@cloudbeaver/core-theming';
 
+import { useObjectRef } from '../useObjectRef';
 import { buttonStyles } from './splitButtonStyles';
 
 export const SplitControls: React.FC = function SplitControls() {
@@ -36,21 +37,22 @@ export const SplitControls: React.FC = function SplitControls() {
     }
   }
 
-  const handleCollapse = useCallback((event: React.SyntheticEvent<HTMLButtonElement>) => {
-    if (mode === 'maximize') {
-      setMode('resize');
-    } else {
-      setMode('minimize');
-    }
-  }, [mode, setMode]);
-
-  const handleExpand = useCallback((event: React.SyntheticEvent<HTMLButtonElement>) => {
-    if (mode === 'minimize') {
-      setMode('resize');
-    } else {
-      setMode('maximize');
-    }
-  }, [mode, setMode]);
+  const handlers = useObjectRef(() => ({
+    handleCollapse(event: React.SyntheticEvent<HTMLButtonElement>) {
+      if (this.mode === 'maximize') {
+        this.setMode('resize');
+      } else {
+        this.setMode('minimize');
+      }
+    },
+    handleExpand(event: React.SyntheticEvent<HTMLButtonElement>) {
+      if (this.mode === 'minimize') {
+        this.setMode('resize');
+      } else {
+        this.setMode('maximize');
+      }
+    },
+  }), { mode, setMode }, ['handleCollapse', 'handleExpand']);
 
   return styled(styles)(
     <container
@@ -65,7 +67,7 @@ export const SplitControls: React.FC = function SplitControls() {
         <button
           type="button"
           {...use({ isPrimary: !inverse })}
-          onClick={handleCollapse}
+          onClick={handlers.handleCollapse}
         >
           <ripple />
         </button>
@@ -74,7 +76,7 @@ export const SplitControls: React.FC = function SplitControls() {
         <button
           type="button"
           {...use({ isPrimary: inverse })}
-          onClick={handleExpand}
+          onClick={handlers.handleExpand}
         >
           <ripple />
         </button>

webapp/packages/core-blocks/src/Split/useSplitUserState.ts

@@ -7,9 +7,8 @@
  */
 
 import type { SplitProps, SplitterMode } from 'go-split';
-import { action, computed, observable, runInAction } from 'mobx';
 
-import { useObservableRef } from '../useObservableRef';
+import { useObjectRef } from '../useObjectRef';
 import { useUserData } from '../useUserData';
 
 type SplitState = Pick<SplitProps, 'mode' | 'size' | 'ratio' | 'onModeChange' | 'onResize'>;
@@ -21,7 +20,7 @@ export function useSplitUserState(id: string): SplitState {
     () => {},
   );
 
-  return useObservableRef<SplitState & { state: SplitState }>(() => ({
+  return useObjectRef<SplitState & { state: SplitState }>(() => ({
     get mode(): SplitterMode | undefined {
       return this.state.mode;
     },
@@ -32,20 +31,11 @@ export function useSplitUserState(id: string): SplitState {
       return this.state.ratio;
     },
     onModeChange(mode) {
-      state.mode = mode;
+      this.state.mode = mode;
     },
     onResize(size, ratio) {
-      runInAction(() => {
-        state.ratio = ratio;
-        state.size = size;
-      });
+      this.state.ratio = ratio;
+      this.state.size = size;
     },
-  }), {
-    mode: computed,
-    size: computed,
-    ratio: computed,
-    onModeChange: action,
-    onResize: action,
-    state: observable.ref,
-  }, { state });
+  }), { state }, ['onModeChange', 'onResize']);
 }

webapp/yarn.lock

@@ -7286,10 +7286,10 @@ globule@^1.0.0:
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
-go-split@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/go-split/-/go-split-3.0.0.tgz#30189c9ce50474e22dd83af1d2dd56ac972aaa48"
-  integrity sha512-ont1kyjUBXF6cJfEgCr/y0KAsPNeBDOvh4TAFXoqtFKl7O48FMBRjzzV4LTXL9PZrfXXz8fkVCgYc5bQr5yCJQ==
+go-split@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/go-split/-/go-split-3.0.1.tgz#faaf9e2f019748b9348127a68c01da869e5590b1"
+  integrity sha512-LqU0pv+54nRHeuBRX5/XXhq2D35bPDb8m32lFAhQ5Dow5LmSL0MIqNp7nlX5iWhdfUZpBD6KPweX7kVxe6TfBg==
 
 got@^9.6.0:
   version "9.6.0"