Fix typecheck errors

actualbudget · Apr 2, 2024 · 87bfbd5 · 87bfbd5
1 parent 04b054f
commit 87bfbd5
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 38 deletions.
diff --git a/packages/desktop-client/src/components/budget/rollover/CategoryBudgetMenu.tsx b/packages/desktop-client/src/components/budget/rollover/CategoryBudgetMenu.tsx
@@ -18,7 +18,7 @@ export function CategoryBudgetMenu({
   ...props
 }: CategoryBudgetMenuProps) {
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
-  const onMenuSelect = name => {
+  const onMenuSelect = (name: string) => {
     switch (name) {
       case 'copy-single-last':
         onCopyLastMonthAverage?.();

diff --git a/...ile/transactions/FocusableAmountInput.jsx → ...ile/transactions/FocusableAmountInput.tsx b/...ile/transactions/FocusableAmountInput.jsx → ...ile/transactions/FocusableAmountInput.tsx
@@ -1,4 +1,13 @@
-import { memo, useEffect, useRef, useState } from 'react';
+import React, {
+  type MutableRefObject,
+  type Ref,
+  type ComponentPropsWithRef,
+  type HTMLProps,
+  memo,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   toRelaxedNumber,
@@ -7,22 +16,40 @@ import {
 } from 'loot-core/src/shared/util';
 
 import { useMergedRefs } from '../../../hooks/useMergedRefs';
-import { theme } from '../../../style';
+import { type CSSProperties, theme } from '../../../style';
 import { Button } from '../../common/Button';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
 
+type AmountInputProps = {
+  value: number;
+  focused?: boolean;
+  style?: CSSProperties;
+  textStyle?: CSSProperties;
+  inputRef?: Ref<HTMLInputElement>;
+  onFocus?: HTMLProps<HTMLInputElement>['onFocus'];
+  onBlur?: HTMLProps<HTMLInputElement>['onBlur'];
+  onChangeValue?: (value: string) => void;
+  onUpdate?: (value: string) => void;
+  onUpdateAmount?: (value: number) => void;
+};
+
 const AmountInput = memo(function AmountInput({
   focused,
   style,
   textStyle,
   ...props
-}) {
+}: AmountInputProps) {
   const [editing, setEditing] = useState(false);
   const [text, setText] = useState('');
   const [value, setValue] = useState(0);
-  const inputRef = useRef();
-  const mergedInputRef = useMergedRefs(props.inputRef, inputRef);
+  const inputRef = useRef<HTMLInputElement>();
+
+  // Need to update useMergedRefs to support Ref.
+  const mergedInputRef = useMergedRefs<HTMLInputElement>(
+    props.inputRef as MutableRefObject<HTMLInputElement>,
+    inputRef as MutableRefObject<HTMLInputElement>,
+  );
 
   const initialValue = Math.abs(props.value);
 
@@ -42,11 +69,12 @@ const AmountInput = memo(function AmountInput({
     return toRelaxedNumber(text.replace(/[,.]/, getNumberFormat().separator));
   };
 
-  const onKeyPress = e => {
+  const onKeyPress: HTMLProps<HTMLInputElement>['onKeyUp'] = e => {
     if (e.key === 'Backspace' && text === '') {
       setEditing(true);
     }
   };
+
   const applyText = () => {
     const parsed = parseText();
     const newValue = editing ? parsed : value;
@@ -58,20 +86,25 @@ const AmountInput = memo(function AmountInput({
     return newValue;
   };
 
-  const onFocus = e => {
+  const onFocus: HTMLProps<HTMLInputElement>['onFocus'] = e => {
     props.onFocus?.(e);
   };
 
-  const onBlur = e => {
-    const value = applyText();
+  const onUpdate = (value: string) => {
     props.onUpdate?.(value);
+    const amount = applyText();
+    props.onUpdateAmount?.(amount);
+  };
+
+  const onBlur: HTMLProps<HTMLInputElement>['onBlur'] = e => {
+    onUpdate(e.target.value);
     props.onBlur?.(e);
   };
 
-  const onChangeText = text => {
+  const onChangeText = (text: string) => {
     setEditing(true);
     setText(text);
-    props.onChange?.(text);
+    props.onChangeValue?.(text);
   };
 
   const input = (
@@ -105,20 +138,32 @@ const AmountInput = memo(function AmountInput({
     >
       <View style={{ overflowY: 'auto', overflowX: 'hidden' }}>{input}</View>
       <Text
-        style={textStyle}
+        style={{
+          pointerEvents: 'none',
+          ...textStyle,
+        }}
         data-testid="amount-fake-input"
-        pointerEvents="none"
       >
         {editing ? text : amountToCurrency(value)}
       </Text>
     </View>
   );
 });
 
+type FocusableAmountInputProps = Omit<AmountInputProps, 'onFocus'> & {
+  sign?: '+' | '-';
+  zeroSign?: '+' | '-';
+  focused?: boolean;
+  disabled?: boolean;
+  focusedStyle?: CSSProperties;
+  buttonProps?: ComponentPropsWithRef<typeof Button>;
+  onFocus?: () => void;
+};
+
 export const FocusableAmountInput = memo(function FocusableAmountInput({
   value,
-  sign, // + or -
-  zeroSign, // + or -
+  sign,
+  zeroSign,
   focused,
   disabled,
   textStyle,
@@ -128,9 +173,18 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
   onFocus,
   onBlur,
   ...props
-}) {
+}: FocusableAmountInputProps) {
   const [isNegative, setIsNegative] = useState(true);
 
+  const maybeApplyNegative = (amount: number, negative: boolean) => {
+    const absValue = Math.abs(amount);
+    return negative ? -absValue : absValue;
+  };
+
+  const onUpdateAmount = (amount: number, negative: boolean) => {
+    props.onUpdateAmount?.(maybeApplyNegative(amount, negative));
+  };
+
   useEffect(() => {
     if (sign) {
       setIsNegative(sign === '-');
@@ -144,17 +198,8 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
       return;
     }
 
+    onUpdateAmount(value, !isNegative);
     setIsNegative(!isNegative);
-    props.onUpdate?.(maybeApplyNegative(value, !isNegative));
-  };
-
-  const maybeApplyNegative = (val, negative) => {
-    const absValue = Math.abs(val);
-    return negative ? -absValue : absValue;
-  };
-
-  const onUpdate = val => {
-    props.onUpdate?.(maybeApplyNegative(val, isNegative));
   };
 
   return (
@@ -164,7 +209,7 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
         value={value}
         onFocus={onFocus}
         onBlur={onBlur}
-        onUpdate={onUpdate}
+        onUpdateAmount={amount => onUpdateAmount(amount, isNegative)}
         focused={focused && !disabled}
         style={{
           width: 80,
@@ -210,7 +255,7 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
               borderBottomWidth: 1,
               borderColor: '#e0e0e0',
               justifyContent: 'center',
-              transform: [{ translateY: 0.5 }],
+              // transform: [{ translateY: 0.5 }],
               ...style,
             }}
           >

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -748,7 +748,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
             zeroSign="-"
             focused={totalAmountFocused}
             onFocus={onTotalAmountEdit}
-            onUpdate={onTotalAmountUpdate}
+            onUpdateAmount={onTotalAmountUpdate}
             focusedStyle={{
               width: 'auto',
               padding: '5px',

diff --git a/packages/desktop-client/src/components/modals/ReportCategoryBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportCategoryBudgetMenuModal.tsx
@@ -1,4 +1,4 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, { useState, type ComponentPropsWithoutRef } from 'react';
 
 import { reportBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
@@ -37,14 +37,15 @@ export function ReportCategoryBudgetMenuModal({
 
   const budgeted = useSheetValue(reportBudget.catBudgeted(categoryId));
   const category = useCategory(categoryId);
+  const [amountFocused, setAmountFocused] = useState(false);
 
-  const _onUpdateBudget = amount => {
+  const _onUpdateBudget = (amount: number) => {
     onUpdateBudget?.(amountToInteger(amount));
   };
 
   return (
     <Modal
-      title={category?.name}
+      title={`Budget: ${category?.name}`}
       showHeader
       focusAfterClose={false}
       {...modalProps}
@@ -65,10 +66,19 @@ export function ReportCategoryBudgetMenuModal({
       >
         <FocusableAmountInput
           value={integerToAmount(budgeted || 0)}
-          focused={true}
+          focused={amountFocused}
+          onFocus={() => setAmountFocused(true)}
+          onBlur={() => setAmountFocused(false)}
           zeroSign="+"
+          focusedStyle={{
+            width: 'auto',
+            padding: '5px',
+            paddingLeft: '20px',
+            paddingRight: '20px',
+            minWidth: '100%',
+          }}
           textStyle={{ ...styles.veryLargeText, textAlign: 'center' }}
-          onUpdate={_onUpdateBudget}
+          onUpdateAmount={_onUpdateBudget}
         />
       </View>
       <CategoryBudgetMenu

diff --git a/packages/desktop-client/src/components/modals/RolloverCategoryBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverCategoryBudgetMenuModal.tsx
@@ -39,7 +39,7 @@ export function RolloverCategoryBudgetMenuModal({
   const category = useCategory(categoryId);
   const [amountFocused, setAmountFocused] = useState(false);
 
-  const _onUpdateBudget = amount => {
+  const _onUpdateBudget = (amount: number) => {
     onUpdateBudget?.(amountToInteger(amount));
   };
 
@@ -76,10 +76,9 @@ export function RolloverCategoryBudgetMenuModal({
             paddingLeft: '20px',
             paddingRight: '20px',
             minWidth: '100%',
-            transform: [{ translateY: -0.5 }],
           }}
           textStyle={{ ...styles.veryLargeText, textAlign: 'center' }}
-          onUpdate={_onUpdateBudget}
+          onUpdateAmount={_onUpdateBudget}
         />
       </View>
       <CategoryBudgetMenu