@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

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

@@ -0,0 +1,427 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface LayoutConfig {
+  enableTouchOptimization}
+
+export interface LayoutState {
+  isMobile}
+}
+
+export interface LayoutCallbacks {
+  onLayoutChange?) => void
+  onOrientationChange?) => void
+  onKeyboardVisibilityChange?) => void
+  onViewportChange?, height) => void
+}
+
+export interface MobileFormLayoutState {
+  layout}
+}
+
+export const useMobileFormLayout = (
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enableTouchOptimization,
+    enableKeyboardOptimization,
+    enableResponsiveBehavior,
+    enablePerformanceOptimization,
+    touchTargetSize,
+    spacingMultiplier,
+    maxFieldWidth,
+    enableAutoFocus,
+    ...config
+  }
+
+  const [layoutState, setLayoutState] = useState<MobileFormLayoutState>({
+    layout,
+      isTablet,
+      isDesktop,
+      orientation,
+      keyboardVisible,
+      viewportHeight,
+      viewportWidth,
+      safeAreaInsets, bottom, left, right}
+    },
+    isOptimized,
+    currentSpacing,
+    currentFieldWidth, defaultConfig.maxFieldWidth),
+    performanceMetrics,
+      lastUpdateTime,
+      optimizationScore}
+  })
+
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
+  const layoutUpdateTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const keyboardTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Detect device type
+  const detectDeviceType = useCallback(() => {
+    const width = window.innerWidth
+    const userAgent = navigator.userAgent.toLowerCase()
+    
+    let isMobile = false
+    let isTablet = false
+    let isDesktop = false
+
+    // Check screen size
+    if (width < 768) {
+      isMobile = true
+    } else if (width < 1024) {
+      isTablet = true
+    } else {
+      isDesktop = true
+    }
+
+    // Check user agent for mobile devices
+    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)) {
+      isMobile = true
+      isTablet = width >= 768 && width < 1024
+      isDesktop = false
+    }
+
+    return { isMobile, isTablet, isDesktop }
+  }, [])
+
+  // Detect orientation
+  const detectOrientation = useCallback(()=> {
+    if (window.innerHeight > window.innerWidth) {
+      return 'portrait'
+    }
+    return 'landscape'
+  }, [])
+
+  // Get safe area insets (for devices with notches)
+  const getSafeAreaInsets = useCallback(() => {
+    const style = getComputedStyle(document.documentElement)
+    
+    return {
+      top) || '0'),
+      bottom) || '0'),
+      left) || '0'),
+      right) || '0')
+    }
+  }, [])
+
+  // Detect keyboard visibility
+  const detectKeyboardVisibility = useCallback(() => {
+    if (!defaultConfig.enableKeyboardOptimization) return false
+
+    const currentHeight = window.innerHeight
+    const currentWidth = window.innerWidth
+    
+    // Simple heuristic= currentHeight / layoutState.layout.viewportHeight
+    const widthRatio = currentWidth / layoutState.layout.viewportWidth
+    
+    return heightRatio < 0.8 && widthRatio > 0.95
+  }, [defaultConfig.enableKeyboardOptimization, layoutState.layout.viewportHeight, layoutState.layout.viewportWidth])
+
+  // Update layout state
+  const updateLayout = useCallback(() => {
+    const deviceType = detectDeviceType()
+    const orientation = detectOrientation()
+    const safeAreaInsets = getSafeAreaInsets()
+    const keyboardVisible = detectKeyboardVisibility()
+    
+    const newLayout= {
+      ...deviceType,
+      orientation,
+      keyboardVisible,
+      viewportHeight,
+      viewportWidth,
+      safeAreaInsets
+    }
+
+    // Calculate optimal spacing and field width
+    let spacing = defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier
+    let fieldWidth = Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth)
+
+    // Adjust for mobile devices
+    if (newLayout.isMobile) {
+      spacing = Math.max(spacing, 16) // Minimum spacing for mobile
+      fieldWidth = Math.min(fieldWidth, window.innerWidth - 24) // Account for safe areas
+    }
+
+    // Adjust for keyboard visibility
+    if (newLayout.keyboardVisible) {
+      spacing = Math.max(spacing * 0.8, 12) // Reduce spacing when keyboard is visible
+      fieldWidth = Math.min(fieldWidth, window.innerWidth - 16)
+    }
+
+    // Adjust for orientation
+    if (newLayout.orientation === 'landscape' && newLayout.isMobile) {
+      spacing = Math.max(spacing * 0.9, 14)
+      fieldWidth = Math.min(fieldWidth, window.innerHeight - 24)
+    }
+
+    setLayoutState(prev => {
+      const newState = {
+        ...prev,
+        layout,
+        currentSpacing,
+        currentFieldWidth,
+        performanceMetrics,
+          layoutUpdates,
+          lastUpdateTime)
+        }
+      }
+
+      // Calculate optimization score
+      const score = calculateOptimizationScore(newState)
+      newState.performanceMetrics.optimizationScore = score
+      newState.isOptimized = score >= 0.8
+
+      return newState
+    })
+
+    // Notify callbacks
+    callbacks.onLayoutChange?.(newLayout)
+    callbacks.onOrientationChange?.(orientation)
+    callbacks.onKeyboardVisibilityChange?.(keyboardVisible)
+    callbacks.onViewportChange?.(window.innerWidth, window.innerHeight)
+  }, [
+    detectDeviceType,
+    detectOrientation,
+    getSafeAreaInsets,
+    detectKeyboardVisibility,
+    defaultConfig.touchTargetSize,
+    defaultConfig.spacingMultiplier,
+    defaultConfig.maxFieldWidth,
+    callbacks
+  ])
+
+  // Calculate optimization score
+  const calculateOptimizationScore = useCallback((state)=> {
+    let score = 0
+    const { layout, currentSpacing, currentFieldWidth } = state
+
+    // Touch target optimization (40% weight)
+    if (currentSpacing >= defaultConfig.touchTargetSize) {
+      score += 0.4
+    } else if (currentSpacing >= defaultConfig.touchTargetSize * 0.8) {
+      score += 0.3
+    } else if (currentSpacing >= defaultConfig.touchTargetSize * 0.6) {
+      score += 0.2
+    }
+
+    // Field width optimization (30% weight)
+    const optimalWidth = Math.min(layout.viewportWidth - 32, defaultConfig.maxFieldWidth)
+    const widthRatio = currentFieldWidth / optimalWidth
+    if (widthRatio >= 0.9) {
+      score += 0.3
+    } else if (widthRatio >= 0.7) {
+      score += 0.2
+    } else if (widthRatio >= 0.5) {
+      score += 0.1
+    }
+
+    // Responsive behavior (20% weight)
+    if (layout.isMobile && layout.orientation === 'portrait') {
+      score += 0.2
+    } else if (layout.isMobile && layout.orientation === 'landscape') {
+      score += 0.15
+    } else if (layout.isTablet) {
+      score += 0.1
+    }
+
+    // Performance optimization (10% weight)
+    if (state.performanceMetrics.layoutUpdates < 10) {
+      score += 0.1
+    } else if (state.performanceMetrics.layoutUpdates < 20) {
+      score += 0.05
+    }
+
+    return Math.min(score, 1)
+  }, [defaultConfig.touchTargetSize, defaultConfig.maxFieldWidth])
+
+  // Debounced layout update
+  const debouncedUpdateLayout = useCallback(() => {
+    if (layoutUpdateTimerRef.current) {
+      clearTimeout(layoutUpdateTimerRef.current)
+    }
+
+    layoutUpdateTimerRef.current = setTimeout(() => {
+      updateLayout()
+    }, 100) // 100ms debounce
+  }, [updateLayout])
+
+  // Handle window resize
+  const handleResize = useCallback(() => {
+    if (defaultConfig.enableResponsiveBehavior) {
+      debouncedUpdateLayout()
+    }
+  }, [defaultConfig.enableResponsiveBehavior, debouncedUpdateLayout])
+
+  // Handle orientation change
+  const handleOrientationChange = useCallback(() => {
+    if (defaultConfig.enableResponsiveBehavior) {
+      // Add delay for orientation change to complete
+      setTimeout(() => {
+        updateLayout()
+      }, 300)
+    }
+  }, [defaultConfig.enableResponsiveBehavior, updateLayout])
+
+  // Handle keyboard visibility changes
+  const handleKeyboardChange = useCallback(() => {
+    if (defaultConfig.enableKeyboardOptimization) {
+      if (keyboardTimerRef.current) {
+        clearTimeout(keyboardTimerRef.current)
+      }
+
+      keyboardTimerRef.current = setTimeout(() => {
+        updateLayout()
+      }, 150) // Small delay to detect keyboard changes
+    }
+  }, [defaultConfig.enableKeyboardOptimization, updateLayout])
+
+  // Set up resize observer for more precise layout detection
+  useEffect(() => {
+    if (defaultConfig.enablePerformanceOptimization && 'ResizeObserver' in window) {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        handleResize()
+      })
+
+      resizeObserverRef.current.observe(document.body)
+    }
+
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+      }
+    }
+  }, [defaultConfig.enablePerformanceOptimization, handleResize])
+
+  // Set up window event listeners
+  useEffect(() => {
+    if (defaultConfig.enableResponsiveBehavior) {
+      window.addEventListener('resize', handleResize)
+      window.addEventListener('orientationchange', handleOrientationChange)
+      
+      // Listen for visual viewport changes (better for mobile)
+      if ('visualViewport' in window) {
+        (window as any).visualViewport.addEventListener('resize', handleKeyboardChange)
+      }
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+      
+      if ('visualViewport' in window) {
+        (window as any).visualViewport.removeEventListener('resize', handleKeyboardChange)
+      }
+    }
+  }, [defaultConfig.enableResponsiveBehavior, handleResize, handleOrientationChange, handleKeyboardChange])
+
+  // Initial layout detection
+  useEffect(() => {
+    updateLayout()
+  }, [updateLayout])
+
+  // Get CSS classes for layout optimization
+  const getLayoutClasses = useCallback(() => {
+    const { layout, isOptimized } = layoutState
+    const classes = ['mobile-form-layout']
+
+    if (layout.isMobile) {
+      classes.push('layout-mobile')
+      if (layout.orientation === 'portrait') {
+        classes.push('layout-portrait')
+      } else {
+        classes.push('layout-landscape')
+      }
+    } else if (layout.isTablet) {
+      classes.push('layout-tablet')
+    } else {
+      classes.push('layout-desktop')
+    }
+
+    if (layout.keyboardVisible) {
+      classes.push('layout-keyboard-visible')
+    }
+
+    if (isOptimized) {
+      classes.push('layout-optimized')
+    }
+
+    return classes.join(' ')
+  }, [layoutState])
+
+  // Get CSS variables for dynamic styling
+  const getLayoutCSSVariables = useCallback(() => {
+    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`
+    }
+  }, [layoutState, defaultConfig.touchTargetSize])
+
+  // Auto-focus first input when layout changes
+  const autoFocusFirstInput = useCallback(() => {
+    if (!defaultConfig.enableAutoFocus) return
+
+    const firstInput = document.querySelector('input, textarea, select') as HTMLElement
+    if (firstInput && layoutState.layout.isMobile) {
+      // Small delay to ensure layout is stable
+      setTimeout(() => {
+        firstInput.focus()
+      }, 100)
+    }
+  }, [defaultConfig.enableAutoFocus, layoutState.layout.isMobile])
+
+  // Clean up timers on unmount
+  useEffect(() => {
+    return () => {
+      if (layoutUpdateTimerRef.current) {
+        clearTimeout(layoutUpdateTimerRef.current)
+      }
+      if (keyboardTimerRef.current) {
+        clearTimeout(keyboardTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    layoutState,
+    updateLayout,
+    getLayoutClasses,
+    getLayoutCSSVariables,
+    autoFocusFirstInput,
+    isMobile,
+    isTablet,
+    isDesktop,
+    orientation,
+    keyboardVisible,
+    currentSpacing,
+    currentFieldWidth,
+    isOptimized,
+    performanceMetrics}
+}
+
+// Convenience hook for basic mobile layout
+export const useBasicMobileLayout = () => {
+  return useMobileFormLayout({}, {
+    enableTouchOptimization,
+    enableKeyboardOptimization,
+    enableResponsiveBehavior,
+    enablePerformanceOptimization,
+    enableAutoFocus})
+}
+
+// Convenience hook for enhanced mobile layout
+export const useEnhancedMobileLayout = () => {
+  return useMobileFormLayout({}, {
+    enableTouchOptimization,
+    enableKeyboardOptimization,
+    enableResponsiveBehavior,
+    enablePerformanceOptimization,
+    enableAutoFocus})
+}