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

update demo react add to cart,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 14:34:13 +08:00
parent d6c87e33f0
commit 731cb7500e
13 changed files with 367 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
03_source/mobile/src/pages/DemoReactAddToCart/TestComponents/CurrentWeather/WeatherProperty.tsx
View File

@@ -8,7 +8,7 @@ export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWe
const properties = {
wind: {
isIcon: false,
icon: '/assets/WeatherDemo/wind.png',
icon: '/assets/DemoReactAddToCart/WeatherDemo/wind.png',
alt: 'wind',
label: 'Wind',
value: `${currentWeather.current.wind_mph}mph`,

7
03_source/mobile/src/pages/DemoReactAddToCart/TestComponents/SkeletonDashboard/index.tsx
View File

@@ -51,7 +51,12 @@ export const SkeletonDashboard = () => (
<IonCol size="6">
<IonRow className="ion-justify-content-center ion-align-items-center">
<IonCol size="3">
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
<img
alt="wind"
src="/assets/DemoReactAddToCart/WeatherDemo/wind.png"
height="32"
width="32"
/>
</IonCol>
<IonCol size="9">

14
03_source/mobile/src/pages/DemoReactAddToCart/components/AddToCartButton.module.css Normal file
View File

@@ -0,0 +1,14 @@
.buttonContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.button {
--padding-top: 1.75rem;
--padding-bottom: 1.75rem;
--padding-start: 1.75rem;
--padding-end: 1.75rem;
}

60
03_source/mobile/src/pages/DemoReactAddToCart/components/AddToCartButton.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { CreateAnimation, IonButton, IonIcon } from '@ionic/react';
import React, { useRef, useState } from 'react';
import styles from './AddToCartButton.module.css';
import { cartOutline } from 'ionicons/icons';
const AddToCartButton = ({
icon = true,
color = 'primary',
customOnClick = null,
}): React.JSX.Element => {
const iconRef = useRef(null);
const [hidden, setHidden] = useState(true);
const floatStyle = {
display: hidden ? 'none' : '',
position: 'absolute',
};
const floatGrowAnimation = {
property: 'transform',
fromValue: 'translateY(0) scale(1)',
toValue: 'translateY(-55px) scale(1.2)',
};
const colorAnimation = {
property: 'color',
fromValue: 'white',
toValue: `var(--ion-color-${color}`,
};
const mainAnimation = {
duration: 700,
iterations: '1',
fromTo: [floatGrowAnimation, colorAnimation],
easing: 'cubic-bezier(0.25, 0.7, 0.25, 0.7)',
};
const handleClick = async () => {
setHidden(false);
await iconRef.current.animation.play();
setHidden(true);
customOnClick && customOnClick();
};
return (
<div className={styles.buttonContainer}>
<IonButton color={color} className={styles.button} onClick={handleClick}>
{!icon && 'Add to cart'}
{icon && <IonIcon icon={cartOutline} />}
</IonButton>
<CreateAnimation ref={iconRef} {...mainAnimation}>
<IonIcon icon={cartOutline} size="large" style={floatStyle} />
</CreateAnimation>
</div>
);
};
export default AddToCartButton;

19
03_source/mobile/src/pages/DemoReactAddToCart/components/Product.module.css Normal file
View File

@@ -0,0 +1,19 @@
.priceContainer {
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
align-items: center;
}
.price {
margin-top: 0.7rem;
border: 1px solid var(--ion-color-primary);
color: var(--ion-color-primary);
width: fit-content;
padding: 1rem;
border-radius: 10px;
font-weight: 600;
}

61
03_source/mobile/src/pages/DemoReactAddToCart/components/Product.tsx Normal file
View File

@@ -0,0 +1,61 @@
import {
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonCol,
IonGrid,
IonRow,
IonText,
} from '@ionic/react';
import AddToCartButton from './AddToCartButton';
import styles from './Product.module.css';
const Product = ({ product }): React.JSX.Element => {
const handleAdd = (product) => {
console.log(`Product added: ${product.name}`);
console.log({ product });
// Do something
// Update Main Cart
// Global State Stuff
// API Call
// etc etc
};
return (
<IonCard>
<IonCardHeader>
<IonCardTitle>{product.name}</IonCardTitle>
<IonCardSubtitle>{product.description}</IonCardSubtitle>
</IonCardHeader>
<IonCardContent>
<IonGrid>
<IonRow className="ion-margin-bottom">
<IonCol size="5">
<img src={product.image} alt="product" />
</IonCol>
<IonCol size="7">
<IonText>
<IonCardSubtitle>Product Features</IonCardSubtitle>
{product.features.map((feature, index) => {
return <p key={index}>{feature}</p>;
})}
</IonText>
</IonCol>
</IonRow>
<IonRow className={styles.priceContainer}>
<div className={styles.price}>{product.price}</div>
<AddToCartButton icon={true} customOnClick={() => handleAdd(product)} />
</IonRow>
</IonGrid>
</IonCardContent>
</IonCard>
);
};
export default Product;

31
03_source/mobile/src/pages/DemoReactAddToCart/index.tsx
View File

@@ -1,38 +1,29 @@
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { IonRouterOutlet, IonTabs } from '@ionic/react';
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 DemoReactAddToCart() {
return (
<IonTabs>
<IonTabs className="demo-react-add-to-cart">
<IonRouterOutlet>
{/*
<Route exact path="/demo-react-add-to-cart/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-react-add-to-cart/tab2">
<Tab2 />
</Route>
*/}
<Redirect exact path="/demo-react-add-to-cart" to="/demo-react-add-to-cart/tab1" />
<Route exact path="/demo-react-add-to-cart/home">
<Home />
</Route>
<Redirect exact path="/demo-react-add-to-cart" to="/demo-react-add-to-cart/home" />
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-react-add-to-cart/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-react-add-to-cart/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
}

4
03_source/mobile/src/pages/DemoReactAddToCart/module.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}

19
03_source/mobile/src/pages/DemoReactAddToCart/pages/Home.css Normal file
View File

@@ -0,0 +1,19 @@
.price-container {
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
align-items: center;
}
.price {
margin-top: 0.7rem;
border: 1px solid var(--ion-color-primary);
color: var(--ion-color-primary);
width: fit-content;
padding: 1rem;
border-radius: 10px;
font-weight: 600;
}

45
03_source/mobile/src/pages/DemoReactAddToCart/pages/Home.tsx Normal file
View File

@@ -0,0 +1,45 @@
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import './Home.css';
import Product from '../components/Product';
import { products } from './products';
import React from 'react';
import { chevronBackOutline } from 'ionicons/icons';
const Home = (): React.JSX.Element => {
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Add To Cart Animation</IonTitle>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
{products.map((product) => {
return <Product key={product.id} product={product} />;
})}
</IonContent>
</IonPage>
);
};
export default Home;

44
03_source/mobile/src/pages/DemoReactAddToCart/pages/products.ts Normal file
View File

@@ -0,0 +1,44 @@
export const products = [
{
id: 1,
name: 'Macbook Pro',
description: "13.3' (2020) - M1, 256 GB SSD, Space Grey",
price: '£1,199',
image: '/assets/DemoReactAddToCart/macbook.jpeg',
features: [
'macOS 11.0 Big Sur',
'Apple M1 chip',
'RAM: 8 GB / Storage: 256 GB SSD',
'Retina display',
'Battery life: Up to 20 hours',
],
},
{
id: 2,
name: 'SONY A7',
description: 'SONY a7 III Mirrorless Camera - Black',
price: '£1,699',
image: '/assets/DemoReactAddToCart/camera.jpeg',
features: [
'24.2 megapixels',
'Full-frame 35 mm / 35.6 x 23.8 mm CMOS sensor',
'Built-in WiFi / Bluetooth / NFC',
"3' tiltable LCD touchscreen",
'10 fps in continuous shooting mode',
],
},
{
id: 3,
name: 'HISENSE 55',
description: "55' Smart 4K Ultra HD HDR LED TV",
price: '£429',
image: '/assets/DemoReactAddToCart/tv.jpeg',
features: [
'Picture quality: 1600 PCI',
'HDR: HDR10 / Hybrid Log-Gamma (HLG)',
'Catch-up TV & 4K streaming',
'Freeview HD with Freeview Play',
'HDMI 2.0 x 3',
],
},
];

8
03_source/mobile/src/pages/DemoReactAddToCart/style.scss
View File

@@ -41,19 +41,19 @@
}
.about-header .madison {
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/madison.jpg');
}
.about-header .austin {
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/austin.jpg');
}
.about-header .chicago {
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/chicago.jpg');
}
.about-header .seattle {
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/seattle.jpg');
}
.about-info {

79
03_source/mobile/src/pages/DemoReactAddToCart/theme/variables.scss Normal file
View File

@@ -0,0 +1,79 @@
.demo-react-add-to-cart {
/* 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;
}
}