@momo-kits/camerakit 0.0.51-rc.2 → 0.0.51

package/Camera.android.tsx

@@ -0,0 +1,52 @@
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+
+import {
+  findNodeHandle,
+  NativeModules,
+  requireNativeComponent,
+} from 'react-native';
+import {CameraApi} from './type';
+
+let Module: any;
+let NativeCamera: any;
+
+if (NativeModules?.RNCameraKitModule) {
+  Module = NativeModules.RNCameraKitModule;
+  NativeCamera = requireNativeComponent('RNCameraManager');
+} else {
+  Module = NativeModules.CameraKitModule;
+  NativeCamera = requireNativeComponent('CKCameraManager');
+}
+
+const Camera = forwardRef((props: any, ref) => {
+  const nativeRef = useRef();
+
+  useImperativeHandle<any, CameraApi>(ref, () => ({
+    capture: async (options = {}) => {
+      return await Module.capture(
+        options,
+        findNodeHandle(nativeRef.current ?? null)
+      );
+    },
+    startCamera: () => {
+      Module.startCamera(findNodeHandle(nativeRef.current ?? null));
+    },
+    stopCamera: () => {
+      Module.stopCamera(findNodeHandle(nativeRef.current ?? null));
+    },
+    readImageQRCode: (base64: string) => {
+      Module.readImageQRCode(base64, findNodeHandle(nativeRef.current ?? null));
+    },
+  }));
+
+  return (
+    <NativeCamera
+      style={{minWidth: 100, minHeight: 100}}
+      ref={nativeRef}
+      onOpenCamera={() => {}}
+      {...props}
+    />
+  );
+});
+
+export default Camera;

package/Camera.ios.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+import {CameraApi} from './type';
+
+let Module: any;
+let NativeCamera: any;
+
+if (NativeModules?.RNCameraKitManager) {
+  Module = NativeModules.RNCameraKitManager;
+  NativeCamera = requireNativeComponent('RNCameraKit');
+} else {
+  Module = NativeModules.CameraKitManager;
+  NativeCamera = requireNativeComponent('CameraKit');
+}
+
+const Camera = React.forwardRef((props: any, ref: any) => {
+  React.useImperativeHandle<any, CameraApi>(ref, () => ({
+    capture: Module.capture,
+    startCamera: Module.startCamera,
+    stopCamera: Module.stopCamera,
+    readImageQRCode: Module.readImageQRCode,
+  }));
+
+  return (
+    <NativeCamera
+      style={{minWidth: 100, minHeight: 100}}
+      onOpenCamera={() => {}}
+      {...props}
+    />
+  );
+});
+
+export default Camera;

package/index.tsx

@@ -0,0 +1,96 @@
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import {Platform, StyleSheet, View} from 'react-native';
+import styles from './styles';
+import CameraIOS from './Camera.ios';
+import CameraAndroid from './Camera.android';
+import {CameraApi, CameraKitProps} from './type';
+
+const Camera = Platform.OS === 'ios' ? CameraIOS : CameraAndroid;
+
+const ThrottleEvent = 500;
+
+const CameraKit = forwardRef(
+  (
+    {
+      onBarCodeRead,
+      onMRZ,
+      onImageCaptured,
+      type = 'back',
+      torchMode = 'off',
+      customFinder,
+      style,
+    }: CameraKitProps,
+    ref,
+  ) => {
+    const cameraRef = useRef<any>(null);
+    const lastEvent = useRef<any>(null);
+    const lastTime = useRef<number>(0);
+
+    useImperativeHandle<any, CameraApi>(ref, () => ({
+      capture,
+      startCamera,
+      stopCamera,
+      readImageQRCode,
+    }));
+
+    const readImageQRCode = (base64: string) => {
+      cameraRef.current?.readImageQRCode(base64);
+    };
+
+    const startCamera = () => {
+      cameraRef.current?.startCamera();
+    };
+
+    const stopCamera = () => {
+      cameraRef.current?.stopCamera();
+    };
+
+    const capture = async (options = {}) => {
+      let data;
+      try {
+        data = await cameraRef.current?.capture(options);
+        onImageCaptured?.({...data, url: data.uri});
+      } catch (e: any) {
+        onImageCaptured?.({error: e.message});
+      }
+      return data;
+    };
+
+    const onBarCodeReadHandler = ({nativeEvent}: any) => {
+      const value = JSON.stringify(nativeEvent);
+      const now = Date.now();
+      const outdated = !lastTime || now - lastTime.current > ThrottleEvent;
+      if (value && value === lastEvent.current && !outdated) {
+        return;
+      }
+      onBarCodeRead?.({data: nativeEvent?.codeStringValue});
+      lastEvent.current = value;
+      lastTime.current = Date.now();
+    };
+
+    const onMRZHandler = ({nativeEvent}: any) => {
+      onMRZ?.({data: nativeEvent?.docMRZ});
+    };
+
+    return (
+      <View style={[styles.container, style]}>
+        <Camera
+          ref={cameraRef}
+          style={styles.camera}
+          cameraType={type}
+          torchMode={torchMode}
+          focusMode={torchMode}
+          scanBarcode={!!onBarCodeRead}
+          scanMRZ={!!onMRZ}
+          onReadCode={onBarCodeReadHandler}
+          onMRZ={onMRZHandler}
+        />
+        {customFinder && (
+          <View style={StyleSheet.absoluteFill}>{customFinder()}</View>
+        )}
+      </View>
+    );
+  },
+);
+
+export {CameraKit};

