Added sorting direction option to individual sort option (#19154)
no issues - SortMenu component used to have only one global default direction option, however, the sorting options needed individual default sorting direction. e.g. desc for created data, or asc for name etc - this adds an optional sorting direction option to sorting options, so when they're defined, they'd override the global default sorting direction
This commit is contained in:
parent
9f3c644e2a
commit
9ae45adda1
@ -9,6 +9,7 @@ export type SortItem = {
|
||||
id: string,
|
||||
label: string;
|
||||
selected?: boolean;
|
||||
direction?: SortDirection;
|
||||
}
|
||||
|
||||
export interface SortMenuProps {
|
||||
@ -31,7 +32,7 @@ const SortMenu: React.FC<SortMenuProps> = ({
|
||||
position = 'left'
|
||||
}) => {
|
||||
const [localItems, setLocalItems] = useState<SortItem[]>(items);
|
||||
const [localDirection, setLocalDirection] = useState<string>(direction || 'desc');
|
||||
const [localDirection, setLocalDirection] = useState<SortDirection>(direction || 'desc');
|
||||
|
||||
useEffect(() => {
|
||||
setLocalItems(items);
|
||||
@ -44,10 +45,16 @@ const SortMenu: React.FC<SortMenuProps> = ({
|
||||
}));
|
||||
setLocalItems(updatedItems);
|
||||
|
||||
if (localItems.find(item => item.id === selectedValue)?.direction) {
|
||||
setLocalDirection(localItems.find(item => item.id === selectedValue)?.direction || 'desc');
|
||||
onDirectionChange(localDirection);
|
||||
}
|
||||
|
||||
onSortChange(selectedValue);
|
||||
};
|
||||
|
||||
const handleSortDirection = () => {
|
||||
const handleSortDirection = (e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||
e?.stopPropagation();
|
||||
setLocalDirection(currentDirection => (currentDirection === 'desc' ? 'asc' : 'desc'));
|
||||
onDirectionChange(localDirection);
|
||||
};
|
||||
|
@ -294,9 +294,9 @@ export const OffersIndexModal = () => {
|
||||
<SortMenu
|
||||
direction='desc'
|
||||
items={[
|
||||
{id: 'date-added', label: 'Date added', selected: sortOption === 'date-added'},
|
||||
{id: 'name', label: 'Name', selected: sortOption === 'name'},
|
||||
{id: 'redemptions', label: 'Redemptions', selected: sortOption === 'redemptions'}
|
||||
{id: 'date-added', label: 'Date added', selected: sortOption === 'date-added', direction: 'desc'},
|
||||
{id: 'name', label: 'Name', selected: sortOption === 'name', direction: 'asc'},
|
||||
{id: 'redemptions', label: 'Redemptions', selected: sortOption === 'redemptions', direction: 'desc'}
|
||||
]}
|
||||
position='right'
|
||||
onDirectionChange={(selectedDirection) => {
|
||||
|
Loading…
Reference in New Issue
Block a user