decap-cms-core
Version:
Decap CMS core application, see decap-cms package for the main distribution.
58 lines • 1.73 kB
JavaScript
import { translate } from 'react-polyglot';
import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
import { SortDirection } from '../../types/redux';
import { ControlButton } from './ControlButton';
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
function nextSortDirection(direction) {
switch (direction) {
case SortDirection.Ascending:
return SortDirection.Descending;
case SortDirection.Descending:
return SortDirection.None;
default:
return SortDirection.Ascending;
}
}
function sortIconProps(sortDir) {
return {
icon: 'chevron',
iconDirection: sortIconDirections[sortDir],
iconSmall: true
};
}
const sortIconDirections = {
[SortDirection.Ascending]: 'up',
[SortDirection.Descending]: 'down'
};
function SortControl({
t,
fields,
onSortClick,
sort
}) {
const hasActiveSort = sort?.valueSeq().toJS().some(s => s.direction !== SortDirection.None);
return _jsx(Dropdown, {
renderButton: () => {
return _jsx(ControlButton, {
active: hasActiveSort,
title: t('collection.collectionTop.sortBy')
});
},
closeOnSelection: false,
dropdownTopOverlap: "30px",
dropdownWidth: "160px",
dropdownPosition: "left",
children: fields.map(field => {
const sortDir = sort?.getIn([field.key, 'direction']);
const isActive = sortDir && sortDir !== SortDirection.None;
const nextSortDir = nextSortDirection(sortDir);
return _jsx(DropdownItem, {
label: field.label,
onClick: () => onSortClick(field.key, nextSortDir),
isActive: isActive,
...(isActive && sortIconProps(sortDir))
}, field.key);
})
});
}
export default translate()(SortControl);