@trail-ui/react
Version:
179 lines (173 loc) • 6.3 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/editable-components/links.tsx
var links_exports = {};
__export(links_exports, {
default: () => EditableLink
});
module.exports = __toCommonJS(links_exports);
var import_react_table = require("@tanstack/react-table");
var import_react3 = require("react");
// src/editable-table/focus-handler/focus-handler-provider.tsx
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 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
};
}
// src/editable-table/editable-components/links.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function EditableLink(props) {
var _a;
const cellRef = (0, import_react3.useRef)(null);
const { tableRef } = useTableContext();
const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
cellType: "dataCell" /* dataCell */,
columnIndex: props.cell.column.getIndex(),
groupId: null,
rowId: props.cell.row.id,
rowIndex: props.cell.row.index
});
(0, import_react3.useEffect)(() => {
if (cellRef.current) {
const link = cellRef.current.getElementsByTagName("a")[0];
if (link) {
link.onclick = focusCurrentCell;
}
}
}, []);
(0, import_react3.useEffect)(() => {
var _a2, _b;
if ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
const link = (_b = cellRef.current) == null ? void 0 : _b.getElementsByTagName("a")[0];
if (link) {
if (isCurrentCellFocused) {
link.focus();
link.tabIndex = 0;
} else {
link.tabIndex = -1;
}
}
}
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
ref: cellRef,
id: ((_a = props.cell.column.columnDef) == null ? void 0 : _a.columnType) === "th" ? `${props.cell.row.id}-id` : "",
className: "td-content px-2 py-0.5 outline-purple-600",
children: (0, import_react_table.flexRender)(props.cell.column.columnDef.cell, {
...props.cell.getContext()
})
}
);
}