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

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

@@ -1,423 +0,0 @@
-/**
- * @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;