fix(share): build share component and modify PhoneBook Component

.github/COMPONENT.md

@@ -0,0 +1,2 @@
+1. PhoneBook
+2. Share

__app/component/PhoneBook/PhoneBook.js

@@ -1,59 +1,73 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-const hasBrowserSupport = () => {
-  if (navigator.contacts && window.ContactsManager) {
-    return true;
-  }
-  return false;
-};
+const isPhoneBookAPISupport = () => navigator.contacts && window.ContactsManager;
 
 function PhoneBook({
-  cb,
-  contactProperty,
-  isSelectMultiple,
+  disbaleToast,
+  successCb,
+  failureCb,
+  successMsg,
+  failureMsg,
   showForever,
   children,
+  contactProperty,
+  isSelectMultiple,
 }) {
   const [isBrowser, setIsBrowser] = useState(false);
 
   const getContacts = async () => {
     const opts = { multiple: isSelectMultiple };
-    if (hasBrowserSupport()) {
+    if (isPhoneBookAPISupport()) {
       try {
         const contacts = await navigator.contacts.select(contactProperty, opts);
-        cb(contacts);
+        if (!disbaleToast && successMsg) console.log('Success:', successMsg);
+        successCb({ msgType: 'SUCCESS', msg: successMsg, data: contacts });
       } catch (error) {
-        console.log('Error: ', error);
+        if (!disbaleToast && failureMsg.generalMsg) console.log(failureMsg.generalMsg || error);
+        failureCb({ msgType: 'ERROR', msg: failureMsg.generalMsg || error });
       }
     } else {
-      console.log("Unsupported Error: Device doesn't support the feature");
+      if (!disbaleToast && failureMsg.unSupportedMsg) console.log(failureMsg.unSupportedMsg);
+      failureCb({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupportedMsg });
     }
   };
 
   useEffect(() => {
     setIsBrowser(true);
   }, []);
 
-  return isBrowser && (showForever || hasBrowserSupport()) ? (
+  return isBrowser && (showForever || isPhoneBookAPISupport()) ? (
     React.Children.map(children, (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
       onClick: getContacts,
     }))
   ) : null;
 }
 
 PhoneBook.propTypes = {
-  cb: PropTypes.func,
+  disbaleToast: PropTypes.bool,
+  successCb: PropTypes.func,
+  failureCb: PropTypes.func,
+  successMsg: PropTypes.string,
+  failureMsg: PropTypes.object,
+  showForever: PropTypes.bool,
   contactProperty: PropTypes.array,
   isSelectMultiple: PropTypes.bool,
-  showForever: PropTypes.bool,
 };
 
 PhoneBook.defaultProps = {
-  cb: () => {},
+  disbaleToast: false,
+  successCb: () => {},
+  failureCb: () => {},
+  successMsg: '',
+  failureMsg: {
+    unSupportedMsg: '',
+    badRequestMsg: '',
+    generalMsg: '',
+  },
+  showForever: false,
   contactProperty: ['name', 'email', 'tel', 'address', 'icon'],
   isSelectMultiple: false,
-  showForever: false,
 };
 
 export default PhoneBook;

__app/component/Share/Share.js

@@ -1,7 +1,90 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 
-export default function Share() {
-  return (
-    <div>Share</div>
-  )
+const isShareAPISupport = () => navigator.share;
+const isShareAPIDataValid = (sharingData) => {
+  if (navigator.canShare) {
+    return navigator.canShare(sharingData);
+  }
+
+  return true;
+};
+
+function Share({
+  disbaleToast,
+  successCb,
+  failureCb,
+  successMsg,
+  failureMsg,
+  showForever,
+  children,
+  sName,
+  sTitle,
+  sUrl,
+}) {
+  const [isBrowser, setIsBrowser] = useState(false);
+  const sharingData = { title: sName, textasxzdsc: sTitle, url: sUrl };
+
+  const showDropdown = () => {
+    if (isShareAPISupport()) {
+      if (isShareAPIDataValid(sharingData)) {
+        navigator.share(sharingData).then(() => {
+          if (!disbaleToast && successMsg) console.log('Success:', successMsg);
+          successCb({ msgType: 'SUCCESS', msg: successMsg });
+        }).catch((error) => {
+          console.log(error);
+          if (!disbaleToast && failureMsg.generalMsg) console.log(failureMsg.generalMsg || error);
+          failureCb({ msgType: 'ERROR', msg: failureMsg.generalMsg || error });
+        });
+      } else {
+        console.log('BAD_REQUEST');
+        if (!disbaleToast && failureMsg.badRequestMsg) console.log(failureMsg.badRequestMsg);
+        failureCb({ msgType: 'BAD_REQUEST', msg: failureMsg.badRequestMsg });
+      }
+    } else {
+      console.log('UN_SUPPORTED_FEATURE');
+      if (!disbaleToast && failureMsg.unSupportedMsg) console.log(failureMsg.unSupportedMsg);
+      failureCb({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupportedMsg });
+    }
+  };
+
+  useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+
+  return isBrowser && (showForever || isShareAPISupport()) ? (
+    React.Children.map(children, (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+      onClick: showDropdown,
+    }))
+  ) : null;
 }
+
+Share.propTypes = {
+  disbaleToast: PropTypes.bool,
+  successCb: PropTypes.func,
+  failureCb: PropTypes.func,
+  successMsg: PropTypes.string,
+  failureMsg: PropTypes.object,
+  showForever: PropTypes.bool,
+  sName: PropTypes.string,
+  sTitle: PropTypes.string,
+  sUrl: PropTypes.string,
+};
+
+Share.defaultProps = {
+  disbaleToast: false,
+  successCb: () => {},
+  failureCb: () => {},
+  successMsg: '',
+  failureMsg: {
+    unSupportedMsg: '',
+    badRequestMsg: '',
+    generalMsg: '',
+  },
+  showForever: true,
+  sName: 'fe-pilot',
+  sTitle: 'A React library for advance JS features',
+  sUrl: 'https://www.npmjs.com/package/fe-pilot',
+};
+
+export default Share;