@rmwc/snackbar/index.mjs

RMWC Snackbar component

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