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

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

@@ -1,25 +1,51 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface KeyboardOptimizationConfig {
-  enableKeyboardDetection?}
+  enableKeyboardDetection?: boolean
+  enableAutoOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilitySupport?: boolean
+  keyboardDetectionInterval?: number
+  performanceThreshold?: number
+}
 
 export interface KeyboardState {
-  isVisible}
+  isVisible: boolean
+  height: number
+  type: 'default' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | 'decimal'
+  orientation: 'portrait' | 'landscape'
+  platform: 'ios' | 'android' | 'unknown'
+  language: string
+  inputMode: string
+  autoCapitalize: string
+  autoComplete: string
+  autoCorrect: string
+  spellCheck: boolean
+}
 
 export interface KeyboardOptimization {
-  id}
+  id: string
+  name: string
+  type: 'keyboard' | 'input' | 'performance' | 'accessibility'
+  applied: boolean
+  impact: 'low' | 'medium' | 'high'
+  description: string
+  keyboardType?: string
+  inputMode?: string
+}
 
 export interface MobileKeyboardOptimizationCallbacks {
-  onKeyboardStateChanged?) => void
-  onOptimizationApplied?) => void
-  onPerformanceOptimized?) => void
-  onBatteryOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onKeyboardStateChanged?: (state: KeyboardState) => void
+  onOptimizationApplied?: (optimization: KeyboardOptimization) => void
+  onPerformanceOptimized?: (optimization: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useMobileKeyboardOptimization = (
-  config= {},
-  callbacks= {}
+  config: KeyboardOptimizationConfig = {},
+  callbacks: MobileKeyboardOptimizationCallbacks = {}
 ) => {
   const {
     enableKeyboardDetection = true,
@@ -32,25 +58,27 @@ export const useMobileKeyboardOptimization = (
   } = config
 
   const [keyboardState, setKeyboardState] = useState<KeyboardState>({
-    isVisible,
-    height,
-    type,
-    orientation,
-    platform,
-    language,
-    inputMode,
-    autoCapitalize,
-    autoComplete,
-    autoCorrect,
-    spellCheck})
+    isVisible: false,
+    height: 0,
+    type: 'default',
+    orientation: 'portrait',
+    platform: 'unknown',
+    language: 'en-US',
+    inputMode: 'text',
+    autoCapitalize: 'sentences',
+    autoComplete: 'on',
+    autoCorrect: 'on',
+    spellCheck: true
+  })
 
   const [optimizations, setOptimizations] = useState<KeyboardOptimization[]>([])
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    frameRate,
-    inputLatency,
-    keyboardResponseTime,
-    memoryUsage})
+    frameRate: 60,
+    inputLatency: 0,
+    keyboardResponseTime: 0,
+    memoryUsage: 0
+  })
 
   const keyboardDetectionRef = useRef<number | null>(null)
   const performanceTimerRef = useRef<number | null>(null)
@@ -68,7 +96,8 @@ export const useMobileKeyboardOptimization = (
 
   // Detect device orientation
   const detectOrientation = useCallback(() => {
-    return window.innerHeight > window.innerWidth ? 'portrait' }, [])
+    return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape'
+  }, [])
 
   // Detect keyboard visibility
   const detectKeyboardVisibility = useCallback(() => {
@@ -82,12 +111,14 @@ export const useMobileKeyboardOptimization = (
       setKeyboardState(prev => ({
         ...prev,
         isVisible,
-        height}))
+        height: isVisible ? heightDifference : 0
+      }))
       
       callbacks.onKeyboardStateChanged?.({
         ...keyboardState,
         isVisible,
-        height})
+        height: isVisible ? heightDifference : 0
+      })
     }
     
     lastKeyboardHeightRef.current = currentHeight
@@ -128,7 +159,7 @@ export const useMobileKeyboardOptimization = (
         
         setPerformanceMetrics(prev => ({
           ...prev,
-          frameRate,
+          frameRate: fps,
           inputLatency
         }))
         
@@ -149,28 +180,30 @@ export const useMobileKeyboardOptimization = (
   }, [enablePerformanceMonitoring])
 
   // Keyboard type optimization
