@clubmed/trident-ui/contexts/Device.js

Shared ClubMed React UI components

"use client";
import { jsx as p } from "react/jsx-runtime";
import { createContext as m, useReducer as h, useEffect as w, useContext as v } from "react";
const n = {
  MOBILE: "(min-width: 0)",
  TABLET: "(min-width: 640px)",
  DESKTOP: "(min-width: 768px)"
}, c = m(null), E = (e, t) => {
  switch (t.type) {
    case "mobile":
      return e;
    case "desktop":
      return {
        ...e,
        desktop: t.payload
      };
    case "tablet":
      return {
        ...e,
        tablet: t.payload
      };
    default:
      return e;
  }
}, b = ({ device: e, direction: t }) => typeof window < "u" ? {
  direction: t,
  desktop: window.matchMedia(n.DESKTOP).matches,
  mobile: !0,
  tablet: window.matchMedia(n.TABLET).matches
} : {
  direction: t,
  desktop: e === "desktop",
  mobile: !0,
  tablet: e === "tablet" || e === "desktop"
}, D = ({
  children: e,
  device: t,
  direction: l = "ltr"
}) => {
  const [u, o] = h(E, { device: t, direction: l }, b);
  return w(() => {
    const s = window.matchMedia(n.DESKTOP), i = window.matchMedia(n.TABLET), a = ({ matches: r }) => {
      o({ type: "desktop", payload: r });
    }, d = ({ matches: r }) => {
      o({ type: "tablet", payload: r });
    };
    return s.addEventListener("change", a, { passive: !0 }), i.addEventListener("change", d, { passive: !0 }), () => {
      s.removeEventListener("change", a), i.removeEventListener("change", d);
    };
  }, []), /* @__PURE__ */ p(c.Provider, { value: u, children: e });
};
function k(e) {
  const t = v(c);
  if (t === null)
    throw new Error("useDevice(string) should be used in DeviceContext.Provider");
  return t[e];
}
export {
  D as DeviceProvider,
  k as useDevice
};
//# sourceMappingURL=Device.js.map