| 1 |
import React from 'react'; |
| 2 |
import styles from './ListTableHeaders.module.scss'; |
| 3 |
|
| 4 |
//@since 2.24.0 used to handle sort direction and column id. |
| 5 |
const ListTableHeaders = ({column, sortField, setSortDirectionForColumn}) => { |
| 6 |
const handleItemSort = (event, column) => { |
| 7 |
event.preventDefault(); |
| 8 |
const direction = sortField.sortDirection === 'desc' ? 'asc' : 'desc'; |
| 9 |
setSortDirectionForColumn(column, direction); |
| 10 |
}; |
| 11 |
return ( |
| 12 |
<> |
| 13 |
{column.sortable ? ( |
| 14 |
<button |
| 15 |
type="button" |
| 16 |
aria-label="sort" |
| 17 |
className={styles.sortButton} |
| 18 |
onClick={(event) => column.sortable && handleItemSort(event, column.id)} |
| 19 |
> |
| 20 |
<div className={styles.text}>{column.label}</div> |
| 21 |
<div key={column.id} id={column.id}> |
| 22 |
<svg width="16" height="7" viewBox="0 0 16 7" fill="none" xmlns="http://www.w3.org/2000/svg" data-sorting={sortField.sortColumn === column.id && sortField.sortDirection === 'asc'}> |
| 23 |
<path |
| 24 |
d="M11.1699 6.5L5.66986 0.5L0.169861 6.5L11.1699 6.5Z" |
| 25 |
fill={ |
| 26 |
sortField.sortColumn === column.id && sortField.sortDirection === 'asc' |
| 27 |
? '#0878b0' |
| 28 |
: '#dddddd' |
| 29 |
} |
| 30 |
/> |
| 31 |
</svg> |
| 32 |
<svg width="16" height="7" viewBox="0 0 16 7" fill="none" xmlns="http://www.w3.org/2000/svg" data-sorting={sortField.sortColumn === column.id && sortField.sortDirection === 'desc'}> |
| 33 |
<path |
| 34 |
d="M0.169861 0.5L5.66986 6.5L11.1699 0.5H0.169861Z" |
| 35 |
fill={ |
| 36 |
sortField.sortColumn === column.id && sortField.sortDirection === 'desc' |
| 37 |
? '#0878b0' |
| 38 |
: '#dddddd' |
| 39 |
} |
| 40 |
/> |
| 41 |
</svg> |
| 42 |
</div> |
| 43 |
</button> |
| 44 |
) : ( |
| 45 |
<div className={styles.text} id={column.id}> |
| 46 |
{column.label} |
| 47 |
</div> |
| 48 |
)} |
| 49 |
</> |
| 50 |
); |
| 51 |
}; |
| 52 |
export default ListTableHeaders; |
| 53 |
|
