@innspel/react-native 0.5.1 → 0.6.0

package/README.md

@@ -98,7 +98,7 @@ Innspels. Innsenderen skal se hvem som svarte.
 | Kjente feil | I feilsporet **før** feltet, i ønskesporet etter. Tre svar per kort: «Ja, jeg også» (teller deg uten ny sak), «Ligner, men ikke helt» (ditt eget innspill med lenke), «Nei, det er noe annet». Tom liste hopper skjermen over — treffene er et tilbud, aldri en sperre. |
 | Feltet | Ett tekstfelt. Send er aktiv fra N tegn, og **ingenting annet er obligatorisk**. Konteksten som legges ved er synlig og kan fjernes linje for linje. |
 | Mønstervarsel | Ser teksten ut til å inneholde e-post, telefonnummer, kortnummer, IP eller en tilgangsnøkkel, spør widgeten om det skal fjernes. Den fjerner **aldri** noe selv. |
-| Skjermbilde | Valgfritt. Tas ved trykk, forhåndsvises, maskeres på enheten — private views automatisk, resten med felt, pensel eller «Masker all tekst». Se under. |
+| Skjermbilde | Valgfritt, én eller to veier: «Legg ved skjermbilde» (skjermen bak arket, tatt ved trykk) og «Velg bilde» (fra galleriet, med din velger). Forhåndsvises og maskeres på enheten — private views automatisk på en fangst, resten med felt, pensel eller «Masker all tekst». Se under. |
 | Kvittering | Lover noe konkret, per spor, med saksnummer. Ber aldri om en vurdering av appen. Feilet bildet, sier den det — saken er sendt uansett. |
 | Mine innspill | Status, løftet som hører til, og svaret fra deg under saken. Det som venter på nett står øverst. |
 
