@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.3

package/src/components/Auth/QrLogin/components/QrViewArea.tsx

@@ -11,64 +11,250 @@ import {
   Dimensions,
   Platform,
 } from 'react-native';
+import type { ViewStyle } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import type { ThemeOverride } from '../../../../theme/themes';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
-// Constants
+// ==================== Constants ====================
 const ANIMATION_DURATION = 2000;
 const CORNER_SIZE = 18;
 const CORNER_BORDER_WIDTH = 3;
 const SCAN_LINE_HEIGHT = 3;
 const SCAN_LINE_MARGIN = 12;
+const BOX_WIDTH_RATIO = 0.7;
+const BOX_SIZE_RATIO = 0.9;
+const MAX_BOX_WIDTH = 320;
+const VERTICAL_OFFSET = 40;
+const DEFAULT_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.6)';
+const DEFAULT_SHADOW_COLOR = '#000';
 
+// ==================== Types ====================
 type QrViewAreaProps = {
   scanBoxWidth?: number;
   headerHeight?: number;
   theme?: ThemeOverride;
 };
 
+type BoxDimensions = {
+  boxW: number;
+  boxH: number;
+  boxTop: number;
+  topOverlayHeight: number;
+  bottomOverlayHeight: number;
+  sideOverlayWidth: number;
+  rightOverlayWidth: number;
+};
+
+type CornerPosition = 'tl' | 'tr' | 'bl' | 'br';
+
+// ==================== Helper Functions ====================
+/**
+ * Calculates the scan box dimensions and overlay positions
+ */
+const calculateBoxDimensions = (
+  scanBoxWidth: number | undefined,
+  headerHeight: number
+): BoxDimensions => {
+  const defaultBoxW =
+    scanBoxWidth || Math.min(SCREEN_W * BOX_WIDTH_RATIO, MAX_BOX_WIDTH);
+  const boxW = defaultBoxW * BOX_SIZE_RATIO;
+  const boxH = boxW;
+  const availableHeight = SCREEN_H - headerHeight;
+  const boxTop = Math.max(
+    headerHeight,
+    Math.floor(
+      headerHeight + (availableHeight - boxH) / 2 - scale(VERTICAL_OFFSET)
+    )
+  );
+
+  const topOverlayHeight = Math.max(0, Math.floor(boxTop - headerHeight));
+  const bottomOverlayHeight = Math.max(
+    0,
+    Math.floor(SCREEN_H - (boxTop + boxH))
+  );
+  const leftOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+  const scanBoxRight = leftOverlayWidth + boxW;
+  const rightOverlayWidth = Math.max(0, SCREEN_W - scanBoxRight);
+
+  return {
+    boxW,
+    boxH,
+    boxTop,
+    topOverlayHeight,
+    bottomOverlayHeight,
+    sideOverlayWidth: leftOverlayWidth,
+    rightOverlayWidth,
+  };
+};
+
+/**
+ * Creates overlay style for a specific position
+ */
+const createOverlayStyle = (
+  position: 'top' | 'bottom' | 'left' | 'right',
+  dimensions: BoxDimensions,
+  headerHeight: number,
+  overlayColor: string
+): ViewStyle[] => {
+  const baseStyleKey =
+    `overlay${position.charAt(0).toUpperCase() + position.slice(1)}` as keyof typeof styles;
+  const baseStyle = styles[baseStyleKey] || styles.overlaySide;
+
+  switch (position) {
+    case 'top':
+      return [
+        baseStyle,
+        {
+          top: headerHeight,
+          height: Math.max(0, dimensions.topOverlayHeight),
+          backgroundColor: overlayColor,
+        },
+      ];
+    case 'bottom':
+      return [
+        baseStyle,
+        {
+          top: dimensions.boxTop + dimensions.boxH,
+          height: Math.max(0, dimensions.bottomOverlayHeight),
+          backgroundColor: overlayColor,
+        },
+      ];
+    case 'left':
+      return [
+        baseStyle,
+        {
+          left: 0,
+          top: dimensions.boxTop,
+          height: dimensions.boxH,
+          width: Math.max(0, dimensions.sideOverlayWidth),
+          backgroundColor: overlayColor,
+        },
+      ];
+    case 'right':
+      return [
+        baseStyle,
+        {
+          right: 0,
+          top: dimensions.boxTop,
+          height: dimensions.boxH,
+          width: Math.max(0, dimensions.rightOverlayWidth),
+          backgroundColor: overlayColor,
+        },
+      ];
+    default:
+      return [baseStyle];
+  }
+};
+
+/**
+ * Creates corner style based on position
+ */
+const createCornerStyle = (
+  position: CornerPosition,
+  borderColor: string,
+  cornerSize: number,
+  cornerBorderWidth: number
+): ViewStyle[] => {
+  const baseStyle = [
+    styles.corner,
+    styles[`corner_${position}` as keyof typeof styles],
+  ];
+
+  const dynamicStyle: ViewStyle = {
+    borderColor,
+    width: cornerSize,
+    height: cornerSize,
+    borderTopWidth: position.startsWith('t') ? cornerBorderWidth : 0,
+    borderBottomWidth: position.startsWith('b') ? cornerBorderWidth : 0,
+    borderLeftWidth: position.endsWith('l') ? cornerBorderWidth : 0,
+    borderRightWidth: position.endsWith('r') ? cornerBorderWidth : 0,
+  };
+
+  return [...baseStyle, dynamicStyle];
+};
+
+/**
+ * Creates animated scan line style
+ */
+const createScanLineStyle = (
+  margin: number,
+  scanLineHeight: number,
+  borderColor: string,
+  shadowColor: string,
+  translateY: Animated.AnimatedInterpolation<number>
+): ViewStyle => ({
+  position: 'absolute',
+  top: margin,
+  left: margin,
+  right: margin,
+  height: scanLineHeight,
+  borderRadius: scanLineHeight / 2,
+  backgroundColor: borderColor,
+  transform: [{ translateY }],
+  shadowColor,
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.4,
+  shadowRadius: 4,
+  elevation: Platform.OS === 'android' ? 5 : 0,
+});
+
+// ==================== Custom Hooks ====================
+/**
+ * Hook to manage scan line animation
+ */
+const useScanLineAnimation = (lineTravel: number) => {
+  const anim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(anim, {
+          toValue: 1,
+          duration: ANIMATION_DURATION,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+        Animated.timing(anim, {
+          toValue: 0,
+          duration: ANIMATION_DURATION,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    animation.start();
+    return () => animation.stop();
+  }, [anim]);
+
+  const translateY = useMemo(
+    () =>
+      anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, lineTravel],
+      }),
+    [anim, lineTravel]
+  );
+
+  return translateY;
+};
+
+// ==================== Component ====================
 const QrViewArea: React.FC<QrViewAreaProps> = React.memo(
-  ({ scanBoxWidth, headerHeight = 60, theme }) => {
+  ({ scanBoxWidth, headerHeight = 0, theme }) => {
     const { theme: appliedTheme } = useInternalTheme(theme);
     const { colors } = appliedTheme;
 
-    const anim = useRef(new Animated.Value(0)).current;
-
-    // Memoize box dimensions with better calculations (fix gap on right side)
-    const boxDimensions = useMemo(() => {
-      const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
-      const boxW = defaultBoxW * 0.9;
-      const boxH = boxW;
-      const availableHeight = SCREEN_H - headerHeight;
-      const boxTop = Math.max(
-        headerHeight,
-        Math.floor(headerHeight + (availableHeight - boxH) / 2 - scale(40))
-      );
-      const topOverlayHeight = Math.max(0, Math.floor(boxTop - headerHeight));
-      const bottomOverlayHeight = Math.max(
-        0,
-        Math.floor(SCREEN_H - (boxTop + boxH))
-      );
-      // Calculate left overlay width
-      const leftOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
-      // Calculate right overlay width to fill remaining space (fix gap)
-      const scanBoxLeft = leftOverlayWidth;
-      const scanBoxRight = scanBoxLeft + boxW;
-      const rightOverlayWidth = Math.max(0, SCREEN_W - scanBoxRight);
-      return {
-        boxW,
-        boxH,
-        boxTop,
-        topOverlayHeight,
-        bottomOverlayHeight,
-        sideOverlayWidth: leftOverlayWidth,
-        rightOverlayWidth,
-      };
-    }, [scanBoxWidth, headerHeight]);
+    // Calculate dimensions
+    const boxDimensions = useMemo(
+      () => calculateBoxDimensions(scanBoxWidth, headerHeight),
+      [scanBoxWidth, headerHeight]
+    );
 
+    // Calculate scan line properties
     const margin = useMemo(() => scale(SCAN_LINE_MARGIN), []);
     const lineTravel = useMemo(
       () =>
@@ -76,116 +262,49 @@ const QrViewArea: React.FC<QrViewAreaProps> = React.memo(
       [boxDimensions.boxH, margin]
     );
 
-    const translateY = useMemo(
-      () =>
-        anim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, lineTravel],
-        }),
-      [anim, lineTravel]
-    );
+    // Animation
+    const translateY = useScanLineAnimation(lineTravel);
 
-    // Memoize animation config
-    const animationConfig = useMemo(
-      () => ({
-        duration: ANIMATION_DURATION,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-      []
-    );
+    // Theme colors
+    const overlayColor = colors.overlay || DEFAULT_OVERLAY_COLOR;
+    const shadowColor = colors.shadow || DEFAULT_SHADOW_COLOR;
 
-    useEffect(() => {
-      const animation = Animated.loop(
-        Animated.sequence([
-          Animated.timing(anim, {
-            toValue: 1,
-            ...animationConfig,
-          }),
-          Animated.timing(anim, {
-            toValue: 0,
-            ...animationConfig,
-          }),
-        ])
-      );
-      animation.start();
-      return () => animation.stop();
-    }, [anim, animationConfig]);
-
-    // Memoize corner positions
-    const cornerPositions = useMemo(() => ['tl', 'tr', 'bl', 'br'], []);
-
-    // Memoize overlay color
-    const overlayColor = useMemo(
-      () => colors.overlay || 'rgba(0, 0, 0, 0.6)',
-      [colors.overlay]
-    );
+    // Corner properties
+    const cornerSize = useMemo(() => scale(CORNER_SIZE), []);
+    const cornerBorderWidth = useMemo(() => scale(CORNER_BORDER_WIDTH), []);
 
-    // Memoize all overlay components in one array (optimized - created once)
-    const overlayComponents = useMemo(
-      () => [
-        {
-          key: 'top',
-          style: [
-            styles.overlayTop,
-            {
-              top: headerHeight,
-              height: Math.max(0, boxDimensions.topOverlayHeight),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-        {
-          key: 'bottom',
-          style: [
-            styles.overlayBottom,
-            {
-              top: boxDimensions.boxTop + boxDimensions.boxH,
-              height: Math.max(0, boxDimensions.bottomOverlayHeight),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-        {
-          key: 'left',
-          style: [
-            styles.overlaySide,
-            {
-              left: 0,
-              top: boxDimensions.boxTop,
-              height: boxDimensions.boxH,
-              width: Math.max(0, boxDimensions.sideOverlayWidth),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-        {
-          key: 'right',
-          style: [
-            styles.overlaySide,
-            {
-              right: 0,
-              top: boxDimensions.boxTop,
-              height: boxDimensions.boxH,
-              width: Math.max(0, boxDimensions.rightOverlayWidth),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-      ],
-      [
-        headerHeight,
-        boxDimensions.topOverlayHeight,
-        boxDimensions.boxTop,
-        boxDimensions.boxH,
-        boxDimensions.bottomOverlayHeight,
-        boxDimensions.sideOverlayWidth,
-        boxDimensions.rightOverlayWidth,
-        overlayColor,
-      ]
+    // Create overlay styles
+    const overlayStyles = useMemo(
+      () => ({
+        top: createOverlayStyle(
+          'top',
+          boxDimensions,
+          headerHeight,
+          overlayColor
+        ),
+        bottom: createOverlayStyle(
+          'bottom',
+          boxDimensions,
+          headerHeight,
+          overlayColor
+        ),
+        left: createOverlayStyle(
+          'left',
+          boxDimensions,
+          headerHeight,
+          overlayColor
+        ),
+        right: createOverlayStyle(
+          'right',
+          boxDimensions,
+          headerHeight,
+          overlayColor
+        ),
+      }),
+      [boxDimensions, headerHeight, overlayColor]
     );
 
-    // Memoize scan box style with proper positioning (ensure no gap on right)
+    // Scan box style
     const scanBoxStyle = useMemo(
       () => [
         styles.scanBox,
@@ -196,80 +315,55 @@ const QrViewArea: React.FC<QrViewAreaProps> = React.memo(
           height: boxDimensions.boxH,
         },
       ],
-      [
-        boxDimensions.boxTop,
-        boxDimensions.sideOverlayWidth,
-        boxDimensions.boxW,
-        boxDimensions.boxH,
-      ]
+      [boxDimensions]
     );
 
-    // Memoize corner styles for better performance
-    const cornerSize = useMemo(() => scale(CORNER_SIZE), []);
-    const cornerBorderWidth = useMemo(() => scale(CORNER_BORDER_WIDTH), []);
-
+    // Corner style generator
     const getCornerStyle = useCallback(
-      (c: string) => {
-        const baseStyle = [
-          styles.corner,
-          styles[`corner_${c}` as keyof typeof styles],
-        ];
-        const dynamicStyle = {
-          borderColor: colors.button,
-          width: cornerSize,
-          height: cornerSize,
-          borderTopWidth: c.startsWith('t') ? cornerBorderWidth : 0,
-          borderBottomWidth: c.startsWith('b') ? cornerBorderWidth : 0,
-          borderLeftWidth: c.endsWith('l') ? cornerBorderWidth : 0,
-          borderRightWidth: c.endsWith('r') ? cornerBorderWidth : 0,
-        };
-        return [...baseStyle, dynamicStyle];
-      },
+      (position: CornerPosition) =>
+        createCornerStyle(
+          position,
+          colors.button,
+          cornerSize,
+          cornerBorderWidth
+        ),
       [colors.button, cornerSize, cornerBorderWidth]
     );
 
-    // Memoize animated line style
+    // Scan line style
     const scanLineHeight = useMemo(() => scale(SCAN_LINE_HEIGHT), []);
-    const animatedLineStyle = useMemo(
-      () => ({
-        position: 'absolute' as const,
-        top: margin,
-        left: margin,
-        right: margin,
-        height: scanLineHeight,
-        borderRadius: scanLineHeight / 2,
-        backgroundColor: colors.button,
-        transform: [{ translateY }],
-        shadowColor: colors.shadow || '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.4,
-        shadowRadius: 4,
-        elevation: Platform.OS === 'android' ? 5 : 0,
-      }),
-      [margin, scanLineHeight, colors.button, colors.shadow, translateY]
-    );
-
-    // Memoize corner components for better performance (used in both layouts)
-    const cornerComponents = useMemo(
+    const scanLineStyle = useMemo(
       () =>
-        cornerPositions.map((c) => <View key={c} style={getCornerStyle(c)} />),
-      [cornerPositions, getCornerStyle]
+        createScanLineStyle(
+          margin,
+          scanLineHeight,
+          colors.button,
+          shadowColor,
+          translateY
+        ),
+      [margin, scanLineHeight, colors.button, shadowColor, translateY]
     );
 
+    // Corner positions
+    const cornerPositions: CornerPosition[] = ['tl', 'tr', 'bl', 'br'];
+
     return (
       <View style={styles.container} pointerEvents="box-none">
-        {/* Overlay sections - optimized single render */}
-        {overlayComponents.map((overlay) => (
-          <View key={overlay.key} style={overlay.style} />
-        ))}
+        {/* Overlay sections */}
+        <View style={overlayStyles.top} />
+        <View style={overlayStyles.bottom} />
+        <View style={overlayStyles.left} />
+        <View style={overlayStyles.right} />
 
         {/* Scan box */}
         <View style={scanBoxStyle} pointerEvents="none">
-          {/* Corner components - shown in both layouts */}
-          {cornerComponents}
+          {/* Corner markers */}
+          {cornerPositions.map((position) => (
+            <View key={position} style={getCornerStyle(position)} />
+          ))}
 
           {/* Animated scan line */}
-          <Animated.View style={animatedLineStyle} />
+          <Animated.View style={scanLineStyle} />
         </View>
       </View>
     );