package/package.json

@@ -1,15 +1,16 @@
 {
     "name": "@momo-kits/camerakit",
-    "version": "0.0.51-rc.2",
+    "version": "0.0.51",
     "private": false,
-    "main": "index.js",
-    "dependencies": {
-        "@momo-platform/versions": "4.0.2"
-    },
+    "main": "index.tsx",
     "peerDependencies": {
         "react": "16.9.0",
-        "react-native": ">=0.55"
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
     },
-    "devDependencies": {},
-    "license": "MoMo"
-}
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -1,28 +1,23 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "beta" ]; then  # Publish beta
+  npm version $(npm view @momo-kits/camerakit@beta version)
+  npm version prepatch --preid=beta
+  npm publish --tag beta --access=public
+else                        # Publish latest
+  npm version $(npm view @momo-kits/camerakit version)
+  npm version patch
+  npm publish --tag latest --access=public
+fi
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/camerakit new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/camerakit"}'

package/styles.ts

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    flex: 1,
+  },
+  camera: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+});

package/type.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export interface CameraKitProps {
+  onBarCodeRead?: (data: any) => void;
+  onMRZ?: (data: any) => void;
+  onImageCaptured?: (data: any) => void;
+  type?: 'front' | 'back';
+  torchMode?: 'on' | 'off' | 'auto';
+  zoomMode?: 'on' | 'off';
+  zoomRate?: number;
+  onOpenCamera?: (event: any) => void;
+  customFinder?: () => React.ReactNode;
+  style?: any;
+}
+
+export type CameraApi = {
+  capture: (option: any) => Promise<any>;
+  stopCamera: () => void;
+  startCamera: () => void;
+  readImageQRCode: (base64: string) => void;
+};
+
+export type CameraType = 'font' | 'back';

package/CameraKit.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
-import { Camera } from 'react-native-camera-kit';
-
-const styles = StyleSheet.create({
-    container: {
-        overflow: 'hidden',
-    },
-    camera: {
-        flex: 1,
-    },
-});
-
-const EventThrottleMs = 250;
-
-class CameraKit extends React.Component {
-    constructor(props) {
-        super(props);
-        this.camera = null;
-    }
-
-    readImageQRCode = (base64) => {
-        this.camera?.readImageQRCode(base64);
-    };
-
-    startCamera = () => {
-        this.camera?.startCamera();
-    };
-
-    stopCamera = () => {
-        this.camera?.stopCamera();
-    };
-
-    async capture(options) {
-        const data = await this.camera?.capture(options);
-        const { onImageCaptured } = this.props;
-        if (typeof onImageCaptured === 'function') {
-            onImageCaptured({ ...data, url: data.uri });
-        }
-    }
-
-    onBarCodeRead = ({ nativeEvent }) => {
-        const value = JSON.stringify(nativeEvent);
-        const outdated = new Date() - this.lastEventTime > EventThrottleMs;
-        if (value && value === this.lastEvent && !outdated) {
-            return;
-        }
-        const { onBarCodeRead } = this.props;
-        if (typeof onBarCodeRead === 'function') {
-            onBarCodeRead({ data: nativeEvent?.codeStringValue });
-            this.lastEvent = value;
-            this.lastEventTime = new Date();
-        }
-    };
-
-    onOpenCamera = ({ nativeEvent }) => {
-        const { onOpenCamera } = this.props;
-        if (typeof onOpenCamera === 'function') {
-            onOpenCamera(nativeEvent);
-        }
-    };
-
-    render() {
-        const {
-            customFinder,
-            style,
-            torchMode,
-            type,
-            onBarCodeRead,
-            zoomMode,
-        } = this.props;
-
-        return (
-            <View style={[styles.container, style]}>
-                <Camera
-                    ref={(cam) => (this.camera = cam)}
-                    style={styles.camera}
-                    cameraType={type}
-                    torchMode={torchMode}
-                    focusMode={torchMode}
-                    zoomMode={zoomMode}
-                    scanBarcode={!!onBarCodeRead}
-                    onReadCode={this.onBarCodeRead}
-                    onOpenCamera={this.onOpenCamera}
-                />
-                <View style={StyleSheet.absoluteFill}>
-                    {customFinder && customFinder()}
-                </View>
-            </View>
-        );
-    }
-}
-
-CameraKit.propTypes = {
-    onBarCodeRead: PropTypes.func,
-    onImageCaptured: PropTypes.func,
-    type: PropTypes.oneOf(['front', 'back']),
-    torchMode: PropTypes.oneOf(['on', 'off', 'auto']),
-    zoomMode: PropTypes.oneOf(['on', 'off']),
-    onOpenCamera: PropTypes.func,
-};
-
-CameraKit.defaultProps = {
-    type: 'back',
-    torchMode: 'off',
-    zoomMode: 'off',
-    onOpenCamera: () => {},
-};
-
-export default CameraKit;

package/index.js

@@ -1,3 +0,0 @@
-import CameraKit from './CameraKit';
-
-export { CameraKit };