mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-25 10:28:23 +03:00
44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
|
import React from 'react';
|
||
|
import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
|
||
|
import { toPairs } from 'ramda';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||
|
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
|
||
|
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
|
||
|
import { determineOrderDir } from '../utils/utils';
|
||
|
import './SortingDropdown.scss';
|
||
|
|
||
|
const propTypes = {
|
||
|
items: PropTypes.object,
|
||
|
orderField: PropTypes.string,
|
||
|
orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]),
|
||
|
onChange: PropTypes.func,
|
||
|
};
|
||
|
|
||
|
const SortingDropdown = ({ items, orderField, orderDir, onChange }) => (
|
||
|
<UncontrolledDropdown>
|
||
|
<DropdownToggle caret className="btn-block">Order by</DropdownToggle>
|
||
|
<DropdownMenu className="sorting-dropdown__menu">
|
||
|
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
|
||
|
<DropdownItem
|
||
|
key={fieldKey}
|
||
|
active={orderField === fieldKey}
|
||
|
onClick={() => onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))}
|
||
|
>
|
||
|
{fieldValue}
|
||
|
{orderField === fieldKey && (
|
||
|
<FontAwesomeIcon
|
||
|
icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
|
||
|
className="sorting-dropdown__sort-icon"
|
||
|
/>
|
||
|
)}
|
||
|
</DropdownItem>
|
||
|
))}
|
||
|
</DropdownMenu>
|
||
|
</UncontrolledDropdown>
|
||
|
);
|
||
|
|
||
|
SortingDropdown.propTypes = propTypes;
|
||
|
|
||
|
export default SortingDropdown;
|