diff --git a/packages/desktop-client/src/components/budget/ExpenseCategory.js b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx similarity index 65% rename from packages/desktop-client/src/components/budget/ExpenseCategory.js rename to packages/desktop-client/src/components/budget/ExpenseCategory.tsx index fb35998ffaa..af20de7e541 100644 --- a/packages/desktop-client/src/components/budget/ExpenseCategory.js +++ b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx @@ -1,16 +1,39 @@ -import React from 'react'; +import React, { type ComponentProps } from 'react'; + +import { type CategoryEntity } from 'loot-core/src/types/models'; import { theme } from '../../style'; import View from '../common/View'; -import { useDraggable, useDroppable, DropHighlight } from '../sort'; +import { + useDraggable, + useDroppable, + DropHighlight, + type DragState, + type OnDragChangeCallback, + type OnDropCallback, +} from '../sort'; import { Row } from '../table'; import RenderMonths from './RenderMonths'; import SidebarCategory from './SidebarCategory'; +type ExpenseCategoryProps = { + cat: CategoryEntity; + editingCell: { id: string; cell: string } | null; + dragState: DragState; + MonthComponent: ComponentProps['component']; + onEditName?: ComponentProps['onEditName']; + onEditMonth?: (id: string, monthIndex: number) => void; + onSave?: ComponentProps['onSave']; + onDelete?: ComponentProps['onDelete']; + onDragChange: OnDragChangeCallback; + onBudgetAction: (idx: number, action: string, arg: unknown) => void; + onShowActivity: (name: string, id: string, idx: number) => void; + onReorder: OnDropCallback; +}; + function ExpenseCategory({ cat, - budgetArray, editingCell, dragState, MonthComponent, @@ -22,7 +45,7 @@ function ExpenseCategory({ onShowActivity, onDragChange, onReorder, -}) { +}: ExpenseCategoryProps) { let dragging = dragState && dragState.item === cat; if (dragState && dragState.item.id === cat.cat_group) { @@ -67,7 +90,6 @@ function ExpenseCategory({ onEditName={onEditName} onSave={onSave} onDelete={onDelete} - onDragChange={onDragChange} /> ['group']; collapsed: boolean; editingCell: { id: string; cell: string } | null; - dragState: DragState; + dragState: DragState['group']>; MonthComponent: ComponentProps['component']; onEditName?: ComponentProps['onEdit']; onSave?: ComponentProps['onSave']; onDelete?: ComponentProps['onDelete']; - onDragChange: OnDragChangeCallback; + onDragChange: OnDragChangeCallback< + ComponentProps['group'] + >; onReorderGroup: OnDropCallback; onReorderCategory: OnDropCallback; onToggleCollapse?: ComponentProps['onToggleCollapse']; diff --git a/packages/desktop-client/src/components/budget/RenderMonths.tsx b/packages/desktop-client/src/components/budget/RenderMonths.tsx index 769c2caa608..362ebafcec4 100644 --- a/packages/desktop-client/src/components/budget/RenderMonths.tsx +++ b/packages/desktop-client/src/components/budget/RenderMonths.tsx @@ -14,7 +14,7 @@ import { MonthsContext } from './MonthsContext'; type RenderMonthsProps = { component?: ComponentType<{ monthIndex: number; editing: boolean }>; - editingIndex?: undefined; + editingIndex?: string | number; args?: object; style?: CSSProperties; }; diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx index d20eea8c80c..cf0559b3347 100644 --- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx +++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx @@ -8,7 +8,6 @@ import Button from '../common/Button'; import Menu from '../common/Menu'; import View from '../common/View'; import NotesButton from '../NotesButton'; -import { type OnDragChangeCallback } from '../sort'; import { InputCell } from '../table'; import { Tooltip } from '../tooltips'; @@ -18,14 +17,13 @@ type SidebarCategoryProps = { dragPreview?: boolean; dragging?: boolean; editing: boolean; - style: CSSProperties; - borderColor: string; + style?: CSSProperties; + borderColor?: string; isLast?: boolean; - onDragChange?: OnDragChangeCallback; onEditName: (id: string) => void; onSave: (group) => void; onDelete: (id: string) => Promise; - onHideNewCategory: () => void; + onHideNewCategory?: () => void; }; function SidebarCategory({ @@ -36,7 +34,6 @@ function SidebarCategory({ editing, style, isLast, - onDragChange, onEditName, onSave, onDelete, diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx index e3b0539eb35..21e991498fa 100644 --- a/packages/desktop-client/src/components/sidebar/Account.tsx +++ b/packages/desktop-client/src/components/sidebar/Account.tsx @@ -41,7 +41,7 @@ type AccountProps = { updated?: boolean; style?: CSSProperties; outerStyle?: CSSProperties; - onDragChange?: OnDragChangeCallback; + onDragChange?: OnDragChangeCallback<{ id: string }>; onDrop?: OnDropCallback; }; diff --git a/packages/desktop-client/src/components/sort.tsx b/packages/desktop-client/src/components/sort.tsx index d4b157abe36..91df4e6f30f 100644 --- a/packages/desktop-client/src/components/sort.tsx +++ b/packages/desktop-client/src/components/sort.tsx @@ -14,29 +14,32 @@ import { theme } from '../style'; import View from './common/View'; -export type DragState = { +export type DragState = { state: 'start-preview' | 'start' | 'end'; type?: string; - item?: unknown; + item?: T; preview?: boolean; }; export type DropPosition = 'top' | 'bottom'; -export type OnDragChangeCallback = (drag: DragState) => Promise | void; -type UseDraggableArgs = { - item: unknown; +export type OnDragChangeCallback = ( + drag: DragState, +) => Promise | void; + +type UseDraggableArgs = { + item?: T; type: string; canDrag: boolean; - onDragChange: OnDragChangeCallback; + onDragChange: OnDragChangeCallback; }; -export function useDraggable({ +export function useDraggable({ item, type, canDrag, onDragChange, -}: UseDraggableArgs) { +}: UseDraggableArgs) { let _onDragChange = useRef(onDragChange); const [, dragRef] = useDrag({ @@ -53,7 +56,7 @@ export function useDraggable({ collect: monitor => ({ isDragging: monitor.isDragging() }), end(item) { - _onDragChange.current({ state: 'end', type, item }); + _onDragChange.current({ state: 'end', type, item: item as T }); }, canDrag() { diff --git a/upcoming-release-notes/1897.md b/upcoming-release-notes/1897.md index 3de39499aad..9eaf66be8b6 100644 --- a/upcoming-release-notes/1897.md +++ b/upcoming-release-notes/1897.md @@ -3,4 +3,4 @@ category: Maintenance authors: [MikesGlitch] --- -Convert ExpenseGroup components to Typescript. +Convert ExpenseGroup, ExpenseCategory components to Typescript.