Cb 4429 change divider behavior (#2335)

* CB-4429 adds visible buttons for resizers

* CB-4429 adds auto margin to dividers

* CB-4429 fix initial auto margin

* CB-4429 adds auto margins without hook

* CB-4429 split controls cleanup

* CB-4429 hide content if panel minimized

* CB-4429 remove ts ignore

* CB-4429 Pane cleanup

* CB-4429 update go-split

* CB-4429 pane renders null if it is minimized splitter

* CV-4429 removed children memoization in Pane component

* CB-4429 fix: hide content if maximized pane

* CB-4429 chore: update go-split version

* CB-4429 update go-split lib

---------

Co-authored-by: s.teleshev <s.teleshev@mu.se>
Co-authored-by: Aleksei Potsetsuev <wrouds@gmail.com>
Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>

webapp/packages/core-app/src/AppScreen/Main.m.css

@@ -1,5 +1,5 @@
 .space {
-  composes: theme-typography--body2 theme-background-primary from global;
+  composes: theme-background-surface theme-text-on-surface from global;
   display: flex;
   flex-direction: row;
   flex: 1;

webapp/packages/core-app/src/AppScreen/Main.tsx

@@ -28,12 +28,7 @@ export const Main = observer(function Main() {
   return (
     <Loader className={s(styles, { loader: true })} suspense>
       <main className={s(styles, { space: true })}>
-        <Split
-          {...splitMainState}
-          sticky={30}
-          mode={leftBarDisabled ? 'minimize' : splitMainState.mode}
-          disable={leftBarDisabled}
-        >
+        <Split {...splitMainState} sticky={30} mode={leftBarDisabled ? 'minimize' : splitMainState.mode} disable={leftBarDisabled}>
           <Pane className={s(styles, { pane: true })} basis="250px" main>
             <Loader suspense>
               <SideBarPanel container={leftBarPanelService.tabsContainer} />

webapp/packages/core-blocks/package.json

@@ -29,7 +29,7 @@
     "@cloudbeaver/core-sdk": "~0.1.0",
     "@cloudbeaver/core-theming": "~0.1.0",
     "@cloudbeaver/core-utils": "~0.1.0",
-    "go-split": "^3.4.1",
+    "go-split": "^3.4.7",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
     "react": "^18.2.0",

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

@@ -11,9 +11,16 @@ import { observer } from 'mobx-react-lite';
 import { s } from '../s';
 import { useS } from '../useS';
 import style from './Pane.m.css';
+import { useSplit } from './useSplit';
 
-export const Pane = observer<PaneProps>(function Pane({ className, ...rest }) {
+export const Pane = observer<PaneProps>(function Pane({ className, children, ...rest }) {
   const styles = useS(style);
+  const split = useSplit();
+  const shouldHideContent = (rest.main && split.state.mode === 'minimize') || (!rest.main && split.state.mode === 'maximize');
 
-  return <BasePane className={s(styles, { pane: true }, className)} {...rest} />;
+  return (
+    <BasePane className={s(styles, { pane: true }, className)} {...rest}>
+      {shouldHideContent ? null : children}
+    </BasePane>
+  );
 });

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

@@ -12,13 +12,24 @@ import { s } from '../s';
 import { useS } from '../useS';
 import style from './Split.m.css';
 
-export type ISplitProps = SplitProps;
+export type ISplitProps = SplitProps & {
+  disableAutoMargin?: boolean;
+};
 
-export const Split = observer<ISplitProps>(function Split({ className, split, ...rest }) {
+const AUTO_MARGIN = 22;
+
+export const Split = observer<ISplitProps>(function Split({ className, minSize, maxSize, split, disableAutoMargin = false, ...rest }) {
   const styles = useS(style);
 
   const vertical = split === 'vertical' || split === undefined;
   const horizontal = split === 'horizontal';
 
-  return <BaseSplit className={s(styles, { split: true, vertical, horizontal }, className)} split={split} {...rest} />;
+  if (!disableAutoMargin) {
+    minSize = AUTO_MARGIN;
+    maxSize = -AUTO_MARGIN;
+  }
+
+  return (
+    <BaseSplit minSize={minSize} maxSize={maxSize} className={s(styles, { split: true, vertical, horizontal }, className)} split={split} {...rest} />
+  );
 });

webapp/packages/core-blocks/src/Split/SplitControls.m.css

@@ -15,7 +15,7 @@
 
 .button {
   composes: theme-button theme-button_unelevated theme-button_background theme-elevation-z3 from global;
-  opacity: 0;
+  opacity: 1;
   transition-property: opacity, box-shadow !important;
   transition: opacity 0.3s ease-in-out;
 }
@@ -24,10 +24,14 @@
   composes: theme-button_ripple from global;
 }
 
-.container:hover .button {
+.container:hover .resizeButton {
   opacity: 1;
 }
 
+.resizeButton {
+  opacity: 0;
+}
+
 .container[data-s-split='vertical'] {
   flex-direction: column;
   cursor: ew-resize;

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

@@ -14,6 +14,7 @@ import { useSplit } from './useSplit';
 export const SplitControls: React.FC = function SplitControls() {
   const split = useSplit();
   const styles = useS(SplitControlsStyles);
+  const isResizeMode = split.state.mode === 'resize';
 
   const inverse = split.state.isMainSecond();
 
@@ -64,12 +65,16 @@ export const SplitControls: React.FC = function SplitControls() {
       onDoubleClick={split.state.onDoubleClick}
     >
       {split.state.mode !== 'minimize' && (
-        <button className={s(styles, { button: true, primary: !inverse })} type="button" onClick={handlers.handleCollapse}>
+        <button
+          className={s(styles, { button: true, primary: !inverse, resizeButton: isResizeMode })}
+          type="button"
+          onClick={handlers.handleCollapse}
+        >
           <div className={s(styles, { ripple: true })} />
         </button>
       )}
       {split.state.mode !== 'maximize' && (
-        <button className={s(styles, { button: true, primary: inverse })} type="button" onClick={handlers.handleExpand}>
+        <button className={s(styles, { button: true, primary: inverse, resizeButton: isResizeMode })} type="button" onClick={handlers.handleExpand}>
           <div className={s(styles, { ripple: true })} />
         </button>
       )}

webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx

@@ -227,6 +227,7 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>(
               mode={valuePanelDisplayed ? splitState.mode : 'minimize'}
               disable={!valuePanelDisplayed}
               keepRatio
+              disableAutoMargin
             >
               <Pane className={s(styles, { pane: true })}>
                 <div className={s(styles, { paneContent: true, grid: true })}>

webapp/yarn.lock

@@ -9764,10 +9764,10 @@ globby@^8.0.1:
     pify "^3.0.0"
     slash "^1.0.0"
 
-go-split@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/go-split/-/go-split-3.4.1.tgz#59b3b7b625f26abc2b5b91463604459d9116e16f"
-  integrity sha512-icg0vlpG6XN1VIecSlNd49WgGna14kxep+RLFpQ8P7ztbOAyFZcANzQja08Yc9MiDgIC1eTJa/Od2ST7xf3Q/Q==
+go-split@^3.4.7:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/go-split/-/go-split-3.4.7.tgz#43996dc4e054c054170995c7a2a571ac1f149dd0"
+  integrity sha512-R4g8zp2BEZZ0tQL0wIhz8LvRW5xaSoX8jBcfSgcTnc/D0g+vqxbEojWwv04mhvISeyKD3DhgO8ybgcNZi/Y7mw==
 
 gonzales-pe@^4.2.3, gonzales-pe@^4.3.0:
   version "4.3.0"