[Maintenance] Refactor amount input to typescript (#1936)

actualbudget · Nov 20, 2023 · 849262c · 849262c
1 parent e6e184c
commit 849262c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -6,8 +6,8 @@ import Input, { defaultInputStyle } from './Input';
 import View from './View';
 
 type InputWithContentProps = ComponentProps<typeof Input> & {
-  leftContent: ReactNode;
-  rightContent: ReactNode;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
   inputStyle?: CSSProperties;
   focusStyle?: CSSProperties;
   style?: CSSProperties;

diff --git a/...client/src/components/util/AmountInput.js → ...lient/src/components/util/AmountInput.tsx b/...client/src/components/util/AmountInput.js → ...lient/src/components/util/AmountInput.tsx
@@ -1,17 +1,29 @@
-import React, { useRef, useState } from 'react';
+import React, { type MutableRefObject, useRef, useState } from 'react';
 
 import evalArithmetic from 'loot-core/src/shared/arithmetic';
 import { amountToInteger } from 'loot-core/src/shared/util';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import Add from '../../icons/v1/Add';
 import Subtract from '../../icons/v1/Subtract';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import Button from '../common/Button';
 import InputWithContent from '../common/InputWithContent';
 import View from '../common/View';
 import useFormat from '../spreadsheet/useFormat';
 
+type AmountInputProps = {
+  id?: string;
+  inputRef?: MutableRefObject<HTMLInputElement>;
+  initialValue: number;
+  zeroSign?: '-' | '+';
+  onChange?: (value: number) => void;
+  onBlur?: () => void;
+  style?: CSSProperties;
+  textStyle?: CSSProperties;
+  focused?: boolean;
+};
+
 export function AmountInput({
   id,
   inputRef,
@@ -22,7 +34,7 @@ export function AmountInput({
   style,
   textStyle,
   focused,
-}) {
+}: AmountInputProps) {
   let format = useFormat();
   let [negative, setNegative] = useState(
     (initialValue === 0 && zeroSign === '-') || initialValue < 0,
@@ -49,8 +61,8 @@ export function AmountInput({
     setValue(value ? value : '');
   }
 
-  let ref = useRef();
-  let mergedRef = useMergedRefs(inputRef, ref);
+  let ref = useRef<HTMLInputElement>();
+  let mergedRef = useMergedRefs<HTMLInputElement>(inputRef, ref);
 
   function onInputAmountBlur(e) {
     fireChange(value, negative);

diff --git a/upcoming-release-notes/1936.md b/upcoming-release-notes/1936.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [kymckay]
+---
+
+Refactor AmountInput component to TypeScript.