✨ sucessful share callback (#15)

Author: harshzalavadiya

.github/workflows/main.yml

@@ -8,10 +8,10 @@ jobs:
       - name: Begin CI...
         uses: actions/checkout@v2
 
-      - name: Use Node 12
+      - name: Use Node 14
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Use cached node_modules
         uses: actions/cache@v1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+tsdx lint

README.md

@@ -48,6 +48,7 @@ const Example = () => {
           url: "https://on.natgeo.com/2zHaNup",
           title: "Flamingos",
         }}
+        onClick={() => console.log("shared successfully!")}
       >
         <button>Share 🔗</button>
       </RWebShare>
@@ -60,10 +61,11 @@ export default Example;
 
 ## 👀 Props
 
-| Prop    | Description  | Type                 | Default                                       |
-| ------- | ------------ | -------------------- | --------------------------------------------- |
-| `data`  | Share Object | `{text, url, title}` | `{text: "", url: currentURL, title: "Share"}` |
-| `sites` | sites        | `string[]`           | all platforms (see list below for key list)   |
+| Prop      | Description                 | Type                 | Default                                       |
+| --------- | --------------------------- | -------------------- | --------------------------------------------- |
+| `data`    | Share Object                | `{text, url, title}` | `{text: "", url: currentURL, title: "Share"}` |
+| `sites`   | sites                       | `string[]`           | all platforms (see list below for key list)   |
+| `onClick` | callback on sucessful share |                      |                                               |
 
 ## 🌎 Sites
 

package.json

@@ -25,9 +25,9 @@
     "react": ">=17"
   },
   "devDependencies": {
-    "@ampproject/filesize": "^4.2.0",
-    "@babel/core": "^7.12.10",
-    "@size-limit/preset-small-lib": "^4.9.1",
+    "@ampproject/filesize": "^4.3.0",
+    "@babel/core": "^7.13.16",
+    "@size-limit/preset-small-lib": "^4.10.2",
     "@storybook/addon-essentials": "^6.1.14",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-knobs": "^6.1.14",
@@ -38,21 +38,16 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "babel-loader": "^8.2.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "husky": "^4.3.8",
+    "eslint-plugin-prettier": "^3.4.0",
+    "husky": "^6.0.0",
     "react": "^16.13.1",
-    "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
-    "size-limit": "^4.9.1",
-    "ts-loader": "^8.0.14",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "size-limit": "^4.10.2",
+    "ts-loader": "^9.1.0",
     "tsdx": "^0.14.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.1.3"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
   },
   "prettier": {
     "printWidth": 100,

src/components/icon/index.tsx

@@ -14,12 +14,18 @@ const SocialIconStyle: CSSProperties = {
   fontSize: 0,
 };
 
-export default function Icon({ name, data, onClose }: IconProps) {
+export default function Icon({ name, data, onClose, onClick }: IconProps) {
   const { path, viewBox = "0 0 24 24", color, e } = iconList[name];
 
+  const handleOnButtonClicked = () => {
+    onClick && onClick(); // callback
+    e(encodeURIComponent(data.url), data.text, data.title);
+    onClose();
+  };
+
   return (
     <button
-      onClick={() => e(encodeURIComponent(data.url), data.text, data.title) && onClose()}
+      onClick={handleOnButtonClicked}
       aria-label={name}
       style={{ ...SocialIconStyle, background: color }}
     >

src/components/social-icons.tsx

@@ -21,7 +21,13 @@ const IconsLisStyle: CSSProperties = {
   gridGap: "1.25rem",
 };
 
-export default function SocialIcons({ onClose, sites, data, closeText }: SocialIconsProps) {
+export default function SocialIcons({
+  onClose,
+  sites,
+  data,
+  closeText,
+  onClick,
+}: SocialIconsProps) {
   return (
     <section
       role="dialog"
@@ -32,7 +38,7 @@ export default function SocialIcons({ onClose, sites, data, closeText }: SocialI
       <Header title={data.title} />
       <div style={IconsLisStyle}>
         {sites.map((name) => (
-          <Icon name={name} key={name} data={data} onClose={onClose} />
+          <Icon name={name} key={name} data={data} onClose={onClose} onClick={onClick} />
         ))}
       </div>
       <CloseButton onClose={onClose} closeText={closeText} />

src/index.tsx

@@ -11,6 +11,7 @@ export const RWebShare = ({
   children,
   closeText,
   data,
+  onClick,
   sites = Object.keys(iconList),
 }: RWebShareProps) => {
   const { onOpen, onClose, isOpen } = useDisclosure();
@@ -25,11 +26,15 @@ export const RWebShare = ({
     [data]
   );
 
-  const handleOnClick = () => {
-    try {
-      window.navigator.share(shareData);
-    } catch (e) {
-      console.warn(e);
+  const handleOnClick = async () => {
+    if (window.navigator.share) {
+      try {
+        await window.navigator.share(shareData);
+        onClick();
+      } catch (e) {
+        console.warn(e);
+      }
+    } else {
       onOpen();
     }
   };
@@ -43,7 +48,13 @@ export const RWebShare = ({
       {isOpen && (
         <Portal>
           <Backdrop onClose={onClose}>
-            <SocialIcons onClose={onClose} sites={sites} data={shareData} closeText={closeText} />
+            <SocialIcons
+              onClose={onClose}
+              sites={sites}
+              data={shareData}
+              closeText={closeText}
+              onClick={onClick}
+            />
           </Backdrop>
         </Portal>
       )}

src/interfaces.ts

@@ -9,17 +9,20 @@ export interface RWebShareProps {
   closeText?: string;
   data: ShareData;
   sites: string[];
+  onClick?;
 }
 
 export interface SocialIconsProps {
   onClose;
   closeText?: string;
   sites: string[];
   data: Required<ShareData>;
+  onClick?;
 }
 
 export interface IconProps {
   onClose;
   name: string;
   data: Required<ShareData>;
+  onClick?;
 }

stories/web-share-component.stories.tsx

@@ -15,6 +15,7 @@ export const Default = () => (
         url: "https://on.natgeo.com/2zHaNup",
         title: "Flamingos",
       }}
+      onClick={() => console.log("share successful!")}
     >
       <button>Share 🔗</button>
     </RWebShare>