This will handle onOverlay click event (#2)

* add overlay click feature Co-authored-by: Sanath Samarasinghe <[email protected]>
serrexlabs · Sep 24, 2021 · 134a83b · 134a83b
1 parent 16af896
commit 134a83b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-confirm-box",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A callable react confirm alert box",
   "author": "SERrex Labs",
   "license": "Apache-2.0",
@@ -19,8 +19,10 @@
   },
   "jest": {
     "transform": {
-      ".(ts|tsx)": "ts-jest",
-      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
+      ".(ts|tsx)": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
     },
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
     "moduleFileExtensions": [
@@ -53,6 +55,7 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-simple-import-sort": "^6.0.1",
     "husky": "^4.3.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-css-modules-transform": "^4.0.2",
     "node-sass": "^5.0.0",

diff --git a/src/confirm/index.tsx b/src/confirm/index.tsx
@@ -21,21 +21,24 @@ const ConfirmBox: React.FC<Props> = ({ resolver, message, options }: Props) => {
     resolver(false);
   };
 
+  const onOverlay = () => {
+    if (!options?.closeOnOverlayClick) return;
+    setIsOpen(false);
+    resolver(false);
+  };
+
   const render = () => {
     const { classNames } = options || {};
 
-    const containerClassNames = `confirm - box__content $ {
-      classNames ?.container || ''
-    }
-    `;
-    const confirmButtonClassNames = `${classNames?.buttons || ''} $ {
-      classNames ?.confirmButton || ''
-    }
+    const containerClassNames = `confirm-box__content ${classNames?.container || ''}
     `;
-    const cancelButtonClassNames = `${classNames?.buttons || ''} $ {
-      classNames ?.cancelButton || ''
+    const confirmButtonClassNames = `${classNames?.buttons || ''} ${
+      classNames?.confirmButton || ''
     }
     `;
+    const cancelButtonClassNames = `${classNames?.buttons || ''} ${
+      classNames?.cancelButton || ''
+    }`;
 
     if (!options?.render) {
       return (
@@ -68,7 +71,7 @@ const ConfirmBox: React.FC<Props> = ({ resolver, message, options }: Props) => {
   return isOpen ? (
     <div className="confirm-box">
       {render()}
-      <div className="confirm-box__overlay" />
+      <div className="confirm-box__overlay" onClick={onOverlay} />
     </div>
   ) : null;
 };

diff --git a/src/types.ts b/src/types.ts
@@ -8,5 +8,6 @@ type ClassNames = {
 export type Options = {
   labels?: { confirmable: string; cancellable: string };
   classNames?: ClassNames;
+  closeOnOverlayClick?: boolean;
   render?: (message: string, onConfirm: () => void, onCancel: () => void) => Element;
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2563,6 +2563,11 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -2690,6 +2695,13 @@ [email protected]:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+identity-obj-proxy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"