natxocc/sigpro-grid
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Actualizar src/index.js

Browse Source
This commit is contained in:
Natxo
2026-04-13 12:32:00 +02:00
parent fb6682ce7d
commit 10b5824afb
1 changed files with 96 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/index.js
View File

@@ -1,4 +1,4 @@
// src/index.js - TODO INCLUIDO (sin import dinámico) import { Tag, Watch, onUnmount } from "../sigpro.js";
import { import {
ModuleRegistry, ModuleRegistry,
ValidationModule, ValidationModule,
@@ -12,7 +12,6 @@ import {
iconSetQuartzLight, iconSetQuartzLight,
createGrid createGrid
} from "ag-grid-community"; } from "ag-grid-community";
import { import {
MultiFilterModule, MultiFilterModule,
CellSelectionModule, CellSelectionModule,
@@ -46,7 +45,7 @@ ModuleRegistry.registerModules([
ClipboardModule, ClipboardModule,
]); ]);
export const Grid = (props, lang) => { export const Grid = (props) => {
const { data, options, api, on, class: className, style = "height: 100%; width: 100%;" } = props; const { data, options, api, on, class: className, style = "height: 100%; width: 100%;" } = props;
let gridApi = null; let gridApi = null;
@@ -59,11 +58,9 @@ export const Grid = (props, lang) => {
return dark ? 'ag-theme-alpine-dark' : 'ag-theme-alpine'; return dark ? 'ag-theme-alpine-dark' : 'ag-theme-alpine';
}; };
return $html("div", { const initGrid = (container) => {
style, if (!container) return;
class: className,
ref: (container) => {
try {
const initialData = typeof data === "function" ? data() : data; const initialData = typeof data === "function" ? data() : data;
const initialOptions = typeof options === "function" ? options() : options; const initialOptions = typeof options === "function" ? options() : options;
@@ -109,7 +106,7 @@ export const Grid = (props, lang) => {
gridApi = createGrid(container, gridOptions); gridApi = createGrid(container, gridOptions);
const stopData = $watch([data], () => { const stopData = Watch(data, () => {
if (!gridApi || gridApi.isDestroyed()) return; if (!gridApi || gridApi.isDestroyed()) return;
const newData = typeof data === "function" ? data() : data; const newData = typeof data === "function" ? data() : data;
if (Array.isArray(newData)) { if (Array.isArray(newData)) {
@@ -118,9 +115,9 @@ export const Grid = (props, lang) => {
gridApi.setGridOption("rowData", newData); gridApi.setGridOption("rowData", newData);
} }
} }
}); }, true);
const stopTheme = $watch([isDark], () => { const stopTheme = Watch(isDark, () => {
if (gridApi && !gridApi.isDestroyed()) { if (gridApi && !gridApi.isDestroyed()) {
const dark = isDark(); const dark = isDark();
const newTheme = getTheme(dark); const newTheme = getTheme(dark);
@@ -129,42 +126,42 @@ export const Grid = (props, lang) => {
gridApi.setGridOption("theme", newTheme); gridApi.setGridOption("theme", newTheme);
} }
} }
}); }, true);
const safeOptions = ['pagination', 'paginationPageSize', 'suppressRowClickSelection', const safeOptions = [
'pagination', 'paginationPageSize', 'suppressRowClickSelection',
'rowSelection', 'enableCellTextSelection', 'ensureDomOrder', 'rowSelection', 'enableCellTextSelection', 'ensureDomOrder',
'stopEditingWhenCellsLoseFocus', 'enterMovesDown', 'enterMovesDownAfterEdit']; 'stopEditingWhenCellsLoseFocus', 'enterMovesDown', 'enterMovesDownAfterEdit'
];
const stopOptions = $watch([options], () => { const stopOptions = Watch(options, () => {
if (!gridApi || gridApi.isDestroyed() || !options) return; if (!gridApi || gridApi.isDestroyed() || !options) return;
const newOptions = typeof options === "function" ? options() : options; const newOptions = typeof options === "function" ? options() : options;
safeOptions.forEach(key => { safeOptions.forEach(key => {
if (newOptions[key] !== undefined) { if (newOptions[key] !== undefined) {
try { try {
gridApi.setGridOption(key, newOptions[key]); gridApi.setGridOption(key, newOptions[key]);
} catch (e) { } catch (e) {}
console.warn(`Could not set grid option ${key}:`, e);
}
} }
}); });
}); }, true);
container._cleanups.add(stopData); onUnmount(() => {
container._cleanups.add(stopTheme); stopData();
container._cleanups.add(stopOptions); stopTheme();
container._cleanups.add(() => { stopOptions();
if (gridApi && !gridApi.isDestroyed()) { if (gridApi && !gridApi.isDestroyed()) {
gridApi.destroy(); gridApi.destroy();
if (api) api.current = null; if (api) api.current = null;
gridApi = null; gridApi = null;
} }
}); });
};
} catch (error) { return Tag("div", {
console.error("Failed to initialize AG Grid:", error); class: className,
container.innerHTML = `<div class="text-error p-4">Error loading grid: ${error.message}</div>`; style: style,
} ref: initGrid
}
}); });
}; };