@cactuslab/native-navigation-react - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/esm/context.d.ts

@@ -43,3 +43,3 @@ import type { ClickEventData, DismissOptions, DismissResult, TabUpdate, ViewUpdate } from '@cactuslab/native-navigation';
      */
-    dismiss: (options: Omit<DismissOptions, 'id'>) => Promise<DismissResult>;
+    dismiss: (options?: Omit<DismissOptions, 'id'>) => Promise<DismissResult>;
     /**
@@ -46,0 +46,0 @@ * Add a listener for native clicks in this component.

dist/esm/index.js

@@ -104,10 +104,7 @@ import { initViewHandler } from '@cactuslab/native-navigation';
         fireViewReady(id) {
-            try {
-                internalPlugin.viewReady({
-                    id,
-                });
-            }
-            catch (error) {
-                reportError('viewReady', error);
-            }
+            internalPlugin.viewReady({
+                id,
+            }).catch(function (reason) {
+                reportError('viewReady', reason);
+            });
         },
@@ -114,0 +111,0 @@ };

dist/esm/NativeNavigationModal.d.ts

 import React from 'react';
 import { AnyComponentSpec, PresentationStyle } from '@cactuslab/native-navigation';
-interface NativeNavigationModalProps {
+export interface NativeNavigationModalProps {
+    open?: boolean;
+    onClose?: () => void;
     component: AnyComponentSpec;
@@ -14,2 +16,1 @@ presentationStyle?: PresentationStyle;
 export default function NativeNavigationModal(props: React.PropsWithChildren<NativeNavigationModalProps>): React.ReactPortal | null;
-export {};

dist/esm/NativeNavigationModal.js

@@ -44,3 +44,3 @@ import React, { useRef } from 'react';
 export default function NativeNavigationModal(props) {
-    const { children, component, presentationStyle: style, animated, cancellable, debounce } = props;
+    const { children, component, presentationStyle: style, animated, cancellable, debounce, open, onClose } = props;
     const viewId = useMemo(function () {
@@ -50,2 +50,3 @@ return leafComponentId(component) || `_modal${nextModalId++}`;
     }, []); /* We don't want to change the view id if the component changes as we ignore component changes in the useEffect */
+    const { fireViewReady, addViewsListener } = useNativeNavigation();
     /* Our internal state is a ref so that multiple invocations of useEffect (which happens in development https://react.dev/reference/react/useEffect#examples-dependencies)
@@ -57,2 +58,3 @@ can record that we're no longer unmounted.
         const state = stateHolder.current;
+        let debounceTimer;
         async function createModal() {
@@ -74,19 +76,14 @@ let result;
             if (state.shouldDismiss) {
-                NativeNavigation.dismiss({
-                    id: result.id,
-                }).catch(function (reason) {
-                    console.log('NativeNavigationModal failed to dismiss', viewId, reason);
+                dismissModal();
+            }
+            else {
+                state.viewListenerUnsubscribe = addViewsListener(function (view, event) {
+                    if (view.id === result.id && event === 'remove') {
+                        state.presentedId = undefined;
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                    }
                 });
             }
         }
-        state.shouldDismiss = false;
-        let debounceTimer;
-        if (debounce) {
-            debounceTimer = setTimeout(createModal, debounce);
-        }
-        else {
-            createModal();
-        }
-        return function () {
-            state.shouldDismiss = true;
+        function dismissModal() {
             if (debounceTimer) {
@@ -98,14 +95,38 @@ clearTimeout(debounceTimer);
             if (presentedId) {
+                state.presentedId = undefined;
                 NativeNavigation.dismiss({
                     id: presentedId,
+                }).then(function () {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
                 }).catch(function (reason) {
-                    console.log('NativeNavigationModal failed to dismiss on unmount', viewId, reason);
+                    console.log('NativeNavigationModal failed to dismiss', viewId, reason);
                 });
             }
+        }
+        if (open === false) {
+            state.shouldDismiss = true;
+            dismissModal();
+        }
+        else {
+            state.shouldDismiss = false;
+            if (debounce) {
+                debounceTimer = setTimeout(createModal, debounce);
+            }
+            else if (!state.presentedId) {
+                createModal();
+            }
+        }
+        return function () {
+            var _a;
+            state.shouldDismiss = true;
+            if (state.presentedId) {
+                dismissModal();
+            }
+            (_a = state.viewListenerUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(state);
+            state.viewListenerUnsubscribe = undefined;
         };
         /* We don't want to dismiss this once it has been presented, even if the component options change, because it will look weird */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [open]);
     const view = useNativeNavigationView(viewId);
