-
Notifications
You must be signed in to change notification settings - Fork 92
/
CategorySort.tsx
109 lines (99 loc) · 2.86 KB
/
CategorySort.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { getBlockInstance, TProduct } from '@cromwell/core';
import { TCList } from '@cromwell/core-frontend';
import React, { useState } from 'react';
import { useModuleState } from '../../helpers/state';
import { BaseSelect, TBaseSelect } from '../shared/Select';
import styles from './CategorySort.module.scss';
export type TSortOption = {
key: keyof TProduct;
label: string;
direction?: 'ASC' | 'DESC';
};
export type CategorySortProps = {
classes?: Partial<Record<'root' | 'list', string>>;
elements?: {
Select?: TBaseSelect;
};
text?: {
default?: string;
highestRated?: string;
mostPopular?: string;
priceLowest?: string;
priceHighest?: string;
sort?: string;
};
/**
* Provide another target CList id. Usually it is not needed, since this
* component can "detect" id of `CategoryList` on the same page.
*/
listId?: string;
/**
* Override sort options
*/
overrideOptions?: TSortOption[];
};
/**
* A component for picking method of sorting for products in `CategoryList`.
*/
export function CategorySort(props: CategorySortProps) {
const { text, overrideOptions } = props;
const { Select = BaseSelect } = props?.elements ?? {};
const sortOptions: TSortOption[] = overrideOptions ?? [
{
label: text?.default ?? 'Default',
key: 'id',
},
{
key: 'rating',
direction: 'DESC',
label: text?.highestRated ?? 'Highest rated',
},
{
key: 'views',
direction: 'DESC',
label: text?.mostPopular ?? 'Most popular',
},
{
key: 'price',
direction: 'ASC',
label: text?.priceLowest ?? 'Price - Lowest',
},
{
key: 'price',
direction: 'DESC',
label: text?.priceHighest ?? 'Price - Highest',
},
];
const [sortValue, setSortValue] = useState<string>(text?.default ?? 'Default');
const moduleState = useModuleState();
const { listId = moduleState.categoryListId } = props;
const handleValueChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const value = event.target.value;
setSortValue(value);
setTimeout(() => {
const option: TSortOption | undefined = sortOptions.find((opt) => (opt.label || opt.key) === value);
if (option && listId) {
const list = getBlockInstance<TCList>(listId)?.getContentInstance();
if (list) {
const params = Object.assign({}, list.getPagedParams());
params.order = option.direction;
params.orderBy = option.key || 'id';
list.setPagedParams(params);
list.updateData();
}
}
}, 100);
};
return (
<Select
className={styles.CategorySort}
label={text?.sort ?? 'Sort'}
options={sortOptions.map((opt) => ({
value: opt.label || opt.key,
label: opt.label,
}))}
onChange={(e) => handleValueChange(e)}
value={sortValue}
/>
);
}