@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/hooks/use-mobile-form-layout.js

@@ -1,55 +1,86 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface LayoutConfig {
-  enableTouchOptimization}
+  enableTouchOptimization: boolean
+  enableKeyboardOptimization: boolean
+  enableResponsiveBehavior: boolean
+  enablePerformanceOptimization: boolean
+  touchTargetSize: number
+  spacingMultiplier: number
+  maxFieldWidth: number
+  enableAutoFocus: boolean
+}
 
 export interface LayoutState {
-  isMobile}
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+  orientation: 'portrait' | 'landscape'
+  keyboardVisible: boolean
+  viewportHeight: number
+  viewportWidth: number
+  safeAreaInsets: {
+    top: number
+    bottom: number
+    left: number
+    right: number
+  }
 }
 
 export interface LayoutCallbacks {
-  onLayoutChange?) => void
-  onOrientationChange?) => void
-  onKeyboardVisibilityChange?) => void
-  onViewportChange?, height) => void
+  onLayoutChange?: (layout: LayoutState) => void
+  onOrientationChange?: (orientation: 'portrait' | 'landscape') => void
+  onKeyboardVisibilityChange?: (visible: boolean) => void
+  onViewportChange?: (width: number, height: number) => void
 }
 
 export interface MobileFormLayoutState {
-  layout}
+  layout: LayoutState
+  isOptimized: boolean
+  currentSpacing: number
+  currentFieldWidth: number
+  performanceMetrics: {
+    layoutUpdates: number
+    lastUpdateTime: number
+    optimizationScore: number
+  }
 }
 
 export const useMobileFormLayout = (
-  callbacks= {},
-  config= {}
+  callbacks: LayoutCallbacks = {},
+  config: Partial<LayoutConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableTouchOptimization,
-    enableKeyboardOptimization,
-    enableResponsiveBehavior,
-    enablePerformanceOptimization,
-    touchTargetSize,
-    spacingMultiplier,
-    maxFieldWidth,
-    enableAutoFocus,
+  const defaultConfig: LayoutConfig = {
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: true,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: true,
+    touchTargetSize: 44,
+    spacingMultiplier: 1.2,
+    maxFieldWidth: 400,
+    enableAutoFocus: true,
     ...config
   }
 
   const [layoutState, setLayoutState] = useState<MobileFormLayoutState>({
-    layout,
-      isTablet,
-      isDesktop,
-      orientation,
-      keyboardVisible,
-      viewportHeight,
-      viewportWidth,
-      safeAreaInsets, bottom, left, right}
+    layout: {
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false,
+      orientation: 'portrait',
+      keyboardVisible: false,
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 }
     },
-    isOptimized,
-    currentSpacing,
-    currentFieldWidth, defaultConfig.maxFieldWidth),
-    performanceMetrics,
-      lastUpdateTime,
-      optimizationScore}
+    isOptimized: false,
+    currentSpacing: defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier,
+    currentFieldWidth: Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth),
+    performanceMetrics: {
+      layoutUpdates: 0,
+      lastUpdateTime: 0,
+      optimizationScore: 0
+    }
   })
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
@@ -85,7 +116,7 @@ export const useMobileFormLayout = (
   }, [])
 
   // Detect orientation
-  const detectOrientation = useCallback(()=> {
+  const detectOrientation = useCallback((): 'portrait' | 'landscape' => {
     if (window.innerHeight > window.innerWidth) {
       return 'portrait'
     }
@@ -97,10 +128,10 @@ export const useMobileFormLayout = (
     const style = getComputedStyle(document.documentElement)
     
     return {
-      top) || '0'),
-      bottom) || '0'),
-      left) || '0'),
-      right) || '0')
+      top: parseInt(style.getPropertyValue('--sat') || '0'),
+      bottom: parseInt(style.getPropertyValue('--sab') || '0'),
+      left: parseInt(style.getPropertyValue('--sal') || '0'),
+      right: parseInt(style.getPropertyValue('--sar') || '0')
     }
   }, [])
 
