Calculator button fixes

Author: devklick

src/components/Button/Button.tsx

@@ -1,17 +1,23 @@
-import { forwardRef, PropsWithChildren, useCallback } from "react";
+import {
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  useCallback,
+} from "react";
 import { StyledButton, StyledButtonProps } from "./styles";
 import { setRef } from "../../common/utils/htmlHelpers";
 import { adjustLuminance } from "../../common/utils/colorUtils";
 
-interface ButtonProps extends StyledButtonProps {
+interface ButtonProps
+  extends StyledButtonProps, HTMLAttributes<HTMLDivElement> {
   onClick?: () => void;
   disabled?: boolean;
 }
 
-const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(
+const Button = forwardRef<HTMLDivElement, PropsWithChildren<ButtonProps>>(
   ({ onClick, children, ...rest }, ref) => {
     const onRef = useCallback(
-      (el: HTMLButtonElement | null) => setRef(ref, el),
+      (el: HTMLDivElement | null) => setRef(ref, el),
       [ref],
     );
     const separatorColor =
@@ -26,6 +32,7 @@ const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(
         onClick={onClick}
         ref={onRef}
         separatorColor={separatorColor}
+        role="button"
       >
         {children}
       </StyledButton>

src/components/Button/styles.ts

@@ -22,7 +22,7 @@ export interface StyledButtonProps {
   separatorColor?: string;
 }
 
-export const StyledButton = styled.button<StyledButtonProps>`
+export const StyledButton = styled.div<StyledButtonProps>`
   ${buildStyledButton}
 `;
 

src/programs/Calculator/Calculator.tsx

@@ -1,5 +1,6 @@
-import {
+import React, {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -28,29 +29,38 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
     const elementRef = useRef<HTMLDivElement>(null);
     const [input, setInput] = useState<string>("");
     const [output, setOutput] = useState<string>("");
-    const [scrollbarColor, buttonColor, fontColor, primaryButtonColor] =
-      useSystemSettings((s) => [
-        s.iconColor,
-        s.secondaryColor,
-        s.fontColor,
-        s.primaryColor,
-      ]);
+    const [
+      scrollbarColor,
+      secondaryColor,
+      fontColor,
+      primaryColor,
+      errorColor,
+    ] = useSystemSettings((s) => [
+      s.iconColor,
+      s.secondaryColor,
+      s.fontColor,
+      s.primaryColor,
+      s.errorColor,
+    ]);
     const appendToInput = (value: string) =>
       setInput((current) => current + value);
     const removeFromEnd = (count: number = 1) =>
-      setInput((current) => current.slice(0, -count));
+      setInput((current) => {
+        console.log("removingFromEnd", "current", current);
+        return current.slice(0, -count);
+      });
     const clear = () => setInput("");
-    const evaluate = () => {
+    const evaluate = useCallback(() => {
       try {
-        setInput(eval(input));
+        setInput(String(eval(input)));
         setOutput("");
       } catch {
         setOutput("Invalid");
       }
-    };
+    }, [input]);
 
-    useImperativeHandle(ref, () => ({
-      onBorderedAppKeyDown(e) {
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
         const { key } = e;
 
         if (isDigit(key) || operators.has(key)) {
@@ -79,6 +89,11 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
             break;
         }
       },
+      [evaluate],
+    );
+
+    useImperativeHandle(ref, () => ({
+      onBorderedAppKeyDown: handleKeyDown,
       element: elementRef.current,
     }));
 
@@ -94,18 +109,18 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
     }, [input]);
 
     function Button({
-      displayChar,
       mathematicalChar,
+      displayChar = mathematicalChar.toString(),
       action,
+      buttonColor,
+      disabled,
     }: {
       mathematicalChar: string | number;
       displayChar?: string;
       action: "append-to-end" | "remove-from-end" | "evaluate" | "clear";
+      buttonColor: string;
+      disabled?: boolean;
     }) {
-      if (displayChar === undefined) {
-        displayChar = mathematicalChar.toString();
-      }
-
       function handleClick() {
         switch (action) {
           case "append-to-end":
@@ -127,10 +142,11 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
           width={"100%"}
           height={"100%"}
           borderRadius={12}
-          backgroundColor={
-            displayChar === "=" ? primaryButtonColor : buttonColor
-          }
+          backgroundColor={buttonColor}
           color={fontColor}
+          disabled={disabled}
+          onKeyDown={handleKeyDown}
+          className={`calculator-button--${displayChar}`}
         >
           {displayChar}
         </CommonButton>
@@ -150,27 +166,102 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
           <StyledInputOutputContents>{output}</StyledInputOutputContents>
         </StyledInputOutput>
         <StyledButtons>
-          <Button mathematicalChar={"AC"} action="clear" />
+          <Button
+            mathematicalChar={"AC"}
+            action="clear"
+            buttonColor={secondaryColor}
+          />
           <div />
           <div />
-          <Button mathematicalChar="/" displayChar="÷" action="append-to-end" />
-
-          <Button mathematicalChar={7} action="append-to-end" />
-          <Button mathematicalChar={8} action="append-to-end" />
-          <Button mathematicalChar={9} action="append-to-end" />
-          <Button mathematicalChar="*" displayChar="x" action="append-to-end" />
-          <Button mathematicalChar={4} action="append-to-end" />
-          <Button mathematicalChar={5} action="append-to-end" />
-          <Button mathematicalChar={6} action="append-to-end" />
-          <Button mathematicalChar="-" action="append-to-end" />
-          <Button mathematicalChar={1} action="append-to-end" />
-          <Button mathematicalChar={2} action="append-to-end" />
-          <Button mathematicalChar={3} action="append-to-end" />
-          <Button mathematicalChar="+" action="append-to-end" />
-          <Button mathematicalChar={0} action="append-to-end" />
-          <Button mathematicalChar="." action="append-to-end" />
-          <Button mathematicalChar="←" action="remove-from-end" />
-          <Button mathematicalChar="=" action="evaluate" />
+          <Button
+            mathematicalChar="/"
+            displayChar="÷"
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+
+          <Button
+            mathematicalChar={7}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={8}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={9}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar="*"
+            displayChar="x"
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={4}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={5}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={6}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar="-"
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={1}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={2}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={3}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar="+"
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar={0}
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar="."
+            action="append-to-end"
+            buttonColor={secondaryColor}
+          />
+          <Button
+            mathematicalChar="←"
+            action="remove-from-end"
+            buttonColor={errorColor}
+          />
+          <Button
+            mathematicalChar="="
+            action="evaluate"
+            buttonColor={primaryColor}
+            disabled={!input}
+          />
         </StyledButtons>
       </StyledCalc>
     );

src/programs/Calculator/styles.ts

@@ -50,7 +50,7 @@ export const StyledButtons = styled.div`
   height: 100%;
   justify-self: center;
   display: grid;
-  gap: 4px;
+  gap: 6px;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
   box-sizing: border-box;