npm - react-native-rectangle-doc-scanner - Versions diffs - 3.118.0 → 3.119.0 - Mend

react-native-rectangle-doc-scanner 3.118.0 → 3.119.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/FullDocScanner.js CHANGED Viewed

@@ -207,6 +207,10 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 errorMessage.includes('cancelled') ||
                 errorMessage.includes('cancel')) {
                 console.log('[FullDocScanner] User cancelled cropper');
+                // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
+                if (docScannerRef.current?.reset) {
+                    docScannerRef.current.reset();
+                }
             }
             else {
                 emitError(error instanceof Error ? error : new Error(errorMessage), 'Failed to crop image. Please try again.');
@@ -515,9 +519,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         croppedImageData ? (
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
-            isBusinessMode && (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
-                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
-            isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
+            isBusinessMode && isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.businessHeaderRow },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonLeft, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA")),
+                react_1.default.createElement(react_native_1.View, { style: styles.photoHeaderCenter },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second)),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonRight, onPress: () => handleRotateImage(90), accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BB")))) : isBusinessMode ? (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
+                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))) : isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC88C\uB85C 90\u00B0")),
@@ -817,4 +826,38 @@ const styles = react_native_1.StyleSheet.create({
         borderColor: '#fff',
         overflow: 'hidden',
     },
+    businessHeaderRow: {
+        position: 'absolute',
+        top: 80,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        zIndex: 10,
+    },
+    rotateButtonLeft: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    rotateButtonRight: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    photoHeaderCenter: {
+        alignItems: 'center',
+    },
 });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.118.0",
+  "version": "3.119.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/FullDocScanner.tsx CHANGED Viewed

@@ -291,6 +291,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           errorMessage.includes('cancel')
         ) {
           console.log('[FullDocScanner] User cancelled cropper');
+          // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
+          if (docScannerRef.current?.reset) {
+            docScannerRef.current.reset();
+          }
         } else {
           emitError(
             error instanceof Error ? error : new Error(errorMessage),
@@ -672,17 +676,40 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {croppedImageData ? (
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
-          {/* 헤더 - 앞면/뒷면 표시 */}
-          {isBusinessMode && (
+          {/* Business 모드: 회전 버튼(왼쪽/오른쪽) + 헤더(가운데) 한 줄 배치 */}
+          {isBusinessMode && isImageRotationSupported() ? (
+            <View style={styles.businessHeaderRow}>
+              <TouchableOpacity
+                style={styles.rotateButtonLeft}
+                onPress={() => handleRotateImage(-90)}
+                accessibilityLabel="왼쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↺</Text>
+              </TouchableOpacity>
+              <View style={styles.photoHeaderCenter}>
+                <Text style={styles.photoHeaderText}>
+                  {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                </Text>
+              </View>
+              <TouchableOpacity
+                style={styles.rotateButtonRight}
+                onPress={() => handleRotateImage(90)}
+                accessibilityLabel="오른쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↻</Text>
+              </TouchableOpacity>
+            </View>
+          ) : isBusinessMode ? (
             <View style={styles.photoHeader}>
               <Text style={styles.photoHeaderText}>
                 {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
               </Text>
             </View>
-          )}
-          {/* 회전 버튼들 - 가운데 정렬 */}
-          {isImageRotationSupported() ? (
+          ) : isImageRotationSupported() ? (
             <View style={styles.rotateButtonsCenter}>
               <TouchableOpacity
                 style={styles.rotateButtonTop}
@@ -1105,4 +1132,38 @@ const styles = StyleSheet.create({
     borderColor: '#fff',
     overflow: 'hidden',
   },
+  businessHeaderRow: {
+    position: 'absolute',
+    top: 80,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    zIndex: 10,
+  },
+  rotateButtonLeft: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  rotateButtonRight: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  photoHeaderCenter: {
+    alignItems: 'center',
+  },
 });