@@ -111,7 +142,9 @@ export const useMobileFormLayout = (
     const currentHeight = window.innerHeight
     const currentWidth = window.innerWidth
     
-    // Simple heuristic= currentHeight / layoutState.layout.viewportHeight
+    // Simple heuristic: if height decreases significantly and width stays the same
+    // it's likely the keyboard appeared
+    const heightRatio = currentHeight / layoutState.layout.viewportHeight
     const widthRatio = currentWidth / layoutState.layout.viewportWidth
     
     return heightRatio < 0.8 && widthRatio > 0.95
@@ -124,12 +157,12 @@ export const useMobileFormLayout = (
     const safeAreaInsets = getSafeAreaInsets()
     const keyboardVisible = detectKeyboardVisibility()
     
-    const newLayout= {
+    const newLayout: LayoutState = {
       ...deviceType,
       orientation,
       keyboardVisible,
-      viewportHeight,
-      viewportWidth,
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
       safeAreaInsets
     }
 
@@ -158,12 +191,13 @@ export const useMobileFormLayout = (
     setLayoutState(prev => {
       const newState = {
         ...prev,
-        layout,
-        currentSpacing,
-        currentFieldWidth,
-        performanceMetrics,
-          layoutUpdates,
-          lastUpdateTime)
+        layout: newLayout,
+        currentSpacing: spacing,
+        currentFieldWidth: fieldWidth,
+        performanceMetrics: {
+          ...prev.performanceMetrics,
+          layoutUpdates: prev.performanceMetrics.layoutUpdates + 1,
+          lastUpdateTime: Date.now()
         }
       }
 
@@ -192,7 +226,7 @@ export const useMobileFormLayout = (
   ])
 
   // Calculate optimization score
-  const calculateOptimizationScore = useCallback((state)=> {
+  const calculateOptimizationScore = useCallback((state: MobileFormLayoutState): number => {
     let score = 0
     const { layout, currentSpacing, currentFieldWidth } = state
 
@@ -354,13 +388,13 @@ export const useMobileFormLayout = (
     const { currentSpacing, currentFieldWidth } = layoutState
     
     return {
-      '--mobile-spacing'}px`,
-      '--mobile-field-width'}px`,
-      '--touch-target-size'}px`,
-      '--safe-area-top'}px`,
-      '--safe-area-bottom'}px`,
-      '--safe-area-left'}px`,
-      '--safe-area-right'}px`
+      '--mobile-spacing': `${currentSpacing}px`,
+      '--mobile-field-width': `${currentFieldWidth}px`,
+      '--touch-target-size': `${defaultConfig.touchTargetSize}px`,
+      '--safe-area-top': `${layoutState.layout.safeAreaInsets.top}px`,
+      '--safe-area-bottom': `${layoutState.layout.safeAreaInsets.bottom}px`,
+      '--safe-area-left': `${layoutState.layout.safeAreaInsets.left}px`,
+      '--safe-area-right': `${layoutState.layout.safeAreaInsets.right}px`
     }
   }, [layoutState, defaultConfig.touchTargetSize])
 
@@ -395,33 +429,36 @@ export const useMobileFormLayout = (
     getLayoutClasses,
     getLayoutCSSVariables,
     autoFocusFirstInput,
-    isMobile,
-    isTablet,
-    isDesktop,
-    orientation,
-    keyboardVisible,
-    currentSpacing,
-    currentFieldWidth,
-    isOptimized,
-    performanceMetrics}
+    isMobile: layoutState.layout.isMobile,
+    isTablet: layoutState.layout.isTablet,
+    isDesktop: layoutState.layout.isDesktop,
+    orientation: layoutState.layout.orientation,
+    keyboardVisible: layoutState.layout.keyboardVisible,
+    currentSpacing: layoutState.currentSpacing,
+    currentFieldWidth: layoutState.currentFieldWidth,
+    isOptimized: layoutState.isOptimized,
+    performanceMetrics: layoutState.performanceMetrics
+  }
 }
 
 // Convenience hook for basic mobile layout
 export const useBasicMobileLayout = () => {
   return useMobileFormLayout({}, {
-    enableTouchOptimization,
-    enableKeyboardOptimization,
-    enableResponsiveBehavior,
-    enablePerformanceOptimization,
-    enableAutoFocus})
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: false,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: false,
+    enableAutoFocus: false
+  })
 }
 
 // Convenience hook for enhanced mobile layout
 export const useEnhancedMobileLayout = () => {
   return useMobileFormLayout({}, {
-    enableTouchOptimization,
-    enableKeyboardOptimization,
-    enableResponsiveBehavior,
-    enablePerformanceOptimization,
-    enableAutoFocus})
+    enableTouchOptimization: true,
+    enableKeyboardOptimization: true,
+    enableResponsiveBehavior: true,
+    enablePerformanceOptimization: true,
+    enableAutoFocus: true
+  })
 }