diff --git a/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index bdcabc66f..5d1987bd4 100644 --- a/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'; import { IconChevronDown } from '@/ui/display/icon'; import { LightButton } from '@/ui/input/button/components/LightButton'; +import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -60,6 +61,8 @@ export const ObjectSortDropdownButton = ({ resetState(); }; + const { icons } = useLazyLoadIcons(); + return ( - {availableSortDefinitions.map((availableSort, index) => ( - handleAddSort(availableSort)} - LeftIcon={availableSort.Icon} - text={availableSort.label} - /> - ))} + {availableSortDefinitions.map( + (availableSortDefinition, index) => ( + handleAddSort(availableSortDefinition)} + LeftIcon={icons[availableSortDefinition.iconName]} + text={availableSortDefinition.label} + /> + ), + )} )} diff --git a/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts b/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts index 4fe06f5af..23fcdb63f 100644 --- a/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts +++ b/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts @@ -1,10 +1,8 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; - import { SortDirection } from './SortDirection'; export type SortDefinition = { fieldMetadataId: string; label: string; - Icon?: IconComponent; + iconName: string; getOrderByTemplate?: (direction: SortDirection) => any[]; }; diff --git a/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx b/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx index cc75e15e0..3c844b49b 100644 --- a/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx +++ b/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx @@ -1,20 +1,19 @@ -import { IconCalendarEvent, IconCurrencyDollar } from '@/ui/display/icon/index'; import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition'; export const opportunityBoardSortDefinitions: SortDefinition[] = [ { fieldMetadataId: 'createdAt', label: 'Creation', - Icon: IconCalendarEvent, + iconName: 'IconCalendarEvent', }, { fieldMetadataId: 'amount', label: 'Amount', - Icon: IconCurrencyDollar, + iconName: 'IconCurrencyDollar', }, { fieldMetadataId: 'closeDate', label: 'Expected close date', - Icon: IconCalendarEvent, + iconName: 'IconCalendarEvent', }, ];