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

update calculator,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 15:00:30 +08:00
parent 731cb7500e
commit 8200e0d902
11 changed files with 349 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
03_source/mobile/src/pages/DemoReactCalculator/components/Button.module.scss Normal file
View File

@@ -0,0 +1,20 @@
.demo-react-calculator {
.button,
.specialButton {
margin: 0.2rem;
padding: 1.5rem;
margin: 0.2rem;
border-radius: 15px;
font-size: 1.5rem;
}
.button {
color: rgb(255, 255, 255);
background-color: rgb(58, 58, 58);
}
.specialButton {
color: rgb(255, 255, 255);
background-color: var(--blue-color);
}
}

17
03_source/mobile/src/pages/DemoReactCalculator/components/Button.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { IonCol } from '@ionic/react';
import styles from './Button.module.scss';
const Button = (props): React.JSX.Element => {
const { value, special, clickEvent } = props;
return (
<IonCol
className={`${special ? styles.specialButton : styles.button} animate__animated animate__faster`}
onClick={(e) => clickEvent(e, value)}
>
{value === '/' ? <>&divide;</> : value === '*' ? <>&times;</> : value}
</IonCol>
);
};
export default Button;

4
03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.module.scss Normal file
View File

@@ -0,0 +1,4 @@
.demo-react-calculator {
.buttonRow {
}
}

9
03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { IonRow } from '@ionic/react';
import styles from './ButtonRow.module.scss';
import React from 'react';
const ButtonRow = (props): React.JSX.Element => {
return <IonRow className={styles.buttonRow}>{props.children}</IonRow>;
};
export default ButtonRow;

35
03_source/mobile/src/pages/DemoReactCalculator/index.tsx
View File

@@ -1,38 +1,21 @@
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 './theme/variables.scss';
import React from 'react';
import Home from './pages/Home';
import './style.scss';
function DemoReactCalculator() {
function DemoReactCalculator(): React.JSX.Element {
return (
<IonTabs>
<IonTabs className="demo-react-calculator">
<IonRouterOutlet>
<Route exact path="/demo-react-calculator/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-react-calculator/tab2">
<Tab2 />
<Route exact path="/demo-react-calculator/home">
<Home />
</Route>
<Redirect exact path="/demo-react-calculator" to="/demo-react-calculator/tab1" />
<Redirect exact path="/demo-react-calculator" to="/demo-react-calculator/home" />
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-react-calculator/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-react-calculator/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
}

8
03_source/mobile/src/pages/DemoReactCalculator/module.d.ts vendored Normal file
View File

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

40
03_source/mobile/src/pages/DemoReactCalculator/pages/Home.module.scss Normal file
View File

@@ -0,0 +1,40 @@
.calculatorContainer {
padding-bottom: 2.5rem;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
.sumContainer {
display: flex;
flex-direction: column;
align-content: center;
align-items: flex-end;
padding-right: 2rem;
margin-top: 2rem;
background-color: rgba(99, 158, 226, 0.1);
padding: 2rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
.sumContainer h1,
.sumContainer h4,
.sumContainer p {
margin: 0;
padding: 0;
}
.sumContainer h1 {
font-size: 4rem;
}
.sumContainer p {
font-size: 2rem;
color: rgb(163, 163, 163);
}
.sumContainer h4 {
color: rgb(197, 197, 197);
}

127
03_source/mobile/src/pages/DemoReactCalculator/pages/Home.tsx Normal file
View File

@@ -0,0 +1,127 @@
import {
IonButton,
IonButtons,
IonContent,
IonFooter,
IonGrid,
IonHeader,
IonIcon,
IonPage,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import React, { useEffect, useState } from 'react';
import Button from '../components/Button';
import ButtonRow from '../components/ButtonRow';
import styles from './Home.module.scss';
import {
checkmarkOutline,
chevronBackOutline,
chevronDownCircleOutline,
closeOutline,
heart,
languageOutline,
menuOutline,
} from 'ionicons/icons';
import { buttons } from '../utils/Buttons';
const Home = (): React.JSX.Element => {
const [showTitle, setShowTitle] = useState('_______');
const [sum, setSum] = useState('0');
const [sumHistory, setSumHistory] = useState('Ionic Calculator');
const handleClick = (e, operator) => {
const tempSumHistory = sumHistory.replace('Ionic Calculator', '');
if (operator === '=') {
calculate();
} else if (operator === 'C') {
reset();
} else if (operator === 'Del') {
backspace();
} else {
setSumHistory(tempSumHistory + operator);
e.target.classList.add('animate__headShake');
setTimeout(() => {
e.target.classList.remove('animate__headShake');
}, 500);
}
};
useEffect(() => {
calculate();
}, [sumHistory]);
const calculate = () => {
try {
// eslint-disable-next-line no-eval
setSum(eval(sumHistory).length > 5 ? eval(sumHistory).toFixed(4) : eval(sumHistory));
setShowTitle('Ionic Calculator');
} catch (e) {}
};
const reset = () => {
setSumHistory('Ionic Calculator');
setSum('0');
setShowTitle('_______');
};
const backspace = () => {
const tempSum = sumHistory.substr(0, sumHistory.length - 1);
setSumHistory(tempSum);
};
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<div className={styles.sumContainer}>
{showTitle && <h4>{showTitle}</h4>}
<p>{sumHistory}</p>
<h1 className="animate__animated animate__headShake">
{sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
</h1>
</div>
</IonContent>
<IonFooter className={styles.calculatorContainer}>
<IonGrid className="ion-text-center ion-justify-content-center">
{buttons.map((buttonRow, index) => {
return (
<ButtonRow key={index}>
{buttonRow.map((button) => {
return (
<Button
key={button.value}
value={button.value}
special={button.special}
clickEvent={handleClick}
/>
);
})}
</ButtonRow>
);
})}
</IonGrid>
</IonFooter>
</IonPage>
);
};
export default Home;

103
03_source/mobile/src/pages/DemoReactCalculator/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;
}

83
03_source/mobile/src/pages/DemoReactCalculator/theme/variables.scss Normal file
View File

@@ -0,0 +1,83 @@
.demo-react-calculator {
/* 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;
}
:root {
--blue-color: rgb(99, 158, 226);
}
}

32
03_source/mobile/src/pages/DemoReactCalculator/utils/Buttons.ts Normal file
View File

@@ -0,0 +1,32 @@
export const buttons = [
[
{ value: 'C', special: true },
{ value: '(', special: true },
{ value: ')', special: true },
{ value: '+', special: true },
],
[
{ value: '7', special: false },
{ value: '8', special: false },
{ value: '9', special: false },
{ value: '-', special: true },
],
[
{ value: '4', special: false },
{ value: '5', special: false },
{ value: '6', special: false },
{ value: '*', special: true },
],
[
{ value: '1', special: false },
{ value: '2', special: false },
{ value: '3', special: false },
{ value: '/', special: true },
],
[
{ value: 'Del', special: true },
{ value: '0', special: false },
{ value: '.', special: false },
{ value: '=', special: true },
],
];