muinotify/dist/index.js

muinotify has an imperative API that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to stack them on top of one another (although this is discouraged by the Material Design guidelines).

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),i=require("@emotion/styled"),r=require("@mui/material/Stack"),o=require("@mui/material/Alert"),n=require("@mui/material");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(e),u=s(i),l=s(r),c=s(o);function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},m.apply(this,arguments)}const p=e.createContext();p.Consumer,p.Provider;const d=t=>{const{message:i,options:r={},id:o,isEntered:n,notifyItemProps:s}=t,{defaultSeverity:u,TransitionComponent:l,TransitionProps:p,AlertProps:d,generalTimeOut:f,remove:h,customAlert:v}=s,{timeOut:y=f,isPersist:P}=r,[E,S]=e.useState(!0),x=function(){const t=e.useRef(!1);return e.useEffect((()=>(t.current=!0,()=>{t.current=!1})),[]),e.useCallback((()=>t.current),[])}();let g=e.useRef(null);e.useEffect((()=>(clearTimeout(g.current),g.current=setTimeout((()=>{x&&!P&&S(!1)}),y),()=>clearTimeout(g.current))),[y,P,x]),e.useEffect((()=>{n||S(!1)}),[n,o]);return a.default.createElement(l,m({in:E,mountOnEnter:!0,unmountOnExit:!0,onExited:()=>{!E&&h&&h(o)}},p),v?a.default.createElement("div",{className:"Custom-Alert"},v(t)):a.default.createElement(c.default,m({id:o,severity:r&&r.variant||u},d),i))};var f=e.memo(d);const h=u.default.div`
  position: fixed;
  z-index: 100000;
  height: auto;
  max-width: 50%;

  ${({position:e})=>e.split("-").map((e=>`${e}: 10px`))}
`,v=({notifyList:e,remove:t,...i})=>{const{position:r,defaultSeverity:o,generalTimeOut:n,TransitionComponent:s,TransitionProps:u,AlertProps:c,StackProps:p,customAlert:d}=i,v={defaultSeverity:o,TransitionComponent:s,TransitionProps:u,AlertProps:c,generalTimeOut:n,remove:t,customAlert:d};return a.default.createElement(h,{position:r},a.default.createElement(l.default,m({spacing:2},p),e.map((e=>a.default.createElement(f,m({key:e.id,notifyItemProps:v},e))))))};class y extends a.default.PureComponent{constructor(e){super(e);const{wrapperElement:t,wrapperName:i}=this.props,r=document.createElement(t||"div");r.className=i||"rezvani-notify-wrapper",document.body.appendChild(r),this.renderPortal=r,this.actionQueue=[],this.isStateBlocked=!1,this.state={notifyList:[]}}getList=()=>[...this.state.notifyList];commitState=(e,t)=>{this.isStateBlocked=t,this.setState({notifyList:e},(()=>{t||this.proccessQueue()}))};proccessQueue=()=>{const e=this.actionQueue.shift();e&&e()};notifier=(e,t)=>{const{maxNotif:i,preventDuplicate:r}=this.props,o=Math.random().toString(16).slice(2),n={message:e,options:t,isEntered:!0,id:o},s=this.getList();if(!(s.findIndex((t=>t.message===e))>=0&&r)){if(!this.isStateBlocked)return s.length>=i?(s[0].isEntered=!1,s.push(n),this.commitState(s,!0)):(s.push(n),this.commitState(s,!1)),o;this.actionQueue.push((()=>this.notifier(e,t)))}};removeNofityById=e=>{const t=[...this.state.notifyList].filter((t=>t.id!==e));this.commitState(t,!1)};removeNotifierAnimationById=e=>{const t=this.getList(),i=t.findIndex((t=>t.id===e));i>=0&&(t[i].isEntered=!1),this.commitState(t,!1)};render(){const{notifyList:e}=this.state,{children:i,...r}=this.props;return a.default.createElement(p.Provider,{value:{notifier:this.notifier,removeNotifier:this.removeNotifierAnimationById}},i,t.createPortal(a.default.createElement(v,m({notifyList:e,remove:this.removeNofityById},r)),this.renderPortal))}}y.defaultProps={customAlert:null,preventDuplicate:!1,position:"bottom-left",wrapperElement:"div",wrapperName:"rezvani-notify-wrapper",maxNotif:3,defaultSeverity:"info",generalTimeOut:3e3,TransitionComponent:n.Slide,TransitionProps:{},AlertProps:{},StackProps:{spacing:1,direction:"column-reverse"}};exports.MuiNotifyProvider=y,exports.useNotifier=()=>e.useContext(p),exports.withNotifier=e=>{class t extends a.default.PureComponent{render(){return a.default.createElement(p.Consumer,null,(t=>a.default.createElement(e,m({},this.props,t))))}}return t};