Skip to content

Commit

Permalink
Maintenance: BudgetSummaries, MonthPicker, SidebarCategory components…
Browse files Browse the repository at this point in the history
… to tsx. (actualbudget#1879)
  • Loading branch information
MikesGlitch authored Nov 10, 2023
1 parent c59f067 commit 33b2072
Show file tree
Hide file tree
Showing 9 changed files with 58 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,22 @@ import { useSpring, animated } from 'react-spring';

import { css } from 'glamor';

import * as monthUtils from 'loot-core/src/shared/months';
import { addMonths, subMonths } from 'loot-core/src/shared/months';

import useResizeObserver from '../../hooks/useResizeObserver';
import View from '../common/View';

import { MonthsContext } from './MonthsContext';
import { type BudgetSummary as ReportBudgetSummary } from './report/BudgetSummary';
import { type BudgetSummary as RolloverBudgetSummary } from './rollover/BudgetSummary';

export default function BudgetSummaries({ SummaryComponent }) {
type BudgetSummariesProps = {
SummaryComponent: typeof ReportBudgetSummary | typeof RolloverBudgetSummary;
};

export default function BudgetSummaries({
SummaryComponent,
}: BudgetSummariesProps) {
let { months } = useContext(MonthsContext);

let [widthState, setWidthState] = useState(0);
Expand All @@ -32,20 +40,21 @@ export default function BudgetSummaries({ SummaryComponent }) {
);

let prevMonth0 = useRef(months[0]);

let allMonths = [...months];
allMonths.unshift(monthUtils.subMonths(months[0], 1));
allMonths.push(monthUtils.addMonths(months[months.length - 1], 1));
allMonths.unshift(subMonths(months[0], 1));
allMonths.push(addMonths(months[months.length - 1], 1));
let monthWidth = widthState / months.length;

useLayoutEffect(() => {
let prevMonth = prevMonth0.current;
let reversed = prevMonth > months[0];
let offsetX = monthWidth;
let from = reversed ? -offsetX * 2 : 0;

if (prevMonth !== allMonths[0] && prevMonth !== allMonths[2]) {
from = -offsetX;
}

let to = -offsetX;
spring.start({ from: { x: from }, x: to });
}, [months[0]]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ function ExpenseGroup({
collapsed,
editingCell,
dragState,
itemPos,
MonthComponent,
onEditName,
onSave,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
import { useState } from 'react';
import { type CSSProperties, useState } from 'react';

import * as monthUtils from 'loot-core/src/shared/months';

import useResizeObserver from '../../hooks/useResizeObserver';
import { styles, theme } from '../../style';
import View from '../common/View';

import { type BoundsProps } from './MonthsContext';

type MonthPickerProps = {
startMonth: string;
numDisplayed: number;
monthBounds: BoundsProps;
style: CSSProperties;
onSelect: (month: string) => void;
};

export const MonthPicker = ({
startMonth,
numDisplayed,
monthBounds,
style,
onSelect,
}) => {
}: MonthPickerProps) => {
const [hoverId, setHoverId] = useState(null);
const [targetMonthCount, setTargetMonthCount] = useState(12);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { createContext, type ReactNode } from 'react';

import * as monthUtils from 'loot-core/src/shared/months';

type BoundsProps = {
export type BoundsProps = {
start: string;
end: string;
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,30 +1,47 @@
import React, { useState } from 'react';
import React, { type CSSProperties, type Ref, useState } from 'react';

import { type CategoryEntity } from 'loot-core/src/types/models';

import CheveronDown from '../../icons/v1/CheveronDown';
import { theme } from '../../style';
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';

type SidebarCategoryProps = {
innerRef: Ref<HTMLDivElement>;
category: CategoryEntity;
dragPreview?: boolean;
dragging?: boolean;
editing: boolean;
style: CSSProperties;
borderColor: string;
isLast?: boolean;
onDragChange?: OnDragChangeCallback;
onEditName: (id: string) => void;
onSave: (group) => void;
onDelete: (id: string) => Promise<void>;
onHideNewCategory: () => void;
};

function SidebarCategory({
innerRef,
category,
dragPreview,
dragging,
editing,
style,
borderColor = theme.tableBorder,
isLast,
onDragChange,
onEditMonth,
onEditName,
onSave,
onDelete,
onHideNewCategory,
}) {
}: SidebarCategoryProps) {
const temporary = category.id === 'new';
const [menuOpen, setMenuOpen] = useState(false);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { type CSSProperties, useState } from 'react';
import { type ConnectDragSource } from 'react-dnd';

import ExpandArrow from '../../icons/v0/ExpandArrow';
import CheveronDown from '../../icons/v1/CheveronDown';
Expand All @@ -24,7 +25,7 @@ type SidebarGroupProps = {
editing?: boolean;
collapsed: boolean;
dragPreview?: () => void;
innerRef?: () => void;
innerRef?: ConnectDragSource;
borderColor?: string;
style?: CSSProperties;
onEdit?: (id: string) => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ function ToBudget({

type BudgetSummaryProps = {
month: string;
isGoalTemplatesEnabled: boolean;
isGoalTemplatesEnabled?: boolean;
};
export function BudgetSummary({
month,
Expand Down
2 changes: 1 addition & 1 deletion packages/desktop-client/src/hooks/useResizeObserver.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useRef, useCallback } from 'react';

export default function useResizeObserver(
func: (contentRect: DOMRectReadOnly) => ResizeObserver,
func: (contentRect: DOMRectReadOnly) => void,
): (el: unknown) => void {
let observer = useRef(null);
if (!observer.current) {
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/1879.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Maintenance
authors: [MikesGlitch]
---

Convert BudgetSummaries, MonthPicker, SidebarCategory components to Typescript.

0 comments on commit 33b2072

Please sign in to comment.