69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { ArrowUpward, ArrowDownward } from '@mui/icons-material';
|
|
|
|
const SortHeader = (params) => {
|
|
const [sortState, setSortState] = useState(null);
|
|
|
|
// Update sort state when it changes
|
|
useEffect(() => {
|
|
const updateSortState = () => {
|
|
const currentSort = params.column?.getSort();
|
|
setSortState(currentSort);
|
|
};
|
|
|
|
// Initial sort state
|
|
updateSortState();
|
|
|
|
// Listen for sort changes
|
|
if (params.api) {
|
|
params.api.addEventListener('sortChanged', updateSortState);
|
|
return () => {
|
|
// Check if grid API is still valid before removing listener
|
|
if (params.api && !params.api.isDestroyed()) {
|
|
params.api.removeEventListener('sortChanged', updateSortState);
|
|
}
|
|
};
|
|
}
|
|
}, [params.api, params.column]);
|
|
|
|
const handleSort = (direction, event) => {
|
|
if (params.setSort) {
|
|
params.setSort(direction, event.shiftKey);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: '100%',
|
|
width: '100%',
|
|
gap: 0,
|
|
backgroundColor: '#f8f9fa',
|
|
borderBottom: '1px solid #dee2e6'
|
|
}}>
|
|
<ArrowUpward
|
|
sx={{
|
|
fontSize: '10px',
|
|
color: sortState === 'asc' ? '#0969da' : '#ccc',
|
|
opacity: sortState === 'asc' ? 1 : 0.5,
|
|
cursor: 'pointer'
|
|
}}
|
|
onClick={(e) => handleSort('asc', e)}
|
|
/>
|
|
<ArrowDownward
|
|
sx={{
|
|
fontSize: '10px',
|
|
color: sortState === 'desc' ? '#0969da' : '#ccc',
|
|
opacity: sortState === 'desc' ? 1 : 0.5,
|
|
cursor: 'pointer'
|
|
}}
|
|
onClick={(e) => handleSort('desc', e)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SortHeader;
|