chakra-confirm - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/chakra-confirm.cjs.development.js

@@ -55,4 +55,47 @@ 'use strict';
 
+var SubmitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onClick = props.onClick,
+      doubleConfirm = props.doubleConfirm,
+      buttonProps = props.buttonProps,
+      children = props.children;
+
+  var _useBoolean = react.useBoolean(false),
+      check = _useBoolean[0],
+      _useBoolean$ = _useBoolean[1],
+      on = _useBoolean$.on,
+      off = _useBoolean$.off;
+
+  React.useEffect(function () {
+    if (check) {
+      var timeout = setTimeout(off, 1000);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }
+
+    return function () {};
+  }, [check]);
+
+  if (!doubleConfirm) {
+    return React__default.createElement(react.Button, Object.assign({
+      ref: ref,
+      onClick: onClick
+    }, buttonProps), children);
+  }
+
+  if (check) {
+    return React__default.createElement(react.Button, Object.assign({
+      ref: ref,
+      onClick: onClick
+    }, buttonProps), children);
+  }
+
+  return React__default.createElement(react.Button, {
+    ref: ref,
+    onClick: on
+  }, "Are you sure?");
+});
+
 var GlobalConfirmModal = function GlobalConfirmModal() {
-  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13;
+  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13, _value$data14;
 
@@ -134,8 +177,11 @@ var _useContext = React.useContext(confirmContext),
     onClick: onClose
-  }, defaults.cancel), !((_value$data11 = value.data) == null ? void 0 : _value$data11.onlyAlert) && React__default.createElement(react.Button, {
+  }, defaults.cancel), !((_value$data11 = value.data) == null ? void 0 : _value$data11.onlyAlert) && React__default.createElement(SubmitButton, {
+    buttonProps: {
+      colorScheme: ((_value$data12 = value.data) == null ? void 0 : _value$data12.buttonColor) || 'blue',
+      ml: 3
+    },
     ref: confirmRef,
-    colorScheme: ((_value$data12 = value.data) == null ? void 0 : _value$data12.buttonColor) || 'blue',
     onClick: onClick,
-    ml: 3
-  }, ((_value$data13 = value.data) == null ? void 0 : _value$data13.buttonText) || 'Confirm')))));
+    doubleConfirm: ((_value$data13 = value.data) == null ? void 0 : _value$data13.doubleConfirm) || false
+  }, ((_value$data14 = value.data) == null ? void 0 : _value$data14.buttonText) || 'Confirm')))));
 };
@@ -142,0 +188,0 @@

