react-notistack
Version:
A beautiful standalone snackbar for react
1 lines • 18.3 kB
JavaScript
module.exports=function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=4)}([function(e,n){e.exports=require("react")},function(e,n,t){"use strict";var r=t(3),o=t.n(r)()((function(e){return e[1]}));o.push([e.i,".__snackbar_container{position:fixed;display:flex;flex-direction:column;width:max-content;max-width:100%;pointer-events:none}.__snackbar_container>:not(:last-child){margin-bottom:.75rem}.__snackbar_container .snackbar{margin-bottom:10px}.__snackbar_container .clickable{cursor:pointer}.__snackbar_container button.close{opacity:.8;color:#fefefe}.__snackbar_container button.close span{color:#fefefe}.__snackbar_container.anchorOriginTopCenter{top:10px;left:0;right:0;width:100%;justify-content:flex-start;align-items:center}.__snackbar_container.anchorOriginBottomCenter{bottom:10px;left:0;right:0;width:100%;justify-content:flex-end;align-items:center}.__snackbar_container.anchorOriginTopRight{top:10px;right:10px}.__snackbar_container.anchorOriginBottomRight{bottom:10px;right:10px}.__snackbar_container.anchorOriginTopLeft{top:10px;left:10px}.__snackbar_container.anchorOriginBottomLeft{bottom:10px;left:10px}.__snackbar_container .snack{width:350px;max-width:100%;font-size:.875rem;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(34,34,34,.15);border-radius:4px;transition:all .3s ease-in-out}.__snackbar_container .snack:not(.showing):not(.show){opacity:0;visibility:hidden}.__snackbar_container .snack.show{opacity:1;visibility:visible}.__snackbar_container .snack.no-body .snack-header{border-bottom:none;border-radius:3px}.__snackbar_container .snack .snack-header{display:flex;align-items:center;padding:.5rem .75rem;color:#4c535a;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:3px;border-top-right-radius:3px}.__snackbar_container .snack .snack-header svg,.__snackbar_container .snack .snack-header img.icon{width:20px;height:20px;border-radius:4px;margin-right:8px}.__snackbar_container .snack .snack-header strong{margin-right:auto}.__snackbar_container .snack .snack-header .close-btn{margin-right:-0.375rem;margin-left:.75rem;float:right;font-size:1.5rem;font-weight:500;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;outline:none}.__snackbar_container .snack .snack-header .close-btn:focus,.__snackbar_container .snack .snack-header .close-btn:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.75}.__snackbar_container .snack .snack-body{padding:.75rem;word-wrap:break-word}.__snackbar_container .snack.snack-default{background-color:#fff;color:#222}.__snackbar_container .snack.snack-default svg{color:#fff}.__snackbar_container .snack.snack-success{background-color:#43a047;color:#fff}.__snackbar_container .snack.snack-success svg{color:#43a047}.__snackbar_container .snack.snack-error{background-color:#d32f2f;color:#fff}.__snackbar_container .snack.snack-error svg{color:#d32f2f}.__snackbar_container .snack.snack-info{background-color:#2196f3;color:#fff}.__snackbar_container .snack.snack-info svg{color:#2196f3}.__snackbar_container .snack.snack-warning{background-color:#ff9800;color:#fff}.__snackbar_container .snack.snack-warning svg{color:#ff9800}",""]),n.a=o},function(e,n,t){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[n]=t}return e[n]}}(),c=[];function i(e){for(var n=-1,t=0;t<c.length;t++)if(c[t].identifier===e){n=t;break}return n}function s(e,n){for(var t={},r=[],o=0;o<e.length;o++){var a=e[o],s=n.base?a[0]+n.base:a[0],u=t[s]||0,l="".concat(s," ").concat(u);t[s]=u+1;var f=i(l),b={css:a[1],media:a[2],sourceMap:a[3]};-1!==f?(c[f].references++,c[f].updater(b)):c.push({identifier:l,updater:h(b,n),references:1}),r.push(l)}return r}function u(e){var n=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=t.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){n.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(n);else{var c=a(e.insert||"head");if(!c)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");c.appendChild(n)}return n}var l,f=(l=[],function(e,n){return l[e]=n,l.filter(Boolean).join("\n")});function b(e,n,t,r){var o=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=f(n,o);else{var a=document.createTextNode(o),c=e.childNodes;c[n]&&e.removeChild(c[n]),c.length?e.insertBefore(a,c[n]):e.appendChild(a)}}function p(e,n,t){var r=t.css,o=t.media,a=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var d=null,y=0;function h(e,n){var t,r,o;if(n.singleton){var a=y++;t=d||(d=u(n)),r=b.bind(null,t,a,!1),o=b.bind(null,t,a,!0)}else t=u(n),r=p.bind(null,t,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=o());var t=s(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<t.length;r++){var o=i(t[r]);c[o].references--}for(var a=s(e,n),u=0;u<t.length;u++){var l=i(t[u]);0===c[l].references&&(c[l].updater(),c.splice(l,1))}t=a}}}},function(e,n,t){"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=e(n);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var a=0;a<this.length;a++){var c=this[a][0];null!=c&&(o[c]=!0)}for(var i=0;i<e.length;i++){var s=[].concat(e[i]);r&&o[s[0]]||(t&&(s[2]?s[2]="".concat(t," and ").concat(s[2]):s[2]=t),n.push(s))}},n}},function(e,n,t){"use strict";t.r(n),t.d(n,"SnackbarProvider",(function(){return B})),t.d(n,"useSnackbar",(function(){return D})),t.d(n,"withSnackbar",(function(){return I}));var r={};t.r(r),t.d(r,"success",(function(){return b})),t.d(r,"info",(function(){return p})),t.d(r,"error",(function(){return d})),t.d(r,"warning",(function(){return y}));var o=t(0),a=t.n(o),c=Object(o.createContext)();function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,n){var t,r=arguments,o=this;this.clear=function(){clearTimeout(t)},this.pause=function(){this.clear()},this.resume=function(){t=setTimeout((function(){e.apply(o,Array.prototype.slice.call(r,2,r.length))}),n)},this.resume()}function u(e){return void 0===i(e)||null==e||(!!(Array.isArray(e)&&e.length<=0)||("object"===i(e)?Object.values(e).filter((function(e){return e})).length<=0:"string"==typeof e?e.length<=0:"number"==typeof e?e<=0:!Boolean(e)))}function l(e){return u(e)?"":e.charAt(0).toUpperCase()+e.slice(1)}var f={fontSize:"20px",marginInlineEnd:"8px",fill:"currentColor",width:"20px",height:"20px",display:"inline-block",transition:"fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",flexShrink:0,userSelect:"none"},b=a.a.createElement("svg",{focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true",style:f},a.a.createElement("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"})),p=a.a.createElement("svg",{focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true",style:f},a.a.createElement("path",{d:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12A10,10 0 0,0 12,2Z"})),d=a.a.createElement("svg",{focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true",style:f},a.a.createElement("path",{d:"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2, 6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12, 13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"})),y=a.a.createElement("svg",{focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true",style:f},a.a.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}));function h(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(t.push(c.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return m(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return m(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var k=function(e){var n=e.snack,t=e.onClose,c=Object(o.useRef)(),i=h(Object(o.useState)(null),2),u=i[0],l=i[1],f=h(Object(o.useState)(!1),2),b=f[0],p=f[1],d=n.key,y=n.open,m=n.onClick,k=n.variant,v=n.subTitle,g=n.body,_=n.message,O=n.autoHideDuration,x=n.template,S=Object(o.useCallback)((function(){p(!1),setTimeout((function(){"function"==typeof t&&t(d)}),500)}),[d,t]),w="function"==typeof m;Object(o.useEffect)((function(){c.current&&(c.current.style.display=y?"inherit":"none"),setTimeout((function(){p(y)}),300)}),[y,n]),Object(o.useEffect)((function(){O&&l(new s((function(){S()}),O))}),[O,S]);var j=function(){var e;return null!==(e=r[k])&&void 0!==e?e:a.a.createElement("img",{src:"/favicon.ico",className:"icon",alt:"Icon"})},E=["snack","fade-in","snack-".concat(k||"default")];w&&E.push("clickable"),b&&E.push("show"),g||E.push("no-body");var C=a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"snack-header"},a.a.createElement(j,null),a.a.createElement("strong",null,_),v&&a.a.createElement("small",null,v),a.a.createElement("button",{onClick:S,type:"button",className:"close-btn","aria-label":"Close"},a.a.createElement("span",{"aria-hidden":"true"},"×"))),g&&a.a.createElement("div",{className:"snack-body"},g));return a.a.createElement("div",{className:"snackbar",ref:c},a.a.createElement("div",{onMouseOver:function(){return u&&u.pause()},onMouseLeave:function(){return u&&u.resume()},onClick:function(){w&&m(n),S()},className:E.join(" "),role:"alert","aria-live":"assertive","aria-atomic":"true"},x||C))},v=t(2),g=t.n(v),_=t(1),O={insert:"head",singleton:!1};g()(_.a,O),_.a.locals;function x(e){return(x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function S(e){return function(e){if(Array.isArray(e))return w(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,n){if(!e)return;if("string"==typeof e)return w(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return w(e,n)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function j(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function E(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?j(Object(t),!0).forEach((function(n){C(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):j(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function C(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function L(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function M(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function A(e,n){return(A=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function P(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=R(e);if(n){var o=R(this).constructor;t=Reflect.construct(r,arguments,o)}else t=r.apply(this,arguments);return T(this,t)}}function T(e,n){return!n||"object"!==x(n)&&"function"!=typeof n?H(e):n}function H(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var B=function(e){!function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&A(e,n)}(i,e);var n,t,r,o=P(i);function i(e){var n;return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,i),(n=o.call(this,e)).state={snacks:[],contextValue:{enqueueSnackbar:n.enqueueSnackbar.bind(H(n)),closeSnackbar:n.closeSnackbar.bind(H(n))}},n}return n=i,(t=[{key:"enqueueSnackbar",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=this.props,r=(t.children,t.maxSnack),o=void 0===r?5:r,a=L(t,["children","maxSnack"]),c=n.key,i=n.body,s=n.preventDuplicate,l=n.variant,f=n.hide,b=void 0===f?null:f,p=n.onClick,d=L(n,["key","body","preventDuplicate","variant","hide","onClick"]),y=!u(c),h=y?c:(new Date).getTime()+Math.random(),m=E(E(E({key:h},a),d),{},{message:e,variant:l,body:i,open:!0,onClick:p,autoHideDuration:b});if(d.persist&&(m.autoHideDuration=void 0),s||!0===a.preventDuplicate){var k=this.state.snacks.find((function(n){return n.key===c||n.message===e}));if(k)return this.setState((function(e){return{snacks:e.snacks.map((function(e){return e.key===k.key&&(e.open=!0),e}))}})),k.key}return this.state.snacks.length>=o?this.setState((function(e){var n=S(e.snacks);return n.shift(),{snacks:n.concat(m)}})):this.setState((function(e){return{snacks:[].concat(S(e.snacks),[m])}})),h}},{key:"closeSnackbar",value:function(e){e?this.setState((function(n){return{snacks:n.snacks.filter((function(n){return n.key!==e}))}})):this.setState((function(e){return{snacks:[]}}))}},{key:"getOriginClass",value:function(e){var n=e.vertical,t=void 0===n?"bottom":n,r=e.horizontal,o=void 0===r?"right":r;return"anchorOrigin".concat(l(t)).concat(l(o))}},{key:"getSnackbars",value:function(){var e=this;if(!(this.state.snacks.length<=0)){var n=this.state.snacks.reduce((function(n,t){var r=e.getOriginClass(t.anchorOrigin),o=n[r]||[];return E(E({},n),{},C({},r,[].concat(S(o),[t])))}),{});return Object.keys(n).map((function(t){var r=n[t];return a.a.createElement("div",{key:t,className:["__snackbar_container",t].join(" ")},r.map((function(n){return a.a.createElement(k,{onClose:e.closeSnackbar.bind(e),key:n.key,snack:n})})))}))}}},{key:"render",value:function(){var e=this.state.contextValue,n=this.props.children;return a.a.createElement(c.Provider,{value:e},n,this.getSnackbars())}}])&&M(n.prototype,t),r&&M(n,r),i}(o.Component);function N(){return(N=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var D=function(){return Object(o.useContext)(c)},I=function(e){return Object(o.forwardRef)((function(n,t){return React.createElement(c.Consumer,null,(function(r){return React.createElement(e,N({},n,{ref:t,enqueueSnackbar:r.enqueueSnackbar,closeSnackbar:r.closeSnackbar}))}))}))}}]);