@coreui/react-pro
Version:
UI Components Library for React.js
146 lines (142 loc) • 9.17 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');
var CSmartTableHead = React.forwardRef(function (_a, ref) {
var _b = _a.as, Component = _b === void 0 ? CTableHead.CTableHead : _b, columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, _c = _a.showGroups, showGroups = _c === void 0 ? true : _c, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = tslib_es6.__rest(_a, ["as", "columnFilter", "columnFilterState", "columnSorter", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
var selectAllcheckboxRef = React.useRef(null);
var _d = React.useState(false), refresh = _d[0], setRefresh = _d[1];
var _columns = React.useMemo(function () { return utils.getColumns(columns); }, [columns]);
var groups = React.useMemo(function () { return utils.getColumnGroups(columns); }, [columns]);
React.useEffect(function () {
if (columnFilterState && Object.keys(columnFilterState).length === 0) {
setRefresh(true);
}
}, [columnFilterState]);
React.useEffect(function () {
setRefresh(true);
}, [items]);
React.useEffect(function () {
if (setRefresh) {
setRefresh(false);
}
}, [refresh]);
var columnSorterIcon = function (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, tslib_es6.__assign({}, rest, { ref: ref }),
showGroups &&
groups &&
groups.length > 0 &&
groups.map(function (row, index) { return (React.createElement(CTableRow.CTableRow, { key: index },
selectable && React.createElement(CTableHeaderCell.CTableHeaderCell, null),
row.map(function (cell, index) { return (React.createElement(CTableHeaderCell.CTableHeaderCell, tslib_es6.__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: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
_columns.map(function (column, index) {
var isSortable = columnSorter &&
(typeof column === 'object'
? column.sorter === undefined
? true
: column.sorter
: true);
return (React.createElement(CTableHeaderCell.CTableHeaderCell, tslib_es6.__assign({}, utils.getTableHeaderCellProps(column), { style: utils.getTableHeaderCellStyles(column, columnSorter), key: index }, (isSortable && {
onClick: function () { return handleSort && handleSort(utils.getColumnKey(column), index); },
onKeyDown: function (event) {
if (event.key === 'Enter') {
handleSort && handleSort(utils.getColumnKey(column), index);
}
if (event.key === 'ArrowUp') {
event.preventDefault();
handleSort && handleSort(utils.getColumnKey(column), index, 'asc');
}
if (event.key === 'ArrowDown') {
event.preventDefault();
handleSort && 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(function (column, index) {
return (React.createElement(CTableHeaderCell.CTableHeaderCell, tslib_es6.__assign({}, utils.getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
? column.filter === undefined
? true
: column.filter
: true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
column.filter(utils.getColumnValues(items, utils.getColumnKey(column)), function (value) {
return handleOnCustomFilterChange &&
handleOnCustomFilterChange(utils.getColumnKey(column), value);
})) : (React.createElement(CFormInput.CFormInput, { size: "sm", onInput: function (event) {
return handleFilterOnInput &&
handleFilterOnInput(utils.getColumnKey(column), event.target.value);
}, onChange: function (event) {
return handleFilterOnChange &&
handleFilterOnChange(utils.getColumnKey(column), event.target.value);
}, value: columnFilterState && columnFilterState[utils.getColumnKey(column)]
? columnFilterState[utils.getColumnKey(column)]
: '', "aria-label": "column name: '".concat(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