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