dist/chakra-confirm.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("@chakra-ui/react");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}var r={prompt:{title:"Enter some data",buttonText:"Submit",buttonColor:"blue"},confirm:{title:"Are you sure?"},delete:{title:"Are you sure?",body:"Are you sure you want to delete this",buttonText:"Delete",buttonColor:"red"},cancel:"Cancel"},u=t.createContext({value:{type:"confirm",isOpen:!1},setValue:function(){},defaults:o({},r)}),a=function(){var e,r,a,i,c,d,s,f,v,m=t.useContext(u),p=m.value,y=m.defaults,C=m.setValue,b=p.isOpen,E=t.useRef(null),x=t.useState(""),A=x[0],g=x[1],O=function(){var e,t;"prompt"===p.type?null==(e=p.data)||e.onClick(null):null==(t=p.data)||t.onClick(!1),C((function(e){return o({},e,{data:void 0,isOpen:!1})})),g("")},D=function(){var e,t;"prompt"===p.type?null==(e=p.data)||e.onClick(A):null==(t=p.data)||t.onClick(!0),C((function(e){return o({},e,{data:void 0,isOpen:!1})})),g("")};return b?n.createElement(l.AlertDialog,{isOpen:b,leastDestructiveRef:E,onClose:O,isCentered:null==(e=p.data)?void 0:e.isCentered},n.createElement(l.AlertDialogOverlay,null,n.createElement(l.AlertDialogContent,null,n.createElement(l.AlertDialogHeader,null,n.createElement(l.Heading,{size:"md"},(null==(r=p.data)?void 0:r.title)||"Are you sure?")),((null==(a=p.data)?void 0:a.actionBody)||(null==(i=p.data)?void 0:i.body))&&n.createElement(l.AlertDialogBody,null,(null==(c=p.data)||null==c.actionBody?void 0:c.actionBody(O))||(null==(d=p.data)?void 0:d.body)),"prompt"===p.type&&n.createElement(l.AlertDialogBody,null,n.createElement("form",{onSubmit:function(e){e.preventDefault(),D()}},n.createElement(l.FormControl,null,n.createElement(l.Input,{value:A,onChange:function(e){return g(e.target.value)}})))),n.createElement(l.AlertDialogFooter,null,n.createElement(l.Button,{onClick:O},y.cancel),!(null==(s=p.data)?void 0:s.onlyAlert)&&n.createElement(l.Button,{ref:E,colorScheme:(null==(f=p.data)?void 0:f.buttonColor)||"blue",onClick:D,ml:3},(null==(v=p.data)?void 0:v.buttonText)||"Confirm"))))):null},i=function(e,n){var l=t.useContext(u);return function(t){return new Promise((function(r,u){var a;l.setValue({type:n||"confirm",isOpen:!0,data:o({},null==(a=l.defaults)?void 0:a.confirm,e,t,{onClick:r})})}))}};exports.ConfirmContextProvider=function(e){var l=e.children,i=e.defaults,c=t.useState({isOpen:!1,type:"alert"});return n.createElement(u.Provider,{value:{value:c[0],setValue:c[1],defaults:{cancel:(null==i?void 0:i.cancel)||r.cancel,confirm:o({},null==r?void 0:r.confirm,null==i?void 0:i.confirm),delete:o({},null==r?void 0:r.delete,null==i?void 0:i.delete)}}},n.createElement(a,null),l)},exports.useConfirm=i,exports.useConfirmDelete=function(e){var n,l=t.useContext(u);return i(o({},null==(n=l.defaults)?void 0:n.delete,e))},exports.usePrompt=function(e){var n,l=t.useContext(u);return i(o({},null==(n=l.defaults)?void 0:n.prompt,e),"prompt")},exports.useUNSTABLE_Alert=function(e){return i(o({onlyAlert:!0},e),"alert")};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("@chakra-ui/react");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}var r={prompt:{title:"Enter some data",buttonText:"Submit",buttonColor:"blue"},confirm:{title:"Are you sure?"},delete:{title:"Are you sure?",body:"Are you sure you want to delete this",buttonText:"Delete",buttonColor:"red"},cancel:"Cancel"},u=t.createContext({value:{type:"confirm",isOpen:!1},setValue:function(){},defaults:o({},r)}),a=t.forwardRef((function(e,o){var r=e.onClick,u=e.doubleConfirm,a=e.buttonProps,i=e.children,c=l.useBoolean(!1),d=c[0],s=c[1],f=s.on,m=s.off;return t.useEffect((function(){if(d){var e=setTimeout(m,1e3);return function(){return clearTimeout(e)}}return function(){}}),[d]),u?d?n.createElement(l.Button,Object.assign({ref:o,onClick:r},a),i):n.createElement(l.Button,{ref:o,onClick:f},"Are you sure?"):n.createElement(l.Button,Object.assign({ref:o,onClick:r},a),i)})),i=function(){var e,r,i,c,d,s,f,m,v,p,C=t.useContext(u),y=C.value,b=C.defaults,E=C.setValue,A=y.isOpen,x=t.useRef(null),g=t.useState(""),O=g[0],k=g[1],B=function(){var e,t;"prompt"===y.type?null==(e=y.data)||e.onClick(null):null==(t=y.data)||t.onClick(!1),E((function(e){return o({},e,{data:void 0,isOpen:!1})})),k("")},D=function(){var e,t;"prompt"===y.type?null==(e=y.data)||e.onClick(O):null==(t=y.data)||t.onClick(!0),E((function(e){return o({},e,{data:void 0,isOpen:!1})})),k("")};return A?n.createElement(l.AlertDialog,{isOpen:A,leastDestructiveRef:x,onClose:B,isCentered:null==(e=y.data)?void 0:e.isCentered},n.createElement(l.AlertDialogOverlay,null,n.createElement(l.AlertDialogContent,null,n.createElement(l.AlertDialogHeader,null,n.createElement(l.Heading,{size:"md"},(null==(r=y.data)?void 0:r.title)||"Are you sure?")),((null==(i=y.data)?void 0:i.actionBody)||(null==(c=y.data)?void 0:c.body))&&n.createElement(l.AlertDialogBody,null,(null==(d=y.data)||null==d.actionBody?void 0:d.actionBody(B))||(null==(s=y.data)?void 0:s.body)),"prompt"===y.type&&n.createElement(l.AlertDialogBody,null,n.createElement("form",{onSubmit:function(e){e.preventDefault(),D()}},n.createElement(l.FormControl,null,n.createElement(l.Input,{value:O,onChange:function(e){return k(e.target.value)}})))),n.createElement(l.AlertDialogFooter,null,n.createElement(l.Button,{onClick:B},b.cancel),!(null==(f=y.data)?void 0:f.onlyAlert)&&n.createElement(a,{buttonProps:{colorScheme:(null==(m=y.data)?void 0:m.buttonColor)||"blue",ml:3},ref:x,onClick:D,doubleConfirm:(null==(v=y.data)?void 0:v.doubleConfirm)||!1},(null==(p=y.data)?void 0:p.buttonText)||"Confirm"))))):null},c=function(e,n){var l=t.useContext(u);return function(t){return new Promise((function(r,u){var a;l.setValue({type:n||"confirm",isOpen:!0,data:o({},null==(a=l.defaults)?void 0:a.confirm,e,t,{onClick:r})})}))}};exports.ConfirmContextProvider=function(e){var l=e.children,a=e.defaults,c=t.useState({isOpen:!1,type:"alert"});return n.createElement(u.Provider,{value:{value:c[0],setValue:c[1],defaults:{cancel:(null==a?void 0:a.cancel)||r.cancel,confirm:o({},null==r?void 0:r.confirm,null==a?void 0:a.confirm),delete:o({},null==r?void 0:r.delete,null==a?void 0:a.delete)}}},n.createElement(i,null),l)},exports.useConfirm=c,exports.useConfirmDelete=function(e){var n,l=t.useContext(u);return c(o({},null==(n=l.defaults)?void 0:n.delete,e))},exports.usePrompt=function(e){var n,l=t.useContext(u);return c(o({},null==(n=l.defaults)?void 0:n.prompt,e),"prompt")},exports.useUNSTABLE_Alert=function(e){return c(o({onlyAlert:!0},e),"alert")};
 //# sourceMappingURL=chakra-confirm.cjs.production.min.js.map

