fix(facedetector, livelocation tracking): default props pass in param…

…s instead of using prop-types

__app/component/FaceDetector/FaceDetector.js

@@ -1,7 +1,6 @@
-/* eslint-disable no-inner-declarations */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { handleError, handleLoading } from '../services/handlerService';
+import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
 import Wrapper from '../Wrapper/Wrapper';
 
 let mediaStream = null;
@@ -14,23 +13,24 @@ const failureMsgDefault = {
   flashUnsupported: 'Flash is not supporting in your device',
 };
 
+const isBrowserSupport = () => navigator?.mediaDevices && globalThis.FaceDetector;
+
 function FaceDetector({
-  // successCb,
-  failureCb,
-  loadingCb,
-  // successMsg,
-  failureMsg: failureMsgProps,
-  cameraType,
-  zIndex,
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'Successfully!!',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+  cameraType = 'back',
+  zIndex = 9,
   children,
-}) {
+} = {}) {
   const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
   let list = null;
   let video = null;
   let facingMode;
 
   const [flash, setFlash] = useState(false);
-  const [isBrowser, setIsBrowser] = useState(false);
   const [faces, setFaces] = useState([]);
 
   const stopStreaming = () => {
@@ -58,6 +58,12 @@ function FaceDetector({
 
         if (getFaces[0]) {
           setFaces(getFaces);
+          handleSuccess({
+            msgType: 'SUCCESSFUL',
+            msg: successMsg,
+            successCb,
+            data: [...getFaces],
+          });
           // cancelAnimationFrame(videoUnmount);
           // stopStreaming();
           // clearTimeout(unmoutRenderLoop);
@@ -159,15 +165,14 @@ function FaceDetector({
   };
 
   useEffect(() => {
-    setIsBrowser(true);
     handleBrowserSupport();
 
     return () => {
       allClear();
     };
   }, []);
 
-  return isBrowser && FaceDetector.isBrowserSupport() && (
+  return isBrowserSupport() && (
     <div id="face-detector">
       <div id="camera" style={{ position: 'absolute' }} />
       {
@@ -199,9 +204,8 @@ function FaceDetector({
   );
 }
 
-FaceDetector.isBrowserSupport = () => navigator?.mediaDevices && globalThis.FaceDetector;
-
 FaceDetector.propTypes = {
+  // showForever: PropTypes.bool,
   // successCb: PropTypes.func,
   failureCb: PropTypes.func,
   loadingCb: PropTypes.func,
@@ -211,14 +215,8 @@ FaceDetector.propTypes = {
   cameraType: PropTypes.oneOf(['back', 'front']),
 };
 
-FaceDetector.defaultProps = {
-  // successCb: () => {},
-  failureCb: () => {},
-  loadingCb: () => {},
-  // successMsg: '',
-  failureMsg: { ...failureMsgDefault },
-  zIndex: 9,
-  cameraType: 'back',
-};
+const WFaceDetector = Wrapper(FaceDetector, isBrowserSupport);
+
+export { WFaceDetector as FaceDetector };
 
-export default Wrapper(FaceDetector);
+export default WFaceDetector;

__app/component/FaceDetector/FaceDetectorClose.js

@@ -38,4 +38,6 @@ function FaceDetectorClose({
   );
 }
 
+export { FaceDetectorClose };
+
 export default FaceDetectorClose;

__app/component/FaceDetector/FaceDetectorFacing.js

@@ -32,4 +32,6 @@ function FaceDetectorFacing({
   );
 }
 
+export { FaceDetectorFacing };
+
 export default FaceDetectorFacing;

__app/component/FaceDetector/FaceDetectorFlash.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function FaceDetector({
+function FaceDetectorFlash({
   toggleFlash,
   children,
   zIndex,
@@ -32,4 +32,6 @@ function FaceDetector({
   );
 }
 
-export default FaceDetector;
+export { FaceDetectorFlash };
+
+export default FaceDetectorFlash;

__app/component/FaceDetector/README.md

@@ -12,8 +12,8 @@ A minimal [Demo Link](https://6jpxdq.csb.app/?component=FaceDetector)
 
 | Value |  Used as a  | Description|
 |--------- | -------- |-----------------|
-| <b>FaceDetector</b> | Component :white_check_mark: | Can be used as Component |
-| <b>faceDetector<b> |  Service :x: | Can't be used as Service |
+| <b>FaceDetector</b> | :white_check_mark: Component | Can be used as Component |
+| <b>faceDetector<b> | :x: Service | Can be used as Service |
 
 ##### 1. Here's an example of basic usage with Multiple Import: with Default Import:
 ```javascript
@@ -134,21 +134,33 @@ return (
 }
        </pre>
     </td>
-  </tr>
-   <tr>
-    <td>
-        showForever
-    </td>
-     <td>Boolean</td>
-    <td>To hide/remove unsupported feature, make it <b>false</b>. Default value is <b>true</b></td>
-    <td> <pre>---</pre> </td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
+  <th>
+    Props
+  </th>
+  <th>
+    Type
+  </th>
+  <th>
+    Description
+  </th>
+  <th>
+      Default Values
+  </th>
+  <tr>
+    <td>
+      showForever
+    </td>
+    <td>Boolean</td>
+    <td>To hide/remove unsupported feature, make it <b>false</b>.</td>
+    <td>Default value is <b>true.</b></td>
+  </tr>
 </table>
 
 ### Child Component

__app/component/FaceDetector/index.js

@@ -1,18 +1,6 @@
-import FaceDetector from './FaceDetector';
-import FaceDetectorFlash from './FaceDetectorFlash';
-import FaceDetectorClose from './FaceDetectorClose';
-import FaceDetectorFacing from './FaceDetectorFacing';
+export * from './FaceDetector';
+export * from './FaceDetectorClose';
+export * from './FaceDetectorFlash';
+export * from './FaceDetectorFacing';
 
-export {
-  FaceDetector,
-  FaceDetectorFlash,
-  FaceDetectorClose,
-  FaceDetectorFacing,
-};
-
-export default {
-  Init: FaceDetector,
-  Flash: FaceDetectorFlash,
-  Close: FaceDetectorClose,
-  Facing: FaceDetectorFacing,
-};
+export { default } from './FaceDetector';

__app/component/LiveLocationTracking/LiveLocationTracking.js

@@ -61,7 +61,7 @@ function LiveLocationTracking({
   overviewMapControl = true,
   rotateControl = true,
   fullscreenControl = true,
-}) {
+} = {}) {
   const directionMapRef = useRef();
   let directionsService;
   let directionsRenderer;