@shopify/shop-minis-react/dist/providers/ImagePickerProvider.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { jsxs as w, jsx as p } from "react/jsx-runtime";
import { useRef as o, useCallback as s, useEffect as x, useMemo as E, createContext as I, useContext as R } from "react";
const P = I(null);
function j() {
  const f = R(P);
  if (!f)
    throw new Error(
      "useImagePickerContext must be used within an ImagePickerProvider"
    );
  return f;
}
function G({ children: f }) {
  const m = o(null), C = o(null), g = o(null), n = o(null), e = o(null), i = o(null), r = s(() => {
    if (i.current) {
      const { input: c, handler: t } = i.current;
      c.removeEventListener("cancel", t), i.current = null;
    }
  }, []), a = s(() => {
    e.current && (e.current(
      new Error("New file picker opened before previous completed")
    ), n.current = null, e.current = null);
  }, []), d = s(
    (c) => {
      const t = c.target.files?.[0];
      t && n.current && (n.current(t), n.current = null, e.current = null, r()), c.target.value = "";
    },
    [r]
  ), h = s(() => new Promise((c, t) => {
    a(), r(), n.current = c, e.current = t;
    const u = m.current;
    if (!u) {
      t(new Error("Gallery input not found")), n.current = null, e.current = null;
      return;
    }
    const l = () => {
      e.current && (e.current(new Error("User cancelled file selection")), n.current = null, e.current = null), r();
    };
    u.addEventListener("cancel", l), i.current = { input: u, handler: l }, u.click();
  }), [a, r]), v = s(
    (c = "back") => new Promise((t, u) => {
      a(), r(), n.current = t, e.current = u;
      const l = c === "front" ? C.current : g.current;
      if (!l) {
        u(new Error("Camera input not found")), n.current = null, e.current = null;
        return;
      }
      const y = () => {
        e.current && (e.current(new Error("User cancelled camera")), n.current = null, e.current = null), r();
      };
      l.addEventListener("cancel", y), i.current = { input: l, handler: y }, l.click();
    }),
    [a, r]
  );
  x(() => () => {
    a(), r();
  }, [a, r]);
  const k = E(
    () => ({
      openCamera: v,
      openGallery: h
    }),
    [v, h]
  );
  return /* @__PURE__ */ w(P.Provider, { value: k, children: [
    f,
    /* @__PURE__ */ p(
      "input",
      {
        ref: m,
        type: "file",
        accept: "image/*",
        onChange: d,
        style: { display: "none" },
        "aria-hidden": "true"
      }
    ),
    /* @__PURE__ */ p(
      "input",
      {
        ref: C,
        type: "file",
        accept: "image/*",
        capture: "user",
        onChange: d,
        style: { display: "none" },
        "aria-hidden": "true"
      }
    ),
    /* @__PURE__ */ p(
      "input",
      {
        ref: g,
        type: "file",
        accept: "image/*",
        capture: "environment",
        onChange: d,
        style: { display: "none" },
        "aria-hidden": "true"
      }
    )
  ] });
}
export {
  G as ImagePickerProvider,
  j as useImagePickerContext
};
//# sourceMappingURL=ImagePickerProvider.js.map