@trail-ui/react
Version:
186 lines (182 loc) • 7.53 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
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, {
FocusHandlerContext: () => FocusHandlerContext,
default: () => FocusHandlerContextProvider,
useFocusHandler: () => useFocusHandler
});
module.exports = __toCommonJS(focus_handler_provider_exports);
var import_react2 = __toESM(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: {}
});
function useTableContext(cell) {
const { handleSaveData, idSelector, table } = (0, import_react.useContext)(
EditableTableContext
);
function updateData(value) {
var _a;
const accessorKey = cell.column.columnDef.accessorKey;
handleSaveData({
accessorKey,
columnId: cell.column.id,
rowId: idSelector(cell.row.original),
value
});
(_a = table.options.meta) == null ? void 0 : _a.updateData(cell.row.id, cell.column.id, value);
}
return { updateData, idSelector, table };
}
// src/editable-table/focus-handler/focus-handler-provider.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var FocusHandlerContext = (0, import_react2.createContext)({
tableRef: import_react2.default.createRef(),
focusedCell: { columnIndex: 0, rowIndex: 0, isHeader: true },
setFocusedCell: () => {
}
});
function FocusHandlerContextProvider(props) {
const [focusedCell, setFocusedCell] = (0, import_react2.useState)({
columnIndex: 0,
rowIndex: 0,
isHeader: true
});
const tableRef = (0, import_react2.useRef)(null);
const child = props.children;
const cloned = (0, import_react2.useMemo)(() => import_react2.default.cloneElement(child, { ref: tableRef }), [child]);
function updateData(data) {
setFocusedCell(data);
}
(0, import_react2.useEffect)(() => {
const handleKeyDown = (e) => {
var _a, _b;
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 { rowIndex, columnIndex, isHeader } = 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 newRowIndex = rowIndex;
let newColumnIndex = columnIndex;
let newIsHeader = isHeader;
switch (e.key) {
case "ArrowUp":
if (isHeader) {
return;
}
if (rowIndex === 0) {
newIsHeader = true;
} else {
newRowIndex = rowIndex - 1;
}
break;
case "ArrowDown":
if (isHeader) {
newIsHeader = false;
newRowIndex = 0;
} else {
newRowIndex = Math.min(rows.length - 1, newRowIndex + 1);
}
break;
case "ArrowLeft": {
newColumnIndex = Math.max(0, newColumnIndex - 1);
break;
}
case "ArrowRight": {
newColumnIndex = Math.min(tableHeaders.length - 1, newColumnIndex + 1);
break;
}
}
setFocusedCell({
rowIndex: newRowIndex,
columnIndex: newColumnIndex,
isHeader: newIsHeader
});
const cellSelector = newIsHeader ? `.th-content[data-row="header"][data-col="${newColumnIndex}"]` : `.td-content[data-row="${newRowIndex}"][data-col="${newColumnIndex}"]`;
const cellToFocus = tableRef.current.querySelector(cellSelector);
if (cellToFocus) {
cellToFocus.focus();
}
}
if (e.key === "Enter" && isHeader) {
const header = (_b = tableHeaders[columnIndex]) == null ? void 0 : _b.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)(FocusHandlerContext.Provider, { value: { focusedCell, setFocusedCell: updateData, tableRef }, children: cloned });
}
function useFocusHandler(cell, isHeader) {
var _a, _b;
const { focusedCell, setFocusedCell, tableRef } = (0, import_react2.useContext)(FocusHandlerContext);
const { table } = useTableContext(cell);
const pageIndex = (_a = table == null ? void 0 : table.getState().pagination.pageIndex) != null ? _a : 0;
const pageSize = (_b = table == null ? void 0 : table.getState().pagination.pageSize) != null ? _b : 10;
const localRowIndex = cell ? cell.row.index - pageIndex * pageSize : 0;
const isCurrentCellFocused = focusedCell.isHeader === isHeader && focusedCell.rowIndex === localRowIndex && focusedCell.columnIndex === (cell == null ? void 0 : cell.column.getIndex());
function focusCurrentCell() {
if (!cell)
return;
setFocusedCell({
columnIndex: cell.column.getIndex(),
rowIndex: localRowIndex,
// 👈 Should be page-local
isHeader: isHeader != null ? isHeader : false
});
}
return { focusedCell, setFocusedCell, tableRef, isCurrentCellFocused, focusCurrentCell };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FocusHandlerContext,
useFocusHandler
});