web: add snapping support

Mohammedshahinsha · Dec 30, 2024 · 4f37c92 · 4f37c92
1 parent 3180a88
commit 4f37c92
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useState, Suspense } from "react";
+import React, { useState, Suspense, useEffect } from "react";
 import { Box, Flex } from "@theme-ui/components";
 import { ScopedThemeProvider } from "./components/theme-provider";
 import useMobile from "./hooks/use-mobile";
@@ -156,7 +156,7 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
             </Flex>
           ) : (
             !isFocusMode && (
-              <Pane minSize={50}>
+              <Pane minSize={50} snapSize={120}>
                 <NavigationMenu
                   toggleNavigationContainer={(state) => {
                     setShow(state || !show);
@@ -167,7 +167,7 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
             )
           )}
           {!isFocusMode && show && (
-            <Pane style={{ flex: 1, display: "flex" }}>
+            <Pane style={{ flex: 1, display: "flex" }} snapSize={200}>
               <ScopedThemeProvider
                 className="listMenu"
                 scope="list"

diff --git a/apps/web/src/components/split-pane/index.tsx b/apps/web/src/components/split-pane/index.tsx
@@ -67,10 +67,7 @@ export const SplitPane = React.forwardRef<
           "split-sash-content",
           active && "split-sash-content-active"
         )}
-        {...others}
-      >
-        {children}
-      </div>
+      />
     ),
     sashSize: resizerSize = 5,
     onChange = () => null,
@@ -116,11 +113,13 @@ export const SplitPane = React.forwardRef<
   const paneLimitSizes = useMemo(
     () =>
       childrenToArray(children).map((childNode) => {
-        const limits = [0, Infinity];
+        const limits = { min: 0, max: Infinity, snap: 0 };
         if (React.isValidElement(childNode) && childNode.type === Pane) {
-          const { minSize, maxSize } = childNode.props as IPaneConfigs;
-          limits[0] = assertsSize(minSize, wrapSize.current, 0);
-          limits[1] = assertsSize(maxSize, wrapSize.current);
+          const { minSize, maxSize, snapSize } =
+            childNode.props as IPaneConfigs;
+          limits.min = assertsSize(minSize, wrapSize.current, 0);
+          limits.max = assertsSize(maxSize, wrapSize.current);
+          limits.snap = assertsSize(snapSize, wrapSize.current, 0);
         }
         return limits;
       }) || [],
@@ -193,7 +192,7 @@ export const SplitPane = React.forwardRef<
       return {
         collapse: (index: number) => {
           const nextSizes = [...sizes.current];
-          nextSizes[index] = paneLimitSizes[index][0];
+          nextSizes[index] = paneLimitSizes[index].min;
           nextSizes[index + 1] += sizes.current[index];
           setSizes(nextSizes, wrapSize.current);
         },
@@ -242,15 +241,25 @@ export const SplitPane = React.forwardRef<
       if (currentSize + distanceX >= rightBorder)
         distanceX = rightBorder - currentSize;
 
-      if (currentSize + distanceX < currentPaneLimits[0]) return;
-      if (currentSize + distanceX > currentPaneLimits[1]) return;
+      if (currentSize + distanceX < currentPaneLimits.min) return;
+      if (currentSize + distanceX > currentPaneLimits.max) return;
 
       const nextSizes = [...sizes.current];
       nextSizes[i] += distanceX;
       nextSizes[i + 1] -= distanceX;
 
-      if (nextSizes[i + 1] < nextPaneLimits[0])
-        nextSizes[i + 1] = nextPaneLimits[0];
+      if (nextSizes[i + 1] < nextPaneLimits.min)
+        nextSizes[i + 1] = nextPaneLimits.min;
+
+      if (currentPaneLimits.snap > 0 && distanceX <= 0) {
+        if (nextSizes[i] <= currentPaneLimits.snap / 2)
+          nextSizes[i] = currentPaneLimits.min;
+        else if (nextSizes[i] < currentPaneLimits.snap) {
+          // reset axis
+          axis.current[splitAxis] += -distanceX;
+          return;
+        }
+      }
 
       setSizes(nextSizes, wrapSize.current);
     },

diff --git a/apps/web/src/components/split-pane/types.ts b/apps/web/src/components/split-pane/types.ts
@@ -91,4 +91,5 @@ export interface IPaneConfigs {
   paneRef?: React.LegacyRef<HTMLDivElement>;
   maxSize?: number | string;
   minSize?: number | string;
+  snapSize?: number | string;
 }