@innspel/react-native 0.9.1 → 0.9.3

package/README.md

@@ -73,6 +73,18 @@ innsenderen får se før hun skriver.
 Utenfor React — en navigasjonshandler, en krasjlytter — bruker du klienten
 direkte: `innspel.openFeedback({ screen: 'Dørlista' })`.
 
+Lukking — X, eller Android-tilbake på første steg — beholder det innsenderen har
+skrevet til widgeten åpnes igjen; bare en fullført innsending nullstiller. Åpner du med
+`track` mens det står et utkast, står hun der hun var. `view: 'mine'` legges over
+utkastet, og «Tilbake» i lista lukker.
+
+**Legg provideren rundt appen, ikke inni en `ScrollView`.** Arket er en `Modal`, men
+React Natives trykkhåndtering går gjennom React-treet: en `ScrollView` over provideren
+med `keyboardShouldPersistTaps` på standardverdien tar første trykk mens tastaturet er
+oppe, og bruker det til å lukke tastaturet. Send teller det trykket likevel; de andre
+knappene i arket gjør ikke. Må provideren stå inni en scrollflate, gi den
+`keyboardShouldPersistTaps="handled"`.
+
 ## Token-endepunktet
 
 Det eneste du må bygge selv. Se

package/dist/index.cjs

@@ -572,10 +572,12 @@ function Btn({
   accessibilityLabel,
   grow,
   testID,
-  busy
+  busy,
+  trykkForbiForelder
 }) {
   const tema = useTema();
   const c = tema.color;
+  const forbi = useTrykkForbiForelder(onPress, !!disabled, tema.touch / 2);
   const bakgrunn = variant === "primary" ? c.actionPrimary : variant === "secondary" ? c.surfaceRaised : "transparent";
   const tekstfarge = variant === "primary" ? c.onActionPrimary : variant === "danger" ? c.danger : c.actionSecondaryText;
   const kant = variant === "ghost" ? "transparent" : variant === "primary" ? c.actionPrimary : c.actionSecondaryBorder;
@@ -589,6 +591,7 @@ function Btn({
         accessibilityState: { disabled: !!disabled, busy: !!busy },
         disabled,
         onPress,
+        ...trykkForbiForelder ? forbi : {},
         style: {
           minHeight: tema.touch,
           borderRadius: tema.radius.md,
@@ -621,6 +624,37 @@ function Btn({
     hint ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: hint }) : null
   ] });
 }
+function useTrykkForbiForelder(onPress, laast, slingring) {
+  const start = (0, import_react4.useRef)(null);
+  const fikkResponder = (0, import_react4.useRef)(false);
+  const siste = (0, import_react4.useRef)({ onPress, laast });
+  siste.current = { onPress, laast };
+  return (0, import_react4.useMemo)(
+    () => ({
+      onPressIn: () => {
+        fikkResponder.current = true;
+      },
+      onTouchStart: (e) => {
+        start.current = { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY };
+      },
+      onTouchEnd: (e) => {
+        const s = start.current;
+        start.current = null;
+        const innenfor = s !== null && Math.abs(e.nativeEvent.pageX - s.x) <= slingring && Math.abs(e.nativeEvent.pageY - s.y) <= slingring;
+        setTimeout(() => {
+          const tatt = fikkResponder.current;
+          fikkResponder.current = false;
+          if (!tatt && innenfor && !siste.current.laast) siste.current.onPress?.();
+        }, 0);
+      },
+      onTouchCancel: () => {
+        start.current = null;
+        fikkResponder.current = false;
+      }
+    }),
+    [slingring]
+  );
+}
 function H({ children, sub }) {
   const tema = useTema();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { gap: tema.space.xs }, children: [
@@ -868,6 +902,8 @@ var tekst = {
   mineSak: (nr) => `Sak ${saksnr(nr)}`,
   /** «Feil · sak 2041» — sporet først, aldri rå id og aldri kontraktens type (DD-50). */
   sakHode: (spor, nr) => `${stor(spor)} \xB7 sak ${saksnr(nr)}`,
+  /** F14: svaret kom siden forrige gang denne enheten viste lista. */
+  nyttSvar: "Nytt svar",
   // Leietakeren fjernet vedlegget. Bare AT — aldri hvorfor, av hvem eller når.
   bildeFjernet: "Bildet er fjernet.",
   svarFra: (leietaker) => `Svar fra ${leietaker}`,
@@ -1255,7 +1291,8 @@ function Felt({
         disabled: forKort || sender,
         busy: sender,
         hint: forKort ? tekst.forKort(minTextLength) : harVedlegg ? tekst.sendHintMedBilde : void 0,
-        onPress: onSend
+        onPress: onSend,
+        trykkForbiForelder: true
       }
     ) })
   ] });
@@ -1519,23 +1556,78 @@ function Kvittering({
 // src/widget/MineInnspill.tsx
 var import_react9 = require("react");
 var import_react_native7 = require("react-native");
+
+// src/widget/nyttSvar.ts
+var N\u00D8KKEL = "innspel:svar-sett";
+async function merkNyeSvar(rader, storage) {
+  let grense = 0;
+  try {
+    grense = Number.parseInt(await storage.get(N\u00D8KKEL) ?? "", 10) || 0;
+  } catch {
+    grense = 0;
+  }
+  const tid = (r) => r.pending === true ? NaN : Date.parse(r.reply?.at ?? "");
+  const merket = rader.map((rad) => ({ rad, nytt: tid(rad) > grense }));
+  return [...merket.filter((m) => m.nytt), ...merket.filter((m) => !m.nytt)];
+}
+async function markerSvarSett(storage, n\u00E5 = Date.now()) {
+  try {
+    await storage.set(N\u00D8KKEL, String(n\u00E5));
+  } catch {
+  }
+}
+
+// src/widget/MineInnspill.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function MineInnspill({
   rader,
   laster,
   tenantName,
-  onNytt
+  onNytt,
+  storage
 }) {
   const tema = useTema();
+  const [visning, setVisning] = (0, import_react9.useState)(() => rader.map((rad) => ({ rad, nytt: false })));
+  (0, import_react9.useEffect)(() => {
+    let gjelder = true;
+    void merkNyeSvar(rader, storage).then((m) => {
+      if (gjelder) setVisning(m);
+    }).catch(() => {
+      if (gjelder) setVisning(rader.map((rad) => ({ rad, nytt: false })));
+    });
+    return () => {
+      gjelder = false;
+    };
+  }, [storage, rader]);
+  (0, import_react9.useEffect)(() => {
+    if (!laster && rader.length) void markerSvarSett(storage).catch(() => void 0);
+  }, [storage, laster, rader]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flex: 1, gap: tema.space.md }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(H, { sub: tekst.mineUnder, children: tekst.mineTittel }),
-    laster ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ActivityIndicator, { accessibilityLabel: "Henter innspillene dine", color: tema.color.textSecondary }) : rader.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.mineTom }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ScrollView, { style: { flex: 1 }, contentContainerStyle: { gap: tema.space.sm }, children: rader.map((rad) => {
+    laster ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ActivityIndicator, { accessibilityLabel: "Henter innspillene dine", color: tema.color.textSecondary }) : rader.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.mineTom }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ScrollView, { style: { flex: 1 }, contentContainerStyle: { gap: tema.space.sm }, children: visning.map(({ rad, nytt }) => {
       const venter = rad.pending === true;
       const v = venter ? venterVisning : statusVisning(rad.status, rad.type, rad.deadlineAt);
       const nokkel = venter ? rad.clientRef : rad.id;
       const svar = venter ? void 0 : rad.reply;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { dashed: venter, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: venter ? `${tekst.mineIkkeSendt} \xB7 ${rad.type === "onske" ? tekst.onske : tekst.feil}` : tekst.sakHode(rad.type === "onske" ? tekst.onske : tekst.feil, rad.id) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flexDirection: "row", alignItems: "center", gap: tema.space.xs, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: venter ? `${tekst.mineIkkeSendt} \xB7 ${rad.type === "onske" ? tekst.onske : tekst.feil}` : tekst.sakHode(rad.type === "onske" ? tekst.onske : tekst.feil, rad.id) }),
+          nytt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_native7.Text,
+            {
+              testID: "nytt-svar",
+              style: {
+                color: tema.color.info,
+                backgroundColor: tema.color.infoBg,
+                fontSize: tema.font.tiny,
+                fontWeight: tema.weight.semibold,
+                borderRadius: tema.radius.pill,
+                paddingHorizontal: tema.space.sm
+              },
+              children: tekst.nyttSvar
+            }
+          ) : null
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_native7.Text,
           {
@@ -1871,9 +1963,23 @@ function Widget({
     setVedlegg(void 0);
     setKomponerer(false);
   }, []);
+  const [mineDirekte, setMineDirekte] = (0, import_react11.useState)(false);
+  const [stegForMine, setStegForMine] = (0, import_react11.useState)("valg");
+  const stegRef = (0, import_react11.useRef)(steg);
+  stegRef.current = steg;
+  const harUtkast = verdi.trim().length > 0 || vedlegg !== void 0;
   const lukk = (0, import_react11.useCallback)(() => {
+    onLukk();
+    if (stegRef.current === "mine" && mineDirekte) {
+      setSteg(stegForMine);
+      setMineDirekte(false);
+    }
+  }, [onLukk, mineDirekte, stegForMine]);
+  const lukkOgNullstill = (0, import_react11.useCallback)(() => {
     onLukk();
     nullstill();
+    setMineDirekte(false);
+    setStegForMine("valg");
   }, [onLukk, nullstill]);
   (0, import_react11.useEffect)(() => {
     if (!synlig) return;
@@ -1883,8 +1989,8 @@ function Widget({
     if (!client.isAnonymous) {
       void client.subjects.submissions().then(setMine).catch(() => void 0);
     }
-    if (apneOpsjoner?.view === "mine" && !client.isAnonymous) void visMine();
-    else if (apneOpsjoner?.track) velgSpor(apneOpsjoner.track);
+    if (apneOpsjoner?.view === "mine" && !client.isAnonymous) void visMine(true);
+    else if (apneOpsjoner?.track && !harUtkast) void velgSpor(apneOpsjoner.track);
   }, [synlig]);
   const hentKort = (0, import_react11.useCallback)(async () => {
     setLasterKort(true);
@@ -1982,6 +2088,11 @@ function Widget({
   }, []);
   const gaaTilbake = (0, import_react11.useCallback)(() => {
     setFeil(void 0);
+    if (steg === "mine") {
+      if (mineDirekte) lukk();
+      else setSteg("valg");
+      return;
+    }
     if (steg === "skjermbilde") {
       setBilde(void 0);
       setAutomasker([]);
@@ -1993,7 +2104,12 @@ function Widget({
       return;
     }
     setSteg("valg");
-  }, [steg, spor, kort.length]);
+  }, [steg, spor, kort.length, mineDirekte, lukk]);
+  const androidTilbake = (0, import_react11.useCallback)(() => {
+    if (steg === "valg") lukk();
+    else if (steg === "kvittering") lukkOgNullstill();
+    else gaaTilbake();
+  }, [steg, lukk, lukkOgNullstill, gaaTilbake]);
   const send = (0, import_react11.useCallback)(async () => {
     setSender(true);
     setFeil(void 0);
@@ -2003,7 +2119,7 @@ function Widget({
         text: verdi,
         ...vedlegg ? { attachment: vedlegg } : {},
         ...spor === "feil" && lenketTil ? { relatedKnownIssueId: lenketTil.id } : {},
-        ...fjernede.length ? { context: fjernetKontekst(client, fjernede) } : {}
+        context: fjernetKontekst(client, fjernede, apneOpsjoner?.screen)
       });
       if (res.status === "queued") {
         setKvittering({ art: "k\xF8", ...res.attachment ? { vedlegg: "forkastet" } : {} });
@@ -2024,7 +2140,7 @@ function Widget({
     } finally {
       setSender(false);
     }
-  }, [client, spor, verdi, vedlegg, lenketTil, fjernede]);
+  }, [client, spor, verdi, vedlegg, lenketTil, fjernede, apneOpsjoner?.screen]);
   const jaOgsa = (0, import_react11.useCallback)(
     async (k) => {
       setSender(true);
@@ -2040,7 +2156,13 @@ function Widget({
     },
     [client]
   );
-  const visMine = (0, import_react11.useCallback)(async () => {
+  const visMine = (0, import_react11.useCallback)(async (direkte = false) => {
+    if (direkte) {
+      if (stegRef.current !== "mine") setStegForMine(stegRef.current);
+    } else {
+      setStegForMine("valg");
+    }
+    setMineDirekte(direkte);
     setSteg("mine");
     setLasterMine(true);
     try {
@@ -2051,13 +2173,18 @@ function Widget({
       setLasterMine(false);
     }
   }, [client]);
+  const nyttFraMine = (0, import_react11.useCallback)(() => {
+    setMineDirekte(false);
+    if (harUtkast) setSteg(stegForMine);
+    else nullstill();
+  }, [harUtkast, stegForMine, nullstill]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_react_native9.Modal,
     {
       visible: synlig,
       transparent: true,
       animationType: "slide",
-      onRequestClose: lukk,
+      onRequestClose: androidTilbake,
       accessibilityViewIsModal: true,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_react_native9.KeyboardAvoidingView,
@@ -2095,7 +2222,7 @@ function Widget({
                       testID: "lukk",
                       accessibilityRole: "button",
                       accessibilityLabel: tekst.lukk,
-                      onPress: lukk,
+                      onPress: steg === "kvittering" ? lukkOgNullstill : lukk,
                       style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
                       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Ikon, { navn: "close-outline", farge: tema.color.textSecondary })
                     }
@@ -2113,7 +2240,7 @@ function Widget({
                       ikon: "list-outline",
                       label: mine.length > 0 ? tekst.mineMedAntall(mine.length) : tekst.mineTittel,
                       accessibilityLabel: mine.length > 0 ? tekst.mineEtikett(mine.length) : tekst.mineTittel,
-                      onPress: visMine
+                      onPress: () => void visMine()
                     }
                   ) : null
                 ] }) : null,
@@ -2140,7 +2267,7 @@ function Widget({
                     onEndre: endreTekst,
                     minTextLength: innstillinger.minTextLength,
                     textMaxLength: innstillinger.textMaxLength,
-                    kontekst: client.context,
+                    kontekst: { ...client.context, ...apneOpsjoner?.screen ? { screen: apneOpsjoner.screen } : {} },
                     fjernedeFelter: fjernede,
                     onFjernKontekst: (f) => setFjernede((x) => [...x, f]),
                     ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
@@ -2177,16 +2304,17 @@ function Widget({
                     ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
                     ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
                     ...kvittering.frist ? { frist: kvittering.frist } : {},
-                    onLukk: lukk
+                    onLukk: lukkOgNullstill
                   }
                 ) : null,
                 steg === "mine" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   MineInnspill,
                   {
+                    storage: client.storage,
                     rader: mine,
                     laster: lasterMine,
                     ...tenantName ? { tenantName } : {},
-                    onNytt: nullstill
+                    onNytt: nyttFraMine
                   }
                 ) : null
               ]
@@ -2207,9 +2335,10 @@ function useNettstatus(client) {
   }, [c]);
   return online;
 }
-function fjernetKontekst(client, fjernede) {
+function fjernetKontekst(client, fjernede, skjerm) {
   const ut = {};
-  for (const k of Object.keys(client.context)) {
+  if (skjerm) ut["screen"] = skjerm;
+  for (const k of [...Object.keys(client.context), "screen"]) {
     if (k !== "sdkVersion" && fjernede.includes(k)) ut[k] = void 0;
   }
   return ut;