Inline mobile category and group edit (#1781)

* Inline mobile category and group edit

* Release notes

* Allow one edit at any time

* Mobile: long press to edit category/group

* Mobile: set userSelect: 'none'

* Move getLongPressEvents

* Add role to prevent tap-to-search

* Add role to text

* Prevent default on longpress

* Add tabIndex to disable tap-to-search

* Add back userSelect

* Role updates

* Remove userSelect

* Revert long press category name

* Remove unused import

* Fix lint error

* Edit mode

* Do not allow to start an edit when another  field is currenty being edited

* Fix blur event not firing

* Grey out zero spent or balance values

* VRT update

* Fix budget cell being zero on click

* Delete useLongPress

packages/desktop-client/src/components/budget/MobileBudget.js

@@ -363,11 +363,11 @@ class Budget extends Component {
             type={budgetType}
             month={currentMonth}
             monthBounds={bounds}
-            editMode={editMode}
             navigation={navigation}
             //   refreshControl={
             //     <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
             //   }
+            editMode={editMode}
             onEditMode={flag => this.setState({ editMode: flag })}
             onShowBudgetDetails={this.onShowBudgetDetails}
             onPrevMonth={this.onPrevMonth}

packages/desktop-client/src/components/budget/util.ts

@@ -22,7 +22,7 @@ export function separateGroups(categoryGroups: CategoryGroupEntity[]) {
 }
 
 export function makeAmountGrey(value: number | string) {
-  return value === 0 || value === '0' || value === ''
+  return value === 0 || value === '0' || value === '' || value == null
     ? { color: theme.altMenuItemText }
     : null;
 }

packages/desktop-client/src/components/util/AmountInput.js

 import React, { useRef, useState } from 'react';
 
-import {
-  currencyToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
+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';
@@ -12,11 +10,12 @@ import { theme } from '../../style';
 import Button from '../common/Button';
 import InputWithContent from '../common/InputWithContent';
 import View from '../common/View';
+import useFormat from '../spreadsheet/useFormat';
 
 export function AmountInput({
   id,
   inputRef,
-  initialValue = 0,
+  initialValue,
   zeroSign = '-', // + or -
   onChange,
   onBlur,
@@ -24,10 +23,11 @@ export function AmountInput({
   textStyle,
   focused,
 }) {
+  let format = useFormat();
   let [negative, setNegative] = useState(
     (initialValue === 0 && zeroSign === '-') || initialValue < 0,
   );
-  let initialValueAbsolute = integerToCurrency(Math.abs(initialValue || 0));
+  let initialValueAbsolute = format(Math.abs(initialValue), 'financial');
   let [value, setValue] = useState(initialValueAbsolute);
   let buttonRef = useRef();
 
@@ -38,7 +38,7 @@ export function AmountInput({
 
   function fireChange(val, neg) {
     let valueOrInitial = Math.abs(
-      currencyToInteger(val ? val : initialValueAbsolute),
+      amountToInteger(evalArithmetic(val, initialValueAbsolute)),
     );
     let amount = neg ? valueOrInitial * -1 : valueOrInitial;
 

upcoming-release-notes/1781.md

+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Inline mobile edits.