diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx index 778480a7dff..4610f141eb4 100644 --- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx @@ -11,6 +11,7 @@ import { type CSSProperties, theme } from '../../style'; import { View } from '../common/View'; import { Autocomplete } from './Autocomplete'; +import { ItemHeader, type ItemHeaderProps } from './ItemHeader'; function AccountList({ items, @@ -71,9 +72,7 @@ function AccountList({ type AccountAutoCompleteProps = { embedded?: boolean; includeClosedAccounts: boolean; - renderAccountItemGroupHeader?: ( - props: AccountItemGroupHeaderProps, - ) => ReactNode; + renderAccountItemGroupHeader?: (props: ItemHeaderProps) => ReactNode; renderAccountItem?: (props: AccountItemProps) => ReactNode; closeOnBlur?: boolean; } & ComponentProps; @@ -124,35 +123,10 @@ export function AccountAutocomplete({ ); } -type AccountItemGroupHeaderProps = { - title: string; - style?: CSSProperties; -}; - -export function AccountItemGroupHeader({ - title, - style, - ...props -}: AccountItemGroupHeaderProps) { - return ( -
- {title} -
- ); -} - function defaultRenderAccountItemGroupHeader( - props: AccountItemGroupHeaderProps, + props: ItemHeaderProps, ): ReactNode { - return ; + return ; } type AccountItemProps = { diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index bb34a8eeaa4..3716847b661 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -21,6 +21,7 @@ import { Text } from '../common/Text'; import { View } from '../common/View'; import { Autocomplete, defaultFilterSuggestion } from './Autocomplete'; +import { ItemHeader, type ItemHeaderProps } from './ItemHeader'; export type CategoryListProps = { items: Array; @@ -33,9 +34,7 @@ export type CategoryListProps = { renderSplitTransactionButton?: ( props: SplitTransactionButtonProps, ) => ReactNode; - renderCategoryItemGroupHeader?: ( - props: CategoryItemGroupHeaderProps, - ) => ReactNode; + renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode; renderCategoryItem?: (props: CategoryItemProps) => ReactNode; }; function CategoryList({ @@ -103,9 +102,7 @@ type CategoryAutocompleteProps = ComponentProps & { renderSplitTransactionButton?: ( props: SplitTransactionButtonProps, ) => ReactNode; - renderCategoryItemGroupHeader?: ( - props: CategoryItemGroupHeaderProps, - ) => ReactNode; + renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode; renderCategoryItem?: (props: CategoryItemProps) => ReactNode; }; @@ -177,35 +174,8 @@ export function CategoryAutocomplete({ ); } -type CategoryItemGroupHeaderProps = { - title: string; - style?: CSSProperties; -}; - -export function CategoryItemGroupHeader({ - title, - style, - ...props -}: CategoryItemGroupHeaderProps) { - return ( -
- {title} -
- ); -} - -function defaultRenderCategoryItemGroupHeader( - props: CategoryItemGroupHeaderProps, -) { - return ; +function defaultRenderCategoryItemGroupHeader(props: ItemHeaderProps) { + return ; } type SplitTransactionButtonProps = { diff --git a/packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx new file mode 100644 index 00000000000..aa51cac180b --- /dev/null +++ b/packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx @@ -0,0 +1,34 @@ +import React, { type ComponentProps } from 'react'; + +import { useFilters } from 'loot-core/src/client/data-hooks/filters'; +import { type TransactionFilterEntity } from 'loot-core/types/models/transaction-filter'; + +import { Autocomplete } from './Autocomplete'; +import { FilterList } from './FilterList'; + +export function FilterAutocomplete({ + embedded, + ...props +}: { + embedded?: boolean; +} & ComponentProps>) { + const filters = useFilters() || []; + + return ( + ( + + )} + {...props} + /> + ); +} diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/FilterList.tsx similarity index 53% rename from packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.tsx rename to packages/desktop-client/src/components/autocomplete/FilterList.tsx index a82ab2b2201..7a8350b27fa 100644 --- a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/FilterList.tsx @@ -1,26 +1,21 @@ import React, { type ComponentProps } from 'react'; -import { useFilters } from 'loot-core/src/client/data-hooks/filters'; -import { type TransactionFilterEntity } from 'loot-core/src/types/models'; - -import { theme } from '../../style'; +import { theme } from '../../style/theme'; import { View } from '../common/View'; -import { Autocomplete } from './Autocomplete'; +import { ItemHeader } from './ItemHeader'; -type FilterListProps = { - items: T[]; - getItemProps: (arg: { item: T }) => ComponentProps; - highlightedIndex: number; - embedded?: boolean; -}; - -function FilterList({ +export function FilterList({ items, getItemProps, highlightedIndex, embedded, -}: FilterListProps) { +}: { + items: T[]; + getItemProps: (arg: { item: T }) => ComponentProps; + highlightedIndex: number; + embedded?: boolean; +}) { return ( ({ ...(!embedded && { maxHeight: 175 }), }} > + {items.map((item, idx) => { return [
({ ); } - -type SavedFilterAutocompleteProps = { - embedded?: boolean; -} & ComponentProps>; - -export function SavedFilterAutocomplete({ - embedded, - ...props -}: SavedFilterAutocompleteProps) { - const filters = useFilters() || []; - - return ( - ( - - )} - {...props} - /> - ); -} diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx new file mode 100644 index 00000000000..981c05bec26 --- /dev/null +++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { theme } from '../../style/theme'; +import { type CSSProperties } from '../../style/types'; + +export type ItemHeaderProps = { + title: string; + style?: CSSProperties; + type?: string; +}; + +export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) { + return ( +
+ {title} +
+ ); +} diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx index 84ee34bfd79..5ab2b41ef05 100644 --- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx @@ -32,6 +32,7 @@ import { defaultFilterSuggestion, AutocompleteFooter, } from './Autocomplete'; +import { ItemHeader, type ItemHeaderProps } from './ItemHeader'; function getPayeeSuggestions(payees, focusTransferPayees, accounts) { let activePayees = accounts ? getActivePayees(payees, accounts) : payees; @@ -163,7 +164,7 @@ type PayeeAutocompleteProps = { onSelect?: (value: string) => void; onManagePayees: () => void; renderCreatePayeeButton?: (props: CreatePayeeButtonProps) => ReactNode; - renderPayeeItemGroupHeader?: (props: PayeeItemGroupHeaderProps) => ReactNode; + renderPayeeItemGroupHeader?: (props: ItemHeaderProps) => ReactNode; renderPayeeItem?: (props: PayeeItemProps) => ReactNode; accounts?: AccountEntity[]; payees?: PayeeEntity[]; @@ -422,35 +423,8 @@ function defaultRenderCreatePayeeButton( return ; } -type PayeeItemGroupHeaderProps = { - title: string; - style?: CSSProperties; -}; - -export function PayeeItemGroupHeader({ - title, - style, - ...props -}: PayeeItemGroupHeaderProps) { - return ( -
- {title} -
- ); -} - -function defaultRenderPayeeItemGroupHeader( - props: PayeeItemGroupHeaderProps, -): ReactNode { - return ; +function defaultRenderPayeeItemGroupHeader(props: ItemHeaderProps): ReactNode { + return ; } type PayeeItemProps = { diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx index 0e2d3f1ff33..5b2b4d70b5a 100644 --- a/packages/desktop-client/src/components/modals/EditField.jsx +++ b/packages/desktop-client/src/components/modals/EditField.jsx @@ -15,18 +15,16 @@ import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; import { AccountAutocomplete, - AccountItemGroupHeader, AccountItem, } from '../autocomplete/AccountAutocomplete'; import { CategoryAutocomplete, - CategoryItemGroupHeader, CategoryItem, } from '../autocomplete/CategoryAutocomplete'; +import { ItemHeader } from '../autocomplete/ItemHeader'; import { PayeeAutocomplete, CreatePayeeButton, - PayeeItemGroupHeader, PayeeItem, } from '../autocomplete/PayeeAutocomplete'; import { Input } from '../common/Input'; @@ -118,7 +116,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) { }} {...(isNarrowWidth && { renderAccountItemGroupHeader: props => ( - ), renderPayeeItemGroupHeader: props => ( - ( -