diff --git a/packages/desktop-client/src/components/budget/MobileBudget.tsx b/packages/desktop-client/src/components/budget/MobileBudget.tsx
index b1b59f76c8cd0e7e0b2c9df464ca3c2d4d46e89a..b8f5d86ecebd5768a025347f5d8c6704101ffd86 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.tsx
+++ b/packages/desktop-client/src/components/budget/MobileBudget.tsx
@@ -22,9 +22,6 @@ import { SyncRefresh } from '../SyncRefresh';
import { BudgetTable } from './MobileBudgetTable';
import { prewarmMonth, switchBudgetType } from './util';
-const CATEGORY_BUDGET_EDIT_ACTION = 'category-budget';
-const BALANCE_MENU_OPEN_ACTION = 'balance-menu';
-
type BudgetInnerProps = {
categories: CategoryEntity[];
categoryGroups: CategoryGroupEntity[];
@@ -76,8 +73,6 @@ function BudgetInner(props: BudgetInnerProps) {
const [currentMonth, setCurrentMonth] = useState(currMonth);
const [initialized, setInitialized] = useState(false);
const [editMode, setEditMode] = useState(false);
- const [editingBudgetCategoryId, setEditingBudgetCategoryId] = useState(null);
- const [openBalanceActionMenuId, setOpenBalanceActionMenuId] = useState(null);
useEffect(() => {
async function init() {
@@ -360,29 +355,6 @@ function BudgetInner(props: BudgetInnerProps) {
});
};
- const onEditCategoryBudget = id => {
- onEdit(CATEGORY_BUDGET_EDIT_ACTION, id);
- };
-
- const onOpenBalanceActionMenu = id => {
- onEdit(BALANCE_MENU_OPEN_ACTION, id);
- };
-
- const onEdit = (action, id) => {
- // Do not allow editing if another field is currently being edited.
- // Cancel the currently editing field in that case.
- const currentlyEditing = editingBudgetCategoryId || openBalanceActionMenuId;
-
- setEditingBudgetCategoryId(
- action === CATEGORY_BUDGET_EDIT_ACTION && !currentlyEditing ? id : null,
- );
- setOpenBalanceActionMenuId(
- action === BALANCE_MENU_OPEN_ACTION && !currentlyEditing ? id : null,
- );
-
- return { action, editingId: !currentlyEditing ? id : null };
- };
-
const numberFormat = prefs?.numberFormat || 'comma-dot';
const hideFraction = prefs?.hideFraction || false;
@@ -438,10 +410,6 @@ function BudgetInner(props: BudgetInnerProps) {
pushModal={pushModal}
onEditGroup={onEditGroup}
onEditCategory={onEditCategory}
- editingBudgetCategoryId={editingBudgetCategoryId}
- onEditCategoryBudget={onEditCategoryBudget}
- openBalanceActionMenuId={openBalanceActionMenuId}
- onOpenBalanceActionMenu={onOpenBalanceActionMenu}
/>
)}
</SyncRefresh>
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
index cb75b90eef9cc7efaa5aad3e48663737b6f8c159..93346b51bc0ee8ace97d6adaec2c4d0358071f86 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import memoizeOne from 'memoize-one';
@@ -7,6 +7,10 @@ import { rolloverBudget, reportBudget } from 'loot-core/src/client/queries';
import * as monthUtils from 'loot-core/src/shared/months';
import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import {
+ SingleActiveEditFormProvider,
+ useSingleActiveEditForm,
+} from '../../hooks/useSingleActiveEditForm';
import {
SvgArrowThinLeft,
SvgArrowThinRight,
@@ -134,6 +138,7 @@ function BudgetCell({
month,
onBudgetAction,
onEdit,
+ onBlur,
isEditing,
}) {
const sheetValue = useSheetValue(binding);
@@ -146,7 +151,7 @@ function BudgetCell({
}
function onAmountClick() {
- onEdit?.(categoryId);
+ onEdit?.();
}
return (
@@ -162,7 +167,7 @@ function BudgetCell({
focused={isEditing}
textStyle={{ ...styles.smallText, ...textStyle }}
onUpdate={updateBudgetAmount}
- onBlur={() => onEdit?.(null)}
+ onBlur={onBlur}
/>
<View
role="button"
@@ -244,10 +249,6 @@ const ExpenseCategory = memo(function ExpenseCategory({
style,
month,
onEdit,
- isEditingBudget,
- onEditBudget,
- isBalanceActionMenuOpen,
- onOpenBalanceActionMenu,
onBudgetAction,
show3Cols,
showBudgetedCol,
@@ -255,11 +256,22 @@ const ExpenseCategory = memo(function ExpenseCategory({
const opacity = blank ? 0 : 1;
const balanceTooltip = useTooltip();
- useEffect(() => {
- if (isBalanceActionMenuOpen) {
+ const [isEditingBudget, setIsEditingBudget] = useState(false);
+ const { onRequestActiveEdit, onClearActiveEdit } = useSingleActiveEditForm();
+
+ const onEditBudget = () => {
+ onRequestActiveEdit(`${category.id}-budget`, () => {
+ setIsEditingBudget(true);
+ return () => setIsEditingBudget(false);
+ });
+ };
+
+ const onOpenBalanceActionMenu = () => {
+ onRequestActiveEdit(`${category.id}-balance`, () => {
balanceTooltip.open();
- }
- }, [isBalanceActionMenuOpen, balanceTooltip]);
+ return () => balanceTooltip.close();
+ });
+ };
const listItemRef = useRef();
@@ -317,6 +329,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
onBudgetAction={onBudgetAction}
isEditing={isEditingBudget}
onEdit={onEditBudget}
+ onBlur={onClearActiveEdit}
/>
<View
style={{
@@ -349,7 +362,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
>
<span
role="button"
- onPointerUp={() => onOpenBalanceActionMenu?.(category.id)}
+ onPointerUp={() => onOpenBalanceActionMenu?.()}
onPointerDown={e => e.preventDefault()}
>
<BalanceWithCarryover
@@ -371,7 +384,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
monthIndex={monthUtils.getMonthIndex(month)}
onBudgetAction={_onBudgetAction}
onClose={() => {
- onOpenBalanceActionMenu?.(null);
+ onClearActiveEdit();
}}
/>
) : (
@@ -382,7 +395,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
monthIndex={monthUtils.getMonthIndex(month)}
onBudgetAction={_onBudgetAction}
onClose={() => {
- onOpenBalanceActionMenu?.(null);
+ onClearActiveEdit();
}}
/>
))}
@@ -795,10 +808,6 @@ const ExpenseGroup = memo(function ExpenseGroup({
editMode,
onEditGroup,
onEditCategory,
- editingBudgetCategoryId,
- onEditCategoryBudget,
- openBalanceActionMenuId,
- onOpenBalanceActionMenu,
// gestures,
month,
// onReorderCategory,
@@ -873,10 +882,6 @@ const ExpenseGroup = memo(function ExpenseGroup({
{group.categories
.filter(category => !category.hidden || showHiddenCategories)
.map((category, index) => {
- const isEditingCategoryBudget =
- editingBudgetCategoryId === category.id;
- const isBalanceActionMenuOpen =
- openBalanceActionMenuId === category.id;
return (
<ExpenseCategory
key={category.id}
@@ -915,10 +920,6 @@ const ExpenseGroup = memo(function ExpenseGroup({
showBudgetedCol={showBudgetedCol}
editMode={editMode}
onEdit={onEditCategory}
- isEditingBudget={isEditingCategoryBudget}
- onEditBudget={onEditCategoryBudget}
- isBalanceActionMenuOpen={isBalanceActionMenuOpen}
- onOpenBalanceActionMenu={onOpenBalanceActionMenu}
// gestures={gestures}
month={month}
// onReorder={onReorderCategory}
@@ -1019,10 +1020,6 @@ function BudgetGroups({
categoryGroups,
onEditGroup,
onEditCategory,
- editingBudgetCategoryId,
- onEditCategoryBudget,
- openBalanceActionMenuId,
- onOpenBalanceActionMenu,
editMode,
gestures,
month,
@@ -1048,71 +1045,67 @@ function BudgetGroups({
const { incomeGroup, expenseGroups } = separateGroups(categoryGroups);
return (
- <View
- data-testid="budget-groups"
- style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
- >
- {expenseGroups
- .filter(group => !group.hidden || showHiddenCategories)
- .map(group => {
- return (
- <ExpenseGroup
- key={group.id}
- type={type}
- group={group}
- showBudgetedCol={showBudgetedCol}
- gestures={gestures}
- month={month}
- editMode={editMode}
- onEditGroup={onEditGroup}
- onEditCategory={onEditCategory}
- editingBudgetCategoryId={editingBudgetCategoryId}
- onEditCategoryBudget={onEditCategoryBudget}
- openBalanceActionMenuId={openBalanceActionMenuId}
- onOpenBalanceActionMenu={onOpenBalanceActionMenu}
- onSaveCategory={onSaveCategory}
- onDeleteCategory={onDeleteCategory}
- onAddCategory={onAddCategory}
- onReorderCategory={onReorderCategory}
- onReorderGroup={onReorderGroup}
- onBudgetAction={onBudgetAction}
- show3Cols={show3Cols}
- showHiddenCategories={showHiddenCategories}
- pushModal={pushModal}
- />
- );
- })}
-
+ <SingleActiveEditFormProvider formName="mobile-budget-table">
<View
- style={{
- alignItems: 'flex-start',
- justifyContent: 'flex-start',
- }}
+ data-testid="budget-groups"
+ style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
>
- <Button onClick={onAddGroup} style={{ fontSize: 12, margin: 10 }}>
- Add Group
- </Button>
- </View>
+ {expenseGroups
+ .filter(group => !group.hidden || showHiddenCategories)
+ .map(group => {
+ return (
+ <ExpenseGroup
+ key={group.id}
+ type={type}
+ group={group}
+ showBudgetedCol={showBudgetedCol}
+ gestures={gestures}
+ month={month}
+ editMode={editMode}
+ onEditGroup={onEditGroup}
+ onEditCategory={onEditCategory}
+ onSaveCategory={onSaveCategory}
+ onDeleteCategory={onDeleteCategory}
+ onAddCategory={onAddCategory}
+ onReorderCategory={onReorderCategory}
+ onReorderGroup={onReorderGroup}
+ onBudgetAction={onBudgetAction}
+ show3Cols={show3Cols}
+ showHiddenCategories={showHiddenCategories}
+ pushModal={pushModal}
+ />
+ );
+ })}
- {incomeGroup && (
- <IncomeGroup
- type={type}
- group={incomeGroup}
- month={month}
- onAddCategory={onAddCategory}
- onSaveCategory={onSaveCategory}
- onDeleteCategory={onDeleteCategory}
- showHiddenCategories={showHiddenCategories}
- editMode={editMode}
- onEditGroup={onEditGroup}
- onEditCategory={onEditCategory}
- editingBudgetCategoryId={editingBudgetCategoryId}
- onEditCategoryBudget={onEditCategoryBudget}
- onBudgetAction={onBudgetAction}
- pushModal={pushModal}
- />
- )}
- </View>
+ <View
+ style={{
+ alignItems: 'flex-start',
+ justifyContent: 'flex-start',
+ }}
+ >
+ <Button onClick={onAddGroup} style={{ fontSize: 12, margin: 10 }}>
+ Add Group
+ </Button>
+ </View>
+
+ {incomeGroup && (
+ <IncomeGroup
+ type={type}
+ group={incomeGroup}
+ month={month}
+ onAddCategory={onAddCategory}
+ onSaveCategory={onSaveCategory}
+ onDeleteCategory={onDeleteCategory}
+ showHiddenCategories={showHiddenCategories}
+ editMode={editMode}
+ onEditGroup={onEditGroup}
+ onEditCategory={onEditCategory}
+ onBudgetAction={onBudgetAction}
+ pushModal={pushModal}
+ />
+ )}
+ </View>
+ </SingleActiveEditFormProvider>
);
}
@@ -1143,10 +1136,6 @@ export function BudgetTable({
pushModal,
onEditGroup,
onEditCategory,
- editingBudgetCategoryId,
- onEditCategoryBudget,
- openBalanceActionMenuId,
- onOpenBalanceActionMenu,
}) {
const { width } = useResponsive();
const show3Cols = width >= 360;
@@ -1385,10 +1374,6 @@ export function BudgetTable({
editMode={editMode}
onEditGroup={onEditGroup}
onEditCategory={onEditCategory}
- editingBudgetCategoryId={editingBudgetCategoryId}
- onEditCategoryBudget={onEditCategoryBudget}
- openBalanceActionMenuId={openBalanceActionMenuId}
- onOpenBalanceActionMenu={onOpenBalanceActionMenu}
onSaveCategory={onSaveCategory}
onDeleteCategory={onDeleteCategory}
onAddCategory={onAddCategory}
@@ -1423,10 +1408,6 @@ export function BudgetTable({
editMode={editMode}
onEditGroup={onEditGroup}
onEditCategory={onEditCategory}
- editingBudgetCategoryId={editingBudgetCategoryId}
- onEditCategoryBudget={onEditCategoryBudget}
- openBalanceActionMenuId={openBalanceActionMenuId}
- onOpenBalanceActionMenu={onOpenBalanceActionMenu}
onSaveCategory={onSaveCategory}
onDeleteCategory={onDeleteCategory}
onAddCategory={onAddCategory}
diff --git a/upcoming-release-notes/2263.md b/upcoming-release-notes/2263.md
new file mode 100644
index 0000000000000000000000000000000000000000..0241b5010eb38bfab50cfbbe0229a30b0e22e220
--- /dev/null
+++ b/upcoming-release-notes/2263.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use useSingleActiveEditForm hook in mobile budget table