@absreim/react-bootstrap-data-grid 1.2.2 → 1.3.0

package/Grid.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ColDef, FilterModel, RowDef, SelectModel, Size, TableSortModel } from "./types";
+import { ColDef, EditModel, FilterModel, RowDef, SelectModel, Size, TableSortModel } from "./types";
 export interface GridPaginationState {
     pageSizeOptions: number[];
     pageSizeIndex: number;
@@ -16,6 +16,8 @@ export interface GridProps {
     sortModel?: TableSortModel;
     filterModel?: FilterModel;
     selectModel?: SelectModel;
+    editModel?: EditModel;
+    caption?: string;
 }
 declare const Grid: FC<GridProps>;
 export default Grid;

package/Grid.js

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import ColHeaderCell from "./ColHeaderCell";
 import useFilter from "./hooks/useFilter";
 import ToggleButton from "./ToggleButton";
-import FilterOptionsTable from "./FilterOptionsTable/FilterOptionsTable";
+import FilterOptionsTable from "./filtering/FilterOptionsTable";
 import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
 import useAugmentedRows from "./hooks/useAugmentedRows";
 import useSortedRows from "./hooks/useSortedRows";
@@ -13,8 +13,10 @@ import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
 import SelectionInput from "./selection/SelectionInput";
 import Pagination from "./pagination/Pagination";
 import classNames from "classnames";
+import EditableRow from "./editing/EditableRow";
+import inputStrsToRowDef from "./editing/inputStrsToRowDef";
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel;
+    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;
     var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
     var filterState = useFilterStateFromEditable(cols, editableFilterState);
     var augmentedRows = useAugmentedRows(rows);
@@ -30,7 +32,9 @@ var Grid = function (_a) {
         var upperIndex = lowerIndex + pageSize;
         return sortedRows.slice(lowerIndex, upperIndex);
     }, [sortedRows, pagination]);
-    var displayRows = useDisplayRows(currentPageRows, cols);
+    var showSelectCol = selectModel && selectModel.mode !== "row";
+    var ariaColIndexOffset = showSelectCol ? 1 : 0;
+    var displayRows = useDisplayRows(currentPageRows, cols, ariaColIndexOffset);
     var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
@@ -94,7 +98,6 @@ var Grid = function (_a) {
             deselectCallback: getDeselectHandler(index),
         };
     };
