65 lines
1.8 KiB
React
65 lines
1.8 KiB
React
import React, { useCallback, useMemo } from 'react';
|
|
import QuickAddMenu from '../../ui/QuickAddMenu';
|
|
|
|
const SORT_OPTIONS = [
|
|
{ value: 'title', label: 'Title' },
|
|
{ value: 'issued_at', label: 'Issued date' },
|
|
{ value: 'created_at', label: 'Added' },
|
|
{ value: 'updated_at', label: 'Updated date' },
|
|
];
|
|
|
|
const SORT_LABEL_LOOKUP = SORT_OPTIONS.reduce((acc, option) => {
|
|
const next = acc;
|
|
next[option.value] = option.label;
|
|
return next;
|
|
}, {});
|
|
|
|
const SortFieldQuickMenu = ({ sortField, onChange }) => {
|
|
const currentOption = useMemo(
|
|
() => SORT_OPTIONS.find((option) => option.value === sortField) || SORT_OPTIONS[0],
|
|
[sortField],
|
|
);
|
|
|
|
const options = useMemo(
|
|
() => SORT_OPTIONS.map((option) => ({ id: option.value, label: option.label })),
|
|
[],
|
|
);
|
|
|
|
const handleSelect = useCallback(
|
|
(value, option) => {
|
|
if (typeof onChange !== 'function') {
|
|
return;
|
|
}
|
|
const nextValue = option?.id || option?.original?.id || value;
|
|
if (nextValue) {
|
|
onChange(nextValue);
|
|
}
|
|
},
|
|
[onChange],
|
|
);
|
|
|
|
const label = currentOption?.label || SORT_LABEL_LOOKUP[currentOption?.value] || 'Title';
|
|
|
|
return (
|
|
<QuickAddMenu
|
|
className="documents-sort__quickmenu"
|
|
options={options}
|
|
onSelectOption={handleSelect}
|
|
triggerClassName="view-toggle__button documents-sort__trigger quick-add__trigger"
|
|
triggerContent={(
|
|
<span className="documents-sort__trigger-content">
|
|
<span className="documents-sort__label">{label}</span>
|
|
</span>
|
|
)}
|
|
triggerAriaLabel={`Sort by ${label}`}
|
|
triggerTitle={`Sort by ${label}`}
|
|
placeholder="Select sort field"
|
|
menuMinWidth={200}
|
|
align="start"
|
|
positionStrategy="absolute"
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SortFieldQuickMenu;
|