@coreui/react-pro
Version:
UI Components Library for React.js
127 lines (123 loc) • 8.09 kB
JavaScript
;
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
require('../form/CForm.js');
var CFormCheck = require('../form/CFormCheck.js');
require('../form/CFormControlValidation.js');
require('../form/CFormControlWrapper.js');
require('../form/CFormFeedback.js');
require('../form/CFormFloating.js');
var CFormInput = require('../form/CFormInput.js');
require('../form/CFormLabel.js');
require('../form/CFormRange.js');
require('../form/CFormSelect.js');
require('../form/CFormSwitch.js');
require('../form/CFormText.js');
require('../form/CFormTextarea.js');
require('../form/CInputGroup.js');
require('../form/CInputGroupText.js');
require('../table/CTable.js');
require('../table/CTableBody.js');
require('../table/CTableCaption.js');
require('../table/CTableDataCell.js');
require('../table/CTableFoot.js');
var CTableHead = require('../table/CTableHead.js');
var CTableHeaderCell = require('../table/CTableHeaderCell.js');
var CTableRow = require('../table/CTableRow.js');
var utils = require('./utils.js');
const CSmartTableHead = React.forwardRef((_a, ref) => {
var { as: Component = CTableHead.CTableHead, columnFilter, columnFilterState, columnSorter, columns, handleOnCustomFilterChange, handleFilterOnChange, handleFilterOnInput, handleSelectAllChecked, handleSort, items, selectable, selectAll, selectedAll, showGroups = true, sorterState, sortingIcon, sortingIconAscending, sortingIconDescending } = _a, rest = tslib_es6.__rest(_a, ["as", "columnFilter", "columnFilterState", "columnSorter", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
const selectAllcheckboxRef = React.useRef(null);
const _columns = React.useMemo(() => utils.getColumns(columns), [columns]);
const groups = React.useMemo(() => utils.getColumnGroups(columns), [columns]);
const columnSorterIcon = (column) => {
if (utils.getColumnSorterState(utils.getColumnKey(column), sorterState) === 0) {
return React.createElement("span", { className: "opacity-25 float-end me-1" }, sortingIcon);
}
if (utils.getColumnSorterState(utils.getColumnKey(column), sorterState) === 'asc') {
return React.createElement("span", { className: "float-end me-1" }, sortingIconAscending);
}
if (utils.getColumnSorterState(utils.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.CTableRow, { key: index },
selectable && React.createElement(CTableHeaderCell.CTableHeaderCell, null),
row.map((cell, index) => (React.createElement(CTableHeaderCell.CTableHeaderCell, Object.assign({ colSpan: cell.colspan }, utils.getTableHeaderCellProps(cell), { key: index }), cell.label)))))),
React.createElement(CTableRow.CTableRow, null,
selectable && (React.createElement(CTableHeaderCell.CTableHeaderCell, null, selectAll && (React.createElement(CFormCheck.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.CTableHeaderCell, Object.assign({}, utils.getTableHeaderCellProps(column), { style: utils.getTableHeaderCellStyles(column, columnSorter), key: index }, (isSortable && {
onClick: () => handleSort && handleSort(utils.getColumnKey(column), index),
onKeyDown: (event) => {
if (event.key === 'Enter' && handleSort) {
handleSort(utils.getColumnKey(column), index);
}
if (event.key === 'ArrowUp' && handleSort) {
event.preventDefault();
handleSort(utils.getColumnKey(column), index, 'asc');
}
if (event.key === 'ArrowDown' && handleSort) {
event.preventDefault();
handleSort(utils.getColumnKey(column), index, 'desc');
}
},
tabIndex: 0,
})),
React.createElement("div", { className: "d-inline" }, utils.getColumnLabel(column)),
isSortable && columnSorterIcon(column)));
})),
columnFilter && (React.createElement(CTableRow.CTableRow, null,
selectable && React.createElement(CTableHeaderCell.CTableHeaderCell, null),
_columns.map((column, index) => {
return (React.createElement(CTableHeaderCell.CTableHeaderCell, Object.assign({}, utils.getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
? column.filter === undefined
? true
: column.filter
: true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (column.filter(utils.getColumnValues(items, utils.getColumnKey(column)), (value) => handleOnCustomFilterChange &&
handleOnCustomFilterChange(utils.getColumnKey(column), value), columnFilterState && columnFilterState[utils.getColumnKey(column)]
? columnFilterState[utils.getColumnKey(column)]
: undefined)) : (React.createElement(CFormInput.CFormInput, { size: "sm", onInput: (event) => handleFilterOnInput &&
handleFilterOnInput(utils.getColumnKey(column), event.target.value), onChange: (event) => handleFilterOnChange &&
handleFilterOnChange(utils.getColumnKey(column), event.target.value), value: columnFilterState && columnFilterState[utils.getColumnKey(column)]
? columnFilterState[utils.getColumnKey(column)]
: '', "aria-label": `column name: '${utils.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';
exports.CSmartTableHead = CSmartTableHead;
//# sourceMappingURL=CSmartTableHead.js.map