@absreim/react-bootstrap-data-grid 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Grid.d.ts +1 -0
- package/Grid.js +26 -27
- package/export/useExportFn.js +1 -1
- package/filtering/FilterOptionsTable.js +1 -4
- package/package.json +1 -1
- package/styling/styleModelUnwrappers.js +1 -1
- package/styling/types.d.ts +1 -0
package/Grid.d.ts
CHANGED
package/Grid.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useId, useMemo, useState } from "react";
|
|
4
4
|
import ColHeaderCell from "./ColHeaderCell";
|
|
5
5
|
import useFilter from "./pipeline/useFilter";
|
|
@@ -23,7 +23,7 @@ import ToolbarContainer from "./toolbar/ToolbarContainer";
|
|
|
23
23
|
import useExportFn from "./export/useExportFn";
|
|
24
24
|
var Grid = function (_a) {
|
|
25
25
|
var _b;
|
|
26
|
-
var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel, useToolbar = _a.useToolbar;
|
|
26
|
+
var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel, useToolbar = _a.useToolbar, responsive = _a.responsive;
|
|
27
27
|
var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
|
|
28
28
|
var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
|
|
29
29
|
var filteredRows = useFilter(rows, editableFilterState);
|
|
@@ -191,30 +191,29 @@ var Grid = function (_a) {
|
|
|
191
191
|
var unwrappedAdditionalStyleModel = useMemo(function () {
|
|
192
192
|
return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
|
|
193
193
|
}, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}) })] }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
|
|
194
|
+
var mainTable = (_jsxs("table", { className: classNames("table", {
|
|
195
|
+
"table-hover": rowsAreSelectable,
|
|
196
|
+
}, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
|
|
197
|
+
var name = _a.name, label = _a.label, sortable = _a.sortable;
|
|
198
|
+
var colSortModel = sortingEnabled && sortable
|
|
199
|
+
? {
|
|
200
|
+
sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
|
|
201
|
+
setSortOrder: function (order) {
|
|
202
|
+
setSortColDef && setSortColDef(order && { name: name, order: order });
|
|
203
|
+
},
|
|
204
|
+
}
|
|
205
|
+
: undefined;
|
|
206
|
+
return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: unwrappedTableModel.theadTh(index) }, name));
|
|
207
|
+
}), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: displayRows.map(function (row, index) {
|
|
208
|
+
return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
|
|
209
|
+
"table-active": selectedSet.has(row.id),
|
|
210
|
+
}, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
|
|
211
|
+
editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
|
|
212
|
+
return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
|
|
213
|
+
}, dataCellInputClasses: function (colIndex) {
|
|
214
|
+
return unwrappedTableModel.tbodyTdInput(row.id, index, colIndex);
|
|
215
|
+
}, editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) })) }, row.id));
|
|
216
|
+
}) })] }));
|
|
217
|
+
return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
|
|
219
218
|
};
|
|
220
219
|
export default Grid;
|
package/export/useExportFn.js
CHANGED
|
@@ -109,7 +109,7 @@ var useExportFn = function (_a) {
|
|
|
109
109
|
total: rows.length,
|
|
110
110
|
filtered: filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length,
|
|
111
111
|
currentPage: currentPageRows === null || currentPageRows === void 0 ? void 0 : currentPageRows.length,
|
|
112
|
-
}
|
|
112
|
+
},
|
|
113
113
|
}); }, [currentPageRows, exportFn, filteredRows, formattersExist, rows.length]);
|
|
114
114
|
};
|
|
115
115
|
export default useExportFn;
|
|
@@ -112,9 +112,6 @@ var FilterOptionsTable = function (_a) {
|
|
|
112
112
|
var editableTableFilterState = convertFilterFormStateToEditableState(formState);
|
|
113
113
|
setFilterState(editableTableFilterState);
|
|
114
114
|
};
|
|
115
|
-
|
|
116
|
-
// Will eventually be a moot point due to the toolbar being implemented, but
|
|
117
|
-
// still worth considering for backwards compatibility.
|
|
118
|
-
return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
|
|
115
|
+
return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
|
|
119
116
|
};
|
|
120
117
|
export default FilterOptionsTable;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@absreim/react-bootstrap-data-grid",
|
|
3
3
|
"description": "Data grid UI component for use with web apps using React and Bootstrap",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.3.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Brook Li",
|
|
7
7
|
"homepage": "https://react-bootstrap-data-grid.vercel.app/",
|
|
@@ -48,7 +48,7 @@ export var unwrapFilterInputTableStyleModel = function (filterTableStyleModel) {
|
|
|
48
48
|
? filterTableStyleModel.startDateInput
|
|
49
49
|
: function () { return []; }, endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
|
|
50
50
|
? filterTableStyleModel.endDateInput
|
|
51
|
-
: function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [] })); };
|
|
51
|
+
: function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] })); };
|
|
52
52
|
export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return ({
|
|
53
53
|
topLevelDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topLevelDiv) || [],
|
|
54
54
|
filterInputsDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputsDiv) || [],
|
package/styling/types.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export type FilterInputTableStyleModel = SharedTableStyleModel & {
|
|
|
31
31
|
startDateInput?: (rowIndex: number) => string[];
|
|
32
32
|
endDateInput?: (rowIndex: number) => string[];
|
|
33
33
|
submitButton?: string[];
|
|
34
|
+
form?: string[];
|
|
34
35
|
};
|
|
35
36
|
export interface AdditionalComponentsStyleModel {
|
|
36
37
|
topLevelDiv?: string[];
|