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

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

@@ -2,7 +2,7 @@
  * @author Ashok Desai
  * @lastModified oct 02 Oct 2025 at 10:30 AM
  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -11,203 +11,413 @@ import {
   Dimensions,
   Platform,
 } from 'react-native';
+import type { ViewStyle } from 'react-native';
 import { scale } from 'react-native-size-matters';
-import Svg, { Rect } from 'react-native-svg';
 import type { ThemeOverride } from '../../../../theme/themes';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
+// ==================== 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;
-  layout?: 'one' | 'two';
   headerHeight?: number;
   theme?: ThemeOverride;
 };
 
-const QrViewArea: React.FC<QrViewAreaProps> = ({
-  scanBoxWidth,
-  layout = 'one',
-  headerHeight = 60,
-  theme,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const { colors } = appliedTheme;
+type BoxDimensions = {
+  boxW: number;
+  boxH: number;
+  boxTop: number;
+  topOverlayHeight: number;
+  bottomOverlayHeight: number;
+  sideOverlayWidth: number;
+  rightOverlayWidth: number;
+};
 
-  const anim = useRef(new Animated.Value(0)).current;
+type CornerPosition = 'tl' | 'tr' | 'bl' | 'br';
 
-  const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
-  const boxW = defaultBoxW * 0.9;
+// ==================== 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.floor(
-    headerHeight + (availableHeight - boxH) / 2 - scale(40)
+  const boxTop = Math.max(
+    headerHeight,
+    Math.floor(
+      headerHeight + (availableHeight - boxH) / 2 - scale(VERTICAL_OFFSET)
+    )
   );
 
-  const topOverlayHeight = Math.floor(boxTop - headerHeight);
-  const bottomOverlayHeight = Math.floor(SCREEN_H - (boxTop + boxH));
-  const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+  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);
 
-  const margin = scale(12);
-  const lineTravel = boxH - margin * 2 - scale(3);
+  return {
+    boxW,
+    boxH,
+    boxTop,
+    topOverlayHeight,
+    bottomOverlayHeight,
+    sideOverlayWidth: leftOverlayWidth,
+    rightOverlayWidth,
+  };
+};
 
