From 1767a32b3d37552e2d77612bbc1e4cc99eeb6588 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 12 Mar 2024 08:54:47 -0700
Subject: [PATCH] [Maintenance] Input onChangeValue and onUpdate prop naming
(#2381)
* Differentiate Input onUpdate to onChangeValue
* Release notes
* Fix lint error
* Remove onChange
---
.../src/components/accounts/MobileAccountDetails.jsx | 2 +-
.../desktop-client/src/components/common/Input.tsx | 10 +++++++---
.../desktop-client/src/components/common/Search.tsx | 4 ++--
.../src/components/filters/NameFilter.tsx | 2 +-
.../src/components/manager/ConfigServer.tsx | 2 +-
.../src/components/mobile/MobileAmountInput.jsx | 5 -----
.../src/components/mobile/MobileForms.jsx | 4 +---
.../src/components/modals/GoCardlessInitialise.tsx | 12 ++++++++----
.../src/components/modals/ImportTransactions.jsx | 4 ++--
.../src/components/modals/SimpleFinInitialise.tsx | 6 ++++--
.../src/components/modals/SingleInput.tsx | 3 ++-
.../src/components/reports/SaveReportName.tsx | 2 +-
packages/desktop-client/src/components/table.tsx | 8 ++++----
.../src/components/util/AmountInput.tsx | 8 ++++----
upcoming-release-notes/2381.md | 6 ++++++
15 files changed, 44 insertions(+), 34 deletions(-)
create mode 100644 upcoming-release-notes/2381.md
diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx b/packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx
index bd7c60bc4..b1dbe957f 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx
+++ b/packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx
@@ -43,7 +43,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
/>
}
value={text}
- onUpdate={text => {
+ onChangeValue={text => {
setText(text);
onSearch(text);
}}
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index 390473a40..7b24ccf45 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -27,6 +27,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
inputRef?: Ref<HTMLInputElement>;
onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
onEscape?: (event: KeyboardEvent<HTMLInputElement>) => void;
+ onChangeValue?: (newValue: string) => void;
onUpdate?: (newValue: string) => void;
focused?: boolean;
};
@@ -36,6 +37,7 @@ export function Input({
inputRef,
onEnter,
onEscape,
+ onChangeValue,
onUpdate,
focused,
...nativeProps
@@ -73,10 +75,12 @@ export function Input({
nativeProps.onKeyDown?.(e);
}}
+ onBlur={e => {
+ onUpdate?.(e.target.value);
+ nativeProps.onBlur?.(e);
+ }}
onChange={e => {
- if (onUpdate) {
- onUpdate(e.target.value);
- }
+ onChangeValue?.(e.target.value);
nativeProps.onChange?.(e);
}}
/>
diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
index 7068ef578..1c7af0910 100644
--- a/packages/desktop-client/src/components/common/Search.tsx
+++ b/packages/desktop-client/src/components/common/Search.tsx
@@ -1,5 +1,5 @@
// @ts-strict-ignore
-import { type ChangeEvent, type Ref } from 'react';
+import { type Ref } from 'react';
import { SvgRemove, SvgSearchAlternate } from '../../icons/v2';
import { theme } from '../../style';
@@ -83,7 +83,7 @@ export function Search({
onKeyDown={e => {
if (e.key === 'Escape') onChange('');
}}
- onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+ onChangeValue={value => onChange(value)}
/>
);
}
diff --git a/packages/desktop-client/src/components/filters/NameFilter.tsx b/packages/desktop-client/src/components/filters/NameFilter.tsx
index 815860b07..3165921f9 100644
--- a/packages/desktop-client/src/components/filters/NameFilter.tsx
+++ b/packages/desktop-client/src/components/filters/NameFilter.tsx
@@ -53,7 +53,7 @@ export function NameFilter({
id="name-field"
inputRef={inputRef}
defaultValue={name || ''}
- onUpdate={setName}
+ onChangeValue={setName}
/>
</FormField>
<Button
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx
index bdaa8586e..742d477b8 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.tsx
+++ b/packages/desktop-client/src/components/manager/ConfigServer.tsx
@@ -138,7 +138,7 @@ export function ConfigServer() {
autoFocus={true}
placeholder="https://example.com"
value={url || ''}
- onUpdate={setUrl}
+ onChangeValue={setUrl}
style={{ flex: 1, marginRight: 10 }}
/>
<ButtonWithLoading
diff --git a/packages/desktop-client/src/components/mobile/MobileAmountInput.jsx b/packages/desktop-client/src/components/mobile/MobileAmountInput.jsx
index b9840f7e6..0bc83c5bf 100644
--- a/packages/desktop-client/src/components/mobile/MobileAmountInput.jsx
+++ b/packages/desktop-client/src/components/mobile/MobileAmountInput.jsx
@@ -163,10 +163,6 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
props.onUpdate?.(maybeApplyNegative(val, isNegative));
};
- const onChange = val => {
- props.onChange?.(maybeApplyNegative(val, isNegative));
- };
-
return (
<View>
<AmountInput
@@ -174,7 +170,6 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
value={value}
onFocus={onFocus}
onBlur={onBlur}
- onChange={onChange}
onUpdate={onUpdate}
focused={focused}
style={{
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.jsx b/packages/desktop-client/src/components/mobile/MobileForms.jsx
index 2f1cff5c0..e3f46e0b1 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.jsx
+++ b/packages/desktop-client/src/components/mobile/MobileForms.jsx
@@ -47,9 +47,7 @@ export const InputField = forwardRef(function InputField(
autoCorrect="false"
autoCapitalize="none"
disabled={disabled}
- onBlur={e => {
- onUpdate?.(e.target.value);
- }}
+ onUpdate={onUpdate}
style={{
...valueStyle,
...style,
diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
index ad7059582..a7b1ef7e8 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
@@ -73,8 +73,10 @@ export const GoCardlessInitialise = ({
id="secret-id-field"
type="password"
value={secretId}
- onUpdate={setSecretId}
- onChange={() => setIsValid(true)}
+ onChangeValue={value => {
+ setSecretId(value);
+ setIsValid(true);
+ }}
/>
</FormField>
@@ -84,8 +86,10 @@ export const GoCardlessInitialise = ({
id="secret-key-field"
type="password"
value={secretKey}
- onUpdate={setSecretKey}
- onChange={() => setIsValid(true)}
+ onChangeValue={value => {
+ setSecretKey(value);
+ setIsValid(true);
+ }}
/>
</FormField>
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.jsx b/packages/desktop-client/src/components/modals/ImportTransactions.jsx
index 10e79776d..ef0fec382 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactions.jsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactions.jsx
@@ -544,7 +544,7 @@ function MultiplierOption({
style={{ display: multiplierEnabled ? 'inherit' : 'none' }}
value={multiplierAmount}
placeholder="Multiplier"
- onUpdate={onChangeAmount}
+ onChangeValue={onChangeAmount}
/>
</View>
);
@@ -573,7 +573,7 @@ function InOutOption({
<Input
type="text"
value={outValue}
- onUpdate={onChangeText}
+ onChangeValue={onChangeText}
placeholder="Value for out rows, i.e. Credit"
/>
)}
diff --git a/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx b/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx
index 4db5bff88..6398039b0 100644
--- a/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx
+++ b/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx
@@ -66,8 +66,10 @@ export const SimpleFinInitialise = ({
id="token-field"
type="password"
value={token}
- onUpdate={setToken}
- onChange={() => setIsValid(true)}
+ onChangeValue={value => {
+ setToken(value);
+ setIsValid(true);
+ }}
/>
</FormField>
diff --git a/packages/desktop-client/src/components/modals/SingleInput.tsx b/packages/desktop-client/src/components/modals/SingleInput.tsx
index d6a02c33e..5906142a4 100644
--- a/packages/desktop-client/src/components/modals/SingleInput.tsx
+++ b/packages/desktop-client/src/components/modals/SingleInput.tsx
@@ -56,7 +56,8 @@ export function SingleInput({
<Input
placeholder={inputPlaceholder}
style={{ ...styles.mediumText }}
- onUpdate={setValue}
+ value={value}
+ onChangeValue={setValue}
onEnter={e => _onSubmit(e.currentTarget.value)}
/>
</InitialFocus>
diff --git a/packages/desktop-client/src/components/reports/SaveReportName.tsx b/packages/desktop-client/src/components/reports/SaveReportName.tsx
index fb5980921..7357dd029 100644
--- a/packages/desktop-client/src/components/reports/SaveReportName.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReportName.tsx
@@ -64,7 +64,7 @@ export function SaveReportName({
value={name}
id="name-field"
inputRef={inputRef}
- onUpdate={setName}
+ onChangeValue={setName}
style={{ marginTop: 10 }}
/>
</FormField>
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index 38cc9fc91..1259d0865 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -319,7 +319,6 @@ function InputValue({
const [value, setValue] = useState(defaultValue);
function onBlur_(e) {
- onUpdate?.(value);
if (onBlur) {
fireBlur(onBlur, e);
}
@@ -345,8 +344,9 @@ function InputValue({
<Input
{...props}
value={value}
- onUpdate={text => setValue(text)}
+ onChangeValue={text => setValue(text)}
onBlur={onBlur_}
+ onUpdate={onUpdate}
onKeyDown={onKeyDown}
style={{
...inputCellStyle,
@@ -358,8 +358,8 @@ function InputValue({
}
type InputCellProps = ComponentProps<typeof Cell> & {
- inputProps: ComponentProps<typeof InputValue>;
- onUpdate: ComponentProps<typeof InputValue>['onUpdate'];
+ inputProps?: ComponentProps<typeof InputValue>;
+ onUpdate?: ComponentProps<typeof InputValue>['onUpdate'];
onBlur?: ComponentProps<typeof InputValue>['onBlur'];
textAlign?: CSSProperties['textAlign'];
error?: ReactNode;
diff --git a/packages/desktop-client/src/components/util/AmountInput.tsx b/packages/desktop-client/src/components/util/AmountInput.tsx
index fd110d681..60269b440 100644
--- a/packages/desktop-client/src/components/util/AmountInput.tsx
+++ b/packages/desktop-client/src/components/util/AmountInput.tsx
@@ -23,7 +23,7 @@ type AmountInputProps = {
inputRef?: Ref<HTMLInputElement>;
value: number;
zeroSign?: '-' | '+';
- onChange?: (value: string) => void;
+ onChangeValue?: (value: string) => void;
onFocus?: FocusEventHandler<HTMLInputElement>;
onBlur?: FocusEventHandler<HTMLInputElement>;
onUpdate?: (amount: number) => void;
@@ -40,7 +40,7 @@ export function AmountInput({
zeroSign = '-', // + or -
onFocus,
onBlur,
- onChange,
+ onChangeValue,
onUpdate,
style,
textStyle,
@@ -77,7 +77,7 @@ export function AmountInput({
function onInputTextChange(val) {
setValue(val ? val : '');
- onChange?.(val);
+ onChangeValue?.(val);
}
function fireUpdate(negate) {
@@ -123,7 +123,7 @@ export function AmountInput({
fireUpdate(negative);
}
}}
- onUpdate={onInputTextChange}
+ onChangeValue={onInputTextChange}
onBlur={onInputAmountBlur}
onFocus={onFocus}
/>
diff --git a/upcoming-release-notes/2381.md b/upcoming-release-notes/2381.md
new file mode 100644
index 000000000..0edbd9689
--- /dev/null
+++ b/upcoming-release-notes/2381.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Update Input onChangeValue and onUpdate prop naming for consistency.
--
GitLab