@trail-ui/react
Version:
305 lines (301 loc) • 12.5 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/editable-table/focus-handler/focus-handler-provider.tsx
var focus_handler_provider_exports = {};
__export(focus_handler_provider_exports, {
default: () => FocusHandlerContextProvider,
useFocusHandler: () => useFocusHandler
});
module.exports = __toCommonJS(focus_handler_provider_exports);
var import_react2 = require("react");
// src/editable-table/table-context/table-context-provider.tsx
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var EditableTableContext = (0, import_react.createContext)({
handleSaveData: () => {
},
idSelector: () => {
},
table: {},
tableName: "",
groupData: [],
allowBulkGroupSelection: false,
doesRowHeaderExist: false
});
function useTableContext(cell) {
const { handleSaveData, ...rest } = (0, import_react.useContext)(EditableTableContext);
function updateData(value) {
var _a, _b;
if (cell) {
const accessorKey = cell.column.columnDef.accessorKey;
const groupId = (_a = cell.row.original) == null ? void 0 : _a.editableTableGroupId;
handleSaveData({
accessorKey,
columnId: cell.column.id,
rowId: rest.idSelector(cell.row.original),
value,
...groupId ? { groupId } : {}
});
(_b = rest.table.options.meta) == null ? void 0 : _b.updateData(cell.row.id, accessorKey, value);
}
}
return {
...cell ? { updateData } : {},
...rest
};
}
// src/editable-table/focus-handler/focus-handler-provider.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var FocusDataContext = (0, import_react2.createContext)({
columnIndex: 0,
rowId: null,
cellType: "headerCell" /* headerCell */,
groupId: null,
rowIndex: 0
});
var FocusDispatchContext = (0, import_react2.createContext)(() => {
});
function FocusHandlerContextProvider(props) {
const [focusedCell, setFocusedCell] = (0, import_react2.useState)({
columnIndex: 0,
rowId: null,
cellType: "headerCell" /* headerCell */,
groupId: null,
rowIndex: 0
});
const { tableRef, allowBulkGroupSelection, hasFooter } = useTableContext();
function updateData(data) {
setFocusedCell(data);
}
(0, import_react2.useEffect)(() => {
const handleKeyDown = (e) => {
var _a, _b, _c, _d, _e, _f;
if (!tableRef.current || !tableRef.current.contains(e.target)) {
return;
}
const activeElement = document.activeElement;
const isInsideCustomSelect = (el) => {
return el && (el.closest('[role="listbox"]') || el.closest('[role="combobox"]'));
};
if ((activeElement == null ? void 0 : activeElement.tagName) === "SELECT" || (activeElement == null ? void 0 : activeElement.tagName) === "INPUT" || isInsideCustomSelect(activeElement)) {
return;
}
const { rowId, columnIndex, cellType, groupId, rowIndex } = focusedCell;
const rows = props.table.getRowModel().rows;
const tableHeaders = ((_a = props.table.getHeaderGroups()[0]) == null ? void 0 : _a.headers) || [];
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
e.preventDefault();
let newrowId = rowId;
let newColumnIndex = columnIndex;
let newCellType = cellType;
let newGroupId = groupId;
let newRowIndex = rowIndex;
const isGroupView = props.groupData.length > 0;
switch (e.key) {
case "ArrowUp":
if (cellType === "headerCell" /* headerCell */) {
return;
}
if (hasFooter && cellType === "footerCell" /* footerCell */) {
newCellType = "dataCell" /* dataCell */;
newGroupId = null;
newRowIndex = rows.length - 1;
newrowId = rows[rows.length - 1].id;
} else if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
const index = rows.findIndex(
({ original }) => original.editableTableGroupId === groupId
);
if (index === 0) {
newCellType = "headerCell" /* headerCell */;
newrowId = null;
newGroupId = null;
newRowIndex = -1;
} else {
newCellType = "dataCell" /* dataCell */;
newrowId = rows[index - 1].id;
newGroupId = null;
newRowIndex = index - 1;
}
} else if (cellType === "dataCell" /* dataCell */) {
const index = rows.findIndex((row) => row.id === rowId);
if (isGroupView) {
if (index === 0 || rows[index].original.editableTableGroupId !== ((_c = (_b = rows[index - 1]) == null ? void 0 : _b.original) == null ? void 0 : _c.editableTableGroupId)) {
newGroupId = rows[index].original.editableTableGroupId;
newrowId = null;
newCellType = "groupHeaderCell" /* groupHeaderCell */;
newRowIndex = -1;
} else {
newrowId = rows[Math.min(rows.length - 1, index - 1)].id;
newRowIndex = Math.min(rows.length - 1, index - 1);
}
} else {
if (index === 0) {
newCellType = "headerCell" /* headerCell */;
newGroupId = null;
newrowId = null;
newRowIndex = -1;
} else {
newCellType = "dataCell" /* dataCell */;
newGroupId = null;
newrowId = rows[Math.max(0, index - 1)].id;
newRowIndex = index - 1;
}
}
}
break;
case "ArrowDown":
if (cellType === "headerCell" /* headerCell */) {
if (isGroupView) {
newCellType = "groupHeaderCell" /* groupHeaderCell */;
newGroupId = rows[0].original.editableTableGroupId;
newrowId = null;
newRowIndex = -1;
} else {
newGroupId = null;
newCellType = "dataCell" /* dataCell */;
newrowId = rows[Math.min(rows.length - 1, 0)].id;
newRowIndex = Math.min(rows.length - 1, 0);
}
} else if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
newCellType = "dataCell" /* dataCell */;
const index = rows.findIndex(
({ original }) => original.editableTableGroupId === groupId
);
newrowId = rows[index].id;
newGroupId = null;
newRowIndex = index;
} else if (cellType === "dataCell" /* dataCell */) {
const index = rows.findIndex((row) => row.id === rowId);
if (hasFooter && index + 1 > rows.length - 1) {
newCellType = "footerCell" /* footerCell */;
newRowIndex = -1;
newGroupId = null;
newrowId = null;
break;
}
if (isGroupView && rows[index].original.editableTableGroupId !== ((_e = (_d = rows[index + 1]) == null ? void 0 : _d.original) == null ? void 0 : _e.editableTableGroupId)) {
newGroupId = rows[index + 1].original.editableTableGroupId;
newrowId = null;
newCellType = "groupHeaderCell" /* groupHeaderCell */;
newRowIndex = -1;
} else {
newrowId = rows[Math.min(rows.length - 1, index + 1)].id;
newRowIndex = Math.min(rows.length - 1, index + 1);
}
} else if (hasFooter && cellType === "footerCell" /* footerCell */) {
return;
}
break;
case "ArrowLeft": {
if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
if (allowBulkGroupSelection && columnIndex > 0) {
newColumnIndex = 0;
}
} else {
newColumnIndex = Math.max(0, newColumnIndex - 1);
}
break;
}
case "ArrowRight": {
if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
if (allowBulkGroupSelection && columnIndex === 0) {
newColumnIndex = 1;
}
} else {
newColumnIndex = Math.min(tableHeaders.length - 1, newColumnIndex + 1);
}
break;
}
}
setFocusedCell({
rowId: newrowId,
columnIndex: newColumnIndex,
cellType: newCellType,
groupId: newGroupId,
rowIndex: newRowIndex
});
}
if (e.key === "Enter" && cellType === "headerCell" /* headerCell */) {
const header = (_f = tableHeaders[columnIndex]) == null ? void 0 : _f.column;
if (header == null ? void 0 : header.getCanSort()) {
header.toggleSorting();
}
}
};
const table = tableRef.current;
table == null ? void 0 : table.addEventListener("keydown", handleKeyDown);
return () => table == null ? void 0 : table.removeEventListener("keydown", handleKeyDown);
}, [focusedCell, props.table]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FocusDispatchContext.Provider, { value: updateData, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FocusDataContext.Provider, { value: focusedCell, children: props.children }) });
}
function useFocusHandler({
cellType,
columnIndex,
groupId,
rowId,
rowIndex
}) {
var _a;
const focusedCell = (0, import_react2.useContext)(FocusDataContext);
const setFocusedCell = (0, import_react2.useContext)(FocusDispatchContext);
const { allowBulkGroupSelection, tableRef, table, serverPagination } = useTableContext();
const filteredRows = (_a = table == null ? void 0 : table.getRowModel().rows) != null ? _a : [];
const localRowIndex = filteredRows.findIndex((row) => row.id === rowId);
const isCurrentCellFocused = (0, import_react2.useMemo)(() => {
var _a2;
const isFocused = ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement)) && focusedCell.cellType === cellType;
switch (cellType) {
case "headerCell" /* headerCell */:
case "footerCell" /* footerCell */:
return isFocused && focusedCell.columnIndex === columnIndex;
case "groupHeaderCell" /* groupHeaderCell */: {
let isGroup = focusedCell.groupId === groupId;
if (allowBulkGroupSelection) {
isGroup && (isGroup = columnIndex === 0 ? focusedCell.columnIndex === 0 : focusedCell.columnIndex > 0);
}
return isFocused && isGroup;
}
case "dataCell" /* dataCell */:
return isFocused && focusedCell.rowIndex === localRowIndex && focusedCell.columnIndex === columnIndex;
default:
return false;
}
}, [focusedCell, columnIndex, cellType, groupId, localRowIndex, allowBulkGroupSelection]);
const focusCurrentCell = (0, import_react2.useCallback)(() => {
setFocusedCell == null ? void 0 : setFocusedCell({ columnIndex, rowId, cellType, groupId, rowIndex });
}, [columnIndex, rowId, cellType, groupId, rowIndex]);
const resetFocus = (0, import_react2.useCallback)(() => {
setFocusedCell == null ? void 0 : setFocusedCell({
cellType: "headerCell" /* headerCell */,
rowId: null,
groupId: null,
rowIndex: -1,
columnIndex: 0
});
}, []);
return {
isCurrentCellFocused,
focusCurrentCell,
resetFocus
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useFocusHandler
});