-    const { fireViewReady } = useNativeNavigation();
     useEffect(function () {
@@ -112,0 +133,0 @@ if (view) {

dist/index.cjs.js

@@ -484,3 +484,3 @@ 'use strict';
 function NativeNavigationModal(props) {
-    const { children, component, presentationStyle: style, animated, cancellable, debounce } = props;
+    const { children, component, presentationStyle: style, animated, cancellable, debounce, open, onClose } = props;
     const viewId = React.useMemo(function () {
@@ -490,2 +490,3 @@ return leafComponentId(component) || `_modal${nextModalId++}`;
     }, []); /* We don't want to change the view id if the component changes as we ignore component changes in the useEffect */
+    const { fireViewReady, addViewsListener } = useNativeNavigation();
     /* Our internal state is a ref so that multiple invocations of useEffect (which happens in development https://react.dev/reference/react/useEffect#examples-dependencies)
@@ -497,2 +498,3 @@ can record that we're no longer unmounted.
         const state = stateHolder.current;
+        let debounceTimer;
         async function createModal() {
@@ -514,19 +516,14 @@ let result;
             if (state.shouldDismiss) {
-                nativeNavigation.NativeNavigation.dismiss({
-                    id: result.id,
-                }).catch(function (reason) {
-                    console.log('NativeNavigationModal failed to dismiss', viewId, reason);
+                dismissModal();
+            }
+            else {
+                state.viewListenerUnsubscribe = addViewsListener(function (view, event) {
+                    if (view.id === result.id && event === 'remove') {
+                        state.presentedId = undefined;
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                    }
                 });
             }
         }
-        state.shouldDismiss = false;
-        let debounceTimer;
-        if (debounce) {
-            debounceTimer = setTimeout(createModal, debounce);
-        }
-        else {
-            createModal();
-        }
-        return function () {
-            state.shouldDismiss = true;
+        function dismissModal() {
             if (debounceTimer) {
@@ -538,14 +535,38 @@ clearTimeout(debounceTimer);
             if (presentedId) {
+                state.presentedId = undefined;
                 nativeNavigation.NativeNavigation.dismiss({
                     id: presentedId,
+                }).then(function () {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
                 }).catch(function (reason) {
-                    console.log('NativeNavigationModal failed to dismiss on unmount', viewId, reason);
+                    console.log('NativeNavigationModal failed to dismiss', viewId, reason);
                 });
             }
+        }
+        if (open === false) {
+            state.shouldDismiss = true;
+            dismissModal();
+        }
+        else {
+            state.shouldDismiss = false;
+            if (debounce) {
+                debounceTimer = setTimeout(createModal, debounce);
+            }
+            else if (!state.presentedId) {
+                createModal();
+            }
+        }
+        return function () {
+            var _a;
+            state.shouldDismiss = true;
+            if (state.presentedId) {
+                dismissModal();
+            }
+            (_a = state.viewListenerUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(state);
+            state.viewListenerUnsubscribe = undefined;
         };
         /* We don't want to dismiss this once it has been presented, even if the component options change, because it will look weird */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [open]);
     const view = useNativeNavigationView(viewId);
-    const { fireViewReady } = useNativeNavigation();
     React.useEffect(function () {
@@ -661,10 +682,7 @@ if (view) {
         fireViewReady(id) {
-            try {
-                internalPlugin.viewReady({
-                    id,
-                });
-            }
-            catch (error) {
-                reportError('viewReady', error);
-            }
+            internalPlugin.viewReady({
+                id,
+            }).catch(function (reason) {
+                reportError('viewReady', reason);
+            });
         },
@@ -671,0 +689,0 @@ };

dist/index.js

@@ -481,3 +481,3 @@ var CapacitorNativeNavigationReact = (function (exports, nativeNavigation, React, reactDom) {
     function NativeNavigationModal(props) {
-        const { children, component, presentationStyle: style, animated, cancellable, debounce } = props;
+        const { children, component, presentationStyle: style, animated, cancellable, debounce, open, onClose } = props;
         const viewId = React.useMemo(function () {
@@ -487,2 +487,3 @@ return leafComponentId(component) || `_modal${nextModalId++}`;
         }, []); /* We don't want to change the view id if the component changes as we ignore component changes in the useEffect */
+        const { fireViewReady, addViewsListener } = useNativeNavigation();
         /* Our internal state is a ref so that multiple invocations of useEffect (which happens in development https://react.dev/reference/react/useEffect#examples-dependencies)
@@ -494,2 +495,3 @@ can record that we're no longer unmounted.
             const state = stateHolder.current;
+            let debounceTimer;
             async function createModal() {
@@ -511,19 +513,14 @@ let result;
                 if (state.shouldDismiss) {
-                    nativeNavigation.NativeNavigation.dismiss({
-                        id: result.id,
-                    }).catch(function (reason) {
-                        console.log('NativeNavigationModal failed to dismiss', viewId, reason);
+                    dismissModal();
+                }
+                else {
+                    state.viewListenerUnsubscribe = addViewsListener(function (view, event) {
+                        if (view.id === result.id && event === 'remove') {
+                            state.presentedId = undefined;
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                        }
                     });
                 }
             }
-            state.shouldDismiss = false;
-            let debounceTimer;
-            if (debounce) {
-                debounceTimer = setTimeout(createModal, debounce);
-            }
-            else {
-                createModal();
-            }
-            return function () {
-                state.shouldDismiss = true;
+            function dismissModal() {
                 if (debounceTimer) {
@@ -535,14 +532,38 @@ clearTimeout(debounceTimer);
                 if (presentedId) {
+                    state.presentedId = undefined;
                     nativeNavigation.NativeNavigation.dismiss({
                         id: presentedId,
+                    }).then(function () {
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
                     }).catch(function (reason) {
-                        console.log('NativeNavigationModal failed to dismiss on unmount', viewId, reason);
+                        console.log('NativeNavigationModal failed to dismiss', viewId, reason);
                     });
                 }
+            }
+            if (open === false) {
+                state.shouldDismiss = true;
+                dismissModal();
+            }
+            else {
+                state.shouldDismiss = false;
+                if (debounce) {
+                    debounceTimer = setTimeout(createModal, debounce);
+                }
+                else if (!state.presentedId) {
+                    createModal();
+                }
+            }
+            return function () {
+                var _a;
+                state.shouldDismiss = true;
+                if (state.presentedId) {
+                    dismissModal();
+                }
+                (_a = state.viewListenerUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(state);
+                state.viewListenerUnsubscribe = undefined;
             };
             /* We don't want to dismiss this once it has been presented, even if the component options change, because it will look weird */
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
+        }, [open]);
         const view = useNativeNavigationView(viewId);
-        const { fireViewReady } = useNativeNavigation();
         React.useEffect(function () {
@@ -658,10 +679,7 @@ if (view) {
             fireViewReady(id) {
-                try {
-                    internalPlugin.viewReady({
-                        id,
-                    });
-                }
-                catch (error) {
-                    reportError('viewReady', error);
-                }
+                internalPlugin.viewReady({
+                    id,
+                }).catch(function (reason) {
+                    reportError('viewReady', reason);
+                });
             },
@@ -668,0 +686,0 @@ };

package.json

 {
   "name": "@cactuslab/native-navigation-react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "React support for Native navigation for Capacitor apps",
@@ -38,3 +38,3 @@ "main": "dist/plugin.cjs.js",
   "devDependencies": {
-    "@cactuslab/native-navigation": "^0.4.0",
+    "@cactuslab/native-navigation": "^0.4.1",
     "@capacitor/core": "^5.0.3",
@@ -48,3 +48,3 @@ "@types/react": "^18.2.6",
   "peerDependencies": {
-    "@cactuslab/native-navigation": "^0.4.0",
+    "@cactuslab/native-navigation": "^0.4.1",
     "@capacitor/core": "^5.0.3",
@@ -51,0 +51,0 @@ "react": "^18.2.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

242240

increased by2.99%

Lines of code

2231

increased by2.53%

No dependency changes