From 2df774d9f517e244baf294e3fbc61ea0ab4e5300 Mon Sep 17 00:00:00 2001
From: ilar <1613590+ilar@users.noreply.github.com>
Date: Thu, 4 Apr 2024 11:03:26 -0400
Subject: [PATCH] Mobile auto decimal (#2536)
* Format the input field when entering transaction value, automatically populate decimal position.
* Add note.
* Fix linting issues.
* Turn off autoDecimal if we're hiding decimals anyway.
* Shorten changelog.
---
.../mobile/transactions/FocusableAmountInput.jsx | 14 +++++++++++++-
upcoming-release-notes/2536.md | 6 ++++++
2 files changed, 19 insertions(+), 1 deletion(-)
create mode 100644 upcoming-release-notes/2536.md
diff --git a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.jsx b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.jsx
index 6aa309dd3..482759d5f 100644
--- a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.jsx
@@ -6,6 +6,7 @@ import {
getNumberFormat,
} from 'loot-core/src/shared/util';
+import { useLocalPref } from '../../../hooks/useLocalPref';
import { useMergedRefs } from '../../../hooks/useMergedRefs';
import { theme } from '../../../style';
import { Button } from '../../common/Button';
@@ -22,6 +23,7 @@ const AmountInput = memo(function AmountInput({
const [text, setText] = useState('');
const [value, setValue] = useState(0);
const inputRef = useRef();
+ const [hideFraction = false] = useLocalPref('hideFraction');
const mergedInputRef = useMergedRefs(props.inputRef, inputRef);
const initialValue = Math.abs(props.value);
@@ -69,6 +71,16 @@ const AmountInput = memo(function AmountInput({
};
const onChangeText = text => {
+ if (text.slice(-1) === '.') {
+ text = text.slice(0, -1);
+ }
+ if (!hideFraction) {
+ text = text.replaceAll(/[,.]/g, '');
+ text = text.replace(/^0+(?!$)/, '');
+ text = text.padStart(3, '0');
+ text = text.slice(0, -2) + '.' + text.slice(-2);
+ }
+
setEditing(true);
setText(text);
props.onChange?.(text);
@@ -108,7 +120,7 @@ const AmountInput = memo(function AmountInput({
data-testid="amount-fake-input"
pointerEvents="none"
>
- {editing ? text : amountToCurrency(value)}
+ {editing ? amountToCurrency(text) : amountToCurrency(value)}
</Text>
</View>
);
diff --git a/upcoming-release-notes/2536.md b/upcoming-release-notes/2536.md
new file mode 100644
index 000000000..9ed456496
--- /dev/null
+++ b/upcoming-release-notes/2536.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [ilar]
+---
+
+When adding a mobile view transaction, format the edit field according to the currency and add an automatic/fixed position decimal when applicable.
--
GitLab