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

update demo-react-shop,

Browse Source
This commit is contained in:
louiscklaw
2025-06-08 19:07:48 +08:00
parent ed95621b2f
commit 19af60c410
4 changed files with 51 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx
View File

@@ -15,7 +15,7 @@ import MembersNearByList from '../MembersNearByList';
import OrderList from '../OrderList';
import MyProfile from '../MyProfile';
import MessageList from '../MessageList';
import paths from '../../paths';
import PATHS from '../../PATHS';
import Favourites from '../Favourites';
import TabAppRoute from '../../TabAppRoute';
@@ -53,23 +53,23 @@ const MainTabs: React.FC<MainTabsProps> = () => {
</IonTabButton>
*/}
<IonTabButton tab="events" href={paths.EVENT_LIST}>
<IonTabButton tab="events" href={PATHS.EVENT_LIST}>
<IonIcon icon={calendar} />
<IonLabel>Event</IonLabel>
</IonTabButton>
<IonTabButton tab="nearby" href={paths.NEARBY_LIST}>
<IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
<IonIcon icon={people} />
<IonLabel>Nearby</IonLabel>
</IonTabButton>
<IonTabButton tab="orders" href={paths.ORDERS_LIST}>
<IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
<IonIcon icon={location} />
<IonLabel>Order</IonLabel>
</IonTabButton>
<IonTabButton tab="message" href={paths.MESSAGE_LIST}>
<IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
<IonIcon icon={informationCircle} />
<IonLabel>Message</IonLabel>
</IonTabButton>
<IonTabButton tab="my_profile" href={paths.PROFILE}>
<IonTabButton tab="my_profile" href={PATHS.PROFILE}>
<IonIcon icon={informationCircle} />
<IonLabel>Profile</IonLabel>
</IonTabButton>

2
03_source/mobile/src/pages/DemoReactShop/ProductType.jsx
View File

@@ -30,7 +30,7 @@ import { capitalize, productInfo } from '../utils';
const ProductType = () => {
const router = useIonRouter();
const { category, type } = useParams();
const productsRef = useRef();
const productsRef = useRef(null);
const [products, setProducts] = useState([]);
const [filteredProducts, setFilteredProducts] = useState([]);

94
03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx
View File

@@ -1,58 +1,50 @@
import { CreateAnimation, IonButton, IonIcon } from "@ionic/react";
import { cartOutline } from "ionicons/icons";
import { useRef, useState } from "react";
import { addToCart } from "../store/CartStore";
import { CreateAnimation, IonButton, IonIcon } from '@ionic/react';
import { cartOutline } from 'ionicons/icons';
import { useRef, useState } from 'react';
import { addToCart } from '../store/CartStore';
export const AddToCartButton = ({product}) => {
export const AddToCartButton = ({ product }) => {
const animationRef = useRef(null);
const [hidden, setHidden] = useState(true);
const animationRef = useRef();
const [hidden, setHidden] = useState(true);
const floatStyle = {
display: hidden ? 'none' : '',
position: 'absolute',
};
const floatStyle = {
const floatGrowAnimation = {
property: 'transform',
fromValue: 'translateY(0) scale(1)',
toValue: 'translateY(-55px) scale(1.5)',
};
display: hidden ? "none" : "",
position: "absolute"
};
const colorAnimation = {
property: 'color',
fromValue: 'green',
toValue: 'green',
};
const floatGrowAnimation = {
const mainAnimation = {
duration: 1500,
iterations: '1',
fromTo: [floatGrowAnimation, colorAnimation],
easing: 'cubic-bezier(0.25, 0.7, 0.25, 0.7)',
};
property: "transform",
fromValue: "translateY(0) scale(1)",
toValue: "translateY(-55px) scale(1.5)"
};
const handleAddToCart = async (product) => {
setHidden(false);
await animationRef.current.animation.play();
setHidden(true);
addToCart(product);
};
const colorAnimation = {
property: "color",
fromValue: "green",
toValue: "green"
};
const mainAnimation = {
duration: 1500,
iterations: "1",
fromTo: [ floatGrowAnimation, colorAnimation ],
easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)"
};
const handleAddToCart = async product => {
setHidden(false);
await animationRef.current.animation.play();
setHidden(true);
addToCart(product);
}
return (
<IonButton color="dark" expand="full" onClick={() => handleAddToCart(product)}>
<IonIcon icon={cartOutline} />&nbsp;
Add to Cart
<CreateAnimation ref={animationRef} {...mainAnimation}>
<IonIcon icon={cartOutline} size="large" style={floatStyle} />
</CreateAnimation>
</IonButton>
);
}
return (
<IonButton color="dark" expand="full" onClick={() => handleAddToCart(product)}>
<IonIcon icon={cartOutline} />
&nbsp; Add to Cart
<CreateAnimation ref={animationRef} {...mainAnimation}>
<IonIcon icon={cartOutline} size="large" style={floatStyle} />
</CreateAnimation>
</IonButton>
);
};

2
03_source/mobile/src/pages/DemoReactShop/index.tsx
View File

@@ -18,7 +18,7 @@ import SpeakerDetail from '../SpeakerDetail';
import SessionDetail from '../SessionDetail';
import MapView from '../MapView';
import About from '../About';
import paths from '../../paths';
import PATHS from '../../PATHS';
import TabAppRoute from '../../TabAppRoute';
import { CartStore } from './store';
import { getCartCount } from './store/Selectors';