feat(components): automatically detect touchscreen in ResizeLayout (#5)

Author: Pistonight

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pistonite/celera",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "type": "module",
     "private": true,
     "description": "In-house UI framework",

src/components/resize_layout.tsx

@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from "@fluentui/react-components";
 import { Children, useRef, useState, type PropsWithChildren } from "react";
 
+import { isMobile } from "#pref";
+
 /**
  * React component. A flex-box layout of 2 children, with a draggable divider between them.
  *
@@ -28,7 +30,10 @@ export interface ResizeLayoutOwnProps {
     /** Use the natural size instead of valuePercent */
     naturalSize?: boolean;
 
-    /** Optimize for touch screen */
+    /**
+     * Force enable styles for touch screen. Note that by default it is enabled
+     * if the device is mobile
+     */
     touch?: boolean;
 }
 
@@ -88,8 +93,8 @@ export const ResizeLayout: React.FC<PropsWithChildren<ResizeLayoutProps>> = (inP
         naturalSize,
         minWidth,
         minHeight,
-        touch,
         children,
+        touch: propTouch,
         ...props
     } = inProps;
     const [firstChild, secondChild] = Children.toArray(children);
@@ -100,6 +105,8 @@ export const ResizeLayout: React.FC<PropsWithChildren<ResizeLayoutProps>> = (inP
     // [startX, startY, startWidth, startHeight]
     const [resizing, setResizing] = useState<number[] | undefined>(undefined);
 
+    const touch = propTouch || isMobile();
+
     const startResize = (e: React.MouseEvent | React.TouchEvent) => {
         if (disabled || !firstRef.current) {
             return;