javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into sync-6.2-with-main

Browse Source
This commit is contained in:
Sean Perkins
2022-07-07 13:22:15 -04:00
parent bc0bdc438b 420f9bbebd
commit b833aa3a1d
117 changed files with 520 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/test-app/src/App.tsx
View File

@ -26,6 +26,7 @@ import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
import OverlayComponents from './pages/overlay-components/OverlayComponents';
import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
import Tabs from './pages/Tabs';
import NavComponent from './pages/navigation/NavComponent';
setupIonicReact();
@ -37,6 +38,7 @@ const App: React.FC = () => (
<Route path="/overlay-hooks" component={OverlayHooks} />
<Route path="/overlay-components" component={OverlayComponents} />
<Route path="/keep-contents-mounted" component={KeepContentsMounted} />
<Route path="/navigation" component={NavComponent} />
<Route path="/tabs" component={Tabs} />
</IonRouterOutlet>
</IonReactRouter>

5
packages/react/test-app/src/pages/Main.tsx
View File

@ -36,6 +36,11 @@ const Main: React.FC<MainProps> = () => {
<IonLabel>Keep Contents Mounted Overlay Components</IonLabel>
</IonItem>
</IonList>
<IonList>
<IonItem routerLink="/navigation">
<IonLabel>Navigation</IonLabel>
</IonItem>
</IonList>
<IonList>
<IonItem routerLink="/tabs">
<IonLabel>Tabs</IonLabel>

84
packages/react/test-app/src/pages/navigation/NavComponent.tsx Normal file
View File

@ -0,0 +1,84 @@
import {
IonButton,
IonContent,
IonHeader,
IonLabel,
IonNav,
IonNavLink,
IonTitle,
IonToolbar,
IonButtons,
IonBackButton,
IonPage,
} from '@ionic/react';
import React from 'react';
const NavComponent: React.FC = () => {
return (
<IonPage>
<IonNav
root={() => {
return (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Page One</IonTitle>
<IonButtons>
<IonBackButton />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent id="pageOneContent">
<IonLabel>Page one content</IonLabel>
<IonNavLink
routerDirection="forward"
component={() => {
return (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Page Two</IonTitle>
<IonButtons>
<IonBackButton />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent id="pageTwoContent">
<IonLabel>Page two content</IonLabel>
<IonNavLink
routerDirection="forward"
component={() => (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Page Three</IonTitle>
<IonButtons>
<IonBackButton />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<IonLabel>Page three content</IonLabel>
</IonContent>
</>
)}
>
<IonButton>Go to Page Three</IonButton>
</IonNavLink>
</IonContent>
</>
);
}}
>
<IonButton>Go to Page Two</IonButton>
</IonNavLink>
</IonContent>
</>
);
}}
></IonNav>
</IonPage>
);
};
export default NavComponent;

2
packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx
View File

@ -49,7 +49,7 @@ const ModalHook: React.FC = () => {
setCount(count + 1);
}, [count, setCount]);
const handleDismissWithComponent = useCallback((data, role) => {
const handleDismissWithComponent = useCallback((data: any, role: string) => {
dismissWithComponent(data, role);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);