forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-01 13:16:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated sorting dropdown to accept an order object instead of two individual props

Browse Source
This commit is contained in:
Alejandro Celaya
2021-11-06 12:26:20 +01:00
parent 7169c6e083
commit ee826458be
7 changed files with 41 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/utils/SortingDropdown.tsx
View File

@@ -3,23 +3,22 @@ import { toPairs } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames';
import { determineOrderDir, OrderDir } from './helpers/ordering';
import { determineOrderDir, Order, OrderDir } from './helpers/ordering';
import './SortingDropdown.scss';
export interface SortingDropdownProps<T extends string = string> {
items: Record<T, string>;
orderField?: T;
orderDir?: OrderDir;
order: Order<T>;
onChange: (orderField?: T, orderDir?: OrderDir) => void;
isButton?: boolean;
right?: boolean;
}
export default function SortingDropdown<T extends string = string>(
{ items, orderField, orderDir, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
{ items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
) {
const handleItemClick = (fieldKey: T) => () => {
const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir);
onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
};
@@ -32,26 +31,26 @@ export default function SortingDropdown<T extends string = string>(
className={classNames({ 'dropdown-btn__toggle btn-block': isButton, 'btn-sm p-0': !isButton })}
>
{!isButton && <>Order by</>}
{isButton && !orderField && <>Order by...</>}
{isButton && orderField && `Order by: "${items[orderField]}" - "${orderDir ?? 'DESC'}"`}
{isButton && !order.field && <>Order by...</>}
{isButton && order.field && `Order by: "${items[order.field]}" - "${order.dir ?? 'DESC'}"`}
</DropdownToggle>
<DropdownMenu
right={right}
className={classNames('w-100', { 'sorting-dropdown__menu--link': !isButton })}
>
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
<DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey as T)}>
<DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}>
{fieldValue}
{orderField === fieldKey && (
{order.field === fieldKey && (
<FontAwesomeIcon
icon={orderDir === 'ASC' ? sortAscIcon : sortDescIcon}
icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon}
className="sorting-dropdown__sort-icon"
/>
)}
</DropdownItem>
))}
<DropdownItem divider />
<DropdownItem disabled={!orderField} onClick={() => onChange()}>
<DropdownItem disabled={!order.field} onClick={() => onChange()}>
<i>Clear selection</i>
</DropdownItem>
</DropdownMenu>