-    var showSelectCol = selectModel && selectModel.mode !== "row";
     var selectedSet = new Set();
     if (selectModel && selectModel.type === "multi") {
         selectModel.selected.forEach(function (value) { return selectedSet.add(value); });
@@ -106,7 +109,6 @@ var Grid = function (_a) {
     }
     var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
     var getRowClickHandler = function (index) { return function (event) {
-        event.preventDefault();
         if (!rowsAreSelectable) {
             return;
         }
@@ -122,12 +124,17 @@ var Grid = function (_a) {
         }
         return String(selectedSet.has(index));
     };
-    // Once this component implements selection state, and if such interactivity is enabled, (conditionally) change the
-    // aria role to "grid".
-    // TODO: implement the above described features: conditionally changing aria role to grid
+    var getInputStrSubmitCallback = editModel &&
+        (function (origIndex) {
+            var indexSpecificCallback = editModel.getUpdateCallback(origIndex);
+            return function (inputStrs) {
+                var rowDef = inputStrsToRowDef(cols, inputStrs);
+                indexSpecificCallback(rowDef);
+            };
+        });
     return (_jsxs("div", { children: [filterState && filterModel && (_jsxs("div", { children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions }), filterOptionsVisible && (_jsx(FilterOptionsTable, { filterState: filterState, setFilterState: filterModel.setTableFilterState }))] })), _jsxs("table", { className: classNames("table", {
                     "table-hover": rowsAreSelectable,
-                }), "aria-rowcount": filteredRows.length + 1, children: [_jsx("thead", { children: _jsxs("tr", { "aria-rowindex": 1, children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists })), cols.map(function (_a, index) {
+                }), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && _jsx("caption", { children: caption }), _jsx("thead", { children: _jsxs("tr", { "aria-rowindex": 1, children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists })), cols.map(function (_a, index) {
                                     var _b;
                                     var name = _a.name, label = _a.label, sortable = _a.sortable;
                                     var colSortModel = sortModel && sortable
@@ -141,8 +148,12 @@ var Grid = function (_a) {
                                         }
                                         : undefined;
                                     return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0) }, name));
-                                })] }) }), _jsx("tbody", { children: displayRows.map(function (row, index) { return (_jsxs("tr", { onClick: getRowClickHandler(row.origIndex), className: classNames({
-                                "table-active": selectedSet.has(row.origIndex),
-                            }), "aria-rowindex": index + 2, "data-rowindex": row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), children: [showSelectCol && (_jsx("td", { children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex) }) })), row.contents.map(function (value, index) { return (_jsx("td", { "aria-colindex": index + 1 + (showSelectCol ? 1 : 0), children: value }, index)); })] }, row.origIndex)); }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage }))] }));
+                                }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), children: "Edit Controls" }))] }) }), _jsx("tbody", { children: displayRows.map(function (row, index) {
+                            return (_jsx(EditableRow, { onClick: getRowClickHandler(row.origIndex), className: classNames({
+                                    "table-active": selectedSet.has(row.origIndex),
+                                }), "aria-rowindex": index + 2, dataRowIndex: row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback &&
+                                    getInputStrSubmitCallback(row.origIndex), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
+                                    editModel.getDeleteCallback(row.origIndex), children: showSelectCol && (_jsx("td", { children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex) }) })) }, row.origIndex));
+                        }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage }))] }));
 };
 export default Grid;

package/editing/EditControlsCell.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+export interface EditControlsCellProps {
+    ariaColIndex: number;
+    beginEditingCallback: () => void;
+    cancelEditingCallback: () => void;
+    isEditing: boolean;
+    saveCallback: () => void;
+    deleteCallback?: () => void;
+}
+declare const EditControlsCell: FC<EditControlsCellProps>;
+export default EditControlsCell;

package/editing/EditControlsCell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var EditControlsCell = function (_a) {
+    var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback;
+    return (_jsx("td", { "aria-colindex": ariaColIndex, children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "btn btn-secondary", onClick: cancelEditingCallback, children: "Cancel" }), _jsx("button", { className: "btn btn-primary", onClick: saveCallback, children: "Save" })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { className: "btn btn-secondary", onClick: deleteCallback, children: "Delete" })), _jsx("button", { className: "btn btn-primary", onClick: beginEditingCallback, children: "Edit" })] })) }) }));
+};
+export default EditControlsCell;

package/editing/EditableRow.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+import { CellData } from "../types";
+import React from "react";
+export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "className" | "aria-rowindex" | "aria-selected"> & {
+    ariaColIndexOffset: number;
+    dataRowIndex: number;
+    children: ReactNode;
+    cellData: CellData[];
+    updateCallback?: (values: string[]) => void;
+    deleteCallback?: () => void;
+};
+declare const EditableRow: FC<EditableRowProps>;
+export default EditableRow;

