react-poptart
Version:
A simple and elegant notification toaster for React.js
3 lines (2 loc) • 19.1 kB
JavaScript
import t,{useState as e,useEffect as n,createContext as o,useContext as r}from"react";var a=function(){return a=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},a.apply(this,arguments)};function l(t,e,n){if(n||2===arguments.length)for(var o,r=0,a=e.length;r<a;r++)!o&&r in e||(o||(o=Array.prototype.slice.call(e,0,r)),o[r]=e[r]);return t.concat(o||Array.prototype.slice.call(e))}function i(e){var n=e.type,o=e.color,r=e.size;switch(n){case"success":return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"".concat(r,"px"),height:"".concat(r,"px")},t.createElement("path",{fill:o,d:"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"}));case"error":return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"".concat(r,"px"),height:"".concat(r,"px")},t.createElement("path",{fill:o,d:"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"}));case"warning":return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"".concat(r,"px"),height:"".concat(r,"px")},t.createElement("path",{fill:o,d:"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"}));default:return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"".concat(r,"px"),height:"".concat(r,"px")},t.createElement("path",{fill:o,d:"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"}))}}function c(t){var e=t.backgroundColor,n=t.lightColor,o=t.darkColor,r=t.threshold,a=void 0===r?.38:r,l=function(t){var e=t.replace("#","");3===e.length&&(e=e.split("").map((function(t){return t+t})).join(""));var n=parseInt(e,16);return{r:n>>16&255,g:n>>8&255,b:255&n}}(e),i=function(t,e,n){var o=[t,e,n].map((function(t){var e=t/255;return e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)}));return.2126*o[0]+.7152*o[1]+.0722*o[2]}(l.r,l.g,l.b);return i>a?o:n}"function"==typeof SuppressedError&&SuppressedError;var s=function(t,e){var n=document.getElementById(t);if(n)n.innerHTML=e;else{var o=document.createElement("style");o.id=t,o.innerHTML=e,document.head.appendChild(o)}};function d(t){return t&&"object"==typeof t&&!Array.isArray(t)}function u(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];if(!e.length)return t;var o=e.shift();return o&&Object.keys(o).forEach((function(e){var n=t[e],r=o[e];d(n)&&d(r)?t[e]=u(a({},n),r):t[e]=r})),u.apply(void 0,l([t],e,!1))}var p=function(o){var r=o.poptart,l=o.height,i=o.backgroundColor,s=o.config,d=o.colorOverride,u=null!=d?d:c({backgroundColor:i,lightColor:s.progressBar.lightColor,darkColor:s.progressBar.darkColor}),p=e(100),f=p[0],m=p[1],g=r.duration||s.defaultDuration;n((function(){setTimeout((function(){m(0)}),100)}),[]);var h=a({position:"absolute",bottom:0,left:0,height:"".concat(l,"px"),backgroundColor:u,width:"".concat(f,"%"),transition:"width ".concat(g,"ms linear")},s.styleOverrides.progressBar);return t.createElement("div",{className:"poptart-progress",style:h})};function f(e){var n=e.size,o=e.strokeWidth,r=e.baseColor,a=e.accentColor,l=e.animationDuration;return e.isInverted,t.createElement("div",{id:"react-poptart-spinner",style:{border:"".concat(o,"px solid ").concat(r),borderTop:"".concat(o,"px solid ").concat(a),borderBottom:"".concat(o,"px solid ").concat(a),borderRadius:"50%",width:"".concat(n,"px"),height:"".concat(n,"px"),animation:"spin ".concat(l,"s linear infinite")}})}var m=function(e){var n=e.props,o=e.id,r=e.foregroundColor,l=e.config,c=e.dismiss,s=n.message,d=n.onClick,u=n.type||l.defaultType,m=l.colors[u],g=n.width||l.defaultWidth,h=l.fontSize,b=l.paddingX,C=l.paddingY,v=l.progressBar.height,y=(void 0!==n.duration?n.duration:l.defaultDuration)>0,x=n.animation||l.defaultAnimation,k=n.animationDuration||l.defaultAnimationDuration,B="loading"===n.type,w=y&&!B,E="default"===l.defaultPoptartStyle?"filled":l.defaultPoptartStyle,z=E;n.poptartStyle&&(z="default"===n.poptartStyle?E:n.poptartStyle);var I="inverted"===z,S=a({backgroundColor:I?l.colors.invertedBackground:m,color:I?m:r,width:g,maxWidth:"100%",paddingTop:"".concat(C,"px"),paddingLeft:"".concat(b,"px"),paddingRight:"".concat(b,"px"),paddingBottom:"".concat(C+(y?v:0),"px"),borderRadius:"10px",overflow:"hidden",cursor:"pointer",position:"relative",pointerEvents:"auto",fontSize:h,boxShadow:"0 0 10px rgba(0, 0, 0, 0.2)",border:"1px solid rgba(0, 0, 0, 0.1)",animation:"".concat(x," ").concat(k,"s ease-out")},l.styleOverrides.poptart),D={wordBreak:"break-word",hyphens:"auto",overflowWrap:"break-word",textShadow:I?"2px 2px 2px rgba(0, 0, 0, 0.1)":"2px 2px 2px rgba(0, 0, 0, 0.3)",animation:B?"beacon 1s infinite":"none"},F=h*l.iconSizeFactor;return t.createElement("div",{className:"poptart",style:S,onClick:function(){c(o),d&&d()}},t.createElement("div",{className:"poptart-inner",style:{display:"flex",alignItems:"center",gap:"10px"}},B?t.createElement(f,a({size:F,isInverted:I},l.spinner)):t.createElement("div",{className:"poptart-icon",style:{width:F}},t.createElement(i,{type:u,color:I?m:r,size:F})),t.createElement("span",{className:"poptart-message",style:D},s)),w?t.createElement(p,{poptart:n,height:l.progressBar.height,backgroundColor:m,colorOverride:I?m:void 0,config:l}):null)};var g=function(e){var o=e.config,r=e.poptarts,l=e.dismiss;n((function(){s("poptart-animations","\n @keyframes bounceIn {\n 0% {\n opacity: 0;\n transform: translateY(-100%) scale(0.3);\n }\n 50% {\n opacity: 1;\n transform: translateY(0) scale(1.1);\n }\n 70% {\n transform: translateY(-10%) scale(0.95);\n }\n 100% {\n transform: translateY(0) scale(1);\n }\n }\n \n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n \n @keyframes slideFromLeft {\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 80% {\n transform: translateX(5%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n @keyframes slideFromRight {\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 80% {\n transform: translateX(-5%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n @keyframes slideFromTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 80% {\n transform: translateY(5%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes slideFromBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 80% {\n transform: translateY(-5%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n \n @keyframes beacon {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n } \n ")}),[]);var i={};switch(o.defaultAlign){case"tl":i.justifyContent="flex-start",i.alignItems="flex-start";break;case"tc":i.justifyContent="flex-start",i.alignItems="center";break;case"tr":i.justifyContent="flex-start",i.alignItems="flex-end";break;case"bl":i.justifyContent="flex-end",i.alignItems="flex-start";break;case"bc":i.justifyContent="flex-end",i.alignItems="center";break;default:i.justifyContent="flex-end",i.alignItems="flex-end"}var c=a(a({position:"fixed",inset:0,pointerEvents:"none",display:"flex",flexDirection:"column",gap:"20px",padding:"20px",zIndex:o.zIndex+2},i),o.styleOverrides.container);return t.createElement("div",{className:"poptart-container",style:c},r.map((function(e){return t.createElement(m,a({key:e.id,dismiss:l,config:o},e))})))};function h(e){var o=e.input,r=e.config,a=e.value,l=e.setValue,i=e.error,c=e.alert,d=e.onConfirm,u=e.zIndex,p=o.type,f=o.placeholder,m=o.required,g=r.alerts.input.backgroundColor,h=r.alerts.input.fontColor,b=r.alerts.input.borderRadius,C=r.alerts.input.borderWidth,v=r.alerts.input.paddingX,y=r.alerts.input.paddingY,x=r.alerts.input.maxWidth,k=r.alerts.input.errorFeedbackColor,B=c.backgroundColor||r.alerts.defaultBackgroundColor,w=r.alerts.input.placeholderColor;n((function(){s("poptart-input-styles","\n .poptart-native-input::placeholder {\n color: ".concat(w,";\n }\n "))}),[w]);var E={container:{width:"100%",display:"flex",flexDirection:"column",alignItems:"center",gap:"5px",zIndex:u},outer:{backgroundColor:g,borderRadius:"".concat(b,"px"),borderWidth:"".concat(C,"px"),padding:"".concat(y,"px ").concat(v,"px"),width:"100%",maxWidth:x},input:{backgroundColor:"transparent",color:h,border:"none",outline:"none",width:"100%"},errorFeedback:{color:i?k:B,fontSize:"0.8em",textAlign:"center"}};return t.createElement("div",{className:"poptart-input-container",style:E.container},t.createElement("div",{className:"poptart-form-control",style:E.outer},t.createElement("input",{className:"poptart-native-input",type:p,placeholder:f,required:m,style:E.input,value:a,onChange:function(t){l(t.target.value)},onKeyDown:function(t){"Enter"===t.key&&d()}})),t.createElement("span",{className:"poptart-error-feedback",style:E.errorFeedback},i||"."))}function b(n){var o=n.config,r=n.alert,l=n.dismissAlert,s=e(void 0),d=s[0],u=s[1],p=e(void 0),f=p[0],m=p[1],g=r.type||o.alerts.defaultType,b=o.colors[g],C=r.backgroundColor||o.alerts.defaultBackgroundColor,v=r.fontColor||o.alerts.defaultFontColor,y=r.animation||o.alerts.defaultAnimation,x=r.animationDuration||o.alerts.defaultAnimationDuration,k=void 0!==r.showCancelButton?r.showCancelButton:o.alerts.defaultShowCancelButton,B=void 0!==r.showConfirmButton?r.showConfirmButton:o.alerts.defaultShowConfirmButton,w=o.alerts.iconSizeFactor*o.alerts.defaultFontSize,E=r.confirmButtonBackgroundColor||o.alerts.defaultConfirmButtonColor,z=r.cancelButtonBackgroundColor||o.alerts.defaultCancelButtonColor,I=c({backgroundColor:E,lightColor:o.colors.textLight,darkColor:o.colors.textDark}),S=c({backgroundColor:z,lightColor:o.colors.textLight,darkColor:o.colors.textDark}),D={alert:{pointerEvents:"auto",position:"relative",backgroundColor:C,border:"".concat(o.alerts.borderWidth,"px solid ").concat(b),color:v,borderRadius:"".concat(o.alerts.borderRadius,"px"),boxShadow:"0 0 10px rgba(0, 0, 0, 0.1)",width:r.width||o.alerts.defaultWidth,minHeight:"300px",maxWidth:"90%",animation:"".concat(y," ").concat(x,"s ease-out")},title:{fontSize:"".concat(o.alerts.defaultTitleFontSize,"px"),color:b},buttonBase:{padding:"10px 20px",borderRadius:"5px",cursor:"pointer",minWidth:"80px"},titleContainer:{display:"flex",alignItems:"center",gap:"10px",zIndex:2},alertMessage:{fontSize:"".concat(o.alerts.defaultFontSize,"px"),zIndex:2},buttonGroup:{display:"flex",justifyContent:"center",gap:"16px",zIndex:2},confirmButton:{backgroundColor:r.confirmButtonBackgroundColor||o.alerts.defaultConfirmButtonColor,color:I},cancelButton:{backgroundColor:r.cancelButtonBackgroundColor||o.alerts.defaultCancelButtonColor,color:S},background:{pointerEvents:"none",position:"absolute",inset:0,opacity:.1,display:"flex",alignItems:"center",justifyContent:"start",overflow:"hidden",zIndex:1},foreground:{display:"flex",position:"relative",flexDirection:"column",alignItems:"center",justifyContent:"space-between",gap:"30px",width:"100%",minHeight:"300px",padding:"".concat(o.alerts.paddingY,"px ").concat(o.alerts.paddingX,"px")},backgroundImage:{transform:"translateX(-100px)"}},F=function(){if(m(void 0),r.input&&r.input.required&&!d)m("This field is required");else{if(r.input&&r.input.validationCallback){var t=r.input.validationCallback(d);if(!0!==t&&"string"==typeof t)return void m(t)}r.confirmButtonCallback?r.confirmButtonCallback(d):l()}},A=[];return r.additionalButtons&&"object"==typeof r.additionalButtons&&A.push.apply(A,r.additionalButtons),t.createElement("div",{className:"poptart-alert",style:D.alert,onClick:function(t){t.stopPropagation()}},t.createElement("div",{className:"poptart-alert-foreground",style:D.foreground},t.createElement("div",{className:"poptart-alert-background",style:D.background},t.createElement("div",{className:"poptart-alert-background-image",style:D.backgroundImage},t.createElement(i,{type:g,color:b,size:500}))),t.createElement("div",{style:D.titleContainer},t.createElement(i,{type:g,color:b,size:w}),t.createElement("h1",{style:D.title},r.title)),t.createElement("span",{style:D.alertMessage},r.message),r.input?t.createElement(h,{input:r.input,config:o,value:d,setValue:u,error:f,alert:r,onConfirm:F,zIndex:2}):null,t.createElement("div",{style:D.buttonGroup},B?t.createElement("button",{className:"poptart-confirm-button",style:a(a({},D.buttonBase),D.confirmButton),onClick:F},r.confirmButtonLabel||o.alerts.defaultConfirmButtonLabel):null,k||r.cancelButtonLabel||r.cancelButtonCallback||(null==r?void 0:r.input)&&!1!==r.showCancelButton?t.createElement("button",{className:"poptart-cancel-button",style:a(a({},D.buttonBase),D.cancelButton),onClick:function(){r.cancelButtonCallback?r.cancelButtonCallback():l()}},r.cancelButtonLabel||o.alerts.defaultCancelButtonLabel):null,A.map((function(e,n){return t.createElement("button",{key:n,className:"poptart-custom-button poptart-custom-button-".concat(n),style:a(a({},D.buttonBase),{backgroundColor:e.backgroundColor,color:c({backgroundColor:e.backgroundColor,lightColor:o.colors.textLight,darkColor:o.colors.textDark})}),onClick:e.onClick},e.label)})))))}function C(o){var r=o.config,l=o.currentAlert,i=o.dismissAlert,c=e(!1),s=c[0],d=c[1],u=e(!1),p=u[0],f=u[1];n((function(){l?(d(!0),setTimeout((function(){f(!0)}),200)):(f(!1),d(!1))}),[l]);var m=a({position:"fixed",inset:0,pointerEvents:"none",display:"flex",zIndex:r.zIndex+1},r.styleOverrides.container);return t.createElement("div",{className:"poptart-alert-container",style:m},s?t.createElement("div",{className:"poptart-modal",style:{pointerEvents:"auto",position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0, 0, 0, 0.5)"},onClick:function(){((null==l?void 0:l.allowClickOffDismissal)?l.allowClickOffDismissal:r.alerts.allowClickOffDismissal)&&i()}},t.createElement(t.Fragment,null,p&&l?t.createElement(b,{config:r,alert:l,dismissAlert:i}):null)):null)}var v,y,x,k,B,w={colors:{success:"#07bc0c",error:"#e74c3c",warning:"#f1c40f",info:"#3498db",loading:"#4b5155",textLight:"#fcfcfc",textDark:"#171717",invertedBackground:"#f6f6f6"},styleOverrides:{container:{},poptart:{},progressBar:{},alertContainer:{},alert:{}},defaultPoptartStyle:"default",defaultAlign:"br",defaultType:"info",defaultDuration:5e3,defaultWidth:"450px",defaultAnimation:"bounceIn",defaultAnimationDuration:.6,fontSize:16,iconSizeFactor:2.5,progressBar:{lightColor:"#D6D6D6",darkColor:"#454545",height:5},contrastThreshold:.32,paddingX:20,paddingY:16,zIndex:10,alerts:{defaultWidth:"600px",paddingX:30,paddingY:26,borderRadius:10,defaultType:"info",defaultBackgroundColor:"#ffffff",defaultFontColor:"#000",defaultFontSize:20,defaultTitleFontSize:28,iconSizeFactor:2,borderWidth:3,defaultConfirmButtonColor:"#2d2d2d",defaultCancelButtonColor:"#6B6B6B",defaultConfirmButtonLabel:"Ok",defaultCancelButtonLabel:"Cancel",defaultShowCancelButton:!1,defaultShowConfirmButton:!0,defaultAnimation:"slideFromBottom",defaultAnimationDuration:.25,allowClickOffDismissal:!0,input:{backgroundColor:"#fcfcfcac",fontColor:"#000",borderRadius:5,borderWidth:1,paddingX:10,paddingY:8,maxWidth:"70%",errorFeedbackColor:"#d12c2c",placeholderColor:"#a0a0a0"}},spinner:{strokeWidth:7,baseColor:"#f3f3f3",accentColor:"#bbbbbb",animationDuration:1}},E=o(void 0),z=function(n){var o=n.children,r=n.config,i=u(w,r||{}),s=e([]),d=s[0],p=s[1],f=e(null),m=f[0],h=f[1],b=function(t){var e=function(t){for(var e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",n="";n.length<t;){var o=new Uint8Array(t);crypto.getRandomValues(o);for(var r=0;r<o.length&&n.length<t;r++){var a=o[r];a<248&&(n+=e[a%62])}}return n}(64),n=void 0!==t.promise,o=n?"loading":t.type||i.defaultType;t.type=o;var r=c({backgroundColor:i.colors[o],lightColor:i.colors.textLight,darkColor:i.colors.textDark}),a=i.defaultDuration;if(void 0!==t.duration&&(a=t.duration),p((function(n){return l(l([],n,!0),[{id:e,props:t,expires:new Date(Date.now()+a),progress:a>0?100:0,foregroundColor:r}],!1)})),a>0&&!n&&setTimeout((function(){v(e)}),a),n){var s=t.promise;s.promise.then((function(){b({message:s.successMessage,type:"success",duration:i.defaultDuration}),v(e)})).catch((function(){b({message:s.errorMessage,type:"error",duration:i.defaultDuration}),v(e)}))}return e},v=function(t){p((function(e){return e.filter((function(e){return e.id!==t}))}))},y=function(){h(null)};return t.createElement(E.Provider,{value:{poptarts:d,config:i,currentAlert:m,push:b,promise:function(t,e,n){void 0===n&&(n=void 0);var o=a({message:t,promise:e},n);return b(o)},dismiss:v,alert:function(t){h(t)},dismissAlert:y}},o,t.createElement(g,{config:i,poptarts:d,dismiss:v}),t.createElement(C,{config:i,currentAlert:m,dismissAlert:y}))},I=function(){var t=r(E);if(!t)throw new Error("usePoptart must be used within a PoptartProvider");return t};!function(t){t.success="Success",t.error="Error",t.warning="Warning",t.info="Info",t.loading="Loading"}(v||(v={})),function(t){t.tl="Top Left",t.tc="Top Center",t.tr="Top Right",t.bl="Bottom Left",t.bc="Bottom Center",t.br="Bottom Right"}(y||(y={})),function(t){t.default="Default",t.filled="Filled",t.inverted="Inverted"}(x||(x={})),function(t){t.bounceIn="Bounce In",t.fadeIn="Fade In",t.slideFromLeft="Slide From Left",t.slideFromRight="Slide From Right",t.slideFromTop="Slide From Top",t.slideFromBottom="Slide From Bottom"}(k||(k={})),function(t){t.text="text",t.password="password",t.email="email",t.number="number",t.tel="tel",t.url="url"}(B||(B={}));export{B as E_AlertInputType,y as E_PoptartAlign,k as E_PoptartAnimation,x as E_PoptartStyle,v as E_PoptartType,z as PoptartProvider,w as defaultPoptartConfig,I as usePoptart};
//# sourceMappingURL=index.js.map