Skip to content

Commit

Permalink
Restrict drag to parent element
Browse files Browse the repository at this point in the history
  • Loading branch information
@joel-jeremy
joel-jeremy committed Jan 19, 2024
1 parent ebd1328 commit 66ed5b4
Show file tree
Hide file tree
Showing 2 changed files with 223 additions and 207 deletions.
294 changes: 149 additions & 145 deletions packages/desktop-client/src/components/budget/BudgetCategories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
useSensor,
useSensors,
} from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
import {
SortableContext,
sortableKeyboardCoordinates,
Expand Down Expand Up @@ -256,81 +256,83 @@ export const BudgetCategories = memo(
flex: 1,
}}
>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
modifiers={[restrictToVerticalAxis]}
onDragStart={onDragStart}
onDragMove={onDragMove}
onDragEnd={onDragEnd}
>
<SortableContext
items={expenseGroupIds}
strategy={verticalListSortingStrategy}
<View>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
modifiers={[restrictToVerticalAxis, restrictToParentElement]}
onDragStart={onDragStart}
onDragMove={onDragMove}
onDragEnd={onDragEnd}
>
{expenseGroupItems.map((item, idx) => {
let content;
switch (item.type) {
case 'new-expense-category':
content = (
<Row key="new-expense-category">
<SidebarCategory
category={{
name: '',
cat_group: newCategoryForGroup,
is_income:
newCategoryForGroup ===
categoryGroups.find(g => g.is_income).id,
id: 'new',
}}
editing={true}
onSave={onSaveCategory}
onHideNewCategory={onHideNewCategory}
<SortableContext
items={expenseGroupIds}
strategy={verticalListSortingStrategy}
>
{expenseGroupItems.map((item, idx) => {
let content;
switch (item.type) {
case 'new-expense-category':
content = (
<Row key="new-expense-category">
<SidebarCategory
category={{
name: '',
cat_group: newCategoryForGroup,
is_income:
newCategoryForGroup ===
categoryGroups.find(g => g.is_income).id,
id: 'new',
}}
editing={true}
onSave={onSaveCategory}
onHideNewCategory={onHideNewCategory}
onEditName={onEditName}
/>
</Row>
);
break;
case 'expense-group':
content = (
<ExpenseGroup
key={item.value.id}
group={item.value}
editingCell={editingCell}
collapsed={collapsed.includes(item.value.id)}
MonthComponent={dataComponents.ExpenseGroupComponent}
onEditName={onEditName}
onSave={onSaveGroup}
onDelete={onDeleteGroup}
onToggleCollapse={onToggleCollapse}
onShowNewCategory={onShowNewCategory}
/>
);
break;
case 'expense-category':
content = (
<ExpenseCategory
key={item.value.id}
cat={item.value}
editingCell={editingCell}
MonthComponent={dataComponents.ExpenseCategoryComponent}
onEditName={onEditName}
onEditMonth={onEditMonth}
onSave={onSaveCategory}
onDelete={onDeleteCategory}
onBudgetAction={onBudgetAction}
onShowActivity={onShowActivity}
/>
</Row>
);
break;
case 'expense-group':
content = (
<ExpenseGroup
key={item.value.id}
group={item.value}
editingCell={editingCell}
collapsed={collapsed.includes(item.value.id)}
MonthComponent={dataComponents.ExpenseGroupComponent}
onEditName={onEditName}
onSave={onSaveGroup}
onDelete={onDeleteGroup}
onToggleCollapse={onToggleCollapse}
onShowNewCategory={onShowNewCategory}
/>
);
break;
case 'expense-category':
content = (
<ExpenseCategory
key={item.value.id}
cat={item.value}
editingCell={editingCell}
MonthComponent={dataComponents.ExpenseCategoryComponent}
onEditName={onEditName}
onEditMonth={onEditMonth}
onSave={onSaveCategory}
onDelete={onDeleteCategory}
onBudgetAction={onBudgetAction}
onShowActivity={onShowActivity}
/>
);
break;
default:
throw new Error('Unknown item type: ' + item.type);
}

return content;
})}
</SortableContext>
</DndContext>
);
break;
default:
throw new Error('Unknown item type: ' + item.type);
}

return content;
})}
</SortableContext>
</DndContext>
</View>
{isAddingGroup && (
<Row
key="new-group"
Expand Down Expand Up @@ -359,81 +361,83 @@ export const BudgetCategories = memo(
onShowNewGroup={onShowNewGroup}
/>
</View>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
modifiers={[restrictToVerticalAxis]}
onDragStart={onDragStart}
onDragMove={onDragMove}
onDragEnd={onDragEnd}
>
<SortableContext
items={incomeGroupIds}
strategy={verticalListSortingStrategy}
<View>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
modifiers={[restrictToVerticalAxis, restrictToParentElement]}
onDragStart={onDragStart}
onDragMove={onDragMove}
onDragEnd={onDragEnd}
>
{incomeGroupItems.map((item, idx) => {
let content;
switch (item.type) {
case 'new-income-category':
content = (
<Row key="new-income-category">
<SidebarCategory
category={{
name: '',
cat_group: newCategoryForGroup,
is_income:
newCategoryForGroup ===
categoryGroups.find(g => g.is_income).id,
id: 'new',
}}
editing={true}
onSave={onSaveCategory}
onHideNewCategory={onHideNewCategory}
<SortableContext
items={incomeGroupIds}
strategy={verticalListSortingStrategy}
>
{incomeGroupItems.map((item, idx) => {
let content;
switch (item.type) {
case 'new-income-category':
content = (
<Row key="new-income-category">
<SidebarCategory
category={{
name: '',
cat_group: newCategoryForGroup,
is_income:
newCategoryForGroup ===
categoryGroups.find(g => g.is_income).id,
id: 'new',
}}
editing={true}
onSave={onSaveCategory}
onHideNewCategory={onHideNewCategory}
onEditName={onEditName}
/>
</Row>
);
break;
case 'income-group':
content = (
<IncomeGroup
key={item.value.id}
group={item.value}
editingCell={editingCell}
MonthComponent={dataComponents.IncomeGroupComponent}
collapsed={collapsed.includes(item.value.id)}
onEditName={onEditName}
onSave={onSaveGroup}
onToggleCollapse={onToggleCollapse}
onShowNewCategory={onShowNewCategory}
/>
);
break;
case 'income-category':
content = (
<IncomeCategory
key={item.value.id}
cat={item.value}
editingCell={editingCell}
isLast={idx === items.length - 1}
MonthComponent={dataComponents.IncomeCategoryComponent}
onEditName={onEditName}
onEditMonth={onEditMonth}
onSave={onSaveCategory}
onDelete={onDeleteCategory}
onBudgetAction={onBudgetAction}
onShowActivity={onShowActivity}
/>
</Row>
);
break;
case 'income-group':
content = (
<IncomeGroup
key={item.value.id}
group={item.value}
editingCell={editingCell}
MonthComponent={dataComponents.IncomeGroupComponent}
collapsed={collapsed.includes(item.value.id)}
onEditName={onEditName}
onSave={onSaveGroup}
onToggleCollapse={onToggleCollapse}
onShowNewCategory={onShowNewCategory}
/>
);
break;
case 'income-category':
content = (
<IncomeCategory
key={item.value.id}
cat={item.value}
editingCell={editingCell}
isLast={idx === items.length - 1}
MonthComponent={dataComponents.IncomeCategoryComponent}
onEditName={onEditName}
onEditMonth={onEditMonth}
onSave={onSaveCategory}
onDelete={onDeleteCategory}
onBudgetAction={onBudgetAction}
onShowActivity={onShowActivity}
/>
);
break;
default:
throw new Error('Unknown item type: ' + item.type);
}

return content;
})}
</SortableContext>
</DndContext>
);
break;
default:
throw new Error('Unknown item type: ' + item.type);
}

return content;
})}
</SortableContext>
</DndContext>
</View>
</View>
);
},
Expand Down
Loading

0 comments on commit 66ed5b4

Please sign in to comment.