louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update requirement files with new feature templates and fix backend API error message, along with mobile project config updates and documentation improvements

Browse Source
This commit is contained in:
louiscklaw
2025-06-13 12:11:47 +08:00
parent f23a6b7d9c
commit 346992d4ec
3102 changed files with 220182 additions and 2896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/ActionSheet.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/ActionSheet.tsx
View File

@@ -9,8 +9,9 @@ import {
IonToolbar,
useIonActionSheet,
} from '@ionic/react';
import React from 'react';
const ActionSheet = () => {
const ActionSheet: React.FC = () => {
const [present, dismiss] = useIonActionSheet();
return (

3
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Alert.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Alert.tsx
View File

@@ -9,8 +9,9 @@ import {
IonToolbar,
useIonAlert,
} from '@ionic/react';
import React from 'react';
const Alert = () => {
const Alert: React.FC = () => {
const [present] = useIonAlert();
return (

92
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/All.tsx Normal file
View File

@@ -0,0 +1,92 @@
import {
IonButtons,
IonCard,
IonCardHeader,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
IonCardTitle,
IonCardSubtitle,
IonCardContent,
IonText,
IonButton,
IonIcon,
useIonRouter,
} from '@ionic/react';
import { chevronBackOutline } from 'ionicons/icons';
import React from 'react';
const All: React.FC = () => {
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>All</IonTitle>
<IonButtons slot="start">
<IonButton shape="round" onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">All</IonTitle>
</IonToolbar>
</IonHeader>
<IonCard>
<IonCardHeader>
<IonCardSubtitle>Sample usage</IonCardSubtitle>
<IonCardTitle>Overlay Hooks</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<IonText>
<p>
In Ionic React 5.6, the team packaged up a new set of hooks for controlling overlay
components that they thought we might like. What is an overlay you ask? It’s the
term that Ionic give components that display over your current content, such as
alerts, modals, toasts, etc.
</p>
</IonText>
<br />
<IonText>
<p>
All of the code is taken from the Ionic Framework docs. You can find the blog post
outlining these new overlay hooks{' '}
<a
href="https://ionicframework.com/blog/introducing-the-new-overlay-hooks-for-ionic-react/"
target="_blank"
rel="noreferrer"
>
here.
</a>
</p>
</IonText>
<br />
<IonText>
<p>Check out the samples by navigating to a respective one in the side menu.</p>
</IonText>
</IonCardContent>
</IonCard>
</IonContent>
</IonPage>
);
};
export default All;

3
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Loading.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Loading.tsx
View File

@@ -9,8 +9,9 @@ import {
IonToolbar,
useIonLoading,
} from '@ionic/react';
import React from 'react';
const Loading = () => {
const Loading: React.FC = () => {
const [present] = useIonLoading();
return (

86
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Modal.tsx Normal file
View File

@@ -0,0 +1,86 @@
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonText,
IonTitle,
IonToolbar,
useIonModal,
} from '@ionic/react';
import React, { useState } from 'react';
interface BodyProps {
count: number;
onDismiss: () => void;
onIncrement: () => void;
}
const Modal: React.FC = () => {
const Body = ({ count, onDismiss, onIncrement }: BodyProps) => (
<div className="ion-text-center">
<IonText color="dark" className="ion-text-center">
Count: {count}
</IonText>
<IonButton expand="block" onClick={() => onIncrement()}>
Increment Count
</IonButton>
<IonButton expand="block" onClick={() => onDismiss()}>
Close
</IonButton>
</div>
);
const [count, setCount] = useState<number>(0);
const handleIncrement = (): void => {
setCount(count + 1);
};
const handleDismiss = (): void => {
dismiss();
};
const [present, dismiss] = useIonModal(Body, {
count,
onDismiss: handleDismiss,
onIncrement: handleIncrement,
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Modal</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Modal</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() => {
present({
cssClass: 'my-class',
});
}}
>
Show Modal
</IonButton>
<div>Count: {count}</div>
</IonContent>
</IonPage>
);
};
export default Modal;

10
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Picker.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Picker.tsx
View File

@@ -11,9 +11,9 @@ import {
} from '@ionic/react';
import { useState } from 'react';
const Picker = () => {
const Picker: React.FC = () => {
const [present] = useIonPicker();
const [value, setValue] = useState('');
const [value, setValue] = useState<string>('');
return (
<IonPage>
@@ -40,7 +40,7 @@ const Picker = () => {
buttons: [
{
text: 'Confirm',
handler: (selected) => {
handler: (selected: any) => {
setValue(selected.animal.value);
},
},
@@ -81,11 +81,11 @@ const Picker = () => {
{ text: 'Bike', value: 'bike' },
],
},
],
] as any,
[
{
text: 'Confirm',
handler: (selected) => {
handler: (selected: any) => {
setValue(`${selected.animal.value}, ${selected.vehicle.value}`);
},
},

8
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Popover.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Popover.tsx
View File

@@ -13,8 +13,8 @@ import {
IonButton,
} from '@ionic/react';
const Popover = () => {
const PopoverList = ({ onHide }) => (
const Popover: React.FC = () => {
const PopoverList: React.FC<{ onHide: () => void }> = ({ onHide }) => (
<IonList>
<IonListHeader>Ionic</IonListHeader>
<IonItem button>Learn Ionic</IonItem>
@@ -27,7 +27,7 @@ const Popover = () => {
</IonList>
);
const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });
const [present, dismiss] = useIonPopover(PopoverList as any, { onHide: () => dismiss() });
return (
<IonPage>
@@ -52,7 +52,7 @@ const Popover = () => {
onClick={(e) =>
present({
event: e.nativeEvent,
})
} as any)
}
>
Show Popover

3
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Toast.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Toast.tsx
View File

@@ -9,8 +9,9 @@ import {
IonToolbar,
useIonToast,
} from '@ionic/react';
import React from 'react';
const Toast = () => {
const Toast: React.FC = () => {
const [present, dismiss] = useIonToast();
return (

0
03_source/mobile/src/pages/DemoReactOverlayHooks/notes.md → 03_source/mobile/src/pages/DemoReactOverlayHooks/NOTES.md
View File

37
03_source/mobile/src/pages/DemoReactOverlayHooks/TestComponents/Menu.jsx
View File

@@ -1,37 +0,0 @@
import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle, IonNote } from '@ionic/react';
import { useLocation } from 'react-router-dom';
import { star, starOutline } from 'ionicons/icons';
import './Menu.css';
const Menu = ({ pages }) => {
const location = useLocation();
return (
<IonMenu contentId="main" type="overlay">
<IonContent>
<IonList id="inbox-list">
<IonListHeader>Overlay Hooks</IonListHeader>
<IonNote>Choose one below to see a demo</IonNote>
{ pages.map((appPage, index) => {
const isSelected = location.pathname === appPage.url;
return (
<IonMenuToggle key={ index } autoHide={false}>
<IonItem className={ isSelected ? 'selected' : '' } routerLink={ appPage.url } routerDirection="none" lines="none" detail={false}>
<IonIcon slot="start" icon={ isSelected ? star : starOutline } />
<IonLabel>{ appPage.label }</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;

61
03_source/mobile/src/pages/DemoReactOverlayHooks/TestComponents/Menu.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import {
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote,
} from '@ionic/react';
import { useLocation } from 'react-router-dom';
import { star, starOutline } from 'ionicons/icons';
import './Menu.css';
interface MenuPage {
url: string;
label: string;
}
interface MenuProps {
pages: MenuPage[];
}
const Menu: React.FC<MenuProps> = ({ pages }) => {
const location = useLocation();
return (
<IonMenu contentId="main" type="overlay">
<IonContent>
<IonList id="inbox-list">
<IonListHeader>Overlay Hooks</IonListHeader>
<IonNote>Choose one below to see a demo</IonNote>
{pages.map((appPage, index) => {
const isSelected = location.pathname === appPage.url;
return (
<IonMenuToggle key={index} autoHide={false}>
<IonItem
className={isSelected ? 'selected' : ''}
routerLink={appPage.url}
routerDirection="none"
lines="none"
detail={false}
>
<IonIcon slot="start" icon={isSelected ? star : starOutline} />
<IonLabel>{appPage.label}</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;

37
03_source/mobile/src/pages/DemoReactOverlayHooks/components/Menu.jsx
View File

@@ -1,37 +0,0 @@
import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle, IonNote } from '@ionic/react';
import { useLocation } from 'react-router-dom';
import { star, starOutline } from 'ionicons/icons';
import './Menu.css';
const Menu = ({ pages }) => {
const location = useLocation();
return (
<IonMenu contentId="main" type="overlay">
<IonContent>
<IonList id="inbox-list">
<IonListHeader>Overlay Hooks</IonListHeader>
<IonNote>Choose one below to see a demo</IonNote>
{ pages.map((appPage, index) => {
const isSelected = location.pathname === appPage.url;
return (
<IonMenuToggle key={ index } autoHide={false}>
<IonItem className={ isSelected ? 'selected' : '' } routerLink={ appPage.url } routerDirection="none" lines="none" detail={false}>
<IonIcon slot="start" icon={ isSelected ? star : starOutline } />
<IonLabel>{ appPage.label }</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;

61
03_source/mobile/src/pages/DemoReactOverlayHooks/components/Menu.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import {
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote,
} from '@ionic/react';
import { useLocation } from 'react-router-dom';
import { star, starOutline } from 'ionicons/icons';
import './Menu.css';
interface MenuPage {
url: string;
label: string;
}
interface MenuProps {
pages: MenuPage[];
}
const Menu: React.FC<MenuProps> = ({ pages }) => {
const location = useLocation();
return (
<IonMenu contentId="main" type="overlay">
<IonContent>
<IonList id="inbox-list">
<IonListHeader>Overlay Hooks</IonListHeader>
<IonNote>Choose one below to see a demo</IonNote>
{pages.map((appPage, index) => {
const isSelected = location.pathname === appPage.url;
return (
<IonMenuToggle key={index} autoHide={false}>
<IonItem
className={isSelected ? 'selected' : ''}
routerLink={appPage.url}
routerDirection="none"
lines="none"
detail={false}
>
<IonIcon slot="start" icon={isSelected ? star : starOutline} />
<IonLabel>{appPage.label}</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;

1
03_source/mobile/src/pages/DemoReactOverlayHooks/index.tsx
View File

@@ -41,7 +41,6 @@ function DemoReactOverlayHooks() {
<Route path="/demo-react-overlay-hooks" exact={true}>
<Redirect to="/demo-react-overlay-hooks/overlay/all" />
</Route>
{pages.map((page, index) => {
const pageComponent = page.component;

58
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/ActionSheet.jsx
View File

@@ -1,58 +0,0 @@
import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, useIonActionSheet } from '@ionic/react';
const ActionSheet = () => {
const [ present, dismiss ] = useIonActionSheet();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Action Sheet</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Action Sheet</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
header: 'Action Sheet'
})
}
>
Show ActionSheet
</IonButton>
<IonButton
expand="block"
onClick={() =>
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
}
>
Show ActionSheet using params
</IonButton>
<IonButton
expand="block"
onClick={() => {
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
setTimeout(dismiss, 3000);
}}
>
Show ActionSheet, hide after 3 seconds
</IonButton>
</IonContent>
</IonPage>
);
};
export default ActionSheet;

66
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/ActionSheet.tsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
useIonActionSheet,
} from '@ionic/react';
const ActionSheet: React.FC = () => {
const [present, dismiss] = useIonActionSheet();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Action Sheet</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Action Sheet</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
header: 'Action Sheet',
})
}
>
Show ActionSheet
</IonButton>
<IonButton
expand="block"
onClick={() => present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')}
>
Show ActionSheet using params
</IonButton>
<IonButton
expand="block"
onClick={() => {
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
setTimeout(dismiss, 3000);
}}
>
Show ActionSheet, hide after 3 seconds
</IonButton>
</IonContent>
</IonPage>
);
};
export default ActionSheet;

53
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Alert.jsx
View File

@@ -1,53 +0,0 @@
import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, useIonAlert } from '@ionic/react';
const Alert = () => {
const [ present ] = useIonAlert();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Alert</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Alert</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
cssClass: 'my-css',
header: 'Alert',
message: 'alert from hook',
buttons: [
'Cancel',
{ text: 'Ok', handler: (d) => console.log('ok pressed') },
],
onDidDismiss: (e) => console.log('did dismiss'),
})
}
>
Show Alert
</IonButton>
<IonButton
expand="block"
onClick={() => present('hello with params', [{ text: 'Ok' }])}
>
Show Alert using params
</IonButton>
</IonContent>
</IonPage>
);
};
export default Alert;

57
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Alert.tsx Normal file
View File

@@ -0,0 +1,57 @@
import React from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
useIonAlert,
} from '@ionic/react';
const Alert: React.FC = () => {
const [present] = useIonAlert();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Alert</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Alert</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
cssClass: 'my-css',
header: 'Alert',
message: 'alert from hook',
buttons: ['Cancel', { text: 'Ok', handler: (d) => console.log('ok pressed') }],
onDidDismiss: (e) => console.log('did dismiss'),
})
}
>
Show Alert
</IonButton>
<IonButton expand="block" onClick={() => present('hello with params', [{ text: 'Ok' }])}>
Show Alert using params
</IonButton>
</IonContent>
</IonPage>
);
};
export default Alert;

54
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/All.jsx
View File

@@ -1,54 +0,0 @@
import { IonButtons, IonCard, IonCardHeader, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, IonCardTitle, IonCardSubtitle, IonCardContent, IonText } from '@ionic/react';
const All = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>All</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">All</IonTitle>
</IonToolbar>
</IonHeader>
<IonCard>
<IonCardHeader>
<IonCardSubtitle>Sample usage</IonCardSubtitle>
<IonCardTitle>Overlay Hooks</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<IonText>
<p>
In Ionic React 5.6, the team packaged up a new set of hooks for controlling overlay components that they thought we might like. What is an overlay you ask? It’s the term that Ionic give components that display over your current content, such as alerts, modals, toasts, etc.
</p>
</IonText>
<br />
<IonText>
<p>
All of the code is taken from the Ionic Framework docs. You can find the blog post outlining these new overlay hooks <a href="https://ionicframework.com/blog/introducing-the-new-overlay-hooks-for-ionic-react/" target="_blank" rel="noreferrer">here.</a>
</p>
</IonText>
<br />
<IonText>
<p>
Check out the samples by navigating to a respective one in the side menu.
</p>
</IonText>
</IonCardContent>
</IonCard>
</IonContent>
</IonPage>
);
};
export default All;

7
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/All.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/pages/All.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react';
import {
IonButtons,
IonCard,
@@ -14,14 +15,12 @@ import {
IonText,
} from '@ionic/react';
const All = () => {
const All: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonButtons slot="start"></IonButtons>
<IonTitle>All</IonTitle>
</IonToolbar>
</IonHeader>

46
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Loading.jsx
View File

@@ -1,46 +0,0 @@
import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, useIonLoading } from '@ionic/react';
const Loading = () => {
const [ present ] = useIonLoading();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Loading</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Loading</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
duration: 3000,
})
}
>
Show Loading
</IonButton>
<IonButton
expand="block"
onClick={() => present('Loading', 2000, 'dots')}
>
Show Loading using params
</IonButton>
</IonContent>
</IonPage>
);
};
export default Loading;

53
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Loading.tsx Normal file
View File

@@ -0,0 +1,53 @@
import React from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
useIonLoading,
} from '@ionic/react';
const Loading: React.FC = () => {
const [present] = useIonLoading();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Loading</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Loading</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
duration: 3000,
})
}
>
Show Loading
</IonButton>
<IonButton expand="block" onClick={() => present('Loading', 2000, 'dots')}>
Show Loading using params
</IonButton>
</IonContent>
</IonPage>
);
};
export default Loading;

68
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Modal.jsx
View File

@@ -1,68 +0,0 @@
import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonText, IonTitle, IonToolbar, useIonModal } from '@ionic/react';
import { useState } from 'react';
const Modal = () => {
const Body = ({ count, onDismiss, onIncrement }) => (
<div className="ion-text-center">
<IonText color="dark" className="ion-text-center">Count: { count }</IonText>
<IonButton expand="block" onClick={ () => onIncrement() }>
Increment Count
</IonButton>
<IonButton expand="block" onClick={ () => onDismiss() }>
Close
</IonButton>
</div>
);
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
const handleDismiss = () => {
dismiss();
};
const [present, dismiss] = useIonModal(Body, {
count,
onDismiss: handleDismiss,
onIncrement: handleIncrement,
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Modal</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Modal</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() => {
present({
cssClass: 'my-class',
});
}}
>
Show Modal
</IonButton>
<div>Count: {count}</div>
</IonContent>
</IonPage>
);
};
export default Modal;

19
03_source/mobile/src/pages/DemoReactOverlayHooks/AppPages/Modal.jsx → 03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Modal.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react';
import {
IonButton,
IonButtons,
@@ -12,8 +13,18 @@ import {
} from '@ionic/react';
import { useState } from 'react';
const Modal = () => {
const Body = ({ count, onDismiss, onIncrement }) => (
interface BodyProps {
count: number;
onDismiss: () => void;
onIncrement: () => void;
}
interface ModalOptions {
cssClass?: string;
}
const Modal: React.FC = () => {
const Body: React.FC<BodyProps> = ({ count, onDismiss, onIncrement }) => (
<div className="ion-text-center">
<IonText color="dark" className="ion-text-center">
Count: {count}
@@ -27,7 +38,7 @@ const Modal = () => {
</div>
);
const [count, setCount] = useState(0);
const [count, setCount] = useState<number>(0);
const handleIncrement = () => {
setCount(count + 1);
@@ -66,7 +77,7 @@ const Modal = () => {
onClick={() => {
present({
cssClass: 'my-class',
});
} as ModalOptions);
}}
>
Show Modal

97
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Picker.jsx
View File

@@ -1,97 +0,0 @@
import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, useIonPicker } from '@ionic/react';
import { useState } from 'react';
const Picker = () => {
const [ present ] = useIonPicker();
const [ value, setValue ] = useState('');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Picker</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Picker</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [
{
text: 'Confirm',
handler: (selected) => {
setValue(selected.animal.value)
},
},
],
columns: [
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
],
})
}
>
Show Picker
</IonButton>
<IonButton
expand="block"
onClick={() =>
present(
[
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
{
name: 'vehicle',
options: [
{ text: 'Car', value: 'car' },
{ text: 'Truck', value: 'truck' },
{ text: 'Bike', value: 'bike' },
],
},
],
[
{
text: 'Confirm',
handler: (selected) => {
setValue(`${selected.animal.value}, ${selected.vehicle.value}`)
},
},
]
)
}
>
Show Picker using params
</IonButton>
{value && (
<div>Selected Value: {value}</div>
)}
</IonContent>
</IonPage>
);
};
export default Picker;

125
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Picker.tsx Normal file
View File

@@ -0,0 +1,125 @@
import React from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
useIonPicker,
} from '@ionic/react';
import { useState } from 'react';
interface Option {
text: string;
value: string;
}
interface Column {
name: string;
options: Option[];
}
interface Button {
text: string;
handler: (selected: Record<string, Option>) => void;
}
interface PickerOptions {
buttons: Button[];
columns: Column[];
}
const Picker: React.FC = () => {
const [present] = useIonPicker();
const [value, setValue] = useState<string>('');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Picker</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Picker</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [
{
text: 'Confirm',
handler: (selected) => {
setValue(selected.animal.value);
},
},
],
columns: [
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
],
} as PickerOptions)
}
>
Show Picker
</IonButton>
<IonButton
expand="block"
onClick={() =>
present(
[
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
{
name: 'vehicle',
options: [
{ text: 'Car', value: 'car' },
{ text: 'Truck', value: 'truck' },
{ text: 'Bike', value: 'bike' },
],
},
] as Column[],
[
{
text: 'Confirm',
handler: (selected) => {
setValue(`${selected.animal.value}, ${selected.vehicle.value}`);
},
},
] as Button[]
)
}
>
Show Picker using params
</IonButton>
{value && <div>Selected Value: {value}</div>}
</IonContent>
</IonPage>
);
};
export default Picker;

53
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Popover.jsx
View File

@@ -1,53 +0,0 @@
import { IonButtons, IonContent, IonHeader, IonItem, IonListHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, IonList, useIonPopover, IonButton } from '@ionic/react';
const Popover = () => {
const PopoverList = ({ onHide }) => (
<IonList>
<IonListHeader>Ionic</IonListHeader>
<IonItem button>Learn Ionic</IonItem>
<IonItem button>Documentation</IonItem>
<IonItem button>Showcase</IonItem>
<IonItem button>GitHub Repo</IonItem>
<IonItem lines="none" detail={false} button onClick={ onHide }>
Close
</IonItem>
</IonList>
);
const [ present, dismiss ] = useIonPopover(PopoverList, { onHide: () => dismiss() });
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Popover</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Popover</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={(e) =>
present({
event: e.nativeEvent,
})
}
>
Show Popover
</IonButton>
</IonContent>
</IonPage>
);
};
export default Popover;

74
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Popover.tsx Normal file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import {
IonButtons,
IonContent,
IonHeader,
IonItem,
IonListHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
IonList,
useIonPopover,
IonButton,
} from '@ionic/react';
interface PopoverListProps {
onHide: () => void;
}
interface PopoverOptions {
event: Event;
}
const Popover: React.FC = () => {
const PopoverList: React.FC<PopoverListProps> = ({ onHide }) => (
<IonList>
<IonListHeader>Ionic</IonListHeader>
<IonItem button>Learn Ionic</IonItem>
<IonItem button>Documentation</IonItem>
<IonItem button>Showcase</IonItem>
<IonItem button>GitHub Repo</IonItem>
<IonItem lines="none" detail={false} button onClick={onHide}>
Close
</IonItem>
</IonList>
);
const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Popover</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Popover</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={(e) =>
present({
event: e.nativeEvent,
} as PopoverOptions)
}
>
Show Popover
</IonButton>
</IonContent>
</IonPage>
);
};
export default Popover;

52
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Toast.jsx
View File

@@ -1,52 +0,0 @@
import { IonButton, IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
const Toast = () => {
const [ present, dismiss ] = useIonToast();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Toast</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Toast</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'hide', handler: () => dismiss() }],
message: 'toast from hook, click hide to dismiss',
onDidDismiss: () => console.log('dismissed'),
onWillDismiss: () => console.log('will dismiss'),
})
}
>
Show Toast
</IonButton>
<IonButton
expand="block"
onClick={() => present('hello from hook', 3000)}
>
Show Toast using params, closes in 3 secs
</IonButton>
<IonButton expand="block" onClick={dismiss}>
Hide Toast
</IonButton>
</IonContent>
</IonPage>
);
};
export default Toast;

72
03_source/mobile/src/pages/DemoReactOverlayHooks/pages/Toast.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
useIonToast,
} from '@ionic/react';
interface ToastButton {
text: string;
handler: () => void;
}
interface ToastOptions {
buttons?: ToastButton[];
message?: string;
duration?: number;
onDidDismiss?: () => void;
onWillDismiss?: () => void;
}
const Toast: React.FC = () => {
const [present, dismiss] = useIonToast();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Toast</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Toast</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'hide', handler: () => dismiss() }],
message: 'toast from hook, click hide to dismiss',
onDidDismiss: () => console.log('dismissed'),
onWillDismiss: () => console.log('will dismiss'),
} as ToastOptions)
}
>
Show Toast
</IonButton>
<IonButton expand="block" onClick={() => present('hello from hook', 3000)}>
Show Toast using params, closes in 3 secs
</IonButton>
<IonButton expand="block" onClick={dismiss}>
Hide Toast
</IonButton>
</IonContent>
</IonPage>
);
};
export default Toast;