@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 q, jsx as w } from "react/jsx-runtime";
import { useRef as o, useCallback as y, useEffect as A, useMemo as z, createContext as L, useContext as M } from "react";
import { useRequestPermissions as F } from "../hooks/util/useRequestPermissions.js";
import { useReportInteraction as G } from "../internal/useReportInteraction.js";
import { resizeImage as H } from "../internal/utils/resizeImage.js";
const V = L(null);
function B() {
  const C = M(V);
  if (!C)
    throw new Error(
      "useImagePickerContext must be used within an ImagePickerProvider"
    );
  return C;
}
function D({ children: C }) {
  const E = o(null), P = o(null), R = o(null), n = o(null), e = o(null), g = o(null), t = o(null), h = o("medium"), k = o(void 0), { requestPermission: v } = F(), { reportInteraction: r } = G(), u = y(() => {
    if (g.current) {
      const { input: c, handler: l } = g.current;
      c.removeEventListener("cancel", l), g.current = null;
    }
  }, []), d = y(() => {
    if (e.current) {
      const c = new Error(
        "New file picker opened before previous completed"
      );
      t.current === "gallery" ? r({
        interactionType: "image_picker_error",
        interactionValue: c.message
      }) : t.current === "camera" && r({
        interactionType: "camera_error",
        interactionValue: c.message
      }), e.current(c), n.current = null, e.current = null, t.current = null, h.current = "medium", k.current = void 0;
    }
  }, [r]), _ = y(
    async (c) => {
      const { target: l } = c, p = l.files?.[0];
      if (p && n.current) {
        try {
          const s = await H({
            file: p,
            quality: h.current,
            customQuality: k.current
          });
          t.current === "gallery" ? r({
            interactionType: "image_picker_success"
          }) : t.current === "camera" && r({
            interactionType: "camera_success"
          }), n.current(s);
        } catch (s) {
          console.warn("Image resize failed, using original:", s), n.current && n.current(p);
        }
        n.current = null, e.current = null, t.current = null, u();
      }
      l.value = "";
    },
    [u, r]
  ), I = y(
    ({ quality: c = "medium", customQuality: l } = {}) => new Promise((p, s) => {
      d(), u(), h.current = c, k.current = l, n.current = p, e.current = s, t.current = "gallery";
      const i = E.current;
      if (!i) {
        const m = new Error("Gallery input not found");
        r({
          interactionType: "image_picker_error",
          interactionValue: m.message
        }), s(m), n.current = null, e.current = null, t.current = null;
        return;
      }
      const f = () => {
        if (e.current) {
          const m = new Error("User cancelled file selection");
          r({
            interactionType: "image_picker_error",
            interactionValue: m.message
          }), e.current(m), n.current = null, e.current = null, t.current = null;
        }
        u();
      };
      i.addEventListener("cancel", f), g.current = { input: i, handler: f }, r({
        interactionType: "image_picker_open"
      }), v({ permission: "CAMERA" }).then(() => {
        i.click();
      }).catch(() => {
        i.click();
      });
    }),
    [
      d,
      u,
      v,
      r
    ]
  ), T = y(
    ({
      cameraFacing: c = "back",
      quality: l = "medium",
      customQuality: p
    } = {}) => new Promise((s, i) => {
      d(), u(), h.current = l, k.current = p, n.current = s, e.current = i, t.current = "camera";
      const f = c === "front" ? P.current : R.current;
      if (!f) {
        const a = new Error("Camera input not found");
        r({
          interactionType: "camera_error",
          interactionValue: a.message
        }), i(a), n.current = null, e.current = null, t.current = null;
        return;
      }
      const m = () => {
        if (e.current) {
          const a = new Error("User cancelled camera");
          r({
            interactionType: "camera_error",
            interactionValue: a.message
          }), e.current(a), n.current = null, e.current = null, t.current = null;
        }
        u();
      };
      f.addEventListener("cancel", m), g.current = { input: f, handler: m }, r({
        interactionType: "camera_open"
      }), v({ permission: "CAMERA" }).then(({ granted: a }) => {
        if (a)
          f.click();
        else {
          const x = new Error("Camera permission not granted");
          r({
            interactionType: "camera_error",
            interactionValue: x.message
          }), i(x), n.current = null, e.current = null, t.current = null;
        }
      }).catch(() => {
        const a = new Error("Camera permission not granted");
        i(a), n.current = null, e.current = null, t.current = null;
      });
    }),
    [
      d,
      u,
      v,
      r
    ]
  );
  A(() => () => {
    d(), u();
  }, [d, u]);
  const b = z(
    () => ({
      openCamera: T,
      openGallery: I
    }),
    [T, I]
  );
  return /* @__PURE__ */ q(V.Provider, { value: b, children: [
    C,
    /* @__PURE__ */ w(
      "input",
      {
        ref: E,
        type: "file",
        accept: "image/*",
        onChange: _,
        style: { display: "none" },
        "aria-hidden": "true"
      }
    ),
    /* @__PURE__ */ w(
      "input",
      {
        ref: P,
        type: "file",
        accept: "image/*",
        capture: "user",
        onChange: _,
        style: { display: "none" },
        "aria-hidden": "true"
      }
    ),
    /* @__PURE__ */ w(
      "input",
      {
        ref: R,
        type: "file",
        accept: "image/*",
        capture: "environment",
        onChange: _,
        style: { display: "none" },
        "aria-hidden": "true"
      }
    )
  ] });
}
export {
  D as ImagePickerProvider,
  B as useImagePickerContext
};
//# sourceMappingURL=ImagePickerProvider.js.map