-  const optimizeKeyboardType = useCallback((inputType) => {
+  const optimizeKeyboardType = useCallback((inputType: string) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const keyboardOptimizations] = [
+      const keyboardOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description} input`,
-          keyboardType,
-          inputMode},
+          id: 'keyboard-type-1',
+          name: 'Keyboard Type Optimization',
+          type: 'keyboard',
+          applied: true,
+          impact: 'high',
+          description: `Optimized keyboard type for ${inputType} input`,
+          keyboardType: inputType,
+          inputMode: inputType
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          inputMode}
+          id: 'keyboard-type-2',
+          name: 'Input Mode Enhancement',
+          type: 'input',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced input mode for better mobile experience',
+          inputMode: inputType
+        }
       ]
       
       setOptimizations(prev => [...prev, ...keyboardOptimizations])
@@ -183,27 +216,29 @@ export const useMobileKeyboardOptimization = (
   }, [callbacks])
 
   // Input behavior optimization
-  const optimizeInputBehavior = useCallback((inputType) => {
+  const optimizeInputBehavior = useCallback((inputType: string) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const inputOptimizations] = [
+      const inputOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          inputMode},
+          id: 'input-behavior-1',
+          name: 'Auto-capitalization Optimization',
+          type: 'input',
+          applied: true,
+          impact: 'medium',
+          description: 'Optimized auto-capitalization for mobile input',
+          inputMode: inputType
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description,
-          inputMode}
+          id: 'input-behavior-2',
+          name: 'Autocomplete Enhancement',
+          type: 'input',
+          applied: true,
+          impact: 'medium',
+          description: 'Enhanced autocomplete for better user experience',
+          inputMode: inputType
+        }
       ]
       
       setOptimizations(prev => [...prev, ...inputOptimizations])
@@ -222,21 +257,23 @@ export const useMobileKeyboardOptimization = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const performanceOptimizations] = [
+      const performanceOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'performance-1',
+          name: 'Input Latency Optimization',
+          type: 'performance',
+          applied: true,
+          impact: 'high',
+          description: 'Reduced input latency for smoother typing experience'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'performance-2',
+          name: 'Frame Rate Optimization',
+          type: 'performance',
+          applied: true,
+          impact: 'medium',
+          description: 'Optimized frame rate for keyboard interactions'
+        }
       ]
       
       setOptimizations(prev => [...prev, ...performanceOptimizations])
@@ -255,21 +292,23 @@ export const useMobileKeyboardOptimization = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const batteryOptimizations] = [
+      const batteryOptimizations: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'battery-1',
+          name: 'Battery-Conscious Keyboard',
+          type: 'performance',
+          applied: true,
+          impact: 'medium',
+          description: 'Battery-optimized keyboard behavior'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'battery-2',
+          name: 'Efficient Input Processing',
+          type: 'performance',
+          applied: true,
+          impact: 'low',
+          description: 'Efficient input processing for battery optimization'
+        }
       ]
       
       setOptimizations(prev => [...prev, ...batteryOptimizations])
@@ -288,21 +327,23 @@ export const useMobileKeyboardOptimization = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const accessibilityFeatures] = [
+      const accessibilityFeatures: KeyboardOptimization[] = [
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description},
+          id: 'accessibility-1',
+          name: 'Keyboard Navigation',
+          type: 'accessibility',
+          applied: true,
+          impact: 'high',
+          description: 'Enhanced keyboard navigation support'
+        },
         {
-          id,
-          name,
-          type,
-          applied,
-          impact,
-          description}
+          id: 'accessibility-2',
+          name: 'Screen Reader Support',
+          type: 'accessibility',
+          applied: true,
+          impact: 'medium',
+          description: 'Improved screen reader compatibility'
+        }
       ]
       
       setOptimizations(prev => [...prev, ...accessibilityFeatures])
@@ -315,7 +356,7 @@ export const useMobileKeyboardOptimization = (
   }, [enableAccessibilitySupport, callbacks])
 
   // Auto-optimize based on input type
-  const autoOptimizeForInputType = useCallback((inputType) => {
+  const autoOptimizeForInputType = useCallback((inputType: string) => {
     optimizeKeyboardType(inputType)
     optimizeInputBehavior(inputType)
     optimizePerformance()
@@ -325,7 +366,7 @@ export const useMobileKeyboardOptimization = (
 
   // Get keyboard optimization recommendations
   const getOptimizationRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (performanceMetrics.frameRate < performanceThreshold) {
       recommendations.push('Consider reducing keyboard animation complexity to improve frame rate')
@@ -412,18 +453,18 @@ export const useMobileKeyboardOptimization = (
     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')
+    isKeyboardVisible: () => keyboardState.isVisible,
+    getKeyboardHeight: () => keyboardState.height,
+    getPlatform: () => keyboardState.platform,
+    getOrientation: () => keyboardState.orientation,
+    getOptimizationStatus: () => ({
+      keyboard: optimizations.some(o => o.type === 'keyboard'),
+      input: optimizations.some(o => o.type === 'input'),
+      performance: optimizations.some(o => o.type === 'performance'),
+      accessibility: optimizations.some(o => o.type === 'accessibility')
     }),
     getOptimizationRecommendations,
-    clearOptimizations) => setOptimizations([])
+    clearOptimizations: () => setOptimizations([])
   }
 }