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

package/dist/hooks/use-mobile-touch.js

@@ -0,0 +1,379 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface MobileTouchConfig {
+  enableTouchFeedback}
+
+export interface TouchFeedbackState {
+  isPressed; y} | null
+}
+
+export interface GestureHint {
+  type; y}
+  timeout}
+
+export interface MobileTouchCallbacks {
+  onTouchFeedback?) => void
+  onGestureHint?) => void
+  onTouchStart?; y}) => void
+  onTouchEnd?; y}) => void
+  onTouchMove?; y}) => void
+}
+
+export interface MobileTouchState {
+  isActive]
+  deviceCapabilities}
+}
+
+export const useMobileTouch = (
+  elementRef,
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enableTouchFeedback,
+    enableGestureHints,
+    enableTouchSounds,
+    enableHapticFeedback,
+    touchFeedbackDelay,
+    gestureHintTimeout,
+    maxTouchPoints,
+    ...config
+  }
+
+  // Device info available if needed for future enhancements
+  // const device = useDevice()
+  const [mobileTouchState, setMobileTouchState] = useState<MobileTouchState>({
+    isActive,
+    touchCount,
+    currentFeedback,
+      feedbackType,
+      feedbackIntensity,
+      lastTouchPosition},
+    activeGestureHints],
+    deviceCapabilities,
+      supportsHaptics,
+      supportsAudio,
+      maxTouchPoints}
+  })
+
+  const touchStartTimeRef = useRef<number>(0)
+  const touchFeedbackTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const gestureHintTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map())
+  const audioContextRef = useRef<AudioContext | null>(null)
+
+  // Initialize device capabilities
+  useEffect(() => {
+    const capabilities = {
+      supportsTouch,
+      supportsHaptics,
+      supportsAudio,
+      maxTouchPoints}
+
+    setMobileTouchState(prev => ({
+      ...prev,
+      deviceCapabilities}))
+
+    // Initialize audio context if supported
+    if (capabilities.supportsAudio) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
+    }
+  }, [])
+
+  // Trigger haptic feedback
+  const triggerHapticFeedback = useCallback((intensity= 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !mobileTouchState.deviceCapabilities.supportsHaptics) return
+
+    const vibrationPattern = {
+      light,
+      medium,
+      strong}
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported, error)
+    }
+  }, [defaultConfig.enableHapticFeedback, mobileTouchState.deviceCapabilities.supportsHaptics])
+
+  // Trigger touch sound
+  const triggerTouchSound = useCallback((type= 'tap') => {
+    if (!defaultConfig.enableTouchSounds || !audioContextRef.current) return
+
+    try {
+      const audioContext = audioContextRef.current
+      const oscillator = audioContext.createOscillator()
+      const gainNode = audioContext.createGain()
+      
+      oscillator.connect(gainNode)
+      gainNode.connect(audioContext.destination)
+      
+      // Different sounds for different touch types
+      const soundConfig = {
+        tap, duration, volume},
+        press, duration, volume},
+        release, duration, volume}
+      }
+      
+      const config = soundConfig[type]
+      oscillator.frequency.setValueAtTime(config.frequency, audioContext.currentTime)
+      gainNode.gain.setValueAtTime(config.volume, audioContext.currentTime)
+      
+      oscillator.start(audioContext.currentTime)
+      oscillator.stop(audioContext.currentTime + config.duration)
+    } catch (error) {
+      console.warn('Touch sound not supported, error)
+    }
+  }, [defaultConfig.enableTouchSounds])
+
+  // Update touch feedback state
+  const updateTouchFeedback = useCallback((feedback) => {
+    setMobileTouchState(prev => ({
+      ...prev,
+      currentFeedback, ...feedback }
+    }))
+
+    callbacks.onTouchFeedback?.(mobileTouchState.currentFeedback)
+  }, [callbacks, mobileTouchState.currentFeedback])
+
+  // Add gesture hint
+  const addGestureHint = useCallback((hint, 'timeout'>) => {
+    if (!defaultConfig.enableGestureHints) return
+
+    const hintWithTimeout = {
+      ...hint,
+      timeout) + defaultConfig.gestureHintTimeout
+    }
+
+    setMobileTouchState(prev => ({
+      ...prev,
+      activeGestureHints, hintWithTimeout]
+    }))
+
+    // Set timer to remove hint
+    const timer = setTimeout(() => {
+      removeGestureHint(hint.type)
+    }, defaultConfig.gestureHintTimeout)
+
+    gestureHintTimersRef.current.set(hint.type, timer)
+    callbacks.onGestureHint?.(hintWithTimeout)
+  }, [defaultConfig.enableGestureHints, defaultConfig.gestureHintTimeout, callbacks])
+
+  // Remove gesture hint
+  const removeGestureHint = useCallback((type) => {
+    setMobileTouchState(prev => ({
+      ...prev,
+      activeGestureHints=> hint.type !== type)
+    }))
+
+    const timer = gestureHintTimersRef.current.get(type)
+    if (timer) {
+      clearTimeout(timer)
+      gestureHintTimersRef.current.delete(type)
+    }
+  }, [])
+
+  // Handle touch start
+  const handleTouchStart = useCallback((event) => {
+    const touch = event.touches[0]
+    const position = { x, y}
+    
+    touchStartTimeRef.current = Date.now()
+    
+    setMobileTouchState(prev => ({
+      ...prev,
+      isActive,
+      touchCount}))
+
+    // Update feedback state
+    if (defaultConfig.enableTouchFeedback) {
+      updateTouchFeedback({
+        isPressed,
+        feedbackType,
+        feedbackIntensity,
+        lastTouchPosition})
+
+      // Set feedback timer
+      touchFeedbackTimerRef.current = setTimeout(() => {
+        updateTouchFeedback({
+          feedbackType,
+          feedbackIntensity})
+      }, defaultConfig.touchFeedbackDelay)
+    }
+
+    // Trigger feedback
+    triggerHapticFeedback('light')
+    triggerTouchSound('press')
+    
+    callbacks.onTouchStart?.(position)
+  }, [defaultConfig.enableTouchFeedback, defaultConfig.touchFeedbackDelay, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, callbacks])
+
+  // Handle touch move
+  const handleTouchMove = useCallback((event) => {
+    const touch = event.touches[0]
+    const position = { x, y}
+    
+    // Update feedback state
+    if (defaultConfig.enableTouchFeedback) {
+      updateTouchFeedback({
+        lastTouchPosition})
+    }
+    
+    callbacks.onTouchMove?.(position)
+  }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, callbacks])
+
+  // Handle touch end
+  const handleTouchEnd = useCallback((event) => {
+    const touch = event.changedTouches[0]
+    const position = { x, y}
+    const touchDuration = Date.now() - touchStartTimeRef.current
+    
+    // Clear feedback timer
+    if (touchFeedbackTimerRef.current) {
+      clearTimeout(touchFeedbackTimerRef.current)
+      touchFeedbackTimerRef.current = null
+    }
+
+    // Update feedback state
+    if (defaultConfig.enableTouchFeedback) {
+      updateTouchFeedback({
+        isPressed,
+        feedbackType,
+        feedbackIntensity})
+    }
+
+    // Determine touch type and provide appropriate feedback
+    if (touchDuration < 200) {
+      // Quick tap
+      triggerHapticFeedback('light')
+      triggerTouchSound('tap')
+      
+      // Show tap hint
+      addGestureHint({
+        type,
+        message,
+        position
+      })
+    } else if (touchDuration > 500) {
+      // Long press
+      triggerHapticFeedback('strong')
+      triggerTouchSound('release')
+      
+      // Show long press hint
+      addGestureHint({
+        type,
+        message,
+        position
+      })
+    } else {
+      // Regular press
+      triggerHapticFeedback('medium')
+      triggerTouchSound('release')
+    }
+
+    setMobileTouchState(prev => ({
+      ...prev,
+      isActive,
+      touchCount, prev.touchCount - 1)
+    }))
+    
+    callbacks.onTouchEnd?.(position)
+  }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, addGestureHint, callbacks])
+
+  // Set up touch event listeners
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element || !mobileTouchState.deviceCapabilities.supportsTouch) return
+
+    element.addEventListener('touchstart', handleTouchStart, { passive})
+    element.addEventListener('touchmove', handleTouchMove, { passive})
+    element.addEventListener('touchend', handleTouchEnd, { passive})
+
+    return () => {
+      element.removeEventListener('touchstart', handleTouchStart)
+      element.removeEventListener('touchmove', handleTouchMove)
+      element.removeEventListener('touchend', handleTouchEnd)
+      
+      // Clean up timers
+      if (touchFeedbackTimerRef.current) {
+        clearTimeout(touchFeedbackTimerRef.current)
+      }
+      
+      gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
+      gestureHintTimersRef.current.clear()
+    }
+  }, [
+    elementRef, 
+    mobileTouchState.deviceCapabilities.supportsTouch, 
+    handleTouchStart, 
+    handleTouchMove, 
+    handleTouchEnd
+  ])
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (touchFeedbackTimerRef.current) {
+        clearTimeout(touchFeedbackTimerRef.current)
+      }
+      
+      gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
+      gestureHintTimersRef.current.clear()
+    }
+  }, [])
+
+  // Utility functions
+  const clearAllGestureHints = useCallback(() => {
+    gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
+    gestureHintTimersRef.current.clear()
+    
+    setMobileTouchState(prev => ({
+      ...prev,
+      activeGestureHints]
+    }))
+  }, [])
+
+  const getTouchFeedbackClasses = useCallback(() => {
+    const { currentFeedback } = mobileTouchState
+    
+    if (!currentFeedback.isPressed) return ''
+    
+    const classes = ['touch-feedback']
+    
+    if (currentFeedback.feedbackType === 'scale') {
+      classes.push('touch-pressed')
+    } else if (currentFeedback.feedbackType === 'ripple') {
+      classes.push('touch-ripple', 'touch-active')
+    }
+    
+    return classes.join(' ')
+  }, [mobileTouchState.currentFeedback])
+
+  return {
+    mobileTouchState,
+    updateTouchFeedback,
+    addGestureHint,
+    removeGestureHint,
+    clearAllGestureHints,
+    getTouchFeedbackClasses,
+    triggerHapticFeedback,
+    triggerTouchSound
+  }
+}
+
+// Convenience hook for basic mobile touch
+export const useBasicMobileTouch = (elementRef) => {
+  return useMobileTouch(elementRef, {}, {
+    enableTouchFeedback,
+    enableGestureHints,
+    enableTouchSounds,
+    enableHapticFeedback})
+}
+
+// Convenience hook for enhanced mobile touch
+export const useEnhancedMobileTouch = (elementRef) => {
+  return useMobileTouch(elementRef, {}, {
+    enableTouchFeedback,
+    enableGestureHints,
+    enableTouchSounds,
+    enableHapticFeedback})
+}