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

update DemoStickyBottomSheetExample,

Browse Source
This commit is contained in:
louiscklaw
2025-06-08 15:21:40 +08:00
parent 8b32d153db
commit ba1e718039
11 changed files with 403 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/CurrentWeather/WeatherProperty.tsx → 03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/CurrentWeather/WeatherProperty.tsx
View File

0
03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/CurrentWeather/index.tsx → 03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/CurrentWeather/index.tsx
View File

0
03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/SkeletonDashboard/index.tsx → 03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/SkeletonDashboard/index.tsx
View File

49
03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheet.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { IonCol, IonGrid, IonModal, IonRow, IonSearchbar } from "@ionic/react";
import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces";
import { useState } from "react";
import { BottomSheetContent } from "./BottomSheetContent";
import { DummyItem } from "./DummyItem";
interface BottomSheetProps {
isOpen: boolean,
close: (event: CustomEvent<OverlayEventDetail<any>>) => void
}
export const BottomSheet: React.FC<BottomSheetProps> = ({ isOpen, close }) => {
const amountOfDummyItems = 10;
const [search, setSearch] = useState<string>("")
const handleChange = (e:any)=> {
setSearch(e.target.value);
}
return (
<IonModal isOpen={isOpen} onDidDismiss={close} breakpoints={[0, 0.12, 0.5, 1]} initialBreakpoint={0.12} backdropBreakpoint={0.5}>
<IonGrid className="ion-padding-top">
<IonRow>
<IonCol size="12">
<IonSearchbar animated value={search} onIonChange={handleChange} placeholder="Search by item number" />
</IonCol>
</IonRow>
{/* Check the comments insside BottomSheetContent component */}
{/* Regarding the scrolling of "content" inside a sheet modal */}
<BottomSheetContent>
{ [...Array(amountOfDummyItems)].map((e, i) => {
if (search.includes(i.toString()) || search === "") {
return (
<DummyItem key={i} number={i} />
);
} else {
return "";
}
})}
</BottomSheetContent>
</IonGrid>
</IonModal>
);
}

19
03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheetContent.tsx Normal file
View File

@@ -0,0 +1,19 @@
export const BottomSheetContent: React.FC = ({ children }) => {
return (
// Some work needed for inner content of a sheet-modal
// Scroll is a bit buggy when sheet is full height
// Scroll the content down, then try and scroll up
// Maybe some functionality needed on the Sheet Modal component to keep track of inner content scroll position and only interact with modal if scroll position of inner content is back to top OR if only interacting with the modal container (edges, top, etc)
// Applied this CSS just to make it work 50% of the way to test
<div style={{
overflow: "scroll",
height: "100vh"
}}>
{ children }
</div>
);
}

20
03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { IonCard, IonCardContent, IonLabel } from "@ionic/react";
interface DummyItemProps {
number: number,
}
export const DummyItem: React.FC<DummyItemProps> = ({ number }) => {
return (
<IonCard>
<IonCardContent>
<IonLabel>
<h2>Item number {number}</h2>
<p>This is a dummy item</p>
</IonLabel>
</IonCardContent>
</IonCard>
);
}

25
03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
View File

@@ -3,32 +3,31 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import Tab1 from './AppPages/Tab1';
import Tab2 from './AppPages/Tab2';
import './style.scss';
import './theme/variables.scss';
import Home from './pages/Home';
function DemoStickyBottomSheetExample() {
return (
<IonTabs>
<IonTabs className="demo-sticky-bottom-sheet-example">
<IonRouterOutlet>
<Route exact path="/demo-weather-app/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-weather-app/tab2">
<Tab2 />
<Route exact path="/demo-sticky-bottom-sheet-example/home">
<Home />
</Route>
<Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
<Redirect
exact
path="/demo-sticky-bottom-sheet-example"
to="/demo-sticky-bottom-sheet-example/home"
/>
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-weather-app/tab1">
<IonTabButton tab="tab1" href="/demo-sticky-bottom-sheet-example/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-weather-app/tab2">
<IonTabButton tab="tab2" href="/demo-sticky-bottom-sheet-example/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>

0
03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.scss Normal file
View File

66
03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx Normal file
View File

@@ -0,0 +1,66 @@
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import { useState } from 'react';
import { BottomSheet } from '../components/BottomSheet';
import './Home.scss';
import { chevronBackOutline } from 'ionicons/icons';
const Home: React.FC = () => {
const [showBottomSheet, setShowBottomSheet] = useState<boolean>(true);
const handleClose = () => {
setShowBottomSheet(false);
setTimeout(() => {
setShowBottomSheet(true);
}, 10);
};
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic Sticky Bottom Sheet</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" className="ion-text-wrap">
Sticky Bottom Sheet
</IonTitle>
<IonButtons slot="start">
<IonButton shape="round" onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<BottomSheet isOpen={showBottomSheet} close={handleClose} />
</IonContent>
</IonPage>
);
};
export default Home;

103
03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss
View File

@@ -1,103 +0,0 @@
#about-page {
ion-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
--background: transparent;
--color: white;
}
ion-toolbar ion-back-button,
ion-toolbar ion-button,
ion-toolbar ion-menu-button {
--color: white;
}
.about-header {
position: relative;
width: 100%;
height: 30%;
}
.about-header .about-image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.about-header .madison {
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
}
.about-header .austin {
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
}
.about-header .chicago {
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
}
.about-header .seattle {
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
}
.about-info {
position: relative;
margin-top: -10px;
border-radius: 10px;
background: var(--ion-background-color, #fff);
z-index: 2; // display rounded border above header image
}
.about-info h3 {
margin-top: 0;
}
.about-info ion-list {
padding-top: 0;
}
.about-info p {
line-height: 130%;
color: var(--ion-color-dark);
}
.about-info ion-icon {
margin-inline-end: 32px;
}
/*
* iOS Only
*/
.ios .about-info {
--ion-padding: 19px;
}
.ios .about-info h3 {
font-weight: 700;
}
}
#date-input-popover {
--offset-y: -var(--ion-safe-area-bottom);
--max-width: 90%;
--width: 336px;
}

237
03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss Normal file
View File

@@ -0,0 +1,237 @@
.demo-sticky-bottom-sheet-example {
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66, 140, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;
--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80, 200, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;
--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106, 100, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;
--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47, 223, 117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0, 0, 0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;
--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255, 213, 52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;
--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255, 73, 97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;
--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244, 245, 248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0, 0, 0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34, 36, 40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255, 255, 255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
/*
* iOS Dark Theme
* -------------------------------------------
*/
.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0, 0, 0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-item-background: #000000;
--ion-card-background: #1c1c1d;
}
.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}
/*
* Material Design Dark Theme
* -------------------------------------------
*/
.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18, 18, 18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1e1e1e;
--ion-toolbar-background: #1f1f1f;
--ion-tab-bar-background: #1f1f1f;
--ion-card-background: #1e1e1e;
}
}
}