diff --git a/03_source/mobile/src/pages/DemoReactCalculator/components/Button.module.scss b/03_source/mobile/src/pages/DemoReactCalculator/components/Button.module.scss new file mode 100644 index 0000000..d4adbd4 --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/components/Button.module.scss @@ -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); + } +} diff --git a/03_source/mobile/src/pages/DemoReactCalculator/components/Button.tsx b/03_source/mobile/src/pages/DemoReactCalculator/components/Button.tsx new file mode 100644 index 0000000..398d37b --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/components/Button.tsx @@ -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 ( + clickEvent(e, value)} + > + {value === '/' ? <>÷ : value === '*' ? <>× : value} + + ); +}; + +export default Button; diff --git a/03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.module.scss b/03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.module.scss new file mode 100644 index 0000000..216fb37 --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.module.scss @@ -0,0 +1,4 @@ +.demo-react-calculator { + .buttonRow { + } +} diff --git a/03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.tsx b/03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.tsx new file mode 100644 index 0000000..375c87f --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.tsx @@ -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 {props.children}; +}; + +export default ButtonRow; diff --git a/03_source/mobile/src/pages/DemoReactCalculator/index.tsx b/03_source/mobile/src/pages/DemoReactCalculator/index.tsx index 8d5c5ef..ee886a6 100644 --- a/03_source/mobile/src/pages/DemoReactCalculator/index.tsx +++ b/03_source/mobile/src/pages/DemoReactCalculator/index.tsx @@ -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 ( - + - - - - - + + - + - - {/* */} - - - - Dashboard - - - - Search - - ); } diff --git a/03_source/mobile/src/pages/DemoReactCalculator/module.d.ts b/03_source/mobile/src/pages/DemoReactCalculator/module.d.ts new file mode 100644 index 0000000..77bc4ab --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/module.d.ts @@ -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; +} diff --git a/03_source/mobile/src/pages/DemoReactCalculator/pages/Home.module.scss b/03_source/mobile/src/pages/DemoReactCalculator/pages/Home.module.scss new file mode 100644 index 0000000..a9d7f48 --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/pages/Home.module.scss @@ -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); +} diff --git a/03_source/mobile/src/pages/DemoReactCalculator/pages/Home.tsx b/03_source/mobile/src/pages/DemoReactCalculator/pages/Home.tsx new file mode 100644 index 0000000..e6e8e02 --- /dev/null +++ b/03_source/mobile/src/pages/DemoReactCalculator/pages/Home.tsx @@ -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 ( + + + + + handleBackClick()}> + + + + + + +
+ {showTitle &&

{showTitle}

} +

{sumHistory}

+

+ {sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} +

+
+ + + + + {buttons.map((buttonRow, index) => { + return ( + + {buttonRow.map((button) => { + return ( +