44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames/bind';
|
|
|
|
import styles from './SortButton.module.scss';
|
|
import SortDown from '@styles/images/icons/ic-arrow-down.svg';
|
|
import SortUp from '@styles/images/icons/ic-arrow-up.svg';
|
|
|
|
const cn = classNames.bind(styles);
|
|
|
|
interface Props {
|
|
label: string;
|
|
column: string;
|
|
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
dataList: {
|
|
content: object[];
|
|
} | null;
|
|
sortRequest: {
|
|
sort: string[];
|
|
};
|
|
}
|
|
|
|
const SortButton = ({ label, column, onClick, dataList, sortRequest }: Props) => {
|
|
const isSortActive = sortRequest.sort[0] && sortRequest.sort[0].startsWith(column);
|
|
const isAscending = sortRequest.sort[0] === `${column},asc`;
|
|
|
|
return (
|
|
<button className={cn('btn_sort')} onClick={onClick} disabled={dataList?.content.length === 0}>
|
|
{label}
|
|
{isSortActive ? (
|
|
<i className={cn('arrow')}>
|
|
<img src={isAscending ? SortUp : SortDown} alt="arrow_icon" />
|
|
</i>
|
|
) : (
|
|
<i className={cn('arrow', 'default_arrow')}>
|
|
<img src={SortUp} alt="arrow_icon" />
|
|
<img src={SortDown} alt="arrow_icon" />
|
|
</i>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default SortButton;
|