index.tsx
53 lines
| 1 | import React from 'react'; |
| 2 | import styles from './style.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"> |
| 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"> |
| 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 |