package/editing/EditableRow.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import EditControlsCell from "./EditControlsCell";
+var initValueToFormValue = function (value, type) {
+    switch (type) {
+        case "date":
+            return dateToInputStr(value);
+        case "datetime":
+            return dateToDatetimeInputStr(value);
+        case "number":
+            return String(value);
+        default:
+            return value;
+    }
+};
+var colDataTypeToInputType = function (colDataType) {
+    switch (colDataType) {
+        case "date":
+            return "date";
+        case "datetime":
+            return "datetime-local";
+        case "number":
+            return "number";
+        default:
+            return "text";
+    }
+};
+var EditableRow = function (_a) {
+    var ariaColIndexOffset = _a.ariaColIndexOffset, cellData = _a.cellData, children = _a.children, updateCallback = _a.updateCallback, deleteCallback = _a.deleteCallback, onClick = _a.onClick, className = _a.className, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], dataRowIndex = _a.dataRowIndex;
+    var trRef = useRef(null);
+    var _b = useState(false), isEditing = _b[0], setIsEditing = _b[1];
+    var handleSave = function () {
+        var failedValidationFound = false;
+        var formValues = [];
+        for (var _i = 0, _a = Array.from(trRef.current.children); _i < _a.length; _i++) {
+            var rowChild = _a[_i];
+            if (!(rowChild instanceof HTMLTableCellElement)) {
+                console.warn("Found non-td element inside EditableRow");
+                continue;
+            }
+            for (var _b = 0, _c = Array.from(rowChild.children); _b < _c.length; _b++) {
+                var cellChild = _c[_b];
+                if (!(cellChild instanceof HTMLInputElement) ||
+                    cellChild.type === "checkbox" ||
+                    cellChild.type === "radio") {
+                    continue;
+                }
+                formValues.push(cellChild.value);
+                failedValidationFound =
+                    !cellChild.reportValidity() || failedValidationFound;
+                break; // Each cell should only have one input element
+            }
+        }
+        if (!failedValidationFound) {
+            updateCallback(formValues);
+            setIsEditing(false);
+        }
+    };
+    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowindex": dataRowIndex, children: [children, cellData.map(function (_a, index) {
+                var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label;
+                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowIndex, "-").concat(index), className: "form-control", type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
+            }), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: function () { return setIsEditing(true); }, cancelEditingCallback: function () { return setIsEditing(false); }, isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback }))] }));
+};
+export default EditableRow;

package/editing/inputStrsToRowDef.d.ts

@@ -0,0 +1,3 @@
+import { ColDef, RowDef } from "../types";
+declare const inputStrsToRowDef: (cols: ColDef[], inputStrs: string[]) => RowDef;
+export default inputStrsToRowDef;

package/editing/inputStrsToRowDef.js

@@ -0,0 +1,18 @@
+var inputStrsToRowDef = function (cols, inputStrs) {
+    var newRow = {};
+    inputStrs.forEach(function (value, index) {
+        var col = cols[index];
+        switch (col.type) {
+            case "string":
+                newRow[col.name] = value;
+                return;
+            case "number":
+                newRow[col.name] = Number(value);
+                return;
+            default:
+                newRow[col.name] = new Date(value);
+        }
+    });
+    return newRow;
+};
+export default inputStrsToRowDef;

package/hooks/useControlledHover.js

@@ -1,17 +1,13 @@
 import { useState } from "react";
 var useControlledHover = function () {
     var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
-    var handleMouseOver = function () {
-        return setIsHovering(true);
-    };
-    var handleMouseOut = function () {
-        return setIsHovering(false);
-    };
+    var handleMouseOver = function () { return setIsHovering(true); };
+    var handleMouseOut = function () { return setIsHovering(false); };
     return {
         isHovering: isHovering,
         setIsHovering: setIsHovering,
         handleMouseOver: handleMouseOver,
-        handleMouseOut: handleMouseOut
+        handleMouseOut: handleMouseOut,
     };
 };
 export default useControlledHover;

package/hooks/useDisplayRows.d.ts

@@ -1,3 +1,3 @@
 import { AugRowDef, FormattedRow, ColDef } from "../types";
