-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(react): Inline overlays can be conditionally rendered
Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>
- Loading branch information
1 parent
bbd6c9a
commit 50fa677
Showing
9 changed files
with
371 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/react/test-app/src/pages/issues/IonModalConditional.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { IonButton, IonContent, IonModal } from '@ionic/react'; | ||
| import { useRef } from 'react'; | ||
| import { useState } from 'react'; | ||
|
|
||
| /** | ||
| * Issue: https://github.com/ionic-team/ionic-framework/issues/25590 | ||
| * | ||
| * Exception is thrown when IonModal is conditionally rendered inline. | ||
| */ | ||
| const IonModalConditional = () => { | ||
| const [showIonModal, setShowIonModal] = useState(false); | ||
| const [isOpen, setIsOpen] = useState(true); | ||
|
|
||
| const modal = useRef<HTMLIonModalElement>(null); | ||
|
|
||
| return ( | ||
| <IonContent> | ||
| <IonButton | ||
| id="renderModalBtn" | ||
| onClick={() => { | ||
| setShowIonModal(true); | ||
| setIsOpen(true); | ||
| }} | ||
| > | ||
| Render Modal | ||
| </IonButton> | ||
| {showIonModal && ( | ||
| <IonModal | ||
| ref={modal} | ||
| isOpen={isOpen} | ||
| onDidDismiss={() => { | ||
| setIsOpen(false); | ||
| setShowIonModal(false); | ||
| }} | ||
| > | ||
| <IonContent> | ||
| Modal Content | ||
| <IonButton id="dismissModalBtn" onClick={() => modal.current!.dismiss()}> | ||
| Close | ||
| </IonButton> | ||
| </IonContent> | ||
| </IonModal> | ||
| )} | ||
| </IonContent> | ||
| ); | ||
| }; | ||
|
|
||
| export default IonModalConditional; |
38 changes: 38 additions & 0 deletions
38
packages/react/test-app/src/pages/issues/IonModalConditionalSibling.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { IonButton, IonCard, IonContent, IonModal } from '@ionic/react'; | ||
| import { useRef } from 'react'; | ||
| import { useState } from 'react'; | ||
|
|
||
| /** | ||
| * Issue: https://github.com/ionic-team/ionic-framework/issues/25590 | ||
| * | ||
| * Exception is thrown when adding/removing nodes that are siblings of IonModal, | ||
| * while the modal is being dismissed. | ||
| */ | ||
| const IonModalConditionalSibling = () => { | ||
| const [items, setItems] = useState<string[]>(['Item 1']); | ||
| const [isOpen, setIsOpen] = useState(true); | ||
|
|
||
| const modal = useRef<HTMLIonModalElement>(null); | ||
|
|
||
| return ( | ||
| <IonContent> | ||
| {items && items.map((item) => <IonCard key={item}>Before {item}</IonCard>)} | ||
| <IonModal | ||
| ref={modal} | ||
| isOpen={isOpen} | ||
| onWillDismiss={() => { | ||
| setItems([...items, `Item ${items.length + 1}`]); | ||
| }} | ||
| onDidDismiss={() => setIsOpen(false)} | ||
| > | ||
| <IonContent> | ||
| Modal Content | ||
| <IonButton onClick={() => modal.current!.dismiss()}>Close</IonButton> | ||
| </IonContent> | ||
| </IonModal> | ||
| {items && items.map((item) => <IonCard key={item}>After {item}</IonCard>)} | ||
| </IonContent> | ||
| ); | ||
| }; | ||
|
|
||
| export default IonModalConditionalSibling; |
51 changes: 51 additions & 0 deletions
51
packages/react/test-app/src/pages/issues/IonModalDatetimeButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { IonButton, IonContent, IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react'; | ||
| import { useRef } from 'react'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const IonModalDatetimeButton = () => { | ||
| const [showIonModal, setShowIonModal] = useState(false); | ||
| const [isOpen, setIsOpen] = useState(true); | ||
|
|
||
| const modal = useRef<HTMLIonModalElement>(null); | ||
|
|
||
| return ( | ||
| <IonContent> | ||
| <IonButton | ||
| id="renderModalBtn" | ||
| onClick={() => { | ||
| setShowIonModal(true); | ||
| setIsOpen(true); | ||
| }} | ||
| > | ||
| Render Modal | ||
| </IonButton> | ||
| {showIonModal && ( | ||
| <IonModal | ||
| ref={modal} | ||
| isOpen={isOpen} | ||
| onDidDismiss={() => { | ||
| setIsOpen(false); | ||
| setShowIonModal(false); | ||
| }} | ||
| > | ||
| <IonContent> | ||
| Modal Content | ||
| <IonDatetimeButton datetime="startDate" /> | ||
| <IonModal id="datetimeModal" keepContentsMounted={true}> | ||
| <IonDatetime | ||
| id="startDate" | ||
| preferWheel | ||
| presentation="date" | ||
| name="startDate" | ||
| showDefaultButtons | ||
| color="primary" | ||
| /> | ||
| </IonModal> | ||
| </IonContent> | ||
| </IonModal> | ||
| )} | ||
| </IonContent> | ||
| ); | ||
| }; | ||
|
|
||
| export default IonModalDatetimeButton; |
65 changes: 65 additions & 0 deletions
65
packages/react/test-app/src/pages/overlay-components/IonPopoverNested.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { | ||
| IonButton, | ||
| IonContent, | ||
| IonIcon, | ||
| IonItem, | ||
| IonList, | ||
| IonListHeader, | ||
| IonPage, | ||
| IonPopover, | ||
| IonHeader, | ||
| IonTitle, | ||
| IonToolbar, | ||
| } from '@ionic/react'; | ||
| import { arrowForward } from 'ionicons/icons'; | ||
| import { useRef } from 'react'; | ||
|
|
||
| const IonPopoverNested = () => { | ||
| const menuPopover = useRef<HTMLIonPopoverElement>(null); | ||
| const submenuPopover = useRef<HTMLIonPopoverElement>(null); | ||
|
|
||
| return ( | ||
| <IonPage> | ||
| <IonHeader> | ||
| <IonToolbar> | ||
| <IonTitle>Nested Popover</IonTitle> | ||
| </IonToolbar> | ||
| </IonHeader> | ||
| <IonContent className="ion-padding"> | ||
| <IonButton id="open">Show Popover</IonButton> | ||
| <IonPopover ref={menuPopover} id="menu-popover" trigger="open"> | ||
| <IonList> | ||
| <IonListHeader>Menu Items</IonListHeader> | ||
| <IonItem>Item 1</IonItem> | ||
| <IonItem>Item 2</IonItem> | ||
| <IonItem>Item 3</IonItem> | ||
| <IonItem button id="item-4"> | ||
| More | ||
| <IonIcon icon={arrowForward} slot="end" /> | ||
| </IonItem> | ||
| <IonItem button id="close-menu-popover" onClick={() => menuPopover.current!.dismiss()}> | ||
| Close | ||
| </IonItem> | ||
| </IonList> | ||
| <IonPopover ref={submenuPopover} id="submenu-popover" trigger="item-4" side="right"> | ||
| <IonList> | ||
| <IonListHeader>Submenu Items</IonListHeader> | ||
| <IonItem>Item 1</IonItem> | ||
| <IonItem>Item 2</IonItem> | ||
| <IonItem>Item 3</IonItem> | ||
| <IonItem | ||
| id="close-submenu-popover" | ||
| button | ||
| onClick={() => submenuPopover.current!.dismiss()} | ||
| > | ||
| Close | ||
| </IonItem> | ||
| </IonList> | ||
| </IonPopover> | ||
| </IonPopover> | ||
| </IonContent> | ||
| </IonPage> | ||
| ); | ||
| }; | ||
|
|
||
| export default IonPopoverNested; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.