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

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

@@ -0,0 +1,423 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing,
+  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 ====================
+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 = 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({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+  },
+  overlayTop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  overlayBottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  overlaySide: {
+    position: 'absolute',
+    zIndex: 1,
+  },
+  scanBox: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    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,
+  },
+});
+
+export default QrViewArea;