1+ 'use client'
2+ import { useEffect , useState } from 'react' ;
3+ import { Backspace } from 'react-bootstrap-icons' ;
4+
5+ import { evaluateExpressionSafely , formatInput } from "./utils" ;
6+
7+ export default function BasicCalc ( ) {
8+
9+ const [ inputValue , setInputValue ] = useState ( '' )
10+ const [ buttonValue , setButtonValue ] = useState ( '' )
11+ const [ equacao , setEquacao ] = useState ( '' )
12+
13+
14+ const renderGridItems = ( ) => {
15+ const gridValues = [ '%' , '/' , '*' , 'backspace' , '7' , '8' , '9' , '-' , '4' , '5' , '6' , '+' , '1' , '2' , '3' , '=' , 'c' , '0' , '.' ] ;
16+ return gridValues . map ( ( value , index ) => {
17+ let className = "rounded-md py-1 border-1 border-purple-600/25 bg-purple-600/25 flex justify-center items-center" ;
18+ if ( value === '=' ) {
19+ className += " row-span-2" ;
20+ return < button onClick = { ( ) => handleResult ( equacao ) } key = { index } className = { className } >
21+ =
22+ </ button >
23+ }
24+ if ( value === 'backspace' ) {
25+ return < button onClick = { ( ) => handleBackspace ( ) } key = { index } className = { className } >
26+ < Backspace />
27+ </ button >
28+ }
29+ return (
30+ < button onClick = { e => {
31+ if ( e . currentTarget . textContent === 'c' ) return updateValues ( '' )
32+
33+ e . currentTarget . textContent && setButtonValue ( e . currentTarget . textContent )
34+ }
35+
36+ } key = { index } className = { className } >
37+ { value }
38+ </ button >
39+ ) ;
40+ } ) ;
41+ } ;
42+
43+ const handleResult = ( values : string ) => {
44+ const result = evaluateExpressionSafely ( values ) ?. toString ( ) || ''
45+
46+ updateValues ( result )
47+ }
48+
49+ /* WIP - tratar sequencia de caracteres matemáticos */
50+ // const handleSum = (value: string) => {
51+ // setButtonValue(value)
52+ // }
53+ // const handleSub = (value: string) => {
54+ // setButtonValue(value)
55+ // }
56+ // const handleMult = (value: string) => {
57+ // setButtonValue(value)
58+ // }
59+ // const handleDiv = (value: string) => {
60+ // setButtonValue(value)
61+ // }
62+
63+ /* WIP - criar função de conversão de porcentagem */
64+ // const handlePerc = (value: string) => {
65+ // setButtonValue(value)
66+ // }
67+
68+ const updateValues = ( value : string ) => {
69+ const newValue = value . length > 0 && value [ 0 ] === '0' ? value . slice ( 1 , undefined ) : value
70+
71+ setEquacao ( newValue )
72+ setInputValue ( newValue !== '' ? formatInput ( newValue ) : '0' )
73+ }
74+
75+ const handleBackspace = ( ) => {
76+ const temp = isNaN ( parseInt ( buttonValue ) ) ? equacao . slice ( 0 , - 1 ) : equacao . slice ( 0 , - 2 )
77+ updateValues ( temp )
78+ }
79+
80+ useEffect ( ( ) => {
81+ let newValue = equacao
82+
83+ if ( buttonValue !== '' ) {
84+ newValue = equacao + buttonValue
85+ setButtonValue ( '' )
86+ }
87+
88+ updateValues ( newValue )
89+ } , [ buttonValue ] )
90+
91+ return (
92+ < div className = "bg-purple-400 rounded-lg px-2 pt-2 pb-4 space-y-6" >
93+ < div className = "flex align-middle h-16 text-xl bg-purple-400" >
94+ < input readOnly = { true } className = ' px-2 text-red-600 rounded-t-lg rounded-b-md text-right focus-visible:outline focus-visible:outline-2 focus-visible:outline-purple-900' type = "text" value = { inputValue } onChange = { e => setInputValue ( e . currentTarget . value ) } />
95+ </ div >
96+ < div >
97+ < div className = "text-base grid grid-cols-4 grid-rows-5 gap-4" >
98+ { renderGridItems ( ) }
99+ </ div >
100+ </ div >
101+ </ div >
102+ )
103+ }
0 commit comments