@coreui/react-pro
Version:
UI Components Library for React.js
125 lines (122 loc) • 7.83 kB
JavaScript
import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import '../form/CForm.js';
import { CFormCheck } from '../form/CFormCheck.js';
import '../form/CFormControlValidation.js';
import '../form/CFormControlWrapper.js';
import '../form/CFormFeedback.js';
import '../form/CFormFloating.js';
import { CFormInput } from '../form/CFormInput.js';
import '../form/CFormLabel.js';
import '../form/CFormRange.js';
import '../form/CFormSelect.js';
import '../form/CFormSwitch.js';
import '../form/CFormText.js';
import '../form/CFormTextarea.js';
import '../form/CInputGroup.js';
import '../form/CInputGroupText.js';
import '../table/CTable.js';
import '../table/CTableBody.js';
import '../table/CTableCaption.js';
import '../table/CTableDataCell.js';
import '../table/CTableFoot.js';
import { CTableHead } from '../table/CTableHead.js';
import { CTableHeaderCell } from '../table/CTableHeaderCell.js';
import { CTableRow } from '../table/CTableRow.js';
import { getColumns, getColumnGroups, getTableHeaderCellProps, getTableHeaderCellStyles, getColumnKey, getColumnLabel, getColumnValues, getColumnSorterState } from './utils.js';
const CSmartTableHead = forwardRef((_a, ref) => {
var { as: Component = CTableHead, columnFilter, columnFilterState, columnSorter, columns, handleOnCustomFilterChange, handleFilterOnChange, handleFilterOnInput, handleSelectAllChecked, handleSort, items, selectable, selectAll, selectedAll, showGroups = true, sorterState, sortingIcon, sortingIconAscending, sortingIconDescending } = _a, rest = __rest(_a, ["as", "columnFilter", "columnFilterState", "columnSorter", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
const selectAllcheckboxRef = useRef(null);
const _columns = useMemo(() => getColumns(columns), [columns]);
const groups = useMemo(() => getColumnGroups(columns), [columns]);
const columnSorterIcon = (column) => {
if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
return React.createElement("span", { className: "opacity-25 float-end me-1" }, sortingIcon);
}
if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
return React.createElement("span", { className: "float-end me-1" }, sortingIconAscending);
}
if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
return React.createElement("span", { className: "float-end me-1" }, sortingIconDescending);
}
return;
};
return (React.createElement(Component, Object.assign({}, rest, { ref: ref }),
showGroups &&
groups &&
groups.length > 0 &&
groups.map((row, index) => (React.createElement(CTableRow, { key: index },
selectable && React.createElement(CTableHeaderCell, null),
row.map((cell, index) => (React.createElement(CTableHeaderCell, Object.assign({ colSpan: cell.colspan }, getTableHeaderCellProps(cell), { key: index }), cell.label)))))),
React.createElement(CTableRow, null,
selectable && (React.createElement(CTableHeaderCell, null, selectAll && (React.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, indeterminate: selectedAll === 'indeterminate' ? true : false, onChange: () => handleSelectAllChecked && handleSelectAllChecked(), ref: selectAllcheckboxRef })))),
_columns.map((column, index) => {
const isSortable = columnSorter &&
(typeof column === 'object'
? column.sorter === undefined
? true
: column.sorter
: true);
return (React.createElement(CTableHeaderCell, Object.assign({}, getTableHeaderCellProps(column), { style: getTableHeaderCellStyles(column, columnSorter), key: index }, (isSortable && {
onClick: () => handleSort && handleSort(getColumnKey(column), index),
onKeyDown: (event) => {
if (event.key === 'Enter' && handleSort) {
handleSort(getColumnKey(column), index);
}
if (event.key === 'ArrowUp' && handleSort) {
event.preventDefault();
handleSort(getColumnKey(column), index, 'asc');
}
if (event.key === 'ArrowDown' && handleSort) {
event.preventDefault();
handleSort(getColumnKey(column), index, 'desc');
}
},
tabIndex: 0,
})),
React.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
isSortable && columnSorterIcon(column)));
})),
columnFilter && (React.createElement(CTableRow, null,
selectable && React.createElement(CTableHeaderCell, null),
_columns.map((column, index) => {
return (React.createElement(CTableHeaderCell, Object.assign({}, getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
? column.filter === undefined
? true
: column.filter
: true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (column.filter(getColumnValues(items, getColumnKey(column)), (value) => handleOnCustomFilterChange &&
handleOnCustomFilterChange(getColumnKey(column), value), columnFilterState && columnFilterState[getColumnKey(column)]
? columnFilterState[getColumnKey(column)]
: undefined)) : (React.createElement(CFormInput, { size: "sm", onInput: (event) => handleFilterOnInput &&
handleFilterOnInput(getColumnKey(column), event.target.value), onChange: (event) => handleFilterOnChange &&
handleFilterOnChange(getColumnKey(column), event.target.value), value: columnFilterState && columnFilterState[getColumnKey(column)]
? columnFilterState[getColumnKey(column)]
: '', "aria-label": `column name: '${getColumnLabel(column)}' filter input` }))) : ('')));
})))));
});
CSmartTableHead.propTypes = {
as: PropTypes.elementType,
columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
columnFilterState: PropTypes.object,
columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
children: PropTypes.node,
columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired, // TODO: improve this Prop Type,
handleOnCustomFilterChange: PropTypes.func,
handleFilterOnChange: PropTypes.func,
handleFilterOnInput: PropTypes.func,
handleSelectAllChecked: PropTypes.func,
handleSort: PropTypes.func,
items: PropTypes.array,
selectable: PropTypes.bool,
selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
selectedAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
showGroups: PropTypes.bool,
sorterState: PropTypes.array,
sortingIcon: PropTypes.node,
sortingIconAscending: PropTypes.node,
sortingIconDescending: PropTypes.node,
};
CSmartTableHead.displayName = 'CSmartTableHead';
export { CSmartTableHead };
//# sourceMappingURL=CSmartTableHead.js.map