@trail-ui/react
Version:
229 lines (222 loc) • 8.65 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/table-footer/editable-table-footer.tsx
var editable_table_footer_exports = {};
__export(editable_table_footer_exports, {
default: () => EditabletableFooter
});
module.exports = __toCommonJS(editable_table_footer_exports);
// 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/table-footer/footer-cell.tsx
var import_react_table = require("@tanstack/react-table");
// src/editable-table/focus-handler/focus-handler-provider.tsx
var import_react2 = require("react");
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/table-footer/footer-cell.tsx
var import_react3 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
function EditableTableFooterCell({
header
}) {
var _a;
const cellRef = (0, import_react3.useRef)(null);
const { table } = useTableContext();
const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
cellType: "footerCell" /* footerCell */,
columnIndex: header.column.getIndex(),
groupId: null,
rowId: null,
rowIndex: -1
});
const colId = header.column.id;
const colDef = header.column.columnDef;
const colMeta = (_a = header.column.columnDef.meta) != null ? _a : {};
(0, import_react3.useEffect)(() => {
var _a2;
if (isCurrentCellFocused) {
(_a2 = cellRef.current) == null ? void 0 : _a2.focus();
}
}, [isCurrentCellFocused]);
function getCellValue() {
var _a2;
if (colDef.footer) {
return (0, import_react_table.flexRender)(colDef.footer, header.getContext());
}
if (colMeta.footerType === "addition") {
const total = (_a2 = table.getFilteredRowModel().rows.reduce((sum, row) => {
const value = Number.parseFloat(row.getValue(colId));
return isNaN(value) ? sum : sum + value;
}, 0)) == null ? void 0 : _a2.toFixed(2);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
total.toString(),
colId === "sum" ? "%" : ""
] });
}
if (colMeta.footerType === "average") {
const { total, count } = table.getFilteredRowModel().rows.reduce(
(acc, row) => {
const value = Number.parseFloat(row.getValue(colId));
if (!Number.isNaN(value)) {
acc.total += value;
acc.count += 1;
}
return acc;
},
{ total: 0, count: 0 }
);
const average = count > 0 ? (total / count).toFixed(2) : "0.00";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
average,
colId === "sum" ? "%" : ""
] });
}
if (colMeta.footerType === "isTotalField") {
return "Total";
}
}
const Element = colMeta.footerType === "isTotalField" ? "th" : "td";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Element,
{
...Element === "th" ? { scope: "row" } : {},
className: "border-r border-neutral-200 p-2",
style: {
minWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
maxWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
width: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size
},
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
ref: cellRef,
className: `th-content flex min-h-5 items-center justify-between rounded px-2 text-sm font-semibold outline-purple-600 focus:outline focus:outline-2`,
tabIndex: isCurrentCellFocused ? 0 : -1,
onClick: () => {
focusCurrentCell();
},
onKeyDown: () => {
},
children: getCellValue()
}
)
},
colId
);
}
// src/editable-table/table-footer/editable-table-footer.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function EditabletableFooter() {
const { table } = useTableContext();
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tfoot", { className: "sticky bottom-0 bg-neutral-100 before:absolute before:top-0 before:w-full before:border-t before:border-t-neutral-200", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EditableTableFooterCell, { header }, header.id)) }, footerGroup.id)) });
}