-  const translateY = anim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, lineTravel],
-  });
+/**
+ * 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: 2000,
+          duration: ANIMATION_DURATION,
           easing: Easing.linear,
           useNativeDriver: true,
         }),
         Animated.timing(anim, {
           toValue: 0,
-          duration: 2000,
+          duration: ANIMATION_DURATION,
           easing: Easing.linear,
           useNativeDriver: true,
         }),
       ])
     );
+
     animation.start();
     return () => animation.stop();
   }, [anim]);
 
-  return (
-    <>
-      <View
-        style={[
-          styles.overlayTB,
-          {
-            top: headerHeight,
-            height: topOverlayHeight,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.overlayTB,
-          {
-            top: boxTop + boxH,
-            height: bottomOverlayHeight,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.overlayLR,
-          {
-            top: boxTop,
-            height: boxH,
-            width: sideOverlayWidth,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.overlayLR,
-          {
-            top: boxTop,
-            right: 0,
-            height: boxH,
-            width: sideOverlayWidth,
-            backgroundColor: colors.overlay,
-          },
-        ]}
-      />
-
-      <View
-        style={[
-          styles.scanBox,
-          { top: boxTop, width: boxW, height: boxH, left: sideOverlayWidth },
-        ]}
-      >
-        {layout === 'two' ? (
-          <Svg width={boxW} height={boxH}>
-            <Rect
-              width={boxW}
-              height={boxH}
-              ry={scale(8)}
-              stroke={colors.button}
-              strokeWidth={scale(5)}
-              strokeDasharray={[scale(12), scale(6)]}
-              fill="none"
-            />
-          </Svg>
-        ) : (
-          ['tl', 'tr', 'bl', 'br'].map((c) => (
-            <View
-              key={c}
-              style={[
-                styles.corner,
-                styles[`corner_${c}` as keyof typeof styles],
-                {
-                  borderColor: colors.button,
-                  width: scale(18),
-                  height: scale(18),
-                  borderTopWidth: c.startsWith('t') ? scale(3) : 0,
-                  borderBottomWidth: c.startsWith('b') ? scale(3) : 0,
-                  borderLeftWidth: c.endsWith('l') ? scale(3) : 0,
-                  borderRightWidth: c.endsWith('r') ? scale(3) : 0,
-                },
-              ]}
-            />
-          ))
-        )}
-
-        <Animated.View
-          style={{
-            position: 'absolute',
-            top: margin,
-            left: margin,
-            right: margin,
-            height: scale(3),
-            borderRadius: scale(1.5),
-            backgroundColor: colors.button,
-            transform: [{ translateY }],
-            shadowColor: colors.shadow,
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 5,
-            elevation: Platform.OS === 'android' ? 4 : 0,
-          }}
-        />
-      </View>
-    </>
+  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 = 0, theme }) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
+    const { colors } = appliedTheme;
+
+    // Calculate dimensions
+    const boxDimensions = useMemo(
+      () => calculateBoxDimensions(scanBoxWidth, headerHeight),
+      [scanBoxWidth, headerHeight]
+    );
+
+    // Calculate scan line properties
+    const margin = useMemo(() => scale(SCAN_LINE_MARGIN), []);
+    const lineTravel = useMemo(
+      () =>
+        Math.max(0, boxDimensions.boxH - margin * 2 - scale(SCAN_LINE_HEIGHT)),
+      [boxDimensions.boxH, margin]
+    );
+
+    // Animation
+    const translateY = useScanLineAnimation(lineTravel);
+
+    // Theme colors
+    const overlayColor = colors.overlay || DEFAULT_OVERLAY_COLOR;
+    const shadowColor = colors.shadow || DEFAULT_SHADOW_COLOR;
+
+    // Corner properties
+    const cornerSize = useMemo(() => scale(CORNER_SIZE), []);
+    const cornerBorderWidth = useMemo(() => scale(CORNER_BORDER_WIDTH), []);
+
+    // 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]
+    );
+
+    // Scan box style
+    const scanBoxStyle = useMemo(
+      () => [
+        styles.scanBox,
+        {
+          top: boxDimensions.boxTop,
+          left: boxDimensions.sideOverlayWidth,
+          width: boxDimensions.boxW,
+          height: boxDimensions.boxH,
+        },
+      ],
+      [boxDimensions]
+    );
+
+    // Corner style generator
+    const getCornerStyle = useCallback(
+      (position: CornerPosition) =>
+        createCornerStyle(
+          position,
+          colors.button,
+          cornerSize,
+          cornerBorderWidth
+        ),
+      [colors.button, cornerSize, cornerBorderWidth]
+    );
+
+    // Scan line style
+    const scanLineHeight = useMemo(() => scale(SCAN_LINE_HEIGHT), []);
+    const scanLineStyle = useMemo(
+      () =>
+        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 */}
+        <View style={overlayStyles.top} />
+        <View style={overlayStyles.bottom} />
+        <View style={overlayStyles.left} />
+        <View style={overlayStyles.right} />
+
+        {/* Scan box */}
+        <View style={scanBoxStyle} pointerEvents="none">
+          {/* Corner markers */}
+          {cornerPositions.map((position) => (
+            <View key={position} style={getCornerStyle(position)} />
+          ))}
+
+          {/* Animated scan line */}
+          <Animated.View style={scanLineStyle} />
+        </View>
+      </View>
+    );
+  }
+);
+
 const styles = StyleSheet.create({
-  overlayTB: {
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+  },
+  overlayTop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  overlayBottom: {
     position: 'absolute',
     left: 0,
     right: 0,
+    zIndex: 1,
   },
-  overlayLR: {
+  overlaySide: {
     position: 'absolute',
+    zIndex: 1,
   },
   scanBox: {
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
-    zIndex: 10,
+    zIndex: 2,
   },
   corner: {
     position: 'absolute',
+    zIndex: 3,
+  },
+  corner_tl: {
+    top: 0,
+    left: 0,
+  },
+  corner_tr: {
+    top: 0,
+    right: 0,
+  },
+  corner_bl: {
+    bottom: 0,
+    left: 0,
+  },
+  corner_br: {
+    bottom: 0,
+    right: 0,
   },
-  corner_tl: { top: 0, left: 0 },
-  corner_tr: { top: 0, right: 0 },
-  corner_bl: { bottom: 0, left: 0 },
-  corner_br: { bottom: 0, right: 0 },
 });
 
 export default QrViewArea;