react-poptart
Version:
A simple and elegant notification toaster for React.js
3 lines (2 loc) • 19.4 kB
JavaScript
"use strict";var t=require("react"),e=function(){return e=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},e.apply(this,arguments)};function n(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 o(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 r(t){var e=t.backgroundColor,n=t.lightColor,o=t.darkColor,r=t.threshold,a=void 0===r?.38:r,i=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),l=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]}(i.r,i.g,i.b);return l>a?o:n}"function"==typeof SuppressedError&&SuppressedError;var a=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 i(t){return t&&"object"==typeof t&&!Array.isArray(t)}function l(t){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];if(!o.length)return t;var a=o.shift();return a&&Object.keys(a).forEach((function(n){var o=t[n],r=a[n];i(o)&&i(r)?t[n]=l(e({},o),r):t[n]=r})),l.apply(void 0,n([t],o,!1))}var s=function(n){var o=n.poptart,a=n.height,i=n.backgroundColor,l=n.config,s=n.colorOverride,c=null!=s?s:r({backgroundColor:i,lightColor:l.progressBar.lightColor,darkColor:l.progressBar.darkColor}),d=t.useState(100),u=d[0],p=d[1],f=o.duration||l.defaultDuration;t.useEffect((function(){setTimeout((function(){p(0)}),100)}),[]);var m=e({position:"absolute",bottom:0,left:0,height:"".concat(a,"px"),backgroundColor:c,width:"".concat(u,"%"),transition:"width ".concat(f,"ms linear")},l.styleOverrides.progressBar);return t.createElement("div",{className:"poptart-progress",style:m})};function c(e){var n=e.size,o=e.strokeWidth,r=e.baseColor,a=e.accentColor,i=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(i,"s linear infinite")}})}var d=function(n){var r=n.props,a=n.id,i=n.foregroundColor,l=n.config,d=n.dismiss,u=r.message,p=r.onClick,f=r.type||l.defaultType,m=l.colors[f],g=r.width||l.defaultWidth,x=l.fontSize,h=l.paddingX,b=l.paddingY,v=l.progressBar.height,y=(void 0!==r.duration?r.duration:l.defaultDuration)>0,C=r.animation||l.defaultAnimation,k=r.animationDuration||l.defaultAnimationDuration,B="loading"===r.type,E=y&&!B,w="default"===l.defaultPoptartStyle?"filled":l.defaultPoptartStyle,S=w;r.poptartStyle&&(S="default"===r.poptartStyle?w:r.poptartStyle);var z="inverted"===S,I=e({backgroundColor:z?l.colors.invertedBackground:m,color:z?m:i,width:g,maxWidth:"100%",paddingTop:"".concat(b,"px"),paddingLeft:"".concat(h,"px"),paddingRight:"".concat(h,"px"),paddingBottom:"".concat(b+(y?v:0),"px"),borderRadius:"10px",overflow:"hidden",cursor:"pointer",position:"relative",pointerEvents:"auto",fontSize:x,boxShadow:"0 0 10px rgba(0, 0, 0, 0.2)",border:"1px solid rgba(0, 0, 0, 0.1)",animation:"".concat(C," ").concat(k,"s ease-out")},l.styleOverrides.poptart),A={wordBreak:"break-word",hyphens:"auto",overflowWrap:"break-word",textShadow:z?"2px 2px 2px rgba(0, 0, 0, 0.1)":"2px 2px 2px rgba(0, 0, 0, 0.3)",animation:B?"beacon 1s infinite":"none"},D=x*l.iconSizeFactor;return t.createElement("div",{className:"poptart",style:I,onClick:function(){d(a),p&&p()}},t.createElement("div",{className:"poptart-inner",style:{display:"flex",alignItems:"center",gap:"10px"}},B?t.createElement(c,e({size:D,isInverted:z},l.spinner)):t.createElement("div",{className:"poptart-icon",style:{width:D}},t.createElement(o,{type:f,color:z?m:i,size:D})),t.createElement("span",{className:"poptart-message",style:A},u)),E?t.createElement(s,{poptart:r,height:l.progressBar.height,backgroundColor:m,colorOverride:z?m:void 0,config:l}):null)};var u=function(n){var o=n.config,r=n.poptarts,i=n.dismiss;t.useEffect((function(){a("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 l={};switch(o.defaultAlign){case"tl":l.justifyContent="flex-start",l.alignItems="flex-start";break;case"tc":l.justifyContent="flex-start",l.alignItems="center";break;case"tr":l.justifyContent="flex-start",l.alignItems="flex-end";break;case"bl":l.justifyContent="flex-end",l.alignItems="flex-start";break;case"bc":l.justifyContent="flex-end",l.alignItems="center";break;default:l.justifyContent="flex-end",l.alignItems="flex-end"}var s=e(e({position:"fixed",inset:0,pointerEvents:"none",display:"flex",flexDirection:"column",gap:"20px",padding:"20px",zIndex:o.zIndex+2},l),o.styleOverrides.container);return t.createElement("div",{className:"poptart-container",style:s},r.map((function(n){return t.createElement(d,e({key:n.id,dismiss:i,config:o},n))})))};function p(e){var n=e.input,o=e.config,r=e.value,i=e.setValue,l=e.error,s=e.alert,c=e.onConfirm,d=e.zIndex,u=n.type,p=n.placeholder,f=n.required,m=o.alerts.input.backgroundColor,g=o.alerts.input.fontColor,x=o.alerts.input.borderRadius,h=o.alerts.input.borderWidth,b=o.alerts.input.paddingX,v=o.alerts.input.paddingY,y=o.alerts.input.maxWidth,C=o.alerts.input.errorFeedbackColor,k=s.backgroundColor||o.alerts.defaultBackgroundColor,B=o.alerts.input.placeholderColor;t.useEffect((function(){a("poptart-input-styles","\n .poptart-native-input::placeholder {\n color: ".concat(B,";\n }\n "))}),[B]);var E={container:{width:"100%",display:"flex",flexDirection:"column",alignItems:"center",gap:"5px",zIndex:d},outer:{backgroundColor:m,borderRadius:"".concat(x,"px"),borderWidth:"".concat(h,"px"),padding:"".concat(v,"px ").concat(b,"px"),width:"100%",maxWidth:y},input:{backgroundColor:"transparent",color:g,border:"none",outline:"none",width:"100%"},errorFeedback:{color:l?C:k,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:u,placeholder:p,required:f,style:E.input,value:r,onChange:function(t){i(t.target.value)},onKeyDown:function(t){"Enter"===t.key&&c()}})),t.createElement("span",{className:"poptart-error-feedback",style:E.errorFeedback},l||"."))}function f(n){var a=n.config,i=n.alert,l=n.dismissAlert,s=t.useState(void 0),c=s[0],d=s[1],u=t.useState(void 0),f=u[0],m=u[1],g=i.type||a.alerts.defaultType,x=a.colors[g],h=i.backgroundColor||a.alerts.defaultBackgroundColor,b=i.fontColor||a.alerts.defaultFontColor,v=i.animation||a.alerts.defaultAnimation,y=i.animationDuration||a.alerts.defaultAnimationDuration,C=void 0!==i.showCancelButton?i.showCancelButton:a.alerts.defaultShowCancelButton,k=void 0!==i.showConfirmButton?i.showConfirmButton:a.alerts.defaultShowConfirmButton,B=a.alerts.iconSizeFactor*a.alerts.defaultFontSize,E=i.confirmButtonBackgroundColor||a.alerts.defaultConfirmButtonColor,w=i.cancelButtonBackgroundColor||a.alerts.defaultCancelButtonColor,S=r({backgroundColor:E,lightColor:a.colors.textLight,darkColor:a.colors.textDark}),z=r({backgroundColor:w,lightColor:a.colors.textLight,darkColor:a.colors.textDark}),I={alert:{pointerEvents:"auto",position:"relative",backgroundColor:h,border:"".concat(a.alerts.borderWidth,"px solid ").concat(x),color:b,borderRadius:"".concat(a.alerts.borderRadius,"px"),boxShadow:"0 0 10px rgba(0, 0, 0, 0.1)",width:i.width||a.alerts.defaultWidth,minHeight:"300px",maxWidth:"90%",animation:"".concat(v," ").concat(y,"s ease-out")},title:{fontSize:"".concat(a.alerts.defaultTitleFontSize,"px"),color:x},buttonBase:{padding:"10px 20px",borderRadius:"5px",cursor:"pointer",minWidth:"80px"},titleContainer:{display:"flex",alignItems:"center",gap:"10px",zIndex:2},alertMessage:{fontSize:"".concat(a.alerts.defaultFontSize,"px"),zIndex:2},buttonGroup:{display:"flex",justifyContent:"center",gap:"16px",zIndex:2},confirmButton:{backgroundColor:i.confirmButtonBackgroundColor||a.alerts.defaultConfirmButtonColor,color:S},cancelButton:{backgroundColor:i.cancelButtonBackgroundColor||a.alerts.defaultCancelButtonColor,color:z},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(a.alerts.paddingY,"px ").concat(a.alerts.paddingX,"px")},backgroundImage:{transform:"translateX(-100px)"}},A=function(){if(m(void 0),i.input&&i.input.required&&!c)m("This field is required");else{if(i.input&&i.input.validationCallback){var t=i.input.validationCallback(c);if(!0!==t&&"string"==typeof t)return void m(t)}i.confirmButtonCallback?i.confirmButtonCallback(c):l()}},D=[];return i.additionalButtons&&"object"==typeof i.additionalButtons&&D.push.apply(D,i.additionalButtons),t.createElement("div",{className:"poptart-alert",style:I.alert,onClick:function(t){t.stopPropagation()}},t.createElement("div",{className:"poptart-alert-foreground",style:I.foreground},t.createElement("div",{className:"poptart-alert-background",style:I.background},t.createElement("div",{className:"poptart-alert-background-image",style:I.backgroundImage},t.createElement(o,{type:g,color:x,size:500}))),t.createElement("div",{style:I.titleContainer},t.createElement(o,{type:g,color:x,size:B}),t.createElement("h1",{style:I.title},i.title)),t.createElement("span",{style:I.alertMessage},i.message),i.input?t.createElement(p,{input:i.input,config:a,value:c,setValue:d,error:f,alert:i,onConfirm:A,zIndex:2}):null,t.createElement("div",{style:I.buttonGroup},k?t.createElement("button",{className:"poptart-confirm-button",style:e(e({},I.buttonBase),I.confirmButton),onClick:A},i.confirmButtonLabel||a.alerts.defaultConfirmButtonLabel):null,C||i.cancelButtonLabel||i.cancelButtonCallback||(null==i?void 0:i.input)&&!1!==i.showCancelButton?t.createElement("button",{className:"poptart-cancel-button",style:e(e({},I.buttonBase),I.cancelButton),onClick:function(){i.cancelButtonCallback?i.cancelButtonCallback():l()}},i.cancelButtonLabel||a.alerts.defaultCancelButtonLabel):null,D.map((function(n,o){return t.createElement("button",{key:o,className:"poptart-custom-button poptart-custom-button-".concat(o),style:e(e({},I.buttonBase),{backgroundColor:n.backgroundColor,color:r({backgroundColor:n.backgroundColor,lightColor:a.colors.textLight,darkColor:a.colors.textDark})}),onClick:n.onClick},n.label)})))))}function m(n){var o=n.config,r=n.currentAlert,a=n.dismissAlert,i=t.useState(!1),l=i[0],s=i[1],c=t.useState(!1),d=c[0],u=c[1];t.useEffect((function(){r?(s(!0),setTimeout((function(){u(!0)}),200)):(u(!1),s(!1))}),[r]);var p=e({position:"fixed",inset:0,pointerEvents:"none",display:"flex",zIndex:o.zIndex+1},o.styleOverrides.container);return t.createElement("div",{className:"poptart-alert-container",style:p},l?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==r?void 0:r.allowClickOffDismissal)?r.allowClickOffDismissal:o.alerts.allowClickOffDismissal)&&a()}},t.createElement(t.Fragment,null,d&&r?t.createElement(f,{config:o,alert:r,dismissAlert:a}):null)):null)}var g,x,h,b,v,y={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}},C=t.createContext(void 0);exports.E_PoptartType=void 0,(g=exports.E_PoptartType||(exports.E_PoptartType={})).success="Success",g.error="Error",g.warning="Warning",g.info="Info",g.loading="Loading",exports.E_PoptartAlign=void 0,(x=exports.E_PoptartAlign||(exports.E_PoptartAlign={})).tl="Top Left",x.tc="Top Center",x.tr="Top Right",x.bl="Bottom Left",x.bc="Bottom Center",x.br="Bottom Right",exports.E_PoptartStyle=void 0,(h=exports.E_PoptartStyle||(exports.E_PoptartStyle={})).default="Default",h.filled="Filled",h.inverted="Inverted",exports.E_PoptartAnimation=void 0,(b=exports.E_PoptartAnimation||(exports.E_PoptartAnimation={})).bounceIn="Bounce In",b.fadeIn="Fade In",b.slideFromLeft="Slide From Left",b.slideFromRight="Slide From Right",b.slideFromTop="Slide From Top",b.slideFromBottom="Slide From Bottom",exports.E_AlertInputType=void 0,(v=exports.E_AlertInputType||(exports.E_AlertInputType={})).text="text",v.password="password",v.email="email",v.number="number",v.tel="tel",v.url="url",exports.PoptartProvider=function(o){var a=o.children,i=o.config,s=l(y,i||{}),c=t.useState([]),d=c[0],p=c[1],f=t.useState(null),g=f[0],x=f[1],h=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),o=void 0!==t.promise,a=o?"loading":t.type||s.defaultType;t.type=a;var i=r({backgroundColor:s.colors[a],lightColor:s.colors.textLight,darkColor:s.colors.textDark}),l=s.defaultDuration;if(void 0!==t.duration&&(l=t.duration),p((function(o){return n(n([],o,!0),[{id:e,props:t,expires:new Date(Date.now()+l),progress:l>0?100:0,foregroundColor:i}],!1)})),l>0&&!o&&setTimeout((function(){b(e)}),l),o){var c=t.promise;c.promise.then((function(){h({message:c.successMessage,type:"success",duration:s.defaultDuration}),b(e)})).catch((function(){h({message:c.errorMessage,type:"error",duration:s.defaultDuration}),b(e)}))}return e},b=function(t){p((function(e){return e.filter((function(e){return e.id!==t}))}))},v=function(){x(null)};return t.createElement(C.Provider,{value:{poptarts:d,config:s,currentAlert:g,push:h,promise:function(t,n,o){void 0===o&&(o=void 0);var r=e({message:t,promise:n},o);return h(r)},dismiss:b,alert:function(t){x(t)},dismissAlert:v}},a,t.createElement(u,{config:s,poptarts:d,dismiss:b}),t.createElement(m,{config:s,currentAlert:g,dismissAlert:v}))},exports.defaultPoptartConfig=y,exports.usePoptart=function(){var e=t.useContext(C);if(!e)throw new Error("usePoptart must be used within a PoptartProvider");return e};
//# sourceMappingURL=index.js.map