react-confirm-box/dist/index.js

A callable react confirm alert box

function ___$insertStyle(e){if(e&&window){const n=document.createElement("style");return n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n),e}}function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var ReactDOM=require("react-dom"),ReactDOM__default=_interopDefault(ReactDOM),React=require("react"),React__default=_interopDefault(React);function __awaiter(a,l,c,i){return new(c=c||Promise)(function(e,n){function t(e){try{r(i.next(e))}catch(e){n(e)}}function o(e){try{r(i.throw(e))}catch(e){n(e)}}function r(n){n.done?e(n.value):new c(function(e){e(n.value)}).then(t,o)}r((i=i.apply(a,l||[])).next())})}function __generator(t,o){var r,a,l,c={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]},e={next:n(0),throw:n(1),return:n(2)};return"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function n(n){return function(e){return function(n){if(r)throw new TypeError("Generator is already executing.");for(;c;)try{if(r=1,a&&(l=2&n[0]?a.return:n[0]?a.throw||((l=a.return)&&l.call(a),0):a.next)&&!(l=l.call(a,n[1])).done)return l;switch(a=0,(n=l?[2&n[0],l.value]:n)[0]){case 0:case 1:l=n;break;case 4:return c.label++,{value:n[1],done:!1};case 5:c.label++,a=n[1],n=[0];continue;case 7:n=c.ops.pop(),c.trys.pop();continue;default:if(!(l=0<(l=c.trys).length&&l[l.length-1])&&(6===n[0]||2===n[0])){c=0;continue}if(3===n[0]&&(!l||n[1]>l[0]&&n[1]<l[3])){c.label=n[1];break}if(6===n[0]&&c.label<l[1]){c.label=l[1],l=n;break}if(l&&c.label<l[2]){c.label=l[2],c.ops.push(n);break}l[2]&&c.ops.pop(),c.trys.pop();continue}n=o.call(t,c)}catch(e){n=[6,e],a=0}finally{r=l=0}if(5&n[0])throw n[1];return{value:n[0]?n[1]:void 0,done:!0}}([n,e])}}}var nameGenerator=function(){return"_"+Math.random().toString(36).substr(2,9)},mountRootId="confirm-box-root"+nameGenerator(),Portal=function(e){var e=e.children,n=document.getElementById(mountRootId),t=document.createElement("div");return React.useEffect(function(){return n.appendChild(t),function(){return n.removeChild(t)}},[t,n]),ReactDOM.createPortal(e,t)};___$insertStyle(".confirm-box {\n  z-index: 1000;\n  position: absolute;\n  left: 45%;\n  top: 45%;\n}\n.confirm-box__content {\n  z-index: 300;\n  background-color: #fff;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  padding: 1em;\n  border-radius: 5px;\n  width: 300px;\n  max-width: 400px;\n}\n.confirm-box__overlay {\n  z-index: -1;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.confirm-box__actions {\n  display: flex;\n  padding-top: 1em;\n  justify-content: flex-end;\n}\n.confirm-box__actions > :not(:last-child) {\n  margin-right: 1em;\n}");var ConfirmBox=function(e){function n(){d(!1),l(!0)}function t(){d(!1),l(!1)}var o,r,a,l=e.resolver,c=e.message,i=e.options,u=React.useState(!0),e=u[0],d=u[1];return e?React__default.createElement("div",{className:"confirm-box"},(o=(i||{}).classNames,r="confirm-box__content "+((null==o?void 0:o.container)||"")+"\n    ",a=((null==o?void 0:o.buttons)||"")+" "+((null==o?void 0:o.confirmButton)||"")+"\n    ",o=((null==o?void 0:o.buttons)||"")+" "+((null==o?void 0:o.cancelButton)||""),null!=i&&i.render?i.render(c,n,t):React__default.createElement("div",{className:r},React__default.createElement("span",null,c),React__default.createElement("div",{className:"confirm-box__actions"},React__default.createElement("button",{onClick:n,role:"confirmable-button",className:a},null!==(a=null==i?void 0:i.labels)&&void 0!==a&&a.confirmable?null===(a=null==i?void 0:i.labels)||void 0===a?void 0:a.confirmable:"Yes"),React__default.createElement("button",{onClick:t,role:"cancellable-button",className:o},null!==(o=null==i?void 0:i.labels)&&void 0!==o&&o.cancellable?null===(o=null==i?void 0:i.labels)||void 0===o?void 0:o.cancellable:"No")))),React__default.createElement("div",{className:"confirm-box__overlay",onClick:function(){null!=i&&i.closeOnOverlayClick&&(d(!1),l(!1))}})):null},confirm=function(t,o){return __awaiter(void 0,void 0,void 0,function(){var n;return __generator(this,function(e){switch(e.label){case 0:return[4,document.getElementById(mountRootId)];case 1:return e.sent()?[3,4]:[4,document.createElement("div")];case 2:return[4,(n=e.sent()).setAttribute("id",mountRootId)];case 3:e.sent(),document.body.appendChild(n),e.label=4;case 4:return[2,new Promise(function(e){e=React__default.createElement(ConfirmBox,{resolver:e,message:t,options:o}),e=React__default.createElement(Portal,null,e);ReactDOM__default.render(e,document.getElementById(mountRootId))})]}})})};exports.confirm=confirm;
//# sourceMappingURL=index.js.map