dist/chakra-confirm.esm.js

@@ -1,3 +0,3 @@
-import React, { createContext, useState, useContext, useRef } from 'react';
-import { AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, Heading, AlertDialogBody, FormControl, Input, AlertDialogFooter, Button } from '@chakra-ui/react';
+import React, { createContext, useState, useContext, useRef, forwardRef, useEffect } from 'react';
+import { AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, Heading, AlertDialogBody, FormControl, Input, AlertDialogFooter, Button, useBoolean } from '@chakra-ui/react';
 
@@ -48,4 +48,47 @@ function _extends() {
 
+var SubmitButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var onClick = props.onClick,
+      doubleConfirm = props.doubleConfirm,
+      buttonProps = props.buttonProps,
+      children = props.children;
+
+  var _useBoolean = useBoolean(false),
+      check = _useBoolean[0],
+      _useBoolean$ = _useBoolean[1],
+      on = _useBoolean$.on,
+      off = _useBoolean$.off;
+
+  useEffect(function () {
+    if (check) {
+      var timeout = setTimeout(off, 1000);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }
+
+    return function () {};
+  }, [check]);
+
+  if (!doubleConfirm) {
+    return React.createElement(Button, Object.assign({
+      ref: ref,
+      onClick: onClick
+    }, buttonProps), children);
+  }
+
+  if (check) {
+    return React.createElement(Button, Object.assign({
+      ref: ref,
+      onClick: onClick
+    }, buttonProps), children);
+  }
+
+  return React.createElement(Button, {
+    ref: ref,
+    onClick: on
+  }, "Are you sure?");
+});
+
 var GlobalConfirmModal = function GlobalConfirmModal() {
-  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13;
+  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13, _value$data14;
 
@@ -127,8 +170,11 @@ var _useContext = useContext(confirmContext),
     onClick: onClose
-  }, defaults.cancel), !((_value$data11 = value.data) == null ? void 0 : _value$data11.onlyAlert) && React.createElement(Button, {
+  }, defaults.cancel), !((_value$data11 = value.data) == null ? void 0 : _value$data11.onlyAlert) && React.createElement(SubmitButton, {
+    buttonProps: {
+      colorScheme: ((_value$data12 = value.data) == null ? void 0 : _value$data12.buttonColor) || 'blue',
+      ml: 3
+    },
     ref: confirmRef,
-    colorScheme: ((_value$data12 = value.data) == null ? void 0 : _value$data12.buttonColor) || 'blue',
     onClick: onClick,
-    ml: 3
-  }, ((_value$data13 = value.data) == null ? void 0 : _value$data13.buttonText) || 'Confirm')))));
+    doubleConfirm: ((_value$data13 = value.data) == null ? void 0 : _value$data13.doubleConfirm) || false
+  }, ((_value$data14 = value.data) == null ? void 0 : _value$data14.buttonText) || 'Confirm')))));
 };
