@rmwc/snackbar/index.js

RMWC Snackbar component

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),g=require("@material/snackbar"),D=require("@rmwc/button"),l=require("@rmwc/base"),O=require("@rmwc/icon-button"),M=require("@rmwc/icon");g.MDCSnackbarFoundation.prototype.handleActionButtonClick=function(n,e){this.close(e)};function q(n){const{foundation:e,...u}=l.useFoundation({props:n,elements:{rootEl:!0,surfaceEl:!0,labelEl:!0},foundation:({rootEl:a,labelEl:c,emit:o})=>new g.MDCSnackbarFoundation({addClass:s=>a.addClass(s),removeClass:s=>a.removeClass(s),announce:()=>c.ref&&g.util.announce(c.ref),notifyOpening:()=>o("onOpen",{}),notifyOpened:()=>{l.triggerWindowResize(),o("onOpened",{})},notifyClosing:s=>{o("onClose",s?{reason:s}:{})},notifyClosed:s=>o("onClosed",s?{reason:s}:{})})}),{rootEl:d,surfaceEl:r}=u,m=a=>{n.onKeyDown&&n.onKeyDown(a),e.handleKeyDown(a)},y=a=>{if(a.target instanceof Element){let c=a.target;const o=l.closest(c,".mdc-button")??l.closest(c,".mdc-icon-button");o&&(c=o),n.dismissesOnAction&&c.classList.contains("mdc-snackbar__action")?e.handleActionButtonClick(a,c.dataset.mdcSnackbarAction):c.classList.contains("rmwc-snackbar__dismiss")&&e.handleActionIconClick(a)}};return d.setProp("onKeyDown",m,!0),r.setProp("onClick",y,!0),b.useEffect(()=>{n.open?e.open():e.close()},[n.open,e]),b.useEffect(()=>{n.timeout&&(n.timeout===-1?e.setTimeoutMs(n.timeout):e.autoDismissTimeoutMs_=n.timeout)},[n.timeout,e]),{foundation:e,...u}}const j=l.createComponent(function(e,u){const{rootEl:d,surfaceEl:r,labelEl:m}=q(e),{open:y,message:a,timeout:c,dismissIcon:o,onOpen:s,onClose:x,children:h,action:f,icon:C,leading:i,stacked:k,dismissesOnAction:S,foundationRef:K,...A}=e,w=l.useClassNames(e,["mdc-snackbar",{"mdc-snackbar--leading":i,"mdc-snackbar--stacked":k}]),E=Array.isArray(f)?f:f?[f]:[];return t.jsx(l.Tag,{...A,ref:u,element:d,"aria-live":"assertive","aria-atomic":!0,className:w,children:t.jsxs("div",{...r.props({}),className:"mdc-snackbar__surface",children:[!!C&&t.jsx(M.Icon,{style:{color:"rgba(255, 255, 255, 0.87)",fill:"currentColor",marginLeft:"1rem"},icon:C}),t.jsxs(F,{children:[a,t.jsx("div",{style:{display:"none"},ref:m.reactRef})]}),t.jsxs(I,{children:[E.map((v,N)=>t.jsx(b.Fragment,{children:v},N)),o&&t.jsx(T,{icon:o===!0?"close":o})]}),h]})})});function F(n){return t.jsx("div",{role:"status","aria-live":"polite",className:"mdc-snackbar__label",...n})}function I(n){return t.jsx("div",{className:"mdc-snackbar__actions",...n})}const _=l.createComponent(function(e,u){const d=l.useClassNames(e,["mdc-snackbar__action"]),{action:r=g.MDCSnackbarFoundation.strings.REASON_ACTION,...m}=e;return t.jsx(D.Button,{...m,className:d,ref:u,"data-mdc-snackbar-action":r})});function T(n){return t.jsx(O.IconButton,{...n,className:"rmwc-snackbar__dismiss"})}function R({messages:n,...e}){const u=n.array[0],[,d]=b.useState(0),[r,m]=b.useState(n.array[0]),y=b.useCallback(i=>{i&&n.remove(i)},[n]);b.useEffect(()=>{let i;const k=()=>{n.array[0]!==r&&(d(S=>S+1),i=window.setTimeout(()=>m(n.array[0]),150))};return n.on("change",k),()=>{i&&clearTimeout(i),n.off("change",k)}},[n,r]);const{body:a="",image:c,title:o="",onClose:s,actions:x,...h}=r||{},f=x?x.map(({title:i,label:k,...S})=>t.jsx(_,{...S,label:k||i})):null,C=r&&r===u;return t.jsx(j,{...e,...h,open:C,message:t.jsxs(t.Fragment,{children:[o,!!o&&!!a&&t.jsx("br",{}),a,!!c&&t.jsx("div",{className:"rmwc-snackbar__image",style:{margin:"1rem auto",textAlign:"center"},children:t.jsx("img",{src:c,alt:`${c}`,style:{maxWidth:"100%",maxHeight:"18rem"}})})]}),onClose:i=>{s==null||s(i),y(r)},action:f})}const B=()=>{const n=new l.ArrayEmitter;return{messages:n,clearAll:()=>n.empty(),notify:e=>(n.push(e),{close:()=>{n.remove(e)}})}};exports.Snackbar=j;exports.SnackbarAction=_;exports.SnackbarQueue=R;exports.createSnackbarQueue=B;