@coreui/react-pro
Version:
UI Components Library for React.js
361 lines (357 loc) • 24.5 kB
JavaScript
;
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index_esm = require('../../node_modules/@coreui/icons-react/dist/index.esm.js');
var CElementCover = require('../element-cover/CElementCover.js');
require('../form/CForm.js');
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');
var CFormLabel = require('../form/CFormLabel.js');
require('../form/CFormRange.js');
var CFormSelect = require('../form/CFormSelect.js');
require('../form/CFormSwitch.js');
require('../form/CFormText.js');
require('../form/CFormTextarea.js');
require('../form/CInputGroup.js');
require('../form/CInputGroupText.js');
var CSmartPagination = require('../smart-pagination/CSmartPagination.js');
var CTable = require('../table/CTable.js');
require('../table/CTableBody.js');
require('../table/CTableCaption.js');
var CTableDataCell = require('../table/CTableDataCell.js');
var CTableFoot = require('../table/CTableFoot.js');
require('../table/CTableHead.js');
require('../table/CTableHeaderCell.js');
var CTableRow = require('../table/CTableRow.js');
var CSmartTableBody = require('./CSmartTableBody.js');
var CSmartTableHead = require('./CSmartTableHead.js');
var isObjectInArray = require('../../utils/isObjectInArray.js');
var consts = require('./consts.js');
var utils = require('./utils.js');
var cilSwapVertical = require('../../node_modules/@coreui/icons/dist/esm/free/cil-swap-vertical.js');
var cilArrowTop = require('../../node_modules/@coreui/icons/dist/esm/free/cil-arrow-top.js');
var cilArrowBottom = require('../../node_modules/@coreui/icons/dist/esm/free/cil-arrow-bottom.js');
var cilFilterX = require('../../node_modules/@coreui/icons/dist/esm/free/cil-filter-x.js');
var CSmartTable = React.forwardRef(function (_a, ref) {
var _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, cleaner = _a.cleaner, clickableRows = _a.clickableRows, columnFilter = _a.columnFilter, columnFilterValue = _a.columnFilterValue, // TODO: consider to use only columnFilter prop
columns = _a.columns, columnSorter = _a.columnSorter, elementCover = _a.elementCover, footer = _a.footer, _c = _a.header, header = _c === void 0 ? true : _c, _d = _a.items, items = _d === void 0 ? [] : _d, itemsNumber = _a.itemsNumber, _e = _a.itemsPerPage, itemsPerPage = _e === void 0 ? 10 : _e, _f = _a.itemsPerPageLabel, itemsPerPageLabel = _f === void 0 ? 'Items per page:' : _f, _g = _a.itemsPerPageOptions, itemsPerPageOptions = _g === void 0 ? [5, 10, 20, 50] : _g, itemsPerPageSelect = _a.itemsPerPageSelect, loading = _a.loading, _h = _a.noItemsLabel, noItemsLabel = _h === void 0 ? 'No items found' : _h, onActivePageChange = _a.onActivePageChange, onColumnFilterChange = _a.onColumnFilterChange, onFilteredItemsChange = _a.onFilteredItemsChange, onItemsPerPageChange = _a.onItemsPerPageChange, onRowClick = _a.onRowClick, onSelectAll = _a.onSelectAll, onSelectedItemsChange = _a.onSelectedItemsChange, onSorterChange = _a.onSorterChange, onTableFilterChange = _a.onTableFilterChange, pagination = _a.pagination, paginationProps = _a.paginationProps, scopedColumns = _a.scopedColumns, selected = _a.selected, selectable = _a.selectable, _j = _a.selectAll, selectAll = _j === void 0 ? true : _j, sorterValue = _a.sorterValue, _k = _a.sortingIcon, sortingIcon = _k === void 0 ? React.createElement(index_esm.CIcon, { width: 18, icon: cilSwapVertical.cilSwapVertical, key: "csv" }) : _k, _l = _a.sortingIconAscending, sortingIconAscending = _l === void 0 ? React.createElement(index_esm.CIcon, { width: 18, icon: cilArrowTop.cilArrowTop, key: "cat" }) : _l, _m = _a.sortingIconDescending, sortingIconDescending = _m === void 0 ? React.createElement(index_esm.CIcon, { width: 18, icon: cilArrowBottom.cilArrowBottom, key: "cab" }) : _m, tableBodyProps = _a.tableBodyProps, tableFootProps = _a.tableFootProps, tableFilter = _a.tableFilter, _o = _a.tableFilterLabel, tableFilterLabel = _o === void 0 ? 'Filter:' : _o, _p = _a.tableFilterPlaceholder, tableFilterPlaceholder = _p === void 0 ? 'type string...' : _p, tableFilterValue = _a.tableFilterValue, tableHeadProps = _a.tableHeadProps, tableProps = _a.tableProps, rest = tslib_es6.__rest(_a, ["activePage", "cleaner", "clickableRows", "columnFilter", "columnFilterValue", "columns", "columnSorter", "elementCover", "footer", "header", "items", "itemsNumber", "itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions", "itemsPerPageSelect", "loading", "noItemsLabel", "onActivePageChange", "onColumnFilterChange", "onFilteredItemsChange", "onItemsPerPageChange", "onRowClick", "onSelectAll", "onSelectedItemsChange", "onSorterChange", "onTableFilterChange", "pagination", "paginationProps", "scopedColumns", "selected", "selectable", "selectAll", "sorterValue", "sortingIcon", "sortingIconAscending", "sortingIconDescending", "tableBodyProps", "tableFootProps", "tableFilter", "tableFilterLabel", "tableFilterPlaceholder", "tableFilterValue", "tableHeadProps", "tableProps"]);
var mountedRef = React.useRef(false);
var _q = React.useState(activePage), _activePage = _q[0], setActivePage = _q[1];
var _r = React.useState([]), _items = _r[0], setItems = _r[1];
var _s = React.useState(itemsPerPage), _itemsPerPage = _s[0], setItemsPerPage = _s[1];
var _t = React.useState([]), _selected = _t[0], setSelected = _t[1];
var _u = React.useState({}), columnFilterState = _u[0], setColumnFilterState = _u[1];
var _v = React.useState(), selectedAll = _v[0], setSelectedAll = _v[1];
var _w = React.useState([]), sorterState = _w[0], setSorterState = _w[1];
var _x = React.useState(tableFilterValue !== null && tableFilterValue !== void 0 ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
var _itemsNumber = React.useMemo(function () { return itemsNumber !== null && itemsNumber !== void 0 ? itemsNumber : items.length; }, [itemsNumber, items.length]);
React.useEffect(function () {
setActivePage(activePage);
}, [activePage]);
React.useEffect(function () {
if (items.length < _itemsPerPage * _activePage - _itemsPerPage) {
setActivePage(1);
}
var selected = [];
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var item = items_1[_i];
if (item._selected) {
var _item = tslib_es6.__assign({}, item);
for (var _a = 0, ITEM_INTERNAL_KEYS_1 = consts.ITEM_INTERNAL_KEYS; _a < ITEM_INTERNAL_KEYS_1.length; _a++) {
var key = ITEM_INTERNAL_KEYS_1[_a];
delete _item[key]; // Remove internal keys
}
selected.push(_item); // Add cleaned item to selected array
}
}
if (selected.length > 0) {
setSelected(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], _selected, true), selected, true));
}
if (Array.isArray(items)) {
setItems(tslib_es6.__spreadArray([], items, true));
}
}, [JSON.stringify(items)]);
React.useEffect(function () {
Array.isArray(selected) && setSelected(selected);
}, [JSON.stringify(selected)]);
React.useEffect(function () {
columnFilterValue && setColumnFilterState(columnFilterValue);
}, [JSON.stringify(columnFilterValue)]);
React.useEffect(function () {
sorterValue && setSorterState(Array.isArray(sorterValue) ? sorterValue : [sorterValue]);
}, [JSON.stringify(sorterValue)]);
React.useEffect(function () { return setItemsPerPage(itemsPerPage); }, [itemsPerPage]);
React.useEffect(function () {
mountedRef.current && onActivePageChange && onActivePageChange(_activePage);
}, [_activePage]);
React.useEffect(function () {
mountedRef.current && onItemsPerPageChange && onItemsPerPageChange(_itemsPerPage);
itemsPerPage !== _itemsPerPage && setActivePage(1); // TODO: set proper page after _itemsPerPage update
}, [_itemsPerPage]);
React.useEffect(function () {
var multiple = typeof columnSorter === 'object' && columnSorter.multiple;
mountedRef.current &&
sorterState &&
onSorterChange &&
onSorterChange(multiple ? sorterState : sorterState[0]);
}, [sorterState]);
React.useEffect(function () {
mountedRef.current && onColumnFilterChange && onColumnFilterChange(columnFilterState);
}, [columnFilterState]);
React.useEffect(function () {
mountedRef.current && onTableFilterChange && onTableFilterChange(tableFilterState);
}, [tableFilterState]);
React.useEffect(function () {
if (selectable) {
onSelectedItemsChange && onSelectedItemsChange(_selected);
if (_selected.length === _itemsNumber) {
setSelectedAll(true);
return;
}
if (_selected.length === 0) {
setSelectedAll(false);
return;
}
if (_selected.length > 0 && _selected.length !== _itemsNumber) {
setSelectedAll('indeterminate');
}
}
}, [JSON.stringify(_selected), _itemsNumber]);
var columnNames = React.useMemo(function () { return utils.getColumnNames(columns, _items); }, [columns, _items]);
var itemsDataColumns = React.useMemo(function () { return columnNames.filter(function (name) { return utils.getColumnNamesFromItems(_items).includes(name); }); }, [columnNames, _items]);
var filteredColumns = React.useMemo(function () { return utils.filterColumns(_items, columnFilter, columnFilterState, itemsDataColumns); }, [columnFilterState, _items]);
var filteredTable = React.useMemo(function () { return utils.filterTable(filteredColumns, tableFilter, tableFilterState, itemsDataColumns); }, [tableFilterState, tableFilterValue, filteredColumns]);
var sortedItems = React.useMemo(function () { return utils.sortItems(columns, columnSorter, filteredTable, itemsDataColumns, sorterState); }, [columnSorter, sorterState, filteredTable]);
var numberOfPages = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1;
var firstItemOnActivePageIndex = _activePage ? (_activePage - 1) * _itemsPerPage : 0;
var currentItems = _activePage
? sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage)
: sortedItems;
React.useEffect(function () {
mountedRef.current && onFilteredItemsChange && onFilteredItemsChange(sortedItems);
}, [JSON.stringify(sortedItems)]);
var handleClean = function () {
setTableFilterState('');
setColumnFilterState({});
setSorterState([]);
};
var handleColumnFilterChange = function (colName, value, type) {
var isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true;
if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
return;
}
setActivePage(1);
setColumnFilterState(function (prevState) {
var newState = tslib_es6.__assign({}, prevState);
if (value === '') {
delete newState[colName];
}
else {
newState[colName] = value;
}
return newState;
});
};
var handleItemsPerPageChange = function (event) {
if (typeof itemsPerPageSelect !== 'object' ||
(typeof itemsPerPageSelect === 'object' && !itemsPerPageSelect.external)) {
setItemsPerPage(Number(event.target.value));
}
};
var handleRowChecked = function (item, value) {
if (value && !isObjectInArray.default(_selected, item, consts.ITEM_INTERNAL_KEYS)) {
setSelected(function (prevSelected) { return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], prevSelected, true), [item], false); });
return;
}
setSelected(function (prevSelected) {
return prevSelected.filter(function (_item) { return !isObjectInArray.default([_item], item, consts.ITEM_INTERNAL_KEYS); });
});
};
var handleSelectAllChecked = function () {
if (selectedAll === true) {
setSelected(_items.filter(function (item) { return item._selectable === false; }));
return;
}
onSelectAll && onSelectAll();
if (selectAll && typeof selectAll === 'object' && selectAll.external) {
return;
}
var selectable = _items.filter(function (item) { return item._selectable !== false || item._selected === true; });
if (selectable.length === _selected.length) {
setSelected(_items.filter(function (item) { return item._selectable === false && item._selected === true; }));
return;
}
var selected = selectable.map(function (item) {
return tslib_es6.__assign({}, item);
});
setSelected(selected.map(function (item) {
for (var _i = 0, ITEM_INTERNAL_KEYS_2 = consts.ITEM_INTERNAL_KEYS; _i < ITEM_INTERNAL_KEYS_2.length; _i++) {
var key = ITEM_INTERNAL_KEYS_2[_i];
delete item[key];
}
return item;
}));
};
var handleSorterChange = function (column, index, order) {
if (!utils.isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
return;
}
var existingColumnState = sorterState.find(function (x) { return x.column === column; });
var multiple = typeof columnSorter === 'object' && columnSorter.multiple;
// If the column already has a sort state
if (existingColumnState) {
// No need to update if the order is already the same
if (existingColumnState.state === order) {
return;
}
// Remove the column from sorting if resetable and descending
if (typeof columnSorter === 'object' &&
columnSorter.resetable &&
existingColumnState.state === 'desc' &&
order !== 'asc') {
setSorterState(multiple ? sorterState.filter(function (x) { return x.column !== column; }) : []);
}
else {
// Toggle between ascending and descending
var newState_1 = {
column: column,
state: order || (existingColumnState.state === 'asc' ? 'desc' : 'asc'),
};
setSorterState(multiple
? sorterState.map(function (item) { return (item.column === column ? newState_1 : item); })
: [newState_1]);
}
}
else {
// If the column is not yet sorted, add it with the default or provided order
var newSorter = { column: column, state: order || 'asc' };
setSorterState(multiple ? tslib_es6.__spreadArray(tslib_es6.__spreadArray([], sorterState, true), [newSorter], false) : [newSorter]);
}
};
var handleTableFilterChange = function (value, type) {
var isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true;
if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
return;
}
setActivePage(1);
setTableFilterState(value);
};
React.useEffect(function () {
mountedRef.current = true;
}, []);
return (React.createElement(React.Fragment, null,
React.createElement("div", tslib_es6.__assign({}, rest, { ref: ref }), (itemsPerPageSelect || tableFilter || cleaner) && (React.createElement("div", { className: "row my-2 mx-0" }, (tableFilter || cleaner) && (React.createElement(React.Fragment, null,
React.createElement("div", { className: "col-auto p-0" }, tableFilter && (React.createElement("div", { className: "row mb-2" },
React.createElement(CFormLabel.CFormLabel, { className: "col-sm-auto col-form-label" }, tableFilterLabel),
React.createElement("div", { className: "col-sm-auto" },
React.createElement(CFormInput.CFormInput, { onInput: function (e) {
handleTableFilterChange(e.target.value, 'input');
}, onChange: function (e) {
handleTableFilterChange(e.target.value, 'change');
}, placeholder: tableFilterPlaceholder, value: tableFilterState || '' }))))),
React.createElement("div", { className: "col-auto p-0" }, cleaner && (React.createElement("button", tslib_es6.__assign({ type: "button", className: "btn btn-transparent" }, (!(tableFilterState ||
sorterState.length > 0 ||
Object.values(columnFilterState).join('')) && {
disabled: true,
tabIndex: -1,
}), { onClick: function () { return handleClean(); }, onKeyDown: function (event) {
if (event.key === 'Enter')
handleClean();
} }),
React.createElement(index_esm.CIcon, { width: 18, icon: cilFilterX.cilFilterX }))))))))),
React.createElement("div", { className: "position-relative" },
React.createElement(CTable.CTable, tslib_es6.__assign({}, tableProps),
header && (React.createElement(CSmartTableHead.CSmartTableHead, tslib_es6.__assign({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns !== null && columns !== void 0 ? columns : columnNames, columnSorter: columnSorter, items: _items, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleFilterOnChange: function (key, event) {
return handleColumnFilterChange(key, event, 'change');
}, handleFilterOnInput: function (key, event) { return handleColumnFilterChange(key, event, 'input'); }, handleOnCustomFilterChange: function (key, event) { return handleColumnFilterChange(key, event); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, handleSort: function (key, index, order) { return handleSorterChange(key, index, order); } }))),
React.createElement(CSmartTableBody.CSmartTableBody, tslib_es6.__assign({ clickableRows: clickableRows, columnNames: columnNames, columns: columns !== null && columns !== void 0 ? columns : columnNames, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
}, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
typeof footer === 'boolean' && footer && (React.createElement(CSmartTableHead.CSmartTableHead, tslib_es6.__assign({ as: CTableFoot.CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, showGroups: false }))),
Array.isArray(footer) && (React.createElement(CTableFoot.CTableFoot, tslib_es6.__assign({}, tableFootProps),
React.createElement(CTableRow.CTableRow, null, footer.map(function (item, index) { return (React.createElement(CTableDataCell.CTableDataCell, tslib_es6.__assign({}, (typeof item === 'object' && item._props && tslib_es6.__assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); }))))),
loading && (React.createElement(CElementCover.CElementCover, { boundaries: [
{ sides: ['top'], query: 'tbody' },
{ sides: ['bottom'], query: 'tbody' },
] }, elementCover))),
(pagination || itemsPerPageSelect) && (React.createElement("div", { className: "row" },
React.createElement("div", { className: "col" }, ((pagination && numberOfPages > 1) ||
(paginationProps && paginationProps.pages > 1)) && (React.createElement(CSmartPagination.CSmartPagination, tslib_es6.__assign({ activePage: _activePage, onActivePageChange: function (page) {
pagination && typeof pagination === 'object' && pagination.external
? onActivePageChange && onActivePageChange(page)
: setActivePage(page);
}, pages: numberOfPages }, paginationProps)))),
React.createElement("div", { className: "col-auto ms-auto" }, itemsPerPageSelect && (React.createElement("div", { className: "row" },
React.createElement(CFormLabel.CFormLabel, { className: "col-auto col-form-label" }, itemsPerPageLabel),
React.createElement("div", { className: "col-auto" },
React.createElement(CFormSelect.CFormSelect, { defaultValue: _itemsPerPage, onChange: function (event) {
return handleItemsPerPageChange(event);
} }, itemsPerPageOptions &&
itemsPerPageOptions.map(function (number, index) {
return (React.createElement("option", { value: number, key: index }, number));
}))))))))));
});
CSmartTable.propTypes = {
activePage: PropTypes.number,
cleaner: PropTypes.bool,
clickableRows: PropTypes.bool,
columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
columnFilterValue: PropTypes.object,
columns: PropTypes.array,
columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
elementCover: PropTypes.node,
footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
header: PropTypes.bool,
items: PropTypes.array,
itemsNumber: PropTypes.number,
itemsPerPage: PropTypes.number,
itemsPerPageLabel: PropTypes.string,
itemsPerPageOptions: PropTypes.array,
itemsPerPageSelect: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
loading: PropTypes.bool,
noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
onActivePageChange: PropTypes.func,
onColumnFilterChange: PropTypes.func,
onFilteredItemsChange: PropTypes.func,
onItemsPerPageChange: PropTypes.func,
onRowClick: PropTypes.func,
onSelectAll: PropTypes.func,
onSelectedItemsChange: PropTypes.func,
onSorterChange: PropTypes.func, // TODO: change to `onColumnSorterChange` in v6
onTableFilterChange: PropTypes.func,
pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
paginationProps: PropTypes.any, // TODO: update
scopedColumns: PropTypes.object,
selectable: PropTypes.bool,
selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
selected: PropTypes.array,
sorterValue: PropTypes.oneOfType([
PropTypes.shape({
column: PropTypes.string.isRequired,
state: PropTypes.oneOf(['asc', 'desc', 0]).isRequired,
}),
PropTypes.arrayOf(PropTypes.shape({
column: PropTypes.string.isRequired,
state: PropTypes.oneOf(['asc', 'desc', 0]).isRequired,
}).isRequired),
]),
sortingIcon: PropTypes.node,
sortingIconAscending: PropTypes.node,
sortingIconDescending: PropTypes.node,
tableBodyProps: PropTypes.object,
tableFootProps: PropTypes.object,
tableFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
tableFilterLabel: PropTypes.string,
tableFilterPlaceholder: PropTypes.string,
tableFilterValue: PropTypes.string,
tableHeadProps: PropTypes.object,
tableProps: PropTypes.object,
};
CSmartTable.displayName = 'CSmartTable';
exports.CSmartTable = CSmartTable;
//# sourceMappingURL=CSmartTable.js.map