-declare const useDisplayRows: (currentPageRows: AugRowDef[], cols: ColDef[]) => FormattedRow[];
+declare const useDisplayRows: (currentPageRows: AugRowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
 export default useDisplayRows;

package/hooks/useDisplayRows.js

@@ -1,5 +1,20 @@
 import { useMemo } from "react";
-var useDisplayRows = function (currentPageRows, cols) {
+var getFormattedValue = function (value, formatter, typeString) {
+    if (formatter) {
+        return formatter(value);
+    }
+    if (typeString === "date") {
+        return value.toDateString();
+    }
+    if (typeString === "datetime") {
+        return value.toLocaleString();
+    }
+    if (typeString === "number") {
+        return value.toLocaleString();
+    }
+    return value;
+};
+var useDisplayRows = function (currentPageRows, cols, ariaColIndexOffset) {
     return useMemo(function () {
         var nameToIndex = new Map();
         cols.forEach(function (_a, index) {
@@ -24,29 +39,21 @@ var useDisplayRows = function (currentPageRows, cols) {
                     return;
                 }
                 var index = nameToIndex.get(name);
-                var formatter = cols[index].formatter;
-                var typeString = cols[index].type;
+                var col = cols[index];
+                var formatter = col.formatter;
+                var typeString = col.type;
                 var value = row.data[name];
-                if (formatter) {
-                    displayRow[index] = formatter(value);
-                    return;
-                }
-                if (typeString === "date") {
-                    displayRow[index] = value.toDateString();
-                    return;
-                }
-                if (typeString === "datetime") {
-                    displayRow[index] = value.toLocaleString();
-                    return;
-                }
-                if (typeString === "number") {
-                    displayRow[index] = value.toLocaleString();
-                    return;
-                }
-                displayRow[index] = value;
+                displayRow[index] = {
+                    fieldName: cols[index].name,
+                    value: value,
+                    type: typeString,
+                    ariaColIndex: index + 1 + ariaColIndexOffset,
+                    formattedValue: getFormattedValue(value, formatter, typeString),
+                    label: cols[index].label,
+                };
             });
             return { contents: displayRow, origIndex: row.meta.origIndex };
         });
-    }, [currentPageRows, cols]);
+    }, [currentPageRows, cols, ariaColIndexOffset]);
 };
 export default useDisplayRows;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/selection/SelectionInput.js

@@ -15,7 +15,7 @@ var SelectionInput = function (_a) {
             selectCallback();
         }
     };
-    return (_jsx("input", { "aria-description": "input to select the current row", onClick: function (event) {
+    return (_jsx("input", { "aria-label": "input to select the current row", onClick: function (event) {
             event.stopPropagation();
         }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };

package/style.scss

@@ -4,18 +4,18 @@
 
 .rbdg-select-header-cell {
   .rdbg-svg-icon {
-    background-color: var(--bs-btn-bg)
+    background-color: var(--bs-btn-bg);
   }
   .rdbg-svg-icon-foreground {
-    color: var(--bs-btn-color)
+    color: var(--bs-btn-color);
   }
 
   &:hover {
     .rdbg-svg-icon {
-      background-color: var(--bs-btn-hover-bg)
+      background-color: var(--bs-btn-hover-bg);
     }
     .rdbg-svg-icon-foreground {
-      color: var(--bs-btn-hover-color)
+      color: var(--bs-btn-hover-color);
     }
   }
 }

package/types.d.ts

@@ -16,7 +16,7 @@ export interface AugRowDef {
     meta: RowMetadata;
 }
 export interface FormattedRow {
-    contents: string[];
+    contents: CellData[];
     origIndex: number;
 }
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
@@ -103,3 +103,16 @@ export interface SingleSelectModel {
 export type SelectModel = SingleSelectModel | MultiSelectModel;
 export type MultiSelectModelInitialState = Omit<MultiSelectModel, "setSelected">;
 export type SingleSelectModelInitialState = Omit<SingleSelectModel, "setSelected">;
+export interface CellData {
+    fieldName: string;
+    value: ColDataType;
+    type: ColDataTypeStrings;
+    ariaColIndex: number;
+    formattedValue: string;
+    label: string;
+}
+export type UpdateCallbackGenerator = (origIndex: number) => (rowDef: RowDef) => void;
+export interface EditModel {
+    getUpdateCallback: UpdateCallbackGenerator;
+    getDeleteCallback?: (origIndex: number) => () => void;
+}