|
| 1 | +import { |
| 2 | + IonApp, |
| 3 | + IonBackButton, |
| 4 | + IonButtons, |
| 5 | + IonContent, |
| 6 | + IonHeader, |
| 7 | + IonIcon, |
| 8 | + IonItem, |
| 9 | + IonLabel, |
| 10 | + IonList, |
| 11 | + IonPage, |
| 12 | + IonRouterOutlet, |
| 13 | + IonTabBar, |
| 14 | + IonTabButton, |
| 15 | + IonTabs, |
| 16 | + IonTitle, |
| 17 | + IonToolbar, |
| 18 | +} from '@ionic/react'; |
| 19 | +import { IonReactRouter } from '@ionic/react-router'; |
| 20 | +import { ellipse, triangle } from 'ionicons/icons'; |
| 21 | +import React, { useState } from 'react'; |
| 22 | +import { Navigate, Route, useParams } from 'react-router-dom'; |
| 23 | + |
| 24 | +/* Ionic CSS and setupIonicReact */ |
| 25 | +import '../ionic-setup'; |
| 26 | +import { ROOT_SPLAT_SIBLING_BASENAME } from './basename'; |
| 27 | +import TestDescription from '../components/TestDescription'; |
| 28 | + |
| 29 | +/** |
| 30 | + * A splat container page holding tabs, next to a more specific sibling that gets pushed over |
| 31 | + * the whole tab bar, in the root outlet. |
| 32 | + * |
| 33 | + * A root catch-all can't live in the shared route tree in App.tsx without swallowing every |
| 34 | + * other spec's pathname, so this app gets its own basename and index.tsx mounts it instead |
| 35 | + * of App for that prefix. |
| 36 | + */ |
| 37 | + |
| 38 | +/** |
| 39 | + * The two spellings of a root splat fail differently, so "?splat=bare" runs the same flows |
| 40 | + * against a bare "*" instead of "/*". Stamped onto the tabs page as data-splat so a test can |
| 41 | + * confirm which spelling is live. |
| 42 | + */ |
| 43 | +const splatPath = new URLSearchParams(window.location.search).get('splat') === 'bare' ? '*' : '/*'; |
| 44 | + |
| 45 | +/** A fresh mount gets a fresh instance id, which tells a remount apart from a reveal. */ |
| 46 | +let instanceCounter = 0; |
| 47 | +const nextInstanceId = () => `tabs-${++instanceCounter}`; |
| 48 | + |
| 49 | +const Feed: React.FC = () => { |
| 50 | + const [count, setCount] = useState(0); |
| 51 | + |
| 52 | + return ( |
| 53 | + <IonContent> |
| 54 | + <IonList> |
| 55 | + <IonItem button data-testid="increment" onClick={() => setCount((c) => c + 1)}> |
| 56 | + <IonLabel>Increment</IonLabel> |
| 57 | + </IonItem> |
| 58 | + <IonItem detail routerLink="/feed/12" data-testid="open-detail"> |
| 59 | + <IonLabel>Open item 12</IonLabel> |
| 60 | + </IonItem> |
| 61 | + </IonList> |
| 62 | + <div data-testid="count">{count}</div> |
| 63 | + <TestDescription> |
| 64 | + Increment the counter, then open item 12. The detail page should push over the whole tab bar, leaving these tabs |
| 65 | + mounted behind it. Going back should reveal the same tabs with the counter unchanged. |
| 66 | + </TestDescription> |
| 67 | + </IonContent> |
| 68 | + ); |
| 69 | +}; |
| 70 | + |
| 71 | +const FeedTab: React.FC = () => ( |
| 72 | + <IonPage data-pageid="root-splat-sibling-feed"> |
| 73 | + <IonHeader> |
| 74 | + <IonToolbar> |
| 75 | + <IonTitle>Feed</IonTitle> |
| 76 | + </IonToolbar> |
| 77 | + </IonHeader> |
| 78 | + <Feed /> |
| 79 | + </IonPage> |
| 80 | +); |
| 81 | + |
| 82 | +const ProfileTab: React.FC = () => ( |
| 83 | + <IonPage data-pageid="root-splat-sibling-profile"> |
| 84 | + <IonHeader> |
| 85 | + <IonToolbar> |
| 86 | + <IonTitle>Profile</IonTitle> |
| 87 | + </IonToolbar> |
| 88 | + </IonHeader> |
| 89 | + <IonContent> |
| 90 | + <div data-testid="profile-content">Profile</div> |
| 91 | + </IonContent> |
| 92 | + </IonPage> |
| 93 | +); |
| 94 | + |
| 95 | +/** The container page the splat route renders. */ |
| 96 | +const Tabs: React.FC = () => { |
| 97 | + const [instanceId] = useState(nextInstanceId); |
| 98 | + |
| 99 | + return ( |
| 100 | + // These land on both the .ion-page div and the ion-tabs element, so select with div.ion-page. |
| 101 | + <IonTabs data-pageid="root-splat-sibling-tabs" data-instance={instanceId} data-splat={splatPath}> |
| 102 | + <IonRouterOutlet id="root-splat-sibling-tabs-outlet"> |
| 103 | + <Route path="/feed" element={<FeedTab />} /> |
| 104 | + <Route path="/profile" element={<ProfileTab />} /> |
| 105 | + <Route path="/" element={<Navigate to="/feed" replace />} /> |
| 106 | + </IonRouterOutlet> |
| 107 | + <IonTabBar slot="bottom"> |
| 108 | + <IonTabButton tab="feed" href="/feed" data-testid="tab-feed"> |
| 109 | + <IonIcon icon={triangle} /> |
| 110 | + <IonLabel>Feed</IonLabel> |
| 111 | + </IonTabButton> |
| 112 | + <IonTabButton tab="profile" href="/profile" data-testid="tab-profile"> |
| 113 | + <IonIcon icon={ellipse} /> |
| 114 | + <IonLabel>Profile</IonLabel> |
| 115 | + </IonTabButton> |
| 116 | + </IonTabBar> |
| 117 | + </IonTabs> |
| 118 | + ); |
| 119 | +}; |
| 120 | + |
| 121 | +const Detail: React.FC = () => { |
| 122 | + const { id } = useParams<{ id: string }>(); |
| 123 | + |
| 124 | + return ( |
| 125 | + <IonPage data-pageid="root-splat-sibling-detail"> |
| 126 | + <IonHeader> |
| 127 | + <IonToolbar> |
| 128 | + <IonButtons slot="start"> |
| 129 | + <IonBackButton defaultHref="/feed" /> |
| 130 | + </IonButtons> |
| 131 | + <IonTitle>Detail</IonTitle> |
| 132 | + </IonToolbar> |
| 133 | + </IonHeader> |
| 134 | + <IonContent> |
| 135 | + <div data-testid="detail-id">{id}</div> |
| 136 | + </IonContent> |
| 137 | + </IonPage> |
| 138 | + ); |
| 139 | +}; |
| 140 | + |
| 141 | +const RootSplatSiblingApp: React.FC = () => ( |
| 142 | + <IonApp> |
| 143 | + <IonReactRouter basename={ROOT_SPLAT_SIBLING_BASENAME}> |
| 144 | + <IonRouterOutlet id="root-splat-sibling-outlet"> |
| 145 | + <Route path="/feed/:id" element={<Detail />} /> |
| 146 | + <Route path={splatPath} element={<Tabs />} /> |
| 147 | + </IonRouterOutlet> |
| 148 | + </IonReactRouter> |
| 149 | + </IonApp> |
| 150 | +); |
| 151 | + |
| 152 | +export default RootSplatSiblingApp; |
0 commit comments