67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
import { Filter } from '@/portainer/home/types';
|
|
|
|
import { Select } from '@@/form-components/ReactSelect';
|
|
|
|
import styles from './SortbySelector.module.css';
|
|
|
|
interface Props {
|
|
filterOptions: Filter[];
|
|
onChange: (filterOptions: Filter) => void;
|
|
onDescending: () => void;
|
|
placeHolder: string;
|
|
sortByDescending: boolean;
|
|
sortByButton: boolean;
|
|
value?: Filter;
|
|
}
|
|
|
|
export function SortbySelector({
|
|
filterOptions,
|
|
onChange,
|
|
onDescending,
|
|
placeHolder,
|
|
sortByDescending,
|
|
sortByButton,
|
|
value,
|
|
}: Props) {
|
|
const upIcon = 'fa fa-sort-alpha-up';
|
|
const downIcon = 'fa fa-sort-alpha-down';
|
|
const [iconStyle, setIconStyle] = useState(downIcon);
|
|
|
|
useEffect(() => {
|
|
if (sortByDescending) {
|
|
setIconStyle(upIcon);
|
|
} else {
|
|
setIconStyle(downIcon);
|
|
}
|
|
}, [sortByDescending]);
|
|
|
|
return (
|
|
<div className={styles.sortByContainer}>
|
|
<div className={styles.sortByElement}>
|
|
<Select
|
|
placeholder={placeHolder}
|
|
options={filterOptions}
|
|
onChange={(option) => onChange(option as Filter)}
|
|
isClearable
|
|
value={value}
|
|
/>
|
|
</div>
|
|
<div className={styles.sortByElement}>
|
|
<button
|
|
className={styles.sortButton}
|
|
type="button"
|
|
disabled={!sortByButton}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
onDescending();
|
|
}}
|
|
>
|
|
<i className={iconStyle} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|