reapop
Version:
A simple & customizable notifications system for React
3 lines (2 loc) • 19.4 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var t,i=require("react"),n=(t=i)&&"object"==typeof t&&"default"in t?t.default:t,e=require("react-transition-group"),o={defaultProps:{},customizeNotification:null,generateId:null},r=Object.freeze({none:"none",info:"info",success:"success",loading:"loading",warning:"warning",error:"error"}),a=Object.freeze({topCenter:"top-center",topLeft:"top-left",topRight:"top-right",bottomCenter:"bottom-center",bottomLeft:"bottom-left",bottomRight:"bottom-right"}),c=i.createContext({}),s=i.createContext(void 0),f=function(){return i.useContext(s)};function u(){return(u=Object.assign?Object.assign.bind():function(t){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e])}return t}).apply(this,arguments)}function l(t,i){if(null==t)return{};var n,e,o={},r=Object.keys(t);for(e=0;e<r.length;e++)i.indexOf(n=r[e])>=0||(o[n]=t[n]);return o}var p,d=function(){function t(t,i){this.remainingTime=t,this.callback=i}var i=t.prototype;return i.pause=function(){clearTimeout(this.timerId),this.remainingTime-=(new Date).getTime()-this.start.getTime()},i.resume=function(){this.start=new Date,clearTimeout(this.timerId),this.timerId=setTimeout(this.callback,this.remainingTime)},t}(),m=function t(i){if("object"!=typeof i||null===i)return i;if(Array.isArray(i))return i.map((function(i){return t(i)}));var n={};for(var e in i)n[e]=t(i[e]);return n},x=function(t){return!!t&&t.constructor===Object},g=function(){},h=["children","notification","nodeRef"],b=function(t){var i=t.duration||300,o=t.children,r=t.notification,c=t.nodeRef,s=l(t,h),f=function(){return c.current},p=[a.topCenter,a.bottomCenter].includes(r.position)?"translateY":"translateX",d=[a.topCenter,a.topLeft,a.bottomLeft].includes(r.position)?"-100%":"100%",m={fill:"forwards",duration:i};return n.createElement(e.Transition,u({nodeRef:c,onEnter:function(){f().animate([{transform:p+"("+d+")",opacity:0},{transform:p+"(0)",opacity:1}],m)},onExit:function(){var t=i;f().animate([{transform:p+"("+d+")",opacity:0}],m),f().animate([{maxHeight:"150px"},{margin:0,maxHeight:0}],u({},m,{duration:250,delay:t}))},timeout:i+250},s),o)},v=function(t){var i=t.theme,e=t.notification.status,o={style:i?i.notificationIcon(t.notification):{},className:"reapop__notification-icon"};switch(e){case r.none:return null;case r.info:return n.createElement("svg",u({viewBox:"0 0 16 16",fill:"currentColor"},o),n.createElement("path",{fillRule:"evenodd",d:"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"}));case r.loading:return n.createElement("svg",u({viewBox:"5 5 40 40",fill:"currentColor"},o),n.createElement("path",{d:"M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"},n.createElement("animateTransform",{attributeType:"xml",attributeName:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.5s",repeatCount:"indefinite"})));case r.success:return n.createElement("svg",u({viewBox:"0 0 16 16",fill:"currentColor"},o),n.createElement("path",{fillRule:"evenodd",d:"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"}));case r.warning:return n.createElement("svg",u({viewBox:"0 0 16 16",fill:"currentColor"},o),n.createElement("path",{fillRule:"evenodd",d:"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"}));case r.error:return n.createElement("svg",u({viewBox:"0 0 16 16",fill:"currentColor"},o),n.createElement("path",{fillRule:"evenodd",d:"M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zm-6.106 4.5a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"}))}},w=function(t){var i=t.theme,e=t.dismissNotification,o=i?i.notificationDismissIcon(t.notification):{};return n.createElement("svg",{className:"reapop__notification-dismiss-icon",style:o,onClick:e,viewBox:"4 4 8 8",fill:"currentColor","data-testid":"dismiss-icon"},n.createElement("path",{fillRule:"evenodd",d:"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"}))},y=function(t){var e=t.notification,o=t.theme,r=t.position,a=t.button,c=i.useState(!1),s=c[0],f=c[1],u=i.useState(!1),l=u[1],p={isHovered:s,isActive:u[0]},d=o?o.notificationButton(e,r,p):{},m=o?o.notificationButtonText(e,r,p):{};return n.createElement("button",{"data-testid":"button",style:d,className:"reapop__notification-button",onMouseLeave:function(){return f(!1)},onMouseEnter:function(){return f(!0)},onMouseDown:function(){return l(!0)},onMouseUp:function(){return l(!1)},onClick:"function"==typeof a.onClick?function(){return a.onClick()}:g},n.createElement("span",{className:"reapop__notification-button-text",style:m},a.primary?n.createElement("b",null,a.name):a.name))},E=function(t){var i=t.notification,e=f(),o=e?e.notificationImageContainer(i):{},r=e?e.notificationImage(i):{};return n.createElement("div",{className:"reapop__notification-image-container",style:o},n.createElement("span",{className:"reapop__notification-image",style:u({},r,{backgroundImage:"url("+i.image+")"})}))},S=function(t){var i,e=t.notification,o=t.dismissNotification,r=t.theme,a=t.components,c=e.id,s=e.title,f=e.message,u=e.dismissible,l=e.showDismissButton,p=e.buttons,d=e.allowHTML,m=e.image,x=["reapop__notification","reapop__notification--"+(i=e).status,"reapop__notification--buttons-"+i.buttons.length,i.dismissible?"reapop__notification--dismissible":""],g=r?r.notification(e):{},h=r?r.notificationMeta(e):{},b=r?r.notificationTitle(e):{},S=r?r.notificationMessage(e):{},N=r?r.notificationButtons(e):{},z=a.NotificationIcon||v,_=function(){return o(c)};return n.createElement("div",{"data-testid":"notification",role:"alert",style:g,className:x.join(" "),onClick:u&&!l?_:void 0},n.createElement(z,{theme:r,notification:e}),m&&n.createElement(E,{notification:e}),n.createElement("div",{style:h,className:"reapop__notification-meta"},s&&(d?n.createElement("h4",{style:b,className:"reapop__notification-title",dangerouslySetInnerHTML:{__html:s}}):n.createElement("h4",{style:b,className:"reapop__notification-title"},s)),f&&(d?n.createElement("div",{style:S,className:"reapop__notification-message",dangerouslySetInnerHTML:{__html:f}}):n.createElement("div",{style:S,className:"reapop__notification-message"},f))),u&&l&&n.createElement(w,{notification:e,theme:r,dismissNotification:_}),p.length?n.createElement("div",{onClick:_,className:"reapop__notification-buttons",style:N},p.map((function(t,i){return n.createElement(y,{key:t.name,position:i,button:t,notification:e,theme:r})}))):null)},N=["notification","dismissNotification"],z=function(t){var e=t.notification,o=t.dismissNotification,r=l(t,N),a=e.dismissAfter,s=e.onAdd,p=e.onDismiss,m=i.useContext(c),x=f(),g=m.Transition||b,h=m.Notification||S,v=i.useState(null),w=v[0],y=v[1],E=i.useRef(null);return i.useEffect((function(){return s&&s(),function(){p&&p()}}),[]),i.useEffect((function(){if(!w&&a&&a>0){var t=new d(a,(function(){return o(e.id)}));t.resume(),y(t)}else w&&!a&&(w.pause(),y(null))}),[a]),n.createElement(g,u({notification:e,nodeRef:E},r),n.createElement("div",{ref:E,"data-testid":"timed-notification",onMouseEnter:w?function(){return w.pause()}:void 0,onMouseLeave:w?function(){return w.resume()}:void 0},n.createElement(h,{notification:e,theme:x,dismissNotification:function(){return o(e.id)},components:m})))},_=function(t){var i=t.position,o=t.dismissNotification,r=t.singleContainer,c=f(),s=c?c.container(i,r):{},u=function(t,i){var n=["reapop__container","reapop__container--"+t];return i&&n.push("reapop__container--single"),n}(i,r),l=t.notifications;return[a.bottomRight,a.bottomCenter,a.bottomLeft].includes(i)&&(l=l.slice().reverse()),n.createElement("div",{style:s,className:u.join(" ")},n.createElement(e.TransitionGroup,{component:null},l.map((function(t){return n.createElement(z,{key:t.id,notification:t,dismissNotification:o})}))))};!function(t){t.UpsertNotification="reapop/upsertNotification",t.DismissNotification="reapop/dismissNotification",t.DismissNotifications="reapop/dismissNotifications"}(p||(p={}));var C,T,k,L,I=[],R=function(){return function(t,i){switch(void 0===t&&(t=I),i.type){case p.UpsertNotification:var n=m(i.payload);return~t.findIndex((function(t){return t.id===n.id}))?t.map((function(t){return t.id===n.id?n:t})):[].concat(t,[n]);case p.DismissNotification:var e=i.payload;return t.filter((function(t){return t.id!==e}));case p.DismissNotifications:return[];default:return t}}},H=function(t){var i=m(t),n=u({},o.defaultProps,{status:r.none,buttons:[]});return void 0===i.id&&(i.id=o.generateId?o.generateId(t):Math.random().toString(36).slice(2,7)),Object.entries(n).map((function(t){var n=t[0];void 0===i[n]&&(i[n]=t[1])})),"function"==typeof o.customizeNotification&&o.customizeNotification(i),i},M=function(t){return{type:p.DismissNotification,payload:t}},B=function(){return{type:p.DismissNotifications}},A=function(){var t,i=(t=arguments.length-1)<0||arguments.length<=t?void 0:arguments[t],n={};return"string"==typeof(arguments.length<=0?void 0:arguments[0])&&(n.message=arguments.length<=0?void 0:arguments[0]),"string"==typeof(arguments.length<=1?void 0:arguments[1])&&(n.status=arguments.length<=1?void 0:arguments[1]),x(i)&&(n=u({},n,i)),{type:p.UpsertNotification,payload:H(n)}},D=i.createContext(void 0),O=["children","nodeRef"],j=["children","nodeRef"],W=((C={})[a.topCenter]={top:"20px",left:"50%",transform:"translateX(-50%)"},C[a.topRight]={top:"20px",right:"20px"},C[a.topLeft]={top:"20px",left:"20px"},C[a.bottomCenter]={bottom:"20px",left:"50%",transform:"translateX(-50%)"},C[a.bottomRight]={bottom:"20px",right:"20px"},C[a.bottomLeft]={bottom:"20px",left:"20px"},C),P={container:function(t){return u({position:"fixed",zIndex:999999},W[t])}},U=((T={})[r.none]="#ffffff",T[r.info]="#4192ff",T[r.loading]="#4192ff",T[r.success]="#32d38b",T[r.warning]="#f5aa0a",T[r.error]="#E94C58",T),X=u({},P,{notification:function(t){return{display:"flex",width:"350px",height:"100%",position:"relative",borderRadius:"5px",border:"1px solid rgba(0,0,0,.1)",boxShadow:"0 3px 8px 2px rgba(0, 0, 0, 0.3)",backgroundColor:"#2f2f36",color:"#ffffff",marginBottom:"20px",cursor:t.dismissible&&!t.showDismissButton?"pointer":"",zIndex:999}},notificationIcon:function(t){return{display:t.image?"none":"flex",width:"20px",height:"20px",boxSizing:"border-box",margin:"10px 0 10px 15px",alignSelf:"flex-start",flexShrink:0,color:U[t.status]}},notificationDismissIcon:function(){return{width:"12px",height:"12px",margin:"14px 10px",cursor:"pointer",color:"#b9c2cb",flexShrink:0}},notificationMeta:function(){return{verticalAlign:"top",boxSizing:"border-box",width:"100%",padding:"10px 20px"}},notificationTitle:function(t){return{margin:t.message?"0 0 10px":0,fontSize:"14px",color:"#ffffff",fontWeight:700,lineHeight:1.428571429}},notificationMessage:function(){return{margin:0,fontSize:"14px",color:"#b9c2cb",lineHeight:1.428571429}},notificationImageContainer:function(){return{boxSizing:"border-box",padding:"10px 0 10px 15px"}},notificationImage:function(){return{display:"inline-flex",borderRadius:"40px",width:"40px",height:"40px",backgroundSize:"cover"}},notificationButtons:function(){return{}},notificationButton:function(t,i,n){return{display:"block",width:"100%",height:100/t.buttons.length+"%",minHeight:"40px",boxSizing:"border-box",padding:0,background:"#2f2f36",border:"none",borderRadius:0,borderLeft:"1px solid #464c5f",outline:"none",textAlign:"center",color:n.isHovered||n.isActive?"#349ef3":"#ffffff",cursor:"pointer",borderTop:1===i?"1px solid #464c5f":"none"}},notificationButtonText:function(){return{display:"block",height:"25px",padding:"0 15px",minWidth:"90px",maxWidth:"150px",width:"auto",whiteSpace:"nowrap",overflow:"hidden",margin:"0 auto",textOverflow:"ellipsis",textAlign:"center",fontSize:"14px",lineHeight:"25px"}}}),q=((k={})[r.none]="#ffffff",k[r.info]="#349ef3",k[r.loading]="#349ef3",k[r.success]="#4dc657",k[r.warning]="#f5aa0a",k[r.error]="#f5311d",k),G=u({},P,{notification:function(t){return{display:"flex",width:"370px",height:"100%",position:"relative",borderRadius:"8px",border:"none",boxShadow:"0 1px 3px -1px rgba(0, 0, 0, 0.3)",zIndex:999,backgroundColor:"#ffffff",color:"#524c4c",borderLeft:"2px solid",marginBottom:"20px",borderLeftColor:q[t.status],cursor:t.dismissible&&!t.showDismissButton?"pointer":""}},notificationIcon:function(t){return{display:t.image?"none":"flex",width:"20px",height:"20px",boxSizing:"border-box",margin:"10px 0 10px 15px",alignSelf:"flex-start",flexShrink:0,color:q[t.status]}},notificationDismissIcon:function(){return{width:"12px",height:"12px",margin:"14px 10px",cursor:"pointer",color:"#524c4c",flexShrink:0}},notificationMeta:function(){return{verticalAlign:"top",boxSizing:"border-box",width:"100%",padding:"10px 20px"}},notificationTitle:function(t){return{margin:t.message?"0 0 10px":0,fontSize:"14px",fontWeight:700,lineHeight:1.428571429}},notificationMessage:function(){return{margin:0,fontSize:"14px",lineHeight:1.428571429}},notificationImageContainer:function(){return{boxSizing:"border-box",padding:"10px 0 10px 15px"}},notificationImage:function(){return{display:"inline-flex",borderRadius:"40px",width:"40px",height:"40px",backgroundSize:"cover"}},notificationButtons:function(){return{}},notificationButton:function(t,i,n){return{display:"block",width:"100%",height:100/t.buttons.length+"%",minHeight:"40px",boxSizing:"border-box",padding:0,background:"none",border:"none",borderRadius:0,borderLeft:"1px solid rgba(0, 0, 0, 0.09)",outline:"none",textAlign:"center",color:n.isHovered?"#349ef3":n.isActive?"#228ee5":"#524c4c",cursor:"pointer",borderTop:1===i?"1px solid rgba(0, 0, 0, 0.09)":"none"}},notificationButtonText:function(){return{display:"block",height:"25px",padding:"0 15px",minWidth:"90px",maxWidth:"150px",width:"auto",whiteSpace:"nowrap",overflow:"hidden",margin:"0 auto",textOverflow:"ellipsis",textAlign:"center",fontSize:"14px",lineHeight:"25px"}}}),F=((L={})[r.none]="#ffffff",L[r.info]="#007bff",L[r.loading]="#007bff",L[r.success]="#28a745",L[r.warning]="#ffc107",L[r.error]="#dc3545",L),V=u({},P,{notification:function(t){return{display:"flex",width:"350px",height:"100%",position:"relative",borderRadius:"4px",border:"1px solid rgba(0,0,0,.1)",boxShadow:"0 0.25rem 0.75rem rgba(0,0,0,.1)",zIndex:999,backgroundColor:"#ffffff",color:"#524c4c",marginBottom:"20px",cursor:t.dismissible&&!t.showDismissButton?"pointer":""}},notificationIcon:function(t){return{display:t.image?"none":"flex",width:"20px",height:"20px",boxSizing:"border-box",margin:"10px 0 10px 15px",alignSelf:"flex-start",flexShrink:0,color:F[t.status]}},notificationDismissIcon:function(){return{width:"12px",height:"12px",margin:"14px 10px",cursor:"pointer",color:"#524c4c",flexShrink:0}},notificationMeta:function(){return{verticalAlign:"top",boxSizing:"border-box",width:"100%",padding:"10px 20px"}},notificationTitle:function(t){return{margin:t.message?"0 0 10px":0,fontSize:"14px",color:"#6c757d",fontWeight:700,lineHeight:1.428571429}},notificationMessage:function(){return{margin:0,fontSize:"14px",color:"#212529",lineHeight:1.428571429}},notificationImageContainer:function(){return{boxSizing:"border-box",padding:"10px 0 10px 15px"}},notificationImage:function(){return{display:"inline-flex",borderRadius:"40px",width:"40px",height:"40px",backgroundSize:"cover"}},notificationButtons:function(){return{}},notificationButton:function(t,i,n){return{display:"block",width:"100%",height:100/t.buttons.length+"%",minHeight:"40px",boxSizing:"border-box",padding:0,background:"none",border:"none",borderRadius:0,borderLeft:"1px solid rgba(0,0,0,.1)",outline:"none",textAlign:"center",color:n.isHovered||n.isActive?"#007bff":"#212529",cursor:"pointer",borderTop:1===i?"1px solid rgba(0, 0, 0, 0.09)":"none"}},notificationButtonText:function(){return{display:"block",height:"25px",padding:"0 15px",minWidth:"90px",maxWidth:"150px",width:"auto",whiteSpace:"nowrap",overflow:"hidden",margin:"0 auto",textOverflow:"ellipsis",textAlign:"center",fontSize:"14px",lineHeight:"25px"}}});exports.FadeTransition=function(t){var i=t.duration||300,o=t.children,r=t.nodeRef,a=l(t,O),c=function(){return r.current},s={fill:"forwards",duration:i};return n.createElement(e.Transition,u({nodeRef:r,onEnter:function(){c().animate([{opacity:0},{opacity:1}],s)},onExit:function(){c().animate([{maxHeight:"150px"},{opacity:0,maxHeight:0,margin:0}],s)},timeout:i+100},a),o)},exports.GrowTransition=function(t){var i=t.duration||300,o=t.children,r=t.nodeRef,a=l(t,j),c=function(){return r.current},s={fill:"forwards",duration:i};return n.createElement(e.Transition,u({nodeRef:r,onEnter:function(){c().animate([{transform:"scale(0.6)",opacity:0},{transform:"scale(1)",opacity:1}],s)},onExit:function(){var t=i;c().animate([{transform:"scale(0.6)",opacity:0}],s),c().animate([{maxHeight:"150px"},{margin:0,maxHeight:0}],{fill:"forwards",duration:t,delay:t})},timeout:i+250},a),o)},exports.NotificationsProvider=function(t){var e=i.useReducer(R(),[]),o=e[1],r={notifications:e[0],notify:i.useCallback((function(){var t=A.apply(void 0,arguments);return o(t),t.payload}),[o]),dismissNotification:i.useCallback((function(t){return o(M(t))}),[o]),dismissNotifications:i.useCallback((function(){return o(B())}),[o])};return n.createElement(D.Provider,{value:r},t.children)},exports.POSITIONS=a,exports.STATUSES=r,exports.SlideTransition=b,exports.atalhoTheme=X,exports.baseTheme=P,exports.bootstrapTheme=V,exports.default=function(t){var e=t.smallScreenBreakpoint||768,o=t.theme,r=t.components||{},f=t.notifications,u=t.dismissNotification,l=i.useState("undefined"==typeof window?0:window.innerWidth),p=l[1],d=l[0]<e,m=d?[a.topCenter]:Object.values(a);return i.useEffect((function(){p(window.innerWidth);var t=function(){return p(window.innerWidth)};return window.addEventListener("resize",t),function(){window.removeEventListener("resize",t)}}),[]),n.createElement(c.Provider,{value:r},n.createElement(s.Provider,{value:o},n.createElement("div",null,m.map((function(t){return n.createElement(_,{key:t,position:t,notifications:f.filter((function(i){return d||t===i.position})),dismissNotification:u,singleContainer:d})})))))},exports.dismissNotification=M,exports.dismissNotifications=B,exports.notify=A,exports.reducer=R,exports.setUpNotifications=function(t){for(var i in t)o[i]=t[i]},exports.useNotifications=function(){return i.useContext(D)},exports.wyboTheme=G;
//# sourceMappingURL=reapop.cjs.production.min.js.map