notistack-next
Version:
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
3 lines (2 loc) • 12.5 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-dom"),o=e(require("clsx")),a=require("@material-ui/core/styles"),i=e(require("@material-ui/core/Snackbar")),c=e(require("@material-ui/core/Slide")),s=e(require("@material-ui/core/Collapse")),u=e(require("@material-ui/core/SvgIcon")),l=e(require("hoist-non-react-statics"));function p(){return(p=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)}function d(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}var f=t.createContext(),m={root:{},anchorOriginTopCenter:{},anchorOriginBottomCenter:{},anchorOriginTopRight:{},anchorOriginBottomRight:{},anchorOriginTopLeft:{},anchorOriginBottomLeft:{}},g={containerRoot:{},containerAnchorOriginTopCenter:{},containerAnchorOriginBottomCenter:{},containerAnchorOriginTopRight:{},containerAnchorOriginBottomRight:{},containerAnchorOriginTopLeft:{},containerAnchorOriginBottomLeft:{}},h=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},k=function(e){return Object.keys(e).filter((function(e){return!g[e]})).reduce((function(n,t){var r;return p({},n,((r={})[t]=e[t],r))}),{})},v={variant:"default",autoHideDuration:5e3,anchorOrigin:{vertical:"bottom",horizontal:"left"}},b=function(e){return"number"==typeof e||null===e},x={CLICKAWAY:"clickaway",MAXSNACK:"maxsnack",INSTRUCTED:"instructed"},E=function(e){var n;return a.createStyles({root:(n={display:"flex",flexWrap:"wrap",flexGrow:1},n[e.breakpoints.up("sm")]={flexGrow:"initial",minWidth:288},n)})},y=n.forwardRef((function(e,n){var r=e.classes,a=e.className,i=d(e,["classes","className"]);return t.createElement("div",Object.assign({ref:n,className:o(r.root,a)},i))})),C=a.withStyles(E)(y),S={right:"left",left:"right",bottom:"up",top:"down"},O=function(e){return"center"!==e.horizontal?S[e.horizontal]:S[e.vertical]},D=function(e){var n=Object.keys(e).filter((function(e){return void 0!==m[e]})).reduce((function(n,t){var r;return p({},n,((r={})[t]=e[t],r))}),{});return p({},n,{root:o(e.root,e.wrappedRoot)})},w=function(e,n){return{root:e.collapseContainer,wrapper:o(e.collapseWrapper,n&&e.collapseWrapperDense)}};function L(e,n){return e.reduce((function(e,t){return null==t?e:function(){for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];var i=[].concat(o);n&&-1===i.indexOf(n)&&i.push(n),e.apply(this,i),t.apply(this,i)}}),(function(){}))}var q=function(e){var n,t=a.emphasize(e.palette.background.default,"light"===e.palette.type?.8:.98);return a.createStyles(p({},m,{lessPadding:{paddingLeft:20},variantSuccess:{backgroundColor:"#43a047 !important",color:"#fff !important"},variantError:{backgroundColor:"#d32f2f !important",color:"#fff !important"},variantInfo:{backgroundColor:"#2196f3 !important",color:"#fff !important"},variantWarning:{backgroundColor:"#ff9800 !important",color:"#fff !important"},contentRoot:p({},e.typography.body2,{backgroundColor:t,color:e.palette.getContrastText(t),alignItems:"center",padding:"6px 16px",borderRadius:"4px",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"}),message:{display:"flex",alignItems:"center",padding:"8px 0"},action:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:16,marginRight:-8},wrappedRoot:{position:"relative",transform:"translateX(0)",top:0,right:0,bottom:0,left:0},collapseContainer:(n={},n[e.breakpoints.down("xs")]={paddingLeft:e.spacing(1),paddingRight:e.spacing(1)},n),collapseWrapper:{transition:e.transitions.create(["margin-bottom"],{easing:"ease"}),marginTop:6,marginBottom:6},collapseWrapperDense:{marginTop:2,marginBottom:2}}))},T=function(e){var r=e.classes,a=d(e,["classes"]),u=n.useRef(),l=n.useState(!0),f=l[0],m=l[1];n.useEffect((function(){return function(){u.current&&clearTimeout(u.current)}}),[]);var g=L([a.snack.onClose,a.onClose],a.snack.key),k=["onEnter","onEntering","onEntered","onExit","onExiting","onExited"].reduce((function(e,n){var t;return p({},e,((t={})[n]=L([a.snack[n],a[n]],a.snack.key),t))}),{}),v=a.action,b=a.content,E=a.ariaAttributes,y=a.className,S=a.hideIconVariant,q=a.iconVariant,T=a.snack,A=a.dense,R=a.TransitionComponent,I=void 0===R?c:R,N=a.TransitionProps,H=void 0===N?{}:N,j=d(a,["action","content","ariaAttributes","className","hideIconVariant","iconVariant","snack","dense","TransitionComponent","TransitionProps","onEnter","onEntering","onEntered","onExit","onExiting","onExited"]),M=T.key,V=T.className,P=T.variant,z=T.content,W=T.action,B=T.ariaAttributes,X=T.anchorOrigin,_=T.TransitionProps,K=void 0===_?{}:_,U=d(T,["key","persist","entered","requestClose","className","variant","content","action","ariaAttributes","anchorOrigin","TransitionProps"]),Z=q[P],Q=p({"aria-describedby":"client-snackbar"},E,B),G=p({direction:O(X)},H,K,{onEnter:k.onEnter,onEntering:k.onEntering,onEntered:L([k.onEntered,function(){a.snack.requestClose&&g(null,x.INSTRCUTED)}]),onExit:k.onExit,onExiting:k.onExiting,onExited:function(){u.current=setTimeout((function(){m(!f)}),125)}}),Y=W||v;"function"==typeof Y&&(Y=Y(M));var F=z||b;return F&&"function"==typeof F&&(F=F(M,T.message)),t.createElement(s,{unmountOnExit:!0,timeout:175,in:f,classes:w(r,A),onExited:k.onExited},t.createElement(i,Object.assign({TransitionComponent:I},j,U,{open:T.open,anchorOrigin:X,TransitionProps:G,classes:D(r),onClose:g}),F||t.createElement(C,Object.assign({},Q,{role:"alert",className:o(r.contentRoot,r["variant"+h(P)],y,V,!S&&Z&&r.lessPadding)}),t.createElement("div",{id:Q["aria-describedby"],className:r.message},S?null:Z,T.message),Y&&t.createElement("div",{className:r.action},Y))))},A=a.withStyles(q)(T),R=a.makeStyles((function(e){var n,t;return{root:(n={boxSizing:"border-box",display:"flex",maxHeight:"100%",maxWidth:"100%",position:"fixed",flexDirection:"column",zIndex:e.zIndex.snackbar,height:"auto",width:"auto",minWidth:288,transition:e.transitions.create(["top","right","bottom","left"],{easing:"ease"})},n[e.breakpoints.down("xs")]={left:"0 !important",right:"0 !important",width:"100%"},n),reverseColumns:{flexDirection:"column-reverse"},top:{top:14},topDense:{top:2},bottom:{bottom:14},bottomDense:{bottom:2},left:{left:20},leftDense:{left:4},right:{right:20},rightDense:{right:4},center:(t={left:"50%",transform:"translateX(-50%)"},t[e.breakpoints.down("xs")]={transform:"translateX(0)"},t)}})),I=t.memo((function(e){var n=R(),r=e.className,a=e.anchorOrigin,i=e.dense,c=d(e,["className","anchorOrigin","dense"]),s=o(n.root,n[a.vertical],n[a.horizontal],n[a.vertical+(i?"Dense":"")],n[a.horizontal+(i?"Dense":"")],r,"bottom"===a.vertical&&n.reverseColumns);return t.createElement("div",Object.assign({className:s},c))})),N=function(e){return t.createElement(u,Object.assign({},e),t.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}))},H=function(e){return t.createElement(u,Object.assign({},e),t.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,\n 6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n 13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"}))},j=function(e){return t.createElement(u,Object.assign({},e),t.createElement("path",{d:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n 0 22,12A10,10 0 0,0 12,2Z"}))},M={fontSize:20,marginInlineEnd:8},V={success:t.createElement((function(e){return t.createElement(u,Object.assign({},e),t.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\n 10.59L10 14.17L17.59 6.58L19 8L10 17Z"}))}),{style:M}),warning:t.createElement(N,{style:M}),error:t.createElement(H,{style:M}),info:t.createElement(j,{style:M})},P=function(e){var n,a,i;function c(n){var t;return(t=e.call(this,n)||this).enqueueSnackbar=function(e,n){var r=void 0===n?{}:n,o=r.key,a=r.preventDuplicate,i=d(r,["key","preventDuplicate"]),c=o||0===o,s=c?o:(new Date).getTime()+Math.random(),u=function(e,n,t){return function(r){return"autoHideDuration"===r?b(e.autoHideDuration)?e.autoHideDuration:b(n.autoHideDuration)?n.autoHideDuration:v.autoHideDuration:e[r]||n[r]||t[r]}}(i,t.props,v),l=p({key:s},i,{message:e,open:!0,entered:!1,requestClose:!1,variant:u("variant"),anchorOrigin:u("anchorOrigin"),autoHideDuration:u("autoHideDuration")});return i.persist&&(l.autoHideDuration=void 0),t.setState((function(n){if(void 0===a&&t.props.preventDuplicate||a){var r=function(n){return c?n.key===o:n.message===e},i=n.queue.findIndex(r)>-1,s=n.snacks.findIndex(r)>-1;if(i||s)return n}return t.handleDisplaySnack(p({},n,{queue:[].concat(n.queue,[l])}))})),s},t.handleDisplaySnack=function(e){return e.snacks.length>=t.maxSnack?t.handleDismissOldest(e):t.processQueue(e)},t.processQueue=function(e){var n=e.queue;return n.length>0?p({},e,{snacks:[].concat(e.snacks,[n[0]]),queue:n.slice(1,n.length)}):e},t.handleDismissOldest=function(e){if(e.snacks.some((function(e){return!e.open||e.requestClose})))return e;var n=!1,r=!1;e.snacks.reduce((function(e,n){return e+(n.open&&n.persist?1:0)}),0)===t.maxSnack&&(r=!0);var o=e.snacks.map((function(e){return n||e.persist&&!r?p({},e):(n=!0,e.entered?(e.onClose&&e.onClose(null,x.MAXSNACK,e.key),t.props.onClose&&t.props.onClose(null,x.MAXSNACK,e.key),p({},e,{open:!1})):p({},e,{requestClose:!0}))}));return p({},e,{snacks:o})},t.handleEnteredSnack=function(e,n,r){if(!r)throw new Error("handleEnteredSnack Cannot be called with undefined key");t.setState((function(e){return{snacks:e.snacks.map((function(e){return e.key===r?p({},e,{entered:!0}):p({},e)}))}}))},t.handleCloseSnack=function(e,n,r){if(t.props.onClose&&t.props.onClose(e,n,r),n!==x.CLICKAWAY){var o=void 0===r;t.setState((function(e){var n=e.queue;return{snacks:e.snacks.map((function(e){return o||e.key===r?p({},e,e.entered?{open:!1}:{requestClose:!0}):p({},e)})),queue:n.filter((function(e){return e.key!==r}))}}))}},t.closeSnackbar=function(e){var n=t.state.snacks.find((function(n){return n.key===e}));e&&n&&n.onClose&&n.onClose(null,x.INSTRUCTED,e),t.handleCloseSnack(null,x.INSTRUCTED,e)},t.handleExitedSnack=function(e,n,r){var o=n||r;if(!o)throw new Error("handleExitedSnack Cannot be called with undefined key");t.setState((function(e){var n=t.processQueue(p({},e,{snacks:e.snacks.filter((function(e){return e.key!==o}))}));return 0===n.queue.length?n:t.handleDismissOldest(n)}))},t.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:t.enqueueSnackbar,closeSnackbar:t.closeSnackbar}},t}return a=e,(n=c).prototype=Object.create(a.prototype),n.prototype.constructor=n,n.__proto__=a,c.prototype.render=function(){var e=this,n=this.state.contextValue,a=this.props,i=a.domRoot,c=a.children,s=a.classes,u=void 0===s?{}:s,l=a.dense,m=void 0!==l&&l,g=a.hideIconVariant,v=void 0!==g&&g,b=d(a,["variant","maxSnack","anchorOrigin","preventDuplicate","domRoot","children","classes","dense","hideIconVariant"]),x=this.state.snacks.reduce((function(e,n){var t,r,o=""+h((r=n.anchorOrigin).vertical)+h(r.horizontal);return p({},e,((t={})[o]=[].concat(e[o]||[],[n]),t))}),{}),E=p({},V,this.props.iconVariant),y=Object.keys(x).map((function(n){var r=x[n];return t.createElement(I,{key:n,dense:m,anchorOrigin:r[0].anchorOrigin,className:o(u.containerRoot,u["containerAnchorOrigin"+n])},r.map((function(n){return t.createElement(A,Object.assign({},b,{key:n.key,dense:m,snack:n,hideIconVariant:v,iconVariant:E,classes:k(u),onClose:e.handleCloseSnack,onExited:L([e.handleExitedSnack,e.props.onExited]),onEntered:L([e.handleEnteredSnack,e.props.onEntered])}))})))}));return t.createElement(f.Provider,{value:n},c,i?r.createPortal(y,i):y)},(i=[{key:"maxSnack",get:function(){return this.props.maxSnack||3}}])&&function(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)}}(c.prototype,i),c}(n.Component);exports.SnackbarContent=C,exports.SnackbarProvider=P,exports.useSnackbar=function(){return n.useContext(f)},exports.withSnackbar=function(e){var n=t.forwardRef((function(n,r){return t.createElement(f.Consumer,null,(function(o){return t.createElement(e,p({},n,{ref:r,enqueueSnackbar:o.enqueueSnackbar,closeSnackbar:o.closeSnackbar}))}))}));return l(n,e),n};
//# sourceMappingURL=notistack-next.cjs.production.min.js.map