@@ -132,6 +132,47 @@ import { createScreenshotAdapter, InnspelPrivate } from '@innspel/react-native';
 <InnspelProvider client={innspel} screenshot={createScreenshotAdapter(captureRef)}>
 ```
 
+**Bilde fra galleriet.** Et innspill handler sjelden om skjermen widgeten åpnes fra — åpnes
+den fra en profilside, viser fangsten profilen, ikke feilen. Gi adapteren din egen
+bildevelger, så får innsenderen «Velg bilde» og kan legge ved et systemskjermbilde tatt
+der feilen er. Pakken tar ingen avhengighet på velgeren:
+
+```tsx
+import * as ImagePicker from 'expo-image-picker';
+import { createScreenshotAdapter, type PickImageFn } from '@innspel/react-native';
+
+const pickImage: PickImageFn = async () => {
+  const r = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], exif: false });
+  return r.canceled ? null : { uri: r.assets[0]!.uri, width: r.assets[0]!.width, height: r.assets[0]!.height };
+};
+
+// Begge veiene:
+<InnspelProvider client={innspel} screenshot={createScreenshotAdapter(captureRef, { pickImage })}>
+// Bare «Velg bilde» — skjermen bak arket fanges aldri:
+<InnspelProvider client={innspel} screenshot={createScreenshotAdapter(captureRef, { pickImage, captureScreen: false })}>
+```
+
+`captureRef` trengs fortsatt: forhåndsvisningen med maskene fanges på nytt, og det er
+komposittet som lastes opp — aldri fila fra galleriet. Systemets bildevelger trenger ingen
+tillatelse til biblioteket på Android 13+ og iOS. `<InnspelPrivate>` kan ikke gjelde et
+bilde fra et annet sted, og forhåndsvisningen sier det til innsenderen.
+
+**Din egen setning ved bildesteget.** Du kjenner brukerne dine og hva som er greit å legge
+ved; plattformen eier ikke den setningen. Den står ved knappene og i forhåndsvisningen:
+
+```tsx
+<InnspelProvider
+  client={innspel}
+  screenshot={adapter}
+  imageStepNote={{
+    feil: 'Legg ved et skjermbilde av feilen. Ikke send bilder av andre personer.',
+    onske: 'Vis gjerne hvor i appen du savner det.',
+  }}
+>
+```
+
+En streng gjelder begge spor. Et spor uten setning viser ingen.
+
 Uten `screenshot` finnes ikke steget — ikke som en grå knapp, det finnes ikke.
 Det samme gjelder når leietakeren har skjermbilde av (`screenshotsEnabled: false`,
 tvunget ved mindreårige).

package/dist/index.cjs

@@ -46,15 +46,25 @@ var import_react_native10 = require("react-native");
 // src/skjermbilde.ts
 var import_react = require("react");
 var import_react_native = require("react-native");
-function createScreenshotAdapter(captureRef) {
+function storrelse(uri) {
+  return new Promise((resolve, reject) => import_react_native.Image.getSize(uri, (w, h) => resolve({ width: w, height: h }), reject));
+}
+function createScreenshotAdapter(captureRef, options = {}) {
+  const { pickImage, captureScreen } = options;
   return {
-    async capture(ref, options) {
-      const uri = await captureRef(ref, { format: options.format, quality: options.quality, result: "tmpfile" });
-      const { width, height } = await new Promise(
-        (resolve, reject) => import_react_native.Image.getSize(uri, (w, h) => resolve({ width: w, height: h }), reject)
-      );
-      return { uri, width, height };
+    async capture(ref, opts) {
+      const uri = await captureRef(ref, { format: opts.format, quality: opts.quality, result: "tmpfile" });
+      return { uri, ...await storrelse(uri) };
     },
+    ...pickImage ? {
+      async pick() {
+        const valgt = await pickImage();
+        if (!valgt) return null;
+        const { width, height } = valgt.width && valgt.height ? { width: valgt.width, height: valgt.height } : await storrelse(valgt.uri);
+        return { uri: valgt.uri, width, height };
+      }
+    } : {},
+    ...captureScreen === false ? { captureScreen: false } : {},
     measure(ref) {
       return new Promise((resolve) => {
         const view = ref.current;
@@ -538,6 +548,10 @@ var tekst = {
   // 2f — skjermbilde (K4, DD-39, DD-40, DD-42)
   leggVedSkjermbilde: "Legg ved skjermbilde",
   leggVedHint: "Bildet tas f\xF8rst n\xE5r du trykker \u2014 du ser det f\xF8r det sendes.",
+  velgBilde: "Velg bilde",
+  velgBildeHint: "Fra bildene dine. Du ser det og kan maskere det f\xF8r det sendes.",
+  skjermbildeUnderGalleri: "Bildet er fra galleriet. Appen maskerer ingenting i det for deg \u2014 mal over det som ikke skal med.",
+  bildeFeilet: "kunne ikke hente bildet. Du kan sende uten.",
   skjermbildeTittel: "Se over bildet",
   skjermbildeUnder: "Bildet ble tatt da du trykket. Det du maskerer, ser vi aldri.",
   maskering: "Maskering",
@@ -693,6 +707,8 @@ function Felt({
   onSend,
   sender,
   onSkjermbilde,
+  onVelgBilde,
+  bildeNotat,
   harVedlegg,
   onFjernVedlegg
 }) {
@@ -883,17 +899,31 @@ function Felt({
                 )
               ]
             }
-          ) : onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            Btn,
-            {
-              variant: "secondary",
-              testID: "legg-ved-skjermbilde",
-              ikon: "\u{1F4F7}",
-              label: tekst.leggVedSkjermbilde,
-              hint: tekst.leggVedHint,
-              onPress: onSkjermbilde
-            }
-          ) : null,
+          ) : onSkjermbilde || onVelgBilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { gap: tema.space.sm }, children: [
+            onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Btn,
+              {
+                variant: "secondary",
+                testID: "legg-ved-skjermbilde",
+                ikon: "\u{1F4F7}",
+                label: tekst.leggVedSkjermbilde,
+                hint: tekst.leggVedHint,
+                onPress: onSkjermbilde
+              }
+            ) : null,
+            onVelgBilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Btn,
+              {
+                variant: "secondary",
+                testID: "velg-bilde",
+                ikon: "\u{1F5BC}",
+                label: tekst.velgBilde,
+                hint: tekst.velgBildeHint,
+                onPress: onVelgBilde
+              }
+            ) : null,
+            bildeNotat ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { testID: "bilde-notat", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: bildeNotat }) }) : null
+          ] }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_react_native3.Pressable,
@@ -1308,6 +1338,8 @@ function Skjermbilde({
   rotStorrelse,
   previewRef,
   komponerer,
+  kilde = "skjerm",
+  notat,
   onFjern,
   onLeggVed
 }) {
@@ -1400,7 +1432,8 @@ function Skjermbilde({
   };
   const a11y = tekst.skjermbildeA11y(automasker.length, egne.length, allTekst);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: { flex: 1, gap: tema.space.md }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(H, { sub: tekst.skjermbildeUnder, children: tekst.skjermbildeTittel }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(H, { sub: kilde === "galleri" ? tekst.skjermbildeUnderGalleri : tekst.skjermbildeUnder, children: tekst.skjermbildeTittel }),
+    notat ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { testID: "bilde-notat", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: notat }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { accessibilityRole: "toolbar", accessibilityLabel: tekst.maskering, style: { flexDirection: "row", gap: tema.space.sm }, children: [
       knapp("felt", "\u25A3", tekst.maskerFelt),
       knapp("pensel", "\u270E", tekst.tegnOver),
@@ -1505,7 +1538,8 @@ function Widget({
   synlig,
   apneOpsjoner,
   onLukk,
-  tenantName
+  tenantName,
+  imageStepNote
 }) {
   const tema = useTema();
   const insets = (0, import_react10.useContext)(import_react_native_safe_area_context.SafeAreaInsetsContext) ?? import_react_native_safe_area_context.initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
@@ -1528,9 +1562,13 @@ function Widget({
   const [automasker, setAutomasker] = (0, import_react10.useState)([]);
   const [rotStorrelse, setRotStorrelse] = (0, import_react10.useState)({ width: 1, height: 1 });
   const [komponerer, setKomponerer] = (0, import_react10.useState)(false);
+  const [kilde, setKilde] = (0, import_react10.useState)("skjerm");
   const [vedlegg, setVedlegg] = (0, import_react10.useState)();
   const [innstillinger, setInnstillinger] = (0, import_react10.useState)({ ...client.settings });
   const skjermbildeMulig = innstillinger.screenshotsEnabled && skjermbilde?.adapter != null;
+  const fangstMulig = skjermbildeMulig && skjermbilde?.adapter?.captureScreen !== false;
+  const galleriMulig = skjermbildeMulig && typeof skjermbilde?.adapter?.pick === "function";
+  const bildeNotat = typeof imageStepNote === "string" ? imageStepNote : imageStepNote?.[spor];
   const nullstill = (0, import_react10.useCallback)(() => {
     setSteg("valg");
     setSpor("feil");
@@ -1607,11 +1645,28 @@ function Widget({
         setAutomasker([]);
       }
       setBilde(fangst);
+      setKilde("skjerm");
       setSteg("skjermbilde");
     } catch {
       setFeil(tekst.skjermbildeFeilet);
     }
   }, [skjermbilde]);
+  const velgBilde = (0, import_react10.useCallback)(async () => {
+    const pick = skjermbilde?.adapter?.pick;
+    if (!pick) return;
+    setFeil(void 0);
+    try {
+      const valgt = await pick.call(skjermbilde.adapter);
+      if (!valgt) return;
+      setRotStorrelse({ width: valgt.width, height: valgt.height });
+      setAutomasker([]);
+      setBilde(valgt);
+      setKilde("galleri");
+      setSteg("skjermbilde");
+    } catch {
+      setFeil(tekst.bildeFeilet);
+    }
+  }, [skjermbilde]);
   const leggVedBilde = (0, import_react10.useCallback)(async () => {
     if (!skjermbilde?.adapter) return;
     setKomponerer(true);
@@ -1775,7 +1830,9 @@ function Widget({
                     funn,
                     onSend: send,
                     sender,
-                    ...skjermbildeMulig ? { onSkjermbilde: taSkjermbilde } : {},
+                    ...fangstMulig ? { onSkjermbilde: taSkjermbilde } : {},
+                    ...galleriMulig ? { onVelgBilde: velgBilde } : {},
+                    ...bildeNotat ? { bildeNotat } : {},
                     harVedlegg: vedlegg !== void 0,
                     onFjernVedlegg: fjernBilde
                   }
@@ -1788,6 +1845,8 @@ function Widget({
                     rotStorrelse,
                     previewRef,
                     komponerer,
+                    kilde,
+                    ...bildeNotat ? { notat: bildeNotat } : {},
                     onFjern: fjernBilde,
                     onLeggVed: leggVedBilde
                   }
@@ -1835,7 +1894,8 @@ function InnspelProvider({
   theme,
   colorScheme = "dark",
   tenantName,
-  screenshot
+  screenshot,
+  imageStepNote
 }) {
   const [synlig, setSynlig] = (0, import_react11.useState)(false);
   const [apneOpsjoner, setApneOpsjoner] = (0, import_react11.useState)();
@@ -1869,6 +1929,7 @@ function InnspelProvider({
         synlig,
         ...apneOpsjoner ? { apneOpsjoner } : {},
         ...tenantName ? { tenantName } : {},
+        ...imageStepNote ? { imageStepNote } : {},
         onLukk: close
       }
     )