@@ -135,0 +181,0 @@

dist/context.d.ts

@@ -12,2 +12,3 @@ import React from 'react';
     onClick: (val: boolean) => Promise<void> | void;
+    doubleConfirm?: boolean;
 }
@@ -14,0 +15,0 @@ export declare type PopupType = 'prompt' | 'confirm' | 'alert';

dist/index.d.ts

@@ -8,6 +8,6 @@ import React from 'react';
 declare type BaseData = Omit<ConfirmData, 'onClick'>;
-export declare const useConfirm: (init?: Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert"> | undefined, type?: "prompt" | "confirm" | "alert" | undefined) => (data?: Partial<Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => Promise<boolean>;
-export declare const useConfirmDelete: (init?: Partial<Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => (data?: Partial<Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => Promise<boolean>;
-export declare const usePrompt: (init?: Partial<Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => (data?: Partial<BaseData> | undefined) => Promise<string | null>;
-export declare const useUNSTABLE_Alert: (init?: Partial<Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => (data?: Partial<Pick<ConfirmData, "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => Promise<boolean>;
+export declare const useConfirm: (init?: Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert"> | undefined, type?: "prompt" | "confirm" | "alert" | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => Promise<boolean>;
+export declare const useConfirmDelete: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => Promise<boolean>;
+export declare const usePrompt: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => (data?: Partial<BaseData> | undefined) => Promise<string | null>;
+export declare const useUNSTABLE_Alert: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert">> | undefined) => Promise<boolean>;
 export {};

package.json

@@ -5,3 +5,3 @@ {
   "author": "Fran Zekan",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

72192

increased by17.36%

Lines of code

747

increased by21.27%

No dependency changes