mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
79 lines • 3.43 kB
JavaScript
import * as React from 'react';
export const getTableColumnSort = ({ columns, subColumns, sortField, setSortField, ...sortProps }) => getTableColumnSortByIndex({
columns,
subColumns,
sortIndex: columns.findIndex((c) => c.field === sortField),
setSortIndex: (index) => setSortField(String(columns[index].field)),
...sortProps,
});
const getTableColumnSortByIndex = ({ columns, subColumns, sortIndex, sortDirection, setSortIndex, setSortDirection, }) => (columnIndex) => (columnIndex < columns.length
? columns[columnIndex]
: subColumns?.[columnIndex - columns.length])?.sortable
? {
sortBy: {
index: sortIndex,
direction: sortDirection,
defaultDirection: 'asc',
},
onSort: (_event, index, direction) => {
setSortIndex(index);
setSortDirection(direction);
},
columnIndex,
}
: undefined;
/**
* Using PF Composable Tables, this utility will help with handling sort logic.
*
* Use `transformData` on your data before you render rows.
* Use `getColumnSort` on your Th.sort as you render it (using the index of your column)
*
* @see https://www.patternfly.org/v4/components/table
*/
const useTableColumnSort = (columns, subColumns, defaultSortColIndex) => {
const [activeSortIndex, setActiveSortIndex] = React.useState(defaultSortColIndex);
const [activeSortDirection, setActiveSortDirection] = React.useState('asc');
return {
transformData: (data) => {
if (activeSortIndex === undefined) {
return data;
}
return data.toSorted((a, b) => {
const columnField = activeSortIndex < columns.length
? columns[activeSortIndex]
: subColumns[activeSortIndex - columns.length];
const compute = () => {
if (typeof columnField.sortable === 'function') {
return columnField.sortable(a, b, columnField.field);
}
if (!columnField.field) {
// If you lack the field, no auto sorting can be done
return 0;
}
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const dataValueA = a[columnField.field];
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const dataValueB = b[columnField.field];
if (typeof dataValueA === 'string' && typeof dataValueB === 'string') {
return dataValueA.localeCompare(dataValueB);
}
if (typeof dataValueA === 'number' && typeof dataValueB === 'number') {
return dataValueA - dataValueB;
}
return 0;
};
return compute() * (activeSortDirection === 'desc' ? -1 : 1);
});
},
getColumnSort: getTableColumnSortByIndex({
columns,
subColumns,
sortDirection: activeSortDirection,
setSortDirection: setActiveSortDirection,
sortIndex: activeSortIndex,
setSortIndex: setActiveSortIndex,
}),
};
};
export default useTableColumnSort;
//# sourceMappingURL=useTableColumnSort.js.map