ndd-react
Version:
A lightweight, customizable toast notification library for React applications
3 lines (2 loc) • 4.89 kB
JavaScript
var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/*#__PURE__*/t(e);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},r.apply(null,arguments)}var n={toasts:[]},o=e.createContext(null);function l(e,t){switch(t.type){case"ADD_TOAST":return r({},e,{toasts:[].concat(e.toasts,[t.toast])});case"REMOVE_TOAST":return r({},e,{toasts:e.toasts.filter(function(e){return e.id!==t.id})});default:return e}}var s=function(){var t=e.useContext(o);if(!t)throw new Error("useToast must be used within a ToastProvider");return t},u={success:a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},a.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})),error:a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},a.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})),warning:a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},a.default.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"})),info:a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},a.default.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z",clipRule:"evenodd"}))},i={success:"Success!",error:"Error!",warning:"Warning!",info:"Information"},c=function(t){var r=t.id,n=t.message,o=t.type,l=void 0===o?"info":o,s=t.onRemove,c=e.useRef(null),d=e.useRef(null);return e.useEffect(function(){var e=setTimeout(function(){d.current&&(d.current.style.animation="none"),c.current&&(c.current.classList.remove("toast-enter"),c.current.classList.add("toast-exit")),setTimeout(function(){return s(r)},300)},3500);return function(){return clearTimeout(e)}},[r,s]),a.default.createElement("div",{ref:c,className:"toast toast-"+l+" toast-enter",id:"toast-"+r},a.default.createElement("div",{ref:d,className:"progress-bar progress-"+l}),a.default.createElement("div",{className:"toast-content"},a.default.createElement("div",{className:"icon-circle icon-"+l},a.default.createElement("div",{className:"icon-core"},u[l])),a.default.createElement("div",{className:"toast-text"},a.default.createElement("h3",{className:"toast-title"},i[l]),a.default.createElement("p",{className:"toast-message"},n)),a.default.createElement("button",{onClick:function(e){e.stopPropagation(),d.current&&(d.current.style.animation="none"),c.current&&(c.current.classList.remove("toast-enter"),c.current.classList.add("toast-exit")),setTimeout(function(){return s(r)},300)},className:"toast-close"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},a.default.createElement("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})))))};exports.ToastContainer=function(){var e=s(),t=e.state,n=e.removeToast;return a.default.createElement(a.default.Fragment,null,Array.from(new Set(t.toasts.map(function(e){return e.position||"top-right"}))).map(function(e){return a.default.createElement("div",{key:e,className:"toast-container "+e},function(e){return t.toasts.filter(function(t){return(t.position||"top-right")===e})}(e).map(function(e){return a.default.createElement(c,r({key:e.id},e,{onRemove:n}))}))}))},exports.ToastProvider=function(t){var s=t.children,u=e.useReducer(l,n),i=u[0],c=u[1],d=e.useCallback(function(e){var t=Math.random().toString(36).substr(2,9);c({type:"ADD_TOAST",toast:r({},e,{id:t})}),Infinity!==e.duration&&setTimeout(function(){c({type:"REMOVE_TOAST",id:t})},e.duration||3e3)},[]),f=e.useCallback(function(e){c({type:"REMOVE_TOAST",id:e})},[]);return a.default.createElement(o.Provider,{value:{state:i,addToast:d,removeToast:f}},s)},exports.useToast=s;
//# sourceMappingURL=index.js.map