@momo-kits/camerakit 0.73.3-beta.4 → 0.74.2-react-native.1

package/Camera.android.tsx

@@ -0,0 +1,52 @@
+import React 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 = React.forwardRef((props: any, ref) => {
+  const nativeRef = React.useRef();
+
+  React.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={(event: any) => {}}
+      {...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={(event: any) => {}}
+      {...props}
+    />
+  );
+});
+
+export default Camera;

package/index.tsx

@@ -0,0 +1,96 @@
+import React, {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 = React.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);
+
+    React.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.73.3-beta.4",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {
-        "camerakit": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-camera-kit.git#v2.0.5"
-    },
+    "main": "index.tsx",
     "peerDependencies": {
-        "react": "16.9.0",
-        "react-native": ">=0.55"
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -11,12 +11,6 @@ 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
@@ -25,4 +19,4 @@ npm publish --tag beta --access=public
 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"}'
+##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/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/avatar`"}'

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,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {StyleSheet, View} from 'react-native';
-import {Camera} from 'camerakit';
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-  },
-  camera: {
-    flex: 1,
-    backgroundColor: 'black',
-  },
-});
-
-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 {onImageCaptured} = this.props;
-    try {
-      const data = await this.camera?.capture(options);
-      onImageCaptured?.({...data, url: data.uri});
-    } catch (e) {
-      onImageCaptured?.({error: e.message});
-    }
-  }
-
-  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;
-    onBarCodeRead?.({data: nativeEvent?.codeStringValue});
-    this.lastEvent = value;
-    this.lastEventTime = new Date();
-  };
-
-  onOpenCamera = ({nativeEvent}) => {
-    const {onOpenCamera} = this.props;
-    onOpenCamera?.(nativeEvent);
-  };
-
-  render() {
-    const {
-      customFinder,
-      style,
-      torchMode,
-      type,
-      onBarCodeRead,
-      zoomMode,
-      zoomRate,
-    } = 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}
-          zoomRate={zoomRate}
-          scanBarcode={!!onBarCodeRead}
-          onReadCode={this.onBarCodeRead}
-          onOpenCamera={this.onOpenCamera}
-        />
-        {customFinder && (
-          <View style={StyleSheet.absoluteFill}>{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']),
-  zoomRate: PropTypes.number,
-  onOpenCamera: PropTypes.func,
-};
-
-CameraKit.defaultProps = {
-  type: 'back',
-  torchMode: 'off',
-  zoomMode: 'off',
-  zoomRate: 1.0,
-  onOpenCamera: () => {},
-};
-
-export default CameraKit;

package/index.js

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