2018-10-28 23:26:47 +03:00
|
|
|
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';
|
2018-10-30 09:35:35 +03:00
|
|
|
import sortAscIcon from '@fortawesome/fontawesome-free-solid/faSortAmountUp';
|
|
|
|
import sortDescIcon from '@fortawesome/fontawesome-free-solid/faSortAmountDown';
|
2018-10-29 00:54:08 +03:00
|
|
|
import classNames from 'classnames';
|
2018-12-31 20:23:47 +03:00
|
|
|
import { determineOrderDir } from './utils';
|
2018-10-28 23:26:47 +03:00
|
|
|
import './SortingDropdown.scss';
|
|
|
|
|
|
|
|
const propTypes = {
|
2018-10-29 00:54:08 +03:00
|
|
|
items: PropTypes.object.isRequired,
|
2018-10-28 23:26:47 +03:00
|
|
|
orderField: PropTypes.string,
|
|
|
|
orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]),
|
2018-10-29 00:54:08 +03:00
|
|
|
onChange: PropTypes.func.isRequired,
|
|
|
|
isButton: PropTypes.bool,
|
|
|
|
right: PropTypes.bool,
|
2018-10-28 23:26:47 +03:00
|
|
|
};
|
2018-10-29 00:54:08 +03:00
|
|
|
const defaultProps = {
|
|
|
|
isButton: true,
|
|
|
|
right: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, right }) => {
|
|
|
|
const handleItemClick = (fieldKey) => () => {
|
|
|
|
const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
|
2018-10-28 23:26:47 +03:00
|
|
|
|
2018-10-29 00:54:08 +03:00
|
|
|
onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<UncontrolledDropdown>
|
|
|
|
<DropdownToggle
|
|
|
|
caret
|
|
|
|
color={isButton ? 'secondary' : 'link'}
|
|
|
|
className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
|
|
|
|
>
|
|
|
|
Order by
|
|
|
|
</DropdownToggle>
|
|
|
|
<DropdownMenu
|
|
|
|
right={right}
|
|
|
|
className={classNames('sorting-dropdown__menu', { 'sorting-dropdown__menu--link': !isButton })}
|
|
|
|
>
|
|
|
|
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
|
|
|
|
<DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey)}>
|
|
|
|
{fieldValue}
|
|
|
|
{orderField === fieldKey && (
|
|
|
|
<FontAwesomeIcon
|
2018-10-30 09:35:35 +03:00
|
|
|
icon={orderDir === 'ASC' ? sortAscIcon : sortDescIcon}
|
2018-10-29 00:54:08 +03:00
|
|
|
className="sorting-dropdown__sort-icon"
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</DropdownItem>
|
|
|
|
))}
|
|
|
|
<DropdownItem divider />
|
2018-10-29 01:04:52 +03:00
|
|
|
<DropdownItem disabled={!orderField} onClick={() => onChange()}>
|
2018-10-29 00:54:08 +03:00
|
|
|
<i>Clear selection</i>
|
2018-10-28 23:26:47 +03:00
|
|
|
</DropdownItem>
|
2018-10-29 00:54:08 +03:00
|
|
|
</DropdownMenu>
|
|
|
|
</UncontrolledDropdown>
|
|
|
|
);
|
|
|
|
};
|
2018-10-28 23:26:47 +03:00
|
|
|
|
|
|
|
SortingDropdown.propTypes = propTypes;
|
2018-10-29 00:54:08 +03:00
|
|
|
SortingDropdown.defaultProps = defaultProps;
|
2018-10-28 23:26:47 +03:00
|
|
|
|
|
|
|
export default SortingDropdown;
|