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

update demo-list,

Browse Source
This commit is contained in:
louiscklaw
2025-06-08 19:06:46 +08:00
parent b515337acc
commit 6961f058df
1 changed files with 402 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

699
03_source/mobile/src/pages/DemoList/index.tsx
View File

@@ -49,42 +49,67 @@ import {
apps,
appsOutline,
book,
bookOutline,
brushOutline,
calculatorOutline,
car,
cart,
cartOutline,
cashOutline,
chatbubbleEllipses,
chatbubbleEllipsesOutline,
chatbubbleOutline,
chevronBackOutline,
chevronForward,
chevronForwardOutline,
cloudOutline,
codeSlashOutline,
codeWorkingOutline,
colorPaletteOutline,
createOutline,
document,
documentTextOutline,
filmOutline,
flashOutline,
gift,
giftOutline,
globeSharp,
gridOutline,
heart,
imageOutline,
imagesOutline,
keyOutline,
languageOutline,
layers,
layersOutline,
list,
listCircle,
listOutline,
logInOutline,
logoFacebook,
mapOutline,
menuOutline,
paperPlaneOutline,
people,
person,
personCircleOutline,
personOutline,
pizzaOutline,
qrCodeOutline,
refreshOutline,
restaurant,
restaurantOutline,
settingsOutline,
shareSocialOutline,
statsChart,
sunny,
swapHorizontal,
trashOutline,
walkOutline,
} from 'ionicons/icons';
import AboutPopover from '../../components/AboutPopover';
import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
import paths from '../../paths';
import PATHS from '../../PATHS';
import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions';
interface OwnProps {}
@@ -102,7 +127,13 @@ interface DispatchProps {
interface SettingsProps extends OwnProps, StateProps, DispatchProps {}
const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logoutUser, setAccessToken, setIsLoggedIn }) => {
const DemoList: React.FC<SettingsProps> = ({
speakers,
speakerSessions,
logoutUser,
setAccessToken,
setIsLoggedIn,
}) => {
const [events, setEvents] = useState<Event[] | []>([]);
const [showPopover, setShowPopover] = useState(false);
const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
@@ -122,23 +153,23 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
}
function handleLanguageClick() {
router.push(paths.CHANGE_LANGUAGE);
router.push(PATHS.CHANGE_LANGUAGE);
}
function handleNotImplementedClick() {
router.push(paths.NOT_IMPLEMENTED);
router.push(PATHS.NOT_IMPLEMENTED);
}
function handleDemoPageClick() {
router.push(paths.DEMO_PAGE);
router.push(PATHS.DEMO_PAGE);
}
function handleServiceAgreementClick() {
router.push(paths.SERVICE_AGREEMENT);
router.push(PATHS.SERVICE_AGREEMENT);
}
function handlePrivacyAgreementClick() {
router.push(paths.PRIVACY_AGREEMENT);
router.push(PATHS.PRIVACY_AGREEMENT);
}
const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState<boolean>(false);
@@ -158,12 +189,8 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
setShowLogoutConfirmModal(false);
}
function handleDemoWeatherApp() {
router.push(paths.DEMO_WEATHER_APP);
}
function handleDemoReactShopClick() {
router.push(paths.DEMO_REACT_SHOP);
router.push(PATHS.DEMO_REACT_SHOP);
}
return (
@@ -192,263 +219,29 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonHeader>
<IonList inset={false}>
<IonItem button={true} onClick={() => handleDemoWeatherApp()}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_WEATHER_APP_UI)}>
<IonIcon slot="start" icon={sunny} size="large"></IonIcon>
<IonLabel>Weather App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
{/* */}
{/* */}
{/* */}
{/* */}
{/* */}
{/* */}
{/* */}
{/* */}
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_ACCORDION_TUTORIAL, 'forward')}>
<IonIcon slot="start" icon={list} size="large"></IonIcon>
<IonLabel>Demo Accordion Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_BANKING_UI, 'forward')}>
<IonIcon slot="start" icon={cashOutline} size="large"></IonIcon>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_2FA_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={keyOutline} size="large"></IonIcon>
<IonLabel>
Demo Banking UI <span style={{ fontWeight: 'bold' }}>(in the middle, style outstanding)</span>
Demo 2FA Example{' '}
<span style={{ fontWeight: 'bold' }}>layout only, not functioning</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')}>
<IonIcon slot="start" icon={mapOutline} size="large"></IonIcon>
<IonLabel>
Demo Capacitor Google Maps Tutorial <span style={{ fontWeight: 'bold' }}>need a google map api key</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_COLOR_TUTORIAL, 'forward')}>
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
<IonLabel>Demo Color Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
{/*
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_ECOMMERCE_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
<IonLabel>Demo Ecommerce Example</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_FACEBOOK_CLONE, 'forward')}>
<IonIcon slot="start" icon={logoFacebook} size="large"></IonIcon>
<IonLabel>Demo Facebook Clone</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_FAST_FOOD_APP, 'forward')}>
<IonIcon slot="start" icon={restaurantOutline} size="large"></IonIcon>
<IonLabel>Demo Fast Food App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_FLOATING_TABS, 'forward')}>
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
<IonLabel>Demo Floating Tabs</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_INSTAGRAM_CLONE, 'forward')}>
<IonIcon slot="start" icon={imageOutline} size="large"></IonIcon>
<IonLabel>Demo Instagram Clone</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_KANBAN_BOARD, 'forward')}>
<IonIcon slot="start" icon={gridOutline} size="large"></IonIcon>
<IonLabel>Demo Kanban Board</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_ORDERING_APP, 'forward')}>
<IonIcon slot="start" icon={pizzaOutline} size="large"></IonIcon>
<IonLabel>Demo Ordering App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_PROFILE_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={personOutline} size="large"></IonIcon>
<IonLabel>Demo Profile Example</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_PULLSTATE_TUTORIAL, 'forward')}>
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
<IonLabel>Demo Pullstate Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_ADD_TO_CART, 'forward')}>
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
<IonLabel>Demo React Add to Cart</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_CALCULATOR, 'forward')}>
<IonIcon slot="start" icon={calculatorOutline} size="large"></IonIcon>
<IonLabel>Demo React Calculator</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_DRAWING_CANVAS, 'forward')}>
<IonIcon slot="start" icon={brushOutline} size="large"></IonIcon>
<IonLabel>Demo React Drawing Canvas</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={codeSlashOutline} size="large"></IonIcon>
<IonLabel>Demo React Hook Form Example</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_ITEM_LIST, 'forward')}>
<IonIcon slot="start" icon={listOutline} size="large"></IonIcon>
<IonLabel>Demo React Item List</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_LIFECYCLES, 'forward')}>
<IonIcon slot="start" icon={refreshOutline} size="large"></IonIcon>
<IonLabel>Demo React Lifecycles</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_LOGIN, 'forward')}>
<IonIcon slot="start" icon={logInOutline} size="large"></IonIcon>
<IonLabel>Demo React Login</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_MARVEL_APP, 'forward')}>
<IonIcon slot="start" icon={flashOutline} size="large"></IonIcon>
<IonLabel>Demo React Marvel App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')}>
<IonIcon slot="start" icon={filmOutline} size="large"></IonIcon>
<IonLabel>Demo React Movie App with Algolia</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_NOTES, 'forward')}>
<IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
<IonLabel>Demo React Notes</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_ONBOARDING_UI, 'forward')}>
<IonIcon slot="start" icon={walkOutline} size="large"></IonIcon>
<IonLabel>Demo React Onboarding UI</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')):
<IonIcon slot="start" icon={personCircleOutline} size="large"></IonIcon>
<IonLabel>Demo React Profile Dashboard UI</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_QR_CODE, 'forward')}>
<IonIcon slot="start" icon={qrCodeOutline} size="large"></IonIcon>
<IonLabel>Demo React QR Code</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_QUOTES, 'forward')):
<IonIcon slot="start" icon={bookOutline} size="large"></IonIcon>
<IonLabel>Demo React Quotes</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_SHOP_UI, 'forward')):
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
<IonLabel>Demo React Shop UI</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')):
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
<IonLabel>Demo React Tabs Menus Custom</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_THEME_SWITCHER, 'forward')):
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_THEME_SWITCHER, 'forward')}
>
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
<IonLabel>Demo React Theme Switcher</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -456,15 +249,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_WHATSAPP_CLONE, 'forward')):
<IonIcon slot="start" icon={chatbubbleEllipsesOutline} size="large"></IonIcon>
<IonLabel>Demo React WhatsApp Clone</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_SKELETON_TEXT, 'forward')):
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SKELETON_TEXT, 'forward')}>
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
<IonLabel>Demo Skeleton Text</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -472,7 +257,10 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')):
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')}
>
<IonIcon slot="start" icon={paperPlaneOutline} size="large"></IonIcon>
<IonLabel>Demo Sticky Bottom Sheet Example</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -480,15 +268,21 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_STORAGE_EXAMPLE, 'forward')):
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_STORAGE_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={cloudOutline} size="large"></IonIcon>
<IonLabel>Demo Storage Example</IonLabel>
<IonLabel>
Demo Storage Example{' '}
<span style={{ fontWeight: 'bold' }}>(need fix, message cannot display)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_SWIPERJS_TUTORIAL, 'forward')):
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_SWIPERJS_TUTORIAL, 'forward')}
>
<IonIcon slot="start" icon={imagesOutline} size="large"></IonIcon>
<IonLabel>Demo SwiperJS Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -496,19 +290,241 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick(() => router.push(paths.DEMO_WEATHER_APP_UI, 'forward')):
<IonIcon slot="start" icon={sunnyOutline} size="large"></IonIcon>
<IonLabel>Demo Weather App UI</IonLabel>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_DRAWING_CANVAS, 'forward')}
>
<IonIcon slot="start" icon={brushOutline} size="large"></IonIcon>
<IonLabel>Demo React Drawing Canvas</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
*/}
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')}
>
<IonIcon slot="start" icon={codeSlashOutline} size="large"></IonIcon>
<IonLabel>Demo React Hook Form Example</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_2FA_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={keyOutline} size="large"></IonIcon>
<IonLabel>Demo 2FA Example</IonLabel>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_ITEM_LIST, 'forward')}>
<IonIcon slot="start" icon={listOutline} size="large"></IonIcon>
<IonLabel>Demo React Item List</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_LIFECYCLES, 'forward')}
>
<IonIcon slot="start" icon={refreshOutline} size="large"></IonIcon>
<IonLabel>Demo React Lifecycles</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_LOGIN, 'forward')}>
<IonIcon slot="start" icon={logInOutline} size="large"></IonIcon>
<IonLabel>
Demo React Login <span style={{ fontWeight: 'bold' }}>(missing back button)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_MARVEL_APP, 'forward')}
>
<IonIcon slot="start" icon={flashOutline} size="large"></IonIcon>
<IonLabel>Demo React Marvel App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')}
>
<IonIcon slot="start" icon={filmOutline} size="large"></IonIcon>
<IonLabel>Demo React Movie App with Algolia</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_NOTES, 'forward')}>
<IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
<IonLabel>
Demo React Notes{' '}
<span style={{ fontWeight: 'bold' }}>TODO: need update IonSlide</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FACEBOOK_CLONE, 'forward')}>
<IonIcon slot="start" icon={logoFacebook} size="large"></IonIcon>
<IonLabel>Demo Facebook Clone</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FAST_FOOD_APP, 'forward')}>
<IonIcon slot="start" icon={restaurantOutline} size="large"></IonIcon>
<IonLabel>
Demo Fast Food App <span style={{ fontWeight: 'bold' }}>ion-slide outstanding</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FLOATING_TABS, 'forward')}>
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
<IonLabel>Demo Floating Tabs</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_INSTAGRAM_CLONE, 'forward')}>
<IonIcon slot="start" icon={imageOutline} size="large"></IonIcon>
<IonLabel>Demo Instagram Clone</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_KANBAN_BOARD, 'forward')}>
<IonIcon slot="start" icon={gridOutline} size="large"></IonIcon>
<IonLabel>
Demo Kanban Board{' '}
<span style={{ fontWeight: 'bold' }}>// TODO: fix missing ionslide in new ionic</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_ORDERING_APP, 'forward')}>
<IonIcon slot="start" icon={pizzaOutline} size="large"></IonIcon>
<IonLabel>
Demo Ordering App <span style={{ fontWeight: 'bold' }}>outstanding css</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_PROFILE_EXAMPLE, 'forward')}>
<IonIcon slot="start" icon={personOutline} size="large"></IonIcon>
<IonLabel>Demo Profile Example</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_PULLSTATE_TUTORIAL, 'forward')}
>
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
<IonLabel>Demo Pullstate Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_ADD_TO_CART, 'forward')}
>
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
<IonLabel>Demo React Add to Cart</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_CALCULATOR, 'forward')}
>
<IonIcon slot="start" icon={calculatorOutline} size="large"></IonIcon>
<IonLabel>
Demo React Calculator <span style={{ fontWeight: 'bold' }}>css need fix</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_ACCORDION_TUTORIAL, 'forward')}
>
<IonIcon slot="start" icon={list} size="large"></IonIcon>
<IonLabel>Demo Accordion Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_BANKING_UI, 'forward')}>
<IonIcon slot="start" icon={cashOutline} size="large"></IonIcon>
<IonLabel>
Demo Banking UI{' '}
<span style={{ fontWeight: 'bold' }}>(in the middle, style outstanding)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')}
>
<IonIcon slot="start" icon={mapOutline} size="large"></IonIcon>
<IonLabel>
Demo Capacitor Google Maps Tutorial{' '}
<span style={{ fontWeight: 'bold' }}>need a google map api key</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_COLOR_TUTORIAL, 'forward')}>
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
<IonLabel>Demo Color Tutorial</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_ECOMMERCE_EXAMPLE, 'forward')}
>
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
<IonLabel>
Demo Ecommerce Example{' '}
<span style={{ fontWeight: 'bold' }}>(fetch data not available at remote site)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
@@ -526,27 +542,35 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
*/}
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_POLL_APP, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_POLL_APP, 'forward')}>
<IonIcon slot="start" icon={statsChart} size="large"></IonIcon>
<IonLabel>
Demo React Poll App <span style={{ fontWeight: 'bold' }}>(css temporary broken, ignored)</span>
Demo React Poll App{' '}
<span style={{ fontWeight: 'bold' }}>(css temporary broken, ignored)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_SWITCH_TABS, 'forward')}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_SWITCH_TABS, 'forward')}
>
<IonIcon slot="start" icon={swapHorizontal} size="large"></IonIcon>
<IonLabel>
Demo React Switch Tabs <span style={{ fontWeight: 'bold' }}>(hardcoded back button)</span>
Demo React Switch Tabs{' '}
<span style={{ fontWeight: 'bold' }}>(hardcoded back button)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_OVERLAY_HOOKS, 'forward')}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_OVERLAY_HOOKS, 'forward')}
>
<IonIcon slot="start" icon={layers} size="large"></IonIcon>
<IonLabel>Demo React Overlay Hooks</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -554,20 +578,28 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')}
>
<IonIcon slot="start" icon={people} size="large"></IonIcon>
<IonLabel>
Demo Pinterest Floating Tab Bar <span style={{ fontWeight: 'bold' }}>(css not work well)</span>
Demo Pinterest Floating Tab Bar{' '}
<span style={{ fontWeight: 'bold' }}>(css not work well)</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_RESTAURANT_FINDER, 'forward')}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_RESTAURANT_FINDER, 'forward')}
>
<IonIcon slot="start" icon={restaurant} size="large"></IonIcon>
<IonLabel>
Demo Restaurant Finder <span style={{ fontWeight: 'bold' }}>need server for map showing</span>
Demo Restaurant Finder{' '}
<span style={{ fontWeight: 'bold' }}>need server for map showing</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
@@ -585,7 +617,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
<IonItem
button={true}
onClick={() => {
router.push(paths.DEMO_CLUB_HOUSE, 'forward');
router.push(PATHS.DEMO_CLUB_HOUSE, 'forward');
}}
>
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
@@ -598,7 +630,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
<IonItem
button={true}
onClick={() => {
router.push(paths.DEMO_SCORE_BOARD, 'forward');
router.push(PATHS.DEMO_SCORE_BOARD, 'forward');
}}
>
<IonIcon slot="start" icon={car} size="large"></IonIcon>
@@ -611,7 +643,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_QUOTE_APP, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QUOTE_APP, 'forward')}>
<IonIcon slot="start" icon={car} size="large"></IonIcon>
<IonLabel>Demo Quote App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -619,7 +651,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_QR_SCANNER, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QR_SCANNER, 'forward')}>
<IonIcon slot="start" icon={car} size="large"></IonIcon>
<IonLabel>Demo Qr scanner</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -627,7 +659,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_SHOP_APP_UI, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SHOP_APP_UI, 'forward')}>
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
<IonLabel>Demo Shop App UI</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -635,7 +667,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_DICTIONARY_APP, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_DICTIONARY_APP, 'forward')}>
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
<IonLabel>Demo Dictionary App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -643,7 +675,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_RECIPE_APP, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_RECIPE_APP, 'forward')}>
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
<IonLabel>Demo Recipe App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -651,7 +683,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_SLIDING_PROFILE, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SLIDING_PROFILE, 'forward')}>
<IonIcon slot="start" icon={person} size="large"></IonIcon>
<IonLabel>Demo Sliding Profile</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -659,7 +691,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_QUIZ_APP, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QUIZ_APP, 'forward')}>
<IonIcon slot="start" icon={book} size="large"></IonIcon>
<IonLabel>Demo Quiz App</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -667,7 +699,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_BLOG_POST_UI, 'forward')}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_BLOG_POST_UI, 'forward')}>
<IonIcon slot="start" icon={document} size="large"></IonIcon>
<IonLabel>Demo Blog Post UI</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
@@ -675,7 +707,10 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_TRAVEL_APP, 'forward')}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_TRAVEL_APP, 'forward')}
>
<IonIcon slot="start" icon={globeSharp} size="large"></IonIcon>
<IonLabel>
Demo React Travel App <span style={{ fontWeight: 'bold' }}>(on hold)</span>
@@ -683,10 +718,80 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')}
>
<IonIcon slot="start" icon={personCircleOutline} size="large"></IonIcon>
<IonLabel>Demo React Profile Dashboard UI</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
{/* TODO: */}
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_QR_CODE, 'forward')}>
<IonIcon slot="start" icon={qrCodeOutline} size="large"></IonIcon>
<IonLabel>
Demo React QR Code <span style={{ fontWeight: 'bold' }}>need update</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_QUOTES, 'forward')}>
<IonIcon slot="start" icon={bookOutline} size="large"></IonIcon>
<IonLabel>Demo React Quotes</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_SHOP_UI, 'forward')}>
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
<IonLabel>
Demo React Shop UI <span style={{ fontWeight: 'bold' }}>lower priority</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')}
>
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
<IonLabel>Demo React Tabs Menus Custom</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
<IonList inset={false}>
<IonItem
button={true}
onClick={() => router.push(PATHS.DEMO_REACT_ONBOARDING_UI, 'forward')}
>
<IonIcon slot="start" icon={walkOutline} size="large"></IonIcon>
<IonLabel>
Demo React Onboarding UI{' '}
<span style={{ fontWeight: 'bold' }}>TODO: update IonSlide</span>
</IonLabel>
<IonIcon icon={chevronForwardOutline}></IonIcon>
</IonItem>
</IonList>
</IonContent>
{/* REQ0058/logout */}
<IonModal isOpen={showLogoutConfirmModal} initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
<IonModal
isOpen={showLogoutConfirmModal}
initialBreakpoint={0.5}
breakpoints={[0, 0.25, 0.5, 0.75]}
>
<IonContent
className="ion-padding"
style={{
@@ -752,5 +857,5 @@ export default connect<OwnProps, StateProps, DispatchProps>({
setAccessToken,
setIsLoggedIn,
},
component: React.memo(SettingsPage),
component: React.memo(DemoList),
});