From bc6fa6b884a7d28fdc82df8a73a500144bf3600e Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 27 Apr 2022 16:34:27 -0400 Subject: [PATCH 1/4] fix(react): useIonModal/useIonPopover dismiss accepts data and role --- packages/react/src/hooks/useOverlay.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/hooks/useOverlay.ts b/packages/react/src/hooks/useOverlay.ts index f1afcf38316..cfb771727c6 100644 --- a/packages/react/src/hooks/useOverlay.ts +++ b/packages/react/src/hooks/useOverlay.ts @@ -81,8 +81,8 @@ export function useOverlay( } }, []); - const dismiss = useCallback(async () => { - overlayRef.current && (await overlayRef.current.dismiss()); + const dismiss = useCallback(async (data?: any, role?: string) => { + overlayRef.current && (await overlayRef.current.dismiss(data, role)); overlayRef.current = undefined; containerElRef.current = undefined; }, []); From 21b9b90e2128505e4799eb89ef055d4c312ac7ce Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 28 Apr 2022 15:50:33 -0400 Subject: [PATCH 2/4] fix(): ion modal result typings --- packages/react/src/hooks/useIonModal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts index f9f94002fbf..50a7deec3dc 100644 --- a/packages/react/src/hooks/useIonModal.ts +++ b/packages/react/src/hooks/useIonModal.ts @@ -40,5 +40,5 @@ export type UseIonModalResult = [ /** * Dismisses the modal */ - () => void + (data?: any, role?: string) => void ]; From 85d71f25ce6bd063689163162a8d787954aed9c5 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 28 Apr 2022 15:51:03 -0400 Subject: [PATCH 3/4] test(react): useIonModal dismiss with data and role --- .../overlay-hooks/useIonModal.spec.ts | 12 +++++++++++ .../src/pages/overlay-hooks/ModalHook.tsx | 21 ++++++++++++++----- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/packages/react/test-app/cypress/integration/overlay-hooks/useIonModal.spec.ts b/packages/react/test-app/cypress/integration/overlay-hooks/useIonModal.spec.ts index 74f89e56750..64e904061c1 100644 --- a/packages/react/test-app/cypress/integration/overlay-hooks/useIonModal.spec.ts +++ b/packages/react/test-app/cypress/integration/overlay-hooks/useIonModal.spec.ts @@ -48,6 +48,18 @@ describe('useIonModal', () => { cy.get('ion-modal').should('not.exist'); }); + it('display modal and dismiss with data and role', () => { + //show modal + cy.get('ion-button').contains('Show Modal using component param').click(); + + //close modal + cy.get('ion-button').contains('Close').click(); + cy.get('ion-modal').should('not.exist'); + + //verify role and data on main page was updated + cy.contains('Dismissed with role: close'); + cy.contains('Data: {"test":true}'); + }); // This test should pass in v6, skipping until merged with v6 it.skip('display modal with context', () => { diff --git a/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx b/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx index 0b6a90aff72..4519d327552 100644 --- a/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx +++ b/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx @@ -13,7 +13,7 @@ import { useContext } from 'react'; const Body: React.FC<{ type: string; count: number; - onDismiss: () => void; + onDismiss: (data?: any, role?: string) => void; onIncrement: () => void; }> = ({ count, onDismiss, onIncrement, type }) => ( @@ -27,7 +27,7 @@ const Body: React.FC<{ onIncrement()}> Increment Count - onDismiss()}> + onDismiss({ test: true }, 'close')}> Close @@ -42,13 +42,16 @@ const ModalWithContext: React.FC = () => { const ModalHook: React.FC = () => { const [count, setCount] = useState(0); + const [dismissedRole, setDismissedRole] = useState(); + const [dismissedData, setDismissedData] = useState(); + const handleIncrement = useCallback(() => { setCount(count + 1); }, [count, setCount]); - const handleDismissWithComponent = useCallback(() => { - dismissWithComponent(); - // eslint-disable-next-line react-hooks/exhaustive-deps + const handleDismissWithComponent = useCallback((data, role) => { + dismissWithComponent(data, role); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleDismissWithElement = useCallback(() => { @@ -89,6 +92,12 @@ const ModalHook: React.FC = () => { onClick={() => { presentWithComponent({ cssClass: 'my-class', + onDidDismiss: (ev) => { + const { data, role } = ev.detail; + console.log('dude', ev.detail); + setDismissedData(data); + setDismissedRole(role); + }, }); }} > @@ -127,6 +136,8 @@ const ModalHook: React.FC = () => {
Count: {count}
+
Dismissed with role: {dismissedRole}
+
Data: {dismissedData && JSON.stringify(dismissedData)}
 From f20db7a978f9ce169aa75040fc079399bcfe076c Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 29 Apr 2022 10:30:09 -0400 Subject: [PATCH 4/4] chore(): remove legendary debugging hack --- packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx b/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx index 4519d327552..72af4051544 100644 --- a/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx +++ b/packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx @@ -94,7 +94,6 @@ const ModalHook: React.FC = () => { cssClass: 'my-class', onDidDismiss: (ev) => { const { data, role } = ev.detail; - console.log('dude', ev.detail); setDismissedData(data); setDismissedRole(role); },