@retor/react-native 0.3.2 → 0.3.4

package/dist/index.d.mts

@@ -185,7 +185,7 @@ interface HudProps {
 declare function Hud({ children }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
@@ -207,7 +207,7 @@ interface LinesCarouselProps {
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;

package/dist/index.d.ts

@@ -185,7 +185,7 @@ interface HudProps {
 declare function Hud({ children }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
@@ -207,7 +207,7 @@ interface LinesCarouselProps {
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
     /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;

package/dist/index.js

@@ -232,30 +232,47 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
     if (!notes || !readyRef.current) return;
     send("set-notes", { notes });
   }, [notes, send]);
+  const closestTagIdRef = (0, import_react2.useRef)(closestTagId);
+  const addNoteTagIdRef = (0, import_react2.useRef)(addNoteTagId);
+  const activeLineIdRef = (0, import_react2.useRef)(activeLineId);
+  const linesRef = (0, import_react2.useRef)(lines);
+  const onNoteSubmitRef = (0, import_react2.useRef)(onNoteSubmit);
+  (0, import_react2.useEffect)(() => {
+    closestTagIdRef.current = closestTagId;
+  }, [closestTagId]);
+  (0, import_react2.useEffect)(() => {
+    addNoteTagIdRef.current = addNoteTagId;
+  }, [addNoteTagId]);
+  (0, import_react2.useEffect)(() => {
+    activeLineIdRef.current = activeLineId;
+  }, [activeLineId]);
+  (0, import_react2.useEffect)(() => {
+    linesRef.current = lines;
+  }, [lines]);
+  (0, import_react2.useEffect)(() => {
+    onNoteSubmitRef.current = onNoteSubmit;
+  }, [onNoteSubmit]);
   const openAddNote = (0, import_react2.useCallback)((tagId) => {
-    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
     setIsAddNoteOpen(true);
-  }, [closestTagId]);
+  }, []);
   const closeAddNote = (0, import_react2.useCallback)(() => {
     setIsAddNoteOpen(false);
   }, []);
-  const submitNote = (0, import_react2.useCallback)(
-    (text, isPrivate = true) => {
-      const tagId = addNoteTagId;
-      const lineId = activeLineId;
-      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
-      const payload = {
-        text,
-        isPrivate,
-        tagId,
-        lineId,
-        position: tag?.position ?? null
-      };
-      onNoteSubmit?.(payload);
-      setIsAddNoteOpen(false);
-    },
-    [addNoteTagId, activeLineId, lines, onNoteSubmit]
-  );
+  const submitNote = (0, import_react2.useCallback)((text, isPrivate = true) => {
+    const tagId = addNoteTagIdRef.current;
+    const lineId = activeLineIdRef.current;
+    const tag = linesRef.current.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+    const payload = {
+      text,
+      isPrivate,
+      tagId,
+      lineId,
+      position: tag?.position ?? null
+    };
+    onNoteSubmitRef.current?.(payload);
+    setIsAddNoteOpen(false);
+  }, []);
   const handleMessage = (0, import_react2.useCallback)(
     (event) => {
       let data = null;
@@ -372,7 +389,7 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
   const sheetRef = (0, import_react5.useRef)(null);
   const snapPointsArr = (0, import_react5.useMemo)(() => snapPoints, [snapPoints]);
@@ -406,6 +423,7 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
         import_bottom_sheet2.BottomSheetBackdrop,
@@ -497,7 +515,7 @@ var import_react_native5 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 var import_lucide_react_native2 = require("lucide-react-native");
-function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
   const sheetRef = (0, import_react6.useRef)(null);
   const snapPointsArr = (0, import_react6.useMemo)(() => snapPoints, [snapPoints]);
@@ -536,6 +554,7 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       footerComponent: renderFooter,
       backdropComponent: (props) => /* @__PURE__ */ import_react6.default.createElement(
@@ -665,10 +684,11 @@ var styles3 = import_react_native5.StyleSheet.create({
     justifyContent: "center",
     position: "relative"
   },
-  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
+  list: { paddingBottom: 96, gap: 4 },
   tagItem: {
     flexDirection: "row",
     alignItems: "center",
+    marginHorizontal: 16,
     paddingHorizontal: 12,
     paddingVertical: 12,
     borderRadius: 12,
@@ -753,6 +773,7 @@ function AddNoteSheet({
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: true,
+      enableOverDrag: false,
       onDismiss: closeAddNote,
       backdropComponent: (props) => /* @__PURE__ */ import_react7.default.createElement(
         import_bottom_sheet4.BottomSheetBackdrop,

package/dist/index.mjs

@@ -188,30 +188,47 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
     if (!notes || !readyRef.current) return;
     send("set-notes", { notes });
   }, [notes, send]);
+  const closestTagIdRef = useRef(closestTagId);
+  const addNoteTagIdRef = useRef(addNoteTagId);
+  const activeLineIdRef = useRef(activeLineId);
+  const linesRef = useRef(lines);
+  const onNoteSubmitRef = useRef(onNoteSubmit);
+  useEffect(() => {
+    closestTagIdRef.current = closestTagId;
+  }, [closestTagId]);
+  useEffect(() => {
+    addNoteTagIdRef.current = addNoteTagId;
+  }, [addNoteTagId]);
+  useEffect(() => {
+    activeLineIdRef.current = activeLineId;
+  }, [activeLineId]);
+  useEffect(() => {
+    linesRef.current = lines;
+  }, [lines]);
+  useEffect(() => {
+    onNoteSubmitRef.current = onNoteSubmit;
+  }, [onNoteSubmit]);
   const openAddNote = useCallback((tagId) => {
-    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
     setIsAddNoteOpen(true);
-  }, [closestTagId]);
+  }, []);
   const closeAddNote = useCallback(() => {
     setIsAddNoteOpen(false);
   }, []);
-  const submitNote = useCallback(
-    (text, isPrivate = true) => {
-      const tagId = addNoteTagId;
-      const lineId = activeLineId;
-      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
-      const payload = {
-        text,
-        isPrivate,
-        tagId,
-        lineId,
-        position: tag?.position ?? null
-      };
-      onNoteSubmit?.(payload);
-      setIsAddNoteOpen(false);
-    },
-    [addNoteTagId, activeLineId, lines, onNoteSubmit]
-  );
+  const submitNote = useCallback((text, isPrivate = true) => {
+    const tagId = addNoteTagIdRef.current;
+    const lineId = activeLineIdRef.current;
+    const tag = linesRef.current.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+    const payload = {
+      text,
+      isPrivate,
+      tagId,
+      lineId,
+      position: tag?.position ?? null
+    };
+    onNoteSubmitRef.current?.(payload);
+    setIsAddNoteOpen(false);
+  }, []);
   const handleMessage = useCallback(
     (event) => {
       let data = null;
@@ -328,7 +345,7 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
   const sheetRef = useRef2(null);
   const snapPointsArr = useMemo3(() => snapPoints, [snapPoints]);
@@ -362,6 +379,7 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
         BottomSheetBackdrop,
@@ -458,7 +476,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import Svg, { Circle } from "react-native-svg";
 import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2, Pause, Play, Plus } from "lucide-react-native";
-function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
+function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
   const sheetRef = useRef3(null);
   const snapPointsArr = useMemo4(() => snapPoints, [snapPoints]);
@@ -497,6 +515,7 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      enableOverDrag: false,
       onChange: handleSheetChange,
       footerComponent: renderFooter,
       backdropComponent: (props) => /* @__PURE__ */ React6.createElement(
@@ -626,10 +645,11 @@ var styles3 = StyleSheet5.create({
     justifyContent: "center",
     position: "relative"
   },
-  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
+  list: { paddingBottom: 96, gap: 4 },
   tagItem: {
     flexDirection: "row",
     alignItems: "center",
+    marginHorizontal: 16,
     paddingHorizontal: 12,
     paddingVertical: 12,
     borderRadius: 12,
@@ -719,6 +739,7 @@ function AddNoteSheet({
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: true,
+      enableOverDrag: false,
       onDismiss: closeAddNote,
       backdropComponent: (props) => /* @__PURE__ */ React7.createElement(
         BottomSheetBackdrop3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retor/react-native",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",