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

package/dist/hooks/use-mobile-keyboard-optimization.esm.js

@@ -0,0 +1,431 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface KeyboardOptimizationConfig {
+  enableKeyboardDetection?}
+
+export interface KeyboardState {
+  isVisible}
+
+export interface KeyboardOptimization {
+  id}
+
+export interface MobileKeyboardOptimizationCallbacks {
+  onKeyboardStateChanged?) => void
+  onOptimizationApplied?) => void
+  onPerformanceOptimized?) => void
+  onBatteryOptimized?) => void
+  onAccessibilityEnhanced?) => void
+}
+
+export const useMobileKeyboardOptimization = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableKeyboardDetection = true,
+
+    enablePerformanceMonitoring = true,
+    enableBatteryOptimization = true,
+    enableAccessibilitySupport = true,
+    keyboardDetectionInterval = 100,
+    performanceThreshold = 60
+  } = config
+
+  const [keyboardState, setKeyboardState] = useState<KeyboardState>({
+    isVisible,
+    height,
+    type,
+    orientation,
+    platform,
+    language,
+    inputMode,
+    autoCapitalize,
+    autoComplete,
+    autoCorrect,
+    spellCheck})
+
+  const [optimizations, setOptimizations] = useState<KeyboardOptimization[]>([])
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    frameRate,
+    inputLatency,
+    keyboardResponseTime,
+    memoryUsage})
+
+  const keyboardDetectionRef = useRef<number | null>(null)
+  const performanceTimerRef = useRef<number | null>(null)
+
+  const lastKeyboardHeightRef = useRef(0)
+  const keyboardVisibilityTimerRef = useRef<number | null>(null)
+
+  // Detect mobile platform
+  const detectPlatform = useCallback(() => {
+    const userAgent = navigator.userAgent.toLowerCase()
+    if (/iphone|ipad|ipod/.test(userAgent)) return 'ios'
+    if (/android/.test(userAgent)) return 'android'
+    return 'unknown'
+  }, [])
+
+  // Detect device orientation
+  const detectOrientation = useCallback(() => {
+    return window.innerHeight > window.innerWidth ? 'portrait' }, [])
+
+  // Detect keyboard visibility
+  const detectKeyboardVisibility = useCallback(() => {
+    const currentHeight = window.innerHeight
+    const heightDifference = lastKeyboardHeightRef.current - currentHeight
+    
+    // Keyboard is considered visible if height decreased significantly
+    const isVisible = heightDifference > 150
+    
+    if (isVisible !== keyboardState.isVisible) {
+      setKeyboardState(prev => ({
+        ...prev,
+        isVisible,
+        height}))
+      
+      callbacks.onKeyboardStateChanged?.({
+        ...keyboardState,
+        isVisible,
+        height})
+    }
+    
+    lastKeyboardHeightRef.current = currentHeight
+  }, [keyboardState, callbacks])
+
+  // Start keyboard detection
+  const startKeyboardDetection = useCallback(() => {
+    if (!enableKeyboardDetection) return () => {}
+    
+    const detect = () => {
+      detectKeyboardVisibility()
+      keyboardDetectionRef.current = window.setTimeout(detect, keyboardDetectionInterval)
+    }
+    
+    keyboardDetectionRef.current = window.setTimeout(detect, keyboardDetectionInterval)
+    
+    return () => {
+      if (keyboardDetectionRef.current) {
+        clearTimeout(keyboardDetectionRef.current)
+      }
+    }
+  }, [enableKeyboardDetection, keyboardDetectionInterval, detectKeyboardVisibility])
+
+  // Performance monitoring
+  const startPerformanceMonitoring = useCallback(() => {
+    if (!enablePerformanceMonitoring) return () => {}
+    
+    let frameCount = 0
+    let lastTime = performance.now()
+    
+    const measurePerformance = () => {
+      const currentTime = performance.now()
+      frameCount++
+      
+      if (currentTime - lastTime >= 1000) {
+        const fps = Math.round((frameCount * 1000) / (currentTime - lastTime))
+        const inputLatency = currentTime - lastTime
+        
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          frameRate,
+          inputLatency
+        }))
+        
+        frameCount = 0
+        lastTime = currentTime
+      }
+      
+      performanceTimerRef.current = requestAnimationFrame(measurePerformance)
+    }
+    
+    performanceTimerRef.current = requestAnimationFrame(measurePerformance)
+    
+    return () => {
+      if (performanceTimerRef.current) {
+        cancelAnimationFrame(performanceTimerRef.current)
+      }
+    }
+  }, [enablePerformanceMonitoring])
+
+  // Keyboard type optimization
+  const optimizeKeyboardType = useCallback((inputType) => {
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const keyboardOptimizations] = [
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description} input`,
+          keyboardType,
+          inputMode},
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description,
+          inputMode}
+      ]
+      
+      setOptimizations(prev => [...prev, ...keyboardOptimizations])
+      setIsOptimizing(false)
+      
+      keyboardOptimizations.forEach(optimization => {
+        callbacks.onOptimizationApplied?.(optimization)
+      })
+    }, 200)
+  }, [callbacks])
+
+  // Input behavior optimization
+  const optimizeInputBehavior = useCallback((inputType) => {
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const inputOptimizations] = [
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description,
+          inputMode},
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description,
+          inputMode}
+      ]
+      
+      setOptimizations(prev => [...prev, ...inputOptimizations])
+      setIsOptimizing(false)
+      
+      inputOptimizations.forEach(optimization => {
+        callbacks.onOptimizationApplied?.(optimization)
+      })
+    }, 250)
+  }, [callbacks])
+
+  // Performance optimization
+  const optimizePerformance = useCallback(() => {
+    if (!enablePerformanceMonitoring) return
+    
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const performanceOptimizations] = [
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description},
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description}
+      ]
+      
+      setOptimizations(prev => [...prev, ...performanceOptimizations])
+      setIsOptimizing(false)
+      
+      performanceOptimizations.forEach(optimization => {
+        callbacks.onPerformanceOptimized?.(optimization.description)
+      })
+    }, 300)
+  }, [enablePerformanceMonitoring, callbacks])
+
+  // Battery optimization
+  const optimizeBattery = useCallback(() => {
+    if (!enableBatteryOptimization) return
+    
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const batteryOptimizations] = [
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description},
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description}
+      ]
+      
+      setOptimizations(prev => [...prev, ...batteryOptimizations])
+      setIsOptimizing(false)
+      
+      batteryOptimizations.forEach(optimization => {
+        callbacks.onBatteryOptimized?.(optimization.description)
+      })
+    }, 200)
+  }, [enableBatteryOptimization, callbacks])
+
+  // Accessibility enhancement
+  const enhanceAccessibility = useCallback(() => {
+    if (!enableAccessibilitySupport) return
+    
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const accessibilityFeatures] = [
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description},
+        {
+          id,
+          name,
+          type,
+          applied,
+          impact,
+          description}
+      ]
+      
+      setOptimizations(prev => [...prev, ...accessibilityFeatures])
+      setIsOptimizing(false)
+      
+      accessibilityFeatures.forEach(feature => {
+        callbacks.onAccessibilityEnhanced?.(feature.description)
+      })
+    }, 150)
+  }, [enableAccessibilitySupport, callbacks])
+
+  // Auto-optimize based on input type
+  const autoOptimizeForInputType = useCallback((inputType) => {
+    optimizeKeyboardType(inputType)
+    optimizeInputBehavior(inputType)
+    optimizePerformance()
+    optimizeBattery()
+    enhanceAccessibility()
+  }, [optimizeKeyboardType, optimizeInputBehavior, optimizePerformance, optimizeBattery, enhanceAccessibility])
+
+  // Get keyboard optimization recommendations
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations] = []
+    
+    if (performanceMetrics.frameRate < performanceThreshold) {
+      recommendations.push('Consider reducing keyboard animation complexity to improve frame rate')
+    }
+    
+    if (performanceMetrics.inputLatency > 16) {
+      recommendations.push('Input latency is high, consider optimizing keyboard event handling')
+    }
+    
+    if (!keyboardState.isVisible && keyboardState.height > 0) {
+      recommendations.push('Keyboard detection may need adjustment for better accuracy')
+    }
+    
+    return recommendations
+  }, [performanceMetrics, performanceThreshold, keyboardState])
+
+  // Initialize on mount
+  useEffect(() => {
+    const platform = detectPlatform()
+    const orientation = detectOrientation()
+    
+    setKeyboardState(prev => ({
+      ...prev,
+      platform,
+      orientation
+    }))
+    
+    const stopKeyboardDetection = startKeyboardDetection()
+    const stopPerformanceMonitoring = startPerformanceMonitoring()
+    
+    return () => {
+      stopKeyboardDetection()
+      stopPerformanceMonitoring()
+    }
+  }, [detectPlatform, detectOrientation, startKeyboardDetection, startPerformanceMonitoring])
+
+  // Handle orientation change
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      const orientation = detectOrientation()
+      setKeyboardState(prev => ({
+        ...prev,
+        orientation
+      }))
+    }
+    
+    window.addEventListener('orientationchange', handleOrientationChange)
+    window.addEventListener('resize', handleOrientationChange)
+    
+    return () => {
+      window.removeEventListener('orientationchange', handleOrientationChange)
+      window.removeEventListener('resize', handleOrientationChange)
+    }
+  }, [detectOrientation])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (keyboardDetectionRef.current) {
+        clearTimeout(keyboardDetectionRef.current)
+      }
+      if (performanceTimerRef.current) {
+        cancelAnimationFrame(performanceTimerRef.current)
+      }
+      if (keyboardVisibilityTimerRef.current) {
+        clearTimeout(keyboardVisibilityTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    keyboardState,
+    optimizations,
+    isOptimizing,
+    performanceMetrics,
+    
+    // Functions
+    optimizeKeyboardType,
+    optimizeInputBehavior,
+    optimizePerformance,
+    optimizeBattery,
+    enhanceAccessibility,
+    autoOptimizeForInputType,
+    
+    // Utility functions
+    isKeyboardVisible) => keyboardState.isVisible,
+    getKeyboardHeight) => keyboardState.height,
+    getPlatform) => keyboardState.platform,
+    getOrientation) => keyboardState.orientation,
+    getOptimizationStatus) => ({
+      keyboard=> o.type === 'keyboard'),
+      input=> o.type === 'input'),
+      performance=> o.type === 'performance'),
+      accessibility=> o.type === 'accessibility')
+    }),
+    getOptimizationRecommendations,
+    clearOptimizations) => setOptimizations([])
+  }
+}
+
+export default useMobileKeyboardOptimization
+