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

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

@@ -1,302 +1,215 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-
-export interface TouchTarget {
-  id: string
-  x: number
-  y: number
-  width: number
-  height: number
-  minSize: number
-  isOptimized: boolean
-}
-
-export interface TouchEvent {
-  type: 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
-  target: TouchTarget
-  coordinates: { x: number; y: number }
-  timestamp: number
-  duration?: number
-  distance?: number
-}
-
-export interface MobileLayoutConfig {
-  enableTouchTargetOptimization?: boolean
-  enableGestureSupport?: boolean
-  enableTouchFeedback?: boolean
-  enablePerformanceOptimization?: boolean
-  minTouchTargetSize?: number
-  touchFeedbackDuration?: number
-  gestureThreshold?: number
-  longPressDelay?: number
-}
-
-export interface MobileLayoutCallbacks {
-  onTouchTargetOptimized?: (target: TouchTarget) => void
-  onGestureDetected?: (event: TouchEvent) => void
-  onTouchFeedback?: (type: string, target: TouchTarget) => void
-  onPerformanceOptimization?: (optimization: string) => void
-}
-
-export const useMobileLayout = (
-  config: MobileLayoutConfig = {},
-  callbacks: MobileLayoutCallbacks = {}
-) => {
-  const {
-    enableTouchTargetOptimization = true,
-    enableGestureSupport = true,
-    enableTouchFeedback = true,
-    enablePerformanceOptimization = true,
-    minTouchTargetSize = 44, // iOS/Android recommended minimum
-    touchFeedbackDuration = 150,
-    gestureThreshold = 50,
-    longPressDelay = 500
-  } = config
-
-  const [touchTargets, setTouchTargets] = useState<TouchTarget[]>([])
-  const [activeGestures, setActiveGestures] = useState<TouchEvent[]>([])
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-
-  const touchStartRef = useRef<{ x: number; y: number; timestamp: number } | null>(null)
-  const longPressTimerRef = useRef<number | null>(null)
-  const touchFeedbackRef = useRef<HTMLDivElement | null>(null)
-
-  // Touch target optimization
-  const optimizeTouchTargets = useCallback(() => {
-    if (!enableTouchTargetOptimization) return
-
-    setIsOptimizing(true)
-    
-    // Simulate touch target optimization
-    setTimeout(() => {
-      const optimizedTargets = touchTargets.map(target => ({
-        ...target,
-        isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
-      }))
-
-      setTouchTargets(optimizedTargets)
-      setIsOptimizing(false)
-      
-      const optimizationCount = optimizedTargets.filter(t => t.isOptimized).length
-      setOptimizations(prev => [...prev, `${optimizationCount} touch targets optimized`])
-      
-      optimizedTargets.forEach(target => {
-        if (target.isOptimized) {
-          callbacks.onTouchTargetOptimized?.(target)
+import { useState, useEffect, useCallback, useRef } from 'react';
+export const useMobileLayout = (config = {}, callbacks = {}) => {
+    const { enableTouchTargetOptimization = true, enableGestureSupport = true, enableTouchFeedback = true, enablePerformanceOptimization = true, minTouchTargetSize = 44, // iOS/Android recommended minimum
+    touchFeedbackDuration = 150, gestureThreshold = 50, longPressDelay = 500 } = config;
+    const [touchTargets, setTouchTargets] = useState([]);
+    const [activeGestures, setActiveGestures] = useState([]);
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [optimizations, setOptimizations] = useState([]);
+    const touchStartRef = useRef(null);
+    const longPressTimerRef = useRef(null);
+    const touchFeedbackRef = useRef(null);
+    // Touch target optimization
+    const optimizeTouchTargets = useCallback(() => {
+        if (!enableTouchTargetOptimization)
+            return;
+        setIsOptimizing(true);
+        // Simulate touch target optimization
+        setTimeout(() => {
+            const optimizedTargets = touchTargets.map(target => ({
+                ...target,
+                isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
+            }));
+            setTouchTargets(optimizedTargets);
+            setIsOptimizing(false);
+            const optimizationCount = optimizedTargets.filter(t => t.isOptimized).length;
+            setOptimizations(prev => [...prev, `${optimizationCount} touch targets optimized`]);
+            optimizedTargets.forEach(target => {
+                if (target.isOptimized) {
+                    callbacks.onTouchTargetOptimized?.(target);
+                }
+            });
+        }, 200);
+    }, [enableTouchTargetOptimization, touchTargets, minTouchTargetSize, callbacks]);
+    // Add touch target
+    const addTouchTarget = useCallback((target) => {
+        const newTarget = {
+            ...target,
+            isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
+        };
+        setTouchTargets(prev => [...prev, newTarget]);
+        if (newTarget.isOptimized) {
+            callbacks.onTouchTargetOptimized?.(newTarget);
         }
-      })
-    }, 200)
-  }, [enableTouchTargetOptimization, touchTargets, minTouchTargetSize, callbacks])
-
-  // Add touch target
-  const addTouchTarget = useCallback((target: Omit<TouchTarget, 'isOptimized'>) => {
-    const newTarget: TouchTarget = {
-      ...target,
-      isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
-    }
-    
-    setTouchTargets(prev => [...prev, newTarget])
-    
-    if (newTarget.isOptimized) {
-      callbacks.onTouchTargetOptimized?.(newTarget)
-    }
-  }, [minTouchTargetSize, callbacks])
-
-  // Remove touch target
-  const removeTouchTarget = useCallback((id: string) => {
-    setTouchTargets(prev => prev.filter(target => target.id !== id))
-  }, [])
-
-  // Touch feedback
-  const showTouchFeedback = useCallback((type: string, target: TouchTarget) => {
-    if (!enableTouchFeedback) return
-
-    callbacks.onTouchFeedback?.(type, target)
-
-    // Create visual feedback element
-    if (touchFeedbackRef.current) {
-      const feedback = document.createElement('div')
-      feedback.className = `absolute rounded-full bg-cs-primary/20 pointer-events-none transition-all duration-${touchFeedbackDuration}ms`
-      feedback.style.cssText = `
+    }, [minTouchTargetSize, callbacks]);
+    // Remove touch target
+    const removeTouchTarget = useCallback((id) => {
+        setTouchTargets(prev => prev.filter(target => target.id !== id));
+    }, []);
+    // Touch feedback
+    const showTouchFeedback = useCallback((type, target) => {
+        if (!enableTouchFeedback)
+            return;
+        callbacks.onTouchFeedback?.(type, target);
+        // Create visual feedback element
+        if (touchFeedbackRef.current) {
+            const feedback = document.createElement('div');
+            feedback.className = `absolute rounded-full bg-cs-primary/20 pointer-events-none transition-all duration-${touchFeedbackDuration}ms`;
+            feedback.style.cssText = `
         left: ${target.x}px;
         top: ${target.y}px;
         width: ${target.width}px;
         height: ${target.height}px;
         transform: scale(1.2);
         opacity: 0.8;
-      `
-
-      touchFeedbackRef.current.appendChild(feedback)
-
-      // Animate feedback
-      setTimeout(() => {
-        feedback.style.transform = 'scale(1)'
-        feedback.style.opacity = '0'
-      }, 50)
-
-      // Remove feedback element
-      setTimeout(() => {
-        if (feedback.parentNode) {
-          feedback.parentNode.removeChild(feedback)
+      `;
+            touchFeedbackRef.current.appendChild(feedback);
+            // Animate feedback
+            setTimeout(() => {
+                feedback.style.transform = 'scale(1)';
+                feedback.style.opacity = '0';
+            }, 50);
+            // Remove feedback element
+            setTimeout(() => {
+                if (feedback.parentNode) {
+                    feedback.parentNode.removeChild(feedback);
+                }
+            }, touchFeedbackDuration);
         }
-      }, touchFeedbackDuration)
-    }
-  }, [enableTouchFeedback, touchFeedbackDuration, callbacks])
-
-  // Gesture detection
-  const detectGesture = useCallback((startEvent: TouchEvent, endEvent: TouchEvent): TouchEvent | null => {
-    if (!enableGestureSupport) return null
-
-    const start = touchStartRef.current
-    if (!start) return null
-
-    const deltaX = endEvent.coordinates.x - start.x
-    const deltaY = endEvent.coordinates.y - start.y
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-    const duration = endEvent.timestamp - start.timestamp
-
-    let gestureType: TouchEvent['type'] = 'tap'
-
-    if (distance > gestureThreshold) {
-      if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        gestureType = deltaX > 0 ? 'swipe' : 'swipe'
-      } else {
-        gestureType = deltaY > 0 ? 'swipe' : 'swipe'
-      }
-    } else if (duration > longPressDelay) {
-      gestureType = 'long-press'
-    }
-
-    const gesture: TouchEvent = {
-      type: gestureType,
-      target: startEvent.target,
-      coordinates: endEvent.coordinates,
-      timestamp: endEvent.timestamp,
-      duration,
-      distance
-    }
-
-    setActiveGestures(prev => [...prev, gesture])
-    callbacks.onGestureDetected?.(gesture)
-
-    return gesture
-  }, [enableGestureSupport, gestureThreshold, longPressDelay, callbacks])
-
-  // Touch event handlers
-  const handleTouchStart = useCallback((event: React.TouchEvent, target: TouchTarget) => {
-    const touch = event.touches[0]
-
-    touchStartRef.current = {
-      x: touch.clientX,
-      y: touch.clientY,
-      timestamp: Date.now()
-    }
-
-    // Start long press timer
-    longPressTimerRef.current = window.setTimeout(() => {
-      const longPressEvent: TouchEvent = {
-        type: 'long-press',
-        target,
-        coordinates: { x: touch.clientX, y: touch.clientY },
-        timestamp: Date.now()
-      }
-      
-      setActiveGestures(prev => [...prev, longPressEvent])
-      callbacks.onGestureDetected?.(longPressEvent)
-      showTouchFeedback('long-press', target)
-    }, longPressDelay)
-
-    showTouchFeedback('touch-start', target)
-  }, [longPressDelay, callbacks, showTouchFeedback])
-
-  const handleTouchEnd = useCallback((event: React.TouchEvent, target: TouchTarget) => {
-    if (longPressTimerRef.current) {
-      clearTimeout(longPressTimerRef.current)
-      longPressTimerRef.current = null
-    }
-
-    const touch = event.changedTouches[0]
-    const gesture = detectGesture({
-      type: 'tap',
-      target,
-      coordinates: { x: touch.clientX, y: touch.clientY },
-      timestamp: Date.now()
-    }, {
-      type: 'tap',
-      target,
-      coordinates: { x: touch.clientX, y: touch.clientY },
-      timestamp: Date.now()
-    })
-    if (gesture) {
-      showTouchFeedback(gesture.type, target)
-    }
-
-    touchStartRef.current = null
-  }, [detectGesture, showTouchFeedback])
-
-  // Performance optimization
-  const optimizePerformance = useCallback(() => {
-    if (!enablePerformanceOptimization) return
-
-    setIsOptimizing(true)
-    
-    setTimeout(() => {
-      // Simulate performance optimizations
-      const optimizations = [
-        'Touch event throttling enabled',
-        'Gesture detection optimized',
-        'Touch feedback animations optimized',
-        'Memory usage optimized for touch interactions'
-      ]
-      
-      setOptimizations(prev => [...prev, ...optimizations])
-      setIsOptimizing(false)
-      
-      optimizations.forEach(optimization => {
-        callbacks.onPerformanceOptimization?.(optimization)
-      })
-    }, 300)
-  }, [enablePerformanceOptimization, callbacks])
-
-  // Initialize performance optimization
-  useEffect(() => {
-    if (enablePerformanceOptimization) {
-      optimizePerformance()
-    }
-  }, [enablePerformanceOptimization, optimizePerformance])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (longPressTimerRef.current) {
-        clearTimeout(longPressTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    touchTargets,
-    activeGestures,
-    isOptimizing,
-    optimizations,
-    
-    // Actions
-    addTouchTarget,
-    removeTouchTarget,
-    optimizeTouchTargets,
-    showTouchFeedback,
-    detectGesture,
-    handleTouchStart,
-    handleTouchEnd,
-    optimizePerformance,
-    
-    // Computed values
-    touchTargetCount: touchTargets.length,
-    optimizedTargetCount: touchTargets.filter(t => t.isOptimized).length,
-    gestureCount: activeGestures.length,
-    isTouchOptimized: touchTargets.every(t => t.isOptimized)
-  }
-}
-
-export default useMobileLayout
+    }, [enableTouchFeedback, touchFeedbackDuration, callbacks]);
+    // Gesture detection
+    const detectGesture = useCallback((startEvent, endEvent) => {
+        if (!enableGestureSupport)
+            return null;
+        const start = touchStartRef.current;
+        if (!start)
+            return null;
+        const deltaX = endEvent.coordinates.x - start.x;
+        const deltaY = endEvent.coordinates.y - start.y;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const duration = endEvent.timestamp - start.timestamp;
+        let gestureType = 'tap';
+        if (distance > gestureThreshold) {
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                gestureType = deltaX > 0 ? 'swipe' : 'swipe';
+            }
+            else {
+                gestureType = deltaY > 0 ? 'swipe' : 'swipe';
+            }
+        }
+        else if (duration > longPressDelay) {
+            gestureType = 'long-press';
+        }
+        const gesture = {
+            type: gestureType,
+            target: startEvent.target,
+            coordinates: endEvent.coordinates,
+            timestamp: endEvent.timestamp,
+            duration,
+            distance
+        };
+        setActiveGestures(prev => [...prev, gesture]);
+        callbacks.onGestureDetected?.(gesture);
+        return gesture;
+    }, [enableGestureSupport, gestureThreshold, longPressDelay, callbacks]);
+    // Touch event handlers
+    const handleTouchStart = useCallback((event, target) => {
+        const touch = event.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            timestamp: Date.now()
+        };
+        // Start long press timer
+        longPressTimerRef.current = window.setTimeout(() => {
+            const longPressEvent = {
+                type: 'long-press',
+                target,
+                coordinates: { x: touch.clientX, y: touch.clientY },
+                timestamp: Date.now()
+            };
+            setActiveGestures(prev => [...prev, longPressEvent]);
+            callbacks.onGestureDetected?.(longPressEvent);
+            showTouchFeedback('long-press', target);
+        }, longPressDelay);
+        showTouchFeedback('touch-start', target);
+    }, [longPressDelay, callbacks, showTouchFeedback]);
+    const handleTouchEnd = useCallback((event, target) => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        const touch = event.changedTouches[0];
+        const gesture = detectGesture({
+            type: 'tap',
+            target,
+            coordinates: { x: touch.clientX, y: touch.clientY },
+            timestamp: Date.now()
+        }, {
+            type: 'tap',
+            target,
+            coordinates: { x: touch.clientX, y: touch.clientY },
+            timestamp: Date.now()
+        });
+        if (gesture) {
+            showTouchFeedback(gesture.type, target);
+        }
+        touchStartRef.current = null;
+    }, [detectGesture, showTouchFeedback]);
+    // Performance optimization
+    const optimizePerformance = useCallback(() => {
+        if (!enablePerformanceOptimization)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            // Simulate performance optimizations
+            const optimizations = [
+                'Touch event throttling enabled',
+                'Gesture detection optimized',
+                'Touch feedback animations optimized',
+                'Memory usage optimized for touch interactions'
+            ];
+            setOptimizations(prev => [...prev, ...optimizations]);
+            setIsOptimizing(false);
+            optimizations.forEach(optimization => {
+                callbacks.onPerformanceOptimization?.(optimization);
+            });
+        }, 300);
+    }, [enablePerformanceOptimization, callbacks]);
+    // Initialize performance optimization
+    useEffect(() => {
+        if (enablePerformanceOptimization) {
+            optimizePerformance();
+        }
+    }, [enablePerformanceOptimization, optimizePerformance]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        // State
+        touchTargets,
+        activeGestures,
+        isOptimizing,
+        optimizations,
+        // Actions
+        addTouchTarget,
+        removeTouchTarget,
+        optimizeTouchTargets,
+        showTouchFeedback,
+        detectGesture,
+        handleTouchStart,
+        handleTouchEnd,
+        optimizePerformance,
+        // Computed values
+        touchTargetCount: touchTargets.length,
+        optimizedTargetCount: touchTargets.filter(t => t.isOptimized).length,
+        gestureCount: activeGestures.length,
+        isTouchOptimized: touchTargets.every(t => t.isOptimized)
+    };
+};
+export default useMobileLayout;