@gtkx/react 0.1.50 → 0.1.52

package/dist/nodes/column-view.js

@@ -10,44 +10,45 @@ export class ColumnViewNode extends Node {
     static matches(type) {
         return type === "ColumnView.Root";
     }
-    stringList;
-    selectionModel;
-    sortListModel;
-    items = [];
-    columns = [];
-    committedLength = 0;
-    sortColumn = null;
-    sortOrder = Gtk.SortType.ASCENDING;
-    sortFn = null;
-    isSorting = false;
-    onSortChange = null;
-    sorterChangedHandlerId = null;
-    lastNotifiedColumn = null;
-    lastNotifiedOrder = Gtk.SortType.ASCENDING;
-    constructor(type, props) {
-        super(type, props);
-        this.stringList = new Gtk.StringList([]);
-        this.sortListModel = new Gtk.SortListModel(this.stringList, this.widget.getSorter());
-        this.sortListModel.setIncremental(true);
-        this.selectionModel = new Gtk.SingleSelection(this.sortListModel);
-        this.widget.setModel(this.selectionModel);
-        this.sortColumn = props.sortColumn ?? null;
-        this.sortOrder = props.sortOrder ?? Gtk.SortType.ASCENDING;
-        this.sortFn = props.sortFn ?? null;
-        this.onSortChange =
-            props.onSortChange ?? null;
+    initialize(props) {
+        // Initialize state before super.initialize() since updateProps accesses this.state
+        this.state = {
+            stringList: null,
+            selectionModel: null,
+            sortListModel: null,
+            items: [],
+            columns: [],
+            committedLength: 0,
+            sortColumn: props.sortColumn ?? null,
+            sortOrder: props.sortOrder ?? Gtk.SortType.ASCENDING,
+            sortFn: props.sortFn ?? null,
+            isSorting: false,
+            onSortChange: props.onSortChange ?? null,
+            sorterChangedHandlerId: null,
+            lastNotifiedColumn: null,
+            lastNotifiedOrder: Gtk.SortType.ASCENDING,
+        };
+        super.initialize(props);
+        const stringList = new Gtk.StringList([]);
+        const sortListModel = new Gtk.SortListModel(stringList, this.widget.getSorter());
+        sortListModel.setIncremental(true);
+        const selectionModel = new Gtk.SingleSelection(sortListModel);
+        this.widget.setModel(selectionModel);
+        this.state.stringList = stringList;
+        this.state.sortListModel = sortListModel;
+        this.state.selectionModel = selectionModel;
         this.connectSorterChangedSignal();
     }
     connectSorterChangedSignal() {
         const sorter = this.widget.getSorter();
-        if (!sorter || !this.onSortChange)
+        if (!sorter || !this.state.onSortChange)
             return;
-        this.sorterChangedHandlerId = sorter.connect("changed", () => {
+        this.state.sorterChangedHandlerId = sorter.connect("changed", () => {
             this.waitForSortComplete(() => this.notifySortChange());
         });
     }
     waitForSortComplete(callback) {
-        const sortingInProgress = this.sortListModel.getPending() > 0;
+        const sortingInProgress = this.state.sortListModel.getPending() > 0;
         if (sortingInProgress) {
             setTimeout(() => this.waitForSortComplete(callback), 0);
         }
@@ -56,16 +57,16 @@ export class ColumnViewNode extends Node {
         }
     }
     disconnectSorterChangedSignal() {
-        if (this.sorterChangedHandlerId === null)
+        if (this.state.sorterChangedHandlerId === null)
             return;
         const sorter = this.widget.getSorter();
         if (sorter) {
-            GObject.signalHandlerDisconnect(sorter, this.sorterChangedHandlerId);
+            GObject.signalHandlerDisconnect(sorter, this.state.sorterChangedHandlerId);
         }
-        this.sorterChangedHandlerId = null;
+        this.state.sorterChangedHandlerId = null;
     }
     notifySortChange() {
-        if (!this.onSortChange)
+        if (!this.state.onSortChange)
             return;
         const baseSorter = this.widget.getSorter();
         if (!baseSorter)
@@ -74,99 +75,97 @@ export class ColumnViewNode extends Node {
         const column = sorter.getPrimarySortColumn();
         const order = sorter.getPrimarySortOrder();
         const columnId = column?.getId() ?? null;
-        const sortStateUnchanged = columnId === this.lastNotifiedColumn && order === this.lastNotifiedOrder;
+        const sortStateUnchanged = columnId === this.state.lastNotifiedColumn && order === this.state.lastNotifiedOrder;
         if (sortStateUnchanged) {
             return;
         }
-        this.lastNotifiedColumn = columnId;
-        this.lastNotifiedOrder = order;
-        this.onSortChange(columnId, order);
+        this.state.lastNotifiedColumn = columnId;
+        this.state.lastNotifiedOrder = order;
+        this.state.onSortChange(columnId, order);
     }
     getItems() {
-        return this.items;
+        return this.state.items;
     }
     getSortFn() {
-        return this.sortFn;
+        return this.state.sortFn;
     }
     compareItems(a, b, columnId) {
-        if (this.isSorting || !this.sortFn)
+        if (this.state.isSorting || !this.state.sortFn)
             return 0;
-        this.isSorting = true;
+        this.state.isSorting = true;
         try {
-            return this.sortFn(a, b, columnId);
+            return this.state.sortFn(a, b, columnId);
         }
         finally {
-            this.isSorting = false;
+            this.state.isSorting = false;
         }
     }
     addColumn(columnNode) {
-        this.columns.push(columnNode);
+        this.state.columns.push(columnNode);
         const column = columnNode.getColumn();
         this.widget.appendColumn(column);
         columnNode.setColumnView(this);
-        if (columnNode.getId() === this.sortColumn && this.sortColumn !== null) {
+        if (columnNode.getId() === this.state.sortColumn && this.state.sortColumn !== null) {
             this.applySortByColumn();
         }
     }
     applySortByColumn() {
-        if (this.sortColumn === null) {
-            this.widget.sortByColumn(this.sortOrder, null);
+        if (this.state.sortColumn === null) {
+            this.widget.sortByColumn(this.state.sortOrder, null);
             return;
         }
-        if (!this.columns)
-            return;
-        const column = this.columns.find((c) => c.getId() === this.sortColumn);
+        const column = this.state.columns.find((c) => c.getId() === this.state.sortColumn);
         if (column) {
-            this.widget.sortByColumn(this.sortOrder, column.getColumn());
+            this.widget.sortByColumn(this.state.sortOrder, column.getColumn());
         }
     }
     findColumnById(id) {
-        return this.columns.find((c) => c.getId() === id);
+        return this.state.columns.find((c) => c.getId() === id);
     }
     removeColumn(column) {
-        const index = this.columns.indexOf(column);
+        const index = this.state.columns.indexOf(column);
         if (index !== -1) {
-            this.columns.splice(index, 1);
+            this.state.columns.splice(index, 1);
             this.widget.removeColumn(column.getColumn());
             column.setColumnView(null);
         }
     }
     insertColumnBefore(column, before) {
-        const beforeIndex = this.columns.indexOf(before);
+        const beforeIndex = this.state.columns.indexOf(before);
         if (beforeIndex === -1) {
             this.addColumn(column);
             return;
         }
-        this.columns.splice(beforeIndex, 0, column);
+        this.state.columns.splice(beforeIndex, 0, column);
         this.widget.insertColumn(beforeIndex, column.getColumn());
         column.setColumnView(this);
     }
     syncStringList = () => {
-        const newLength = this.items.length;
-        if (newLength === this.committedLength)
+        const newLength = this.state.items.length;
+        if (newLength === this.state.committedLength)
             return;
         const itemIndicesForSorter = Array.from({ length: newLength }, (_, i) => String(i));
-        this.stringList.splice(0, this.committedLength, itemIndicesForSorter);
-        this.committedLength = newLength;
+        this.state.stringList.splice(0, this.state.committedLength, itemIndicesForSorter);
+        this.state.committedLength = newLength;
     };
     addItem(item) {
-        this.items.push(item);
+        this.state.items.push(item);
         scheduleFlush(this.syncStringList);
     }
     insertItemBefore(item, beforeItem) {
-        const beforeIndex = this.items.indexOf(beforeItem);
+        const beforeIndex = this.state.items.indexOf(beforeItem);
         if (beforeIndex === -1) {
-            this.items.push(item);
+            this.state.items.push(item);
         }
         else {
-            this.items.splice(beforeIndex, 0, item);
+            this.state.items.splice(beforeIndex, 0, item);
         }
         scheduleFlush(this.syncStringList);
     }
     removeItem(item) {
-        const index = this.items.indexOf(item);
+        const index = this.state.items.indexOf(item);
         if (index !== -1) {
-            this.items.splice(index, 1);
+            this.state.items.splice(index, 1);
             scheduleFlush(this.syncStringList);
         }
     }
@@ -185,9 +184,9 @@ export class ColumnViewNode extends Node {
         const newSortFn = newProps.sortFn ?? null;
         const newOnSortChange = newProps.onSortChange ?? null;
         if (oldProps.onSortChange !== newProps.onSortChange) {
-            const hadCallback = this.onSortChange !== null;
-            this.onSortChange = newOnSortChange;
-            const hasCallback = this.onSortChange !== null;
+            const hadCallback = this.state.onSortChange !== null;
+            this.state.onSortChange = newOnSortChange;
+            const hasCallback = this.state.onSortChange !== null;
             const callbackAdded = !hadCallback && hasCallback;
             const callbackRemoved = hadCallback && !hasCallback;
             if (callbackAdded) {
@@ -198,16 +197,14 @@ export class ColumnViewNode extends Node {
             }
         }
         if (oldProps.sortFn !== newProps.sortFn) {
-            this.sortFn = newSortFn;
-            if (this.columns) {
-                for (const column of this.columns) {
-                    column.updateSorterFromRoot();
-                }
+            this.state.sortFn = newSortFn;
+            for (const column of this.state.columns) {
+                column.updateSorterFromRoot();
             }
         }
         if (oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
-            this.sortColumn = newSortColumn;
-            this.sortOrder = newSortOrder;
+            this.state.sortColumn = newSortColumn;
+            this.state.sortOrder = newSortOrder;
             this.applySortByColumn();
         }
     }
@@ -219,94 +216,96 @@ export class ColumnViewColumnNode extends Node {
     isVirtual() {
         return true;
     }
-    column;
-    factory;
-    renderCell;
     columnView = null;
-    listItemCache = new Map();
-    columnId = null;
-    sorter = null;
-    constructor(type, props) {
-        super(type, props);
-        this.factory = new Gtk.SignalListItemFactory();
-        this.column = new Gtk.ColumnViewColumn(props.title, this.factory);
-        this.renderCell = props.renderCell;
-        this.columnId = props.id ?? null;
-        if (this.columnId !== null) {
-            this.column.setId(this.columnId);
+    initialize(props) {
+        // Initialize state before super.initialize() since updateProps accesses this.state
+        const factory = new Gtk.SignalListItemFactory();
+        const column = new Gtk.ColumnViewColumn(props.title, factory);
+        const columnId = props.id ?? null;
+        this.state = {
+            column,
+            factory,
+            renderCell: props.renderCell,
+            columnId,
+            sorter: null,
+            listItemCache: new Map(),
+        };
+        super.initialize(props);
+        if (columnId !== null) {
+            column.setId(columnId);
         }
         if (props.expand !== undefined) {
-            this.column.setExpand(props.expand);
+            column.setExpand(props.expand);
         }
         if (props.resizable !== undefined) {
-            this.column.setResizable(props.resizable);
+            column.setResizable(props.resizable);
         }
         if (props.fixedWidth !== undefined) {
-            this.column.setFixedWidth(props.fixedWidth);
+            column.setFixedWidth(props.fixedWidth);
         }
-        this.factory.connect("setup", (_self, listItemObj) => {
+        factory.connect("setup", (_self, listItemObj) => {
             const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
             const id = getObjectId(listItemObj.ptr);
             const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
             listItem.setChild(box);
             const fiberRoot = createFiberRoot(box);
-            this.listItemCache.set(id, { box, fiberRoot });
-            const element = this.renderCell(null);
+            this.state.listItemCache.set(id, { box, fiberRoot });
+            const element = this.state.renderCell(null);
             reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
         });
-        this.factory.connect("bind", (_self, listItemObj) => {
+        factory.connect("bind", (_self, listItemObj) => {
             const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
             const id = getObjectId(listItemObj.ptr);
-            const info = this.listItemCache.get(id);
+            const info = this.state.listItemCache.get(id);
             if (!info)
                 return;
             const position = listItem.getPosition();
             if (this.columnView) {
                 const items = this.columnView.getItems();
                 const item = items[position];
-                const element = this.renderCell(item ?? null);
+                const element = this.state.renderCell(item ?? null);
                 reconciler.getInstance().updateContainer(element, info.fiberRoot, null, () => { });
             }
         });
-        this.factory.connect("unbind", (_self, listItemObj) => {
+        factory.connect("unbind", (_self, listItemObj) => {
             const id = getObjectId(listItemObj.ptr);
-            const info = this.listItemCache.get(id);
+            const info = this.state.listItemCache.get(id);
             if (!info)
                 return;
             reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
         });
-        this.factory.connect("teardown", (_self, listItemObj) => {
+        factory.connect("teardown", (_self, listItemObj) => {
             const id = getObjectId(listItemObj.ptr);
-            const info = this.listItemCache.get(id);
+            const info = this.state.listItemCache.get(id);
             if (info) {
                 reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
-                this.listItemCache.delete(id);
+                this.state.listItemCache.delete(id);
             }
         });
     }
     getColumn() {
-        return this.column;
+        return this.state.column;
     }
     getId() {
-        return this.columnId;
+        return this.state.columnId;
     }
     setColumnView(columnView) {
         this.columnView = columnView;
         this.updateSorterFromRoot();
     }
     updateSorterFromRoot() {
-        if (!this.columnView || this.columnId === null) {
-            this.column.setSorter(null);
-            this.sorter = null;
+        if (!this.columnView || this.state.columnId === null) {
+            this.state.column.setSorter(null);
+            this.state.sorter = null;
             return;
         }
         const rootSortFn = this.columnView.getSortFn();
         if (rootSortFn === null) {
-            this.column.setSorter(null);
-            this.sorter = null;
+            this.state.column.setSorter(null);
+            this.state.sorter = null;
             return;
         }
-        const columnId = this.columnId;
+        const columnId = this.state.columnId;
         const columnView = this.columnView;
         const wrappedSortFn = (stringObjPtrA, stringObjPtrB) => {
             const items = columnView.getItems();
@@ -323,8 +322,8 @@ export class ColumnViewColumnNode extends Node {
             const result = columnView.compareItems(itemA, itemB, columnId);
             return typeof result === "number" ? result : 0;
         };
-        this.sorter = new Gtk.CustomSorter(wrappedSortFn);
-        this.column.setSorter(this.sorter);
+        this.state.sorter = new Gtk.CustomSorter(wrappedSortFn);
+        this.state.column.setSorter(this.state.sorter);
     }
     attachToParent(parent) {
         if (isColumnContainer(parent)) {
@@ -356,25 +355,23 @@ export class ColumnViewColumnNode extends Node {
     }
     updateProps(oldProps, newProps) {
         if (oldProps.renderCell !== newProps.renderCell) {
-            this.renderCell = newProps.renderCell;
+            this.state.renderCell = newProps.renderCell;
         }
-        if (!this.column)
-            return;
         if (oldProps.title !== newProps.title) {
-            this.column.setTitle(newProps.title);
+            this.state.column.setTitle(newProps.title);
         }
         if (oldProps.expand !== newProps.expand) {
-            this.column.setExpand(newProps.expand);
+            this.state.column.setExpand(newProps.expand);
         }
         if (oldProps.resizable !== newProps.resizable) {
-            this.column.setResizable(newProps.resizable);
+            this.state.column.setResizable(newProps.resizable);
         }
         if (oldProps.fixedWidth !== newProps.fixedWidth) {
-            this.column.setFixedWidth(newProps.fixedWidth);
+            this.state.column.setFixedWidth(newProps.fixedWidth);
         }
         if (oldProps.id !== newProps.id) {
-            this.columnId = newProps.id ?? null;
-            this.column.setId(this.columnId);
+            this.state.columnId = newProps.id ?? null;
+            this.state.column.setId(this.state.columnId);
         }
     }
 }
@@ -386,9 +383,9 @@ export class ColumnViewItemNode extends Node {
         return true;
     }
     item;
-    constructor(type, props) {
-        super(type, props);
+    initialize(props) {
         this.item = props.item;
+        super.initialize(props);
     }
     getItem() {
         return this.item;

package/dist/nodes/dropdown.d.ts

@@ -6,7 +6,7 @@ export declare class DropDownNode extends Node<Gtk.DropDown> implements ItemCont
     static matches(type: string): boolean;
     private store;
     private onSelectionChanged?;
-    constructor(type: string, props: Props);
+    initialize(props: Props): void;
     addItem(item: unknown): void;
     insertItemBefore(item: unknown, _beforeItem: unknown): void;
     removeItem(item: unknown): void;
@@ -17,7 +17,7 @@ export declare class DropDownItemNode extends Node<never> {
     static matches(type: string): boolean;
     protected isVirtual(): boolean;
     private item;
-    constructor(type: string, props: Props);
+    initialize(props: Props): void;
     getItem(): unknown;
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;

package/dist/nodes/dropdown.js

@@ -37,8 +37,8 @@ export class DropDownNode extends Node {
     }
     store;
     onSelectionChanged;
-    constructor(type, props) {
-        super(type, props);
+    initialize(props) {
+        super.initialize(props);
         const labelFn = props.itemLabel ?? ((item) => String(item));
         this.onSelectionChanged = props.onSelectionChanged;
         this.store = new DropDownStore(labelFn);
@@ -82,8 +82,8 @@ export class DropDownItemNode extends Node {
         return true;
     }
     item;
-    constructor(type, props) {
-        super(type, props);
+    initialize(props) {
+        super.initialize(props);
         this.item = props.item;
     }
     getItem() {

package/dist/nodes/grid.d.ts

@@ -16,7 +16,7 @@ export declare class GridChildNode extends Node<never> {
     private rowSpan;
     private childWidget;
     private parentContainer;
-    constructor(type: string, props: Props);
+    initialize(props: Props): void;
     appendChild(child: Node): void;
     removeChild(child: Node): void;
     private attachChildToGrid;

package/dist/nodes/grid.js

@@ -19,18 +19,18 @@ export class GridChildNode extends Node {
     isVirtual() {
         return true;
     }
-    column;
-    row;
-    columnSpan;
-    rowSpan;
+    column = 0;
+    row = 0;
+    columnSpan = 1;
+    rowSpan = 1;
     childWidget = null;
     parentContainer = null;
-    constructor(type, props) {
-        super(type, props);
+    initialize(props) {
         this.column = getNumberProp(props, "column", 0);
         this.row = getNumberProp(props, "row", 0);
         this.columnSpan = getNumberProp(props, "columnSpan", 1);
         this.rowSpan = getNumberProp(props, "rowSpan", 1);
+        super.initialize(props);
     }
     appendChild(child) {
         const widget = child.getWidget();

package/dist/nodes/list.d.ts

@@ -1,17 +1,25 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import type Reconciler from "react-reconciler";
 import { type ItemContainer } from "../container-interfaces.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class ListViewNode extends Node<Gtk.ListView | Gtk.GridView> implements ItemContainer<unknown> {
+import type { RenderItemFn } from "../types.js";
+interface ListItemInfo {
+    box: Gtk.Box;
+    fiberRoot: Reconciler.FiberRoot;
+}
+interface ListViewState {
+    stringList: Gtk.StringList;
+    selectionModel: Gtk.SingleSelection;
+    factory: Gtk.SignalListItemFactory;
+    renderItem: RenderItemFn<unknown>;
+    listItemCache: Map<number, ListItemInfo>;
+    items: unknown[];
+    committedLength: number;
+}
+export declare class ListViewNode extends Node<Gtk.ListView | Gtk.GridView, ListViewState> implements ItemContainer<unknown> {
     static matches(type: string): boolean;
-    private stringList;
-    private selectionModel;
-    private factory;
-    private items;
-    private renderItem;
-    private listItemCache;
-    private committedLength;
-    constructor(type: string, props: Props);
+    initialize(props: Props): void;
     private syncStringList;
     addItem(item: unknown): void;
     insertItemBefore(item: unknown, beforeItem: unknown): void;
@@ -23,9 +31,10 @@ export declare class ListItemNode extends Node {
     static matches(type: string): boolean;
     protected isVirtual(): boolean;
     private item;
-    constructor(type: string, props: Props);
+    initialize(props: Props): void;
     getItem(): unknown;
     attachToParent(parent: Node): void;
     attachToParentBefore(parent: Node, before: Node): void;
     detachFromParent(parent: Node): void;
 }
+export {};