@trail-ui/react
Version:
195 lines (189 loc) • 7.16 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/checkbox.tsx
var checkbox_exports = {};
__export(checkbox_exports, {
default: () => EditableCheckBox
});
module.exports = __toCommonJS(checkbox_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/checkbox.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function EditableCheckBox(props) {
const cellRef = (0, import_react3.useRef)(null);
const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
cellType: "dataCell" /* dataCell */,
columnIndex: props.cell.column.getIndex(),
groupId: null,
rowId: props.cell.row.id,
rowIndex: props.cell.row.index
});
const { tableRef } = useTableContext();
const metaData = props.cell.column.columnDef.meta;
const onKeyDown = (e) => {
const tableWrapper = tableRef.current;
const activeElement = document.activeElement;
if (activeElement && activeElement.tagName === "INPUT" && !(tableWrapper == null ? void 0 : tableWrapper.contains(activeElement)) || e.key === "Tab") {
return;
}
};
(0, import_react3.useEffect)(() => {
var _a, _b;
if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
(_b = cellRef.current) == null ? void 0 : _b.focus();
}
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
...metaData.label ? { "aria-label": metaData.label(props.cell.row.original) } : { "aria-labelledby": props.cell.row.id },
role: "checkbox",
"aria-checked": props.cell.row.getIsSelected(),
ref: cellRef,
className: "td-content flex h-6 w-6 items-center justify-center outline-purple-600",
onClick: (e) => {
var _a;
if (e.target.tagName.toLowerCase() === "input") {
focusCurrentCell();
return;
}
const checkbox = (_a = cellRef.current) == null ? void 0 : _a.querySelector('input[type="checkbox"]');
checkbox == null ? void 0 : checkbox.click();
focusCurrentCell();
},
onKeyDown: (e) => {
var _a;
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
const checkbox = (_a = cellRef.current) == null ? void 0 : _a.querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.click();
}
}
onKeyDown(e);
},
tabIndex: isCurrentCellFocused ? 0 : -1,
children: (0, import_react_table.flexRender)(props.cell.column.columnDef.cell, {
...props.cell.getContext(),
tabIndex: -1
})
}
);
}