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:
Sodbileg Gansukh 2023-11-28 17:32:13 +08:00 committed by GitHub
parent 9f3c644e2a
commit 9ae45adda1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 5 deletions

View File

@ -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);
};

View File

@ -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) => {