@gtkx/react 0.6.1 → 0.8.0

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { SortType } from "@gtkx/ffi/gtk";
+import type * as Gtk from "@gtkx/ffi/gtk";
 import type { ReactElement, ReactNode } from "react";
 /**
  * Props for slot components that accept children.
@@ -8,13 +8,25 @@ export type SlotProps = {
     children?: ReactNode;
 };
 /**
- * Props passed to list item components.
+ * Props passed to list item components (ListView, GridView, ColumnView).
  * @typeParam I - The type of the data item
  */
 export type ListItemProps<I = unknown> = {
+    /** Unique identifier for this item. Used for selection. */
+    id: string;
     /** The data item to render. */
     item: I;
 };
+/**
+ * Props for string list items (DropDown, ComboRow).
+ * Similar to HTML select option elements.
+ */
+export type StringListItemProps = {
+    /** Unique identifier for this item. Used for selection. */
+    id: string;
+    /** Display text shown in the dropdown. */
+    label: string;
+};
 export type GridChildProps = SlotProps & {
     column?: number;
     row?: number;
@@ -34,14 +46,6 @@ export type ListViewRenderProps<T = unknown> = {
     /** Render function called for each item in the list. */
     renderItem: RenderItemFn<T>;
 };
-/**
- * Comparison function for sorting items by column.
- * Returns negative if a < b, 0 if a === b, positive if a > b.
- * @param a - First item to compare
- * @param b - Second item to compare
- * @param columnId - The ID of the column being sorted
- */
-export type ColumnSortFn<T, C extends string = string> = (a: T, b: T, columnId: C) => number;
 /**
  * Props for individual columns in a ColumnView.
  * @typeParam T - The type of the data items displayed in the column
@@ -66,18 +70,17 @@ export type ColumnViewColumnProps<T = unknown> = {
 };
 /**
  * Props for the ColumnView root component.
- * @typeParam T - The type of the data items in the view
+ * Sorting is handled by the parent component - sort your items before rendering
+ * and pass them as ColumnView.Item children in the desired order.
  * @typeParam C - The union type of column IDs
  */
-export type ColumnViewRootProps<T = unknown, C extends string = string> = {
-    /** The ID of the currently sorted column, or null if unsorted. */
+export type ColumnViewRootProps<C extends string = string> = {
+    /** The ID of the currently sorted column, or null if unsorted. Controls the sort indicator UI. */
     sortColumn?: C | null;
-    /** The current sort direction. */
-    sortOrder?: SortType;
-    /** Callback fired when the user changes the sort column or order. */
-    onSortChange?: (column: C | null, order: SortType) => void;
-    /** Custom comparison function for sorting items. */
-    sortFn?: ColumnSortFn<T, C>;
+    /** The current sort direction. Controls the sort indicator UI. */
+    sortOrder?: Gtk.SortType;
+    /** Callback fired when the user clicks a column header to change sort. */
+    onSortChange?: (column: C | null, order: Gtk.SortType) => void;
 };
 export type NotebookPageProps = SlotProps & {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -19,7 +19,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/eugeniodepalo/gtkx.git",
-    "directory": "packages/gtkx"
+    "directory": "packages/react"
   },
   "license": "MPL-2.0",
   "author": "Eugenio Depalo <eugeniodepalo@gmail.com>",
@@ -35,11 +35,12 @@
     "dist"
   ],
   "dependencies": {
-    "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.6.1"
+    "react-reconciler": "^0.33.0",
+    "@gtkx/ffi": "0.8.0"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.6.1"
+    "@gtkx/gir": "0.8.0",
+    "@gtkx/native": "0.8.0"
   },
   "peerDependencies": {
     "react": "^19"

package/dist/nodes/dropdown.d.ts

@@ -1,39 +0,0 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import { type ItemContainer } from "../container-interfaces.js";
-import type { Props } from "../factory.js";
-import { Node } from "../node.js";
-type ItemLabelFn = (item: unknown) => string;
-interface DropDownState {
-    store: DropDownStore;
-    onSelectionChanged?: (item: unknown, index: number) => void;
-}
-declare class DropDownStore {
-    private stringList;
-    private items;
-    private labelFn;
-    constructor(labelFn: ItemLabelFn);
-    getModel(): Gtk.StringList;
-    append(item: unknown): void;
-    remove(item: unknown): void;
-    getItem(index: number): unknown;
-    get length(): number;
-}
-export declare class DropDownNode extends Node<Gtk.DropDown, DropDownState> implements ItemContainer<unknown> {
-    static matches(type: string): boolean;
-    initialize(props: Props): void;
-    addItem(item: unknown): void;
-    insertItemBefore(item: unknown, _beforeItem: unknown): void;
-    removeItem(item: unknown): void;
-    protected consumedProps(): Set<string>;
-    updateProps(oldProps: Props, newProps: Props): void;
-}
-export declare class DropDownItemNode extends Node<never> {
-    static matches(type: string): boolean;
-    protected isVirtual(): boolean;
-    private item;
-    initialize(props: Props): void;
-    getItem(): unknown;
-    attachToParent(parent: Node): void;
-    detachFromParent(parent: Node): void;
-}
-export {};

package/dist/nodes/dropdown.js

@@ -1,103 +0,0 @@
-import { getInterface } from "@gtkx/ffi";
-import * as Gio from "@gtkx/ffi/gio";
-import * as Gtk from "@gtkx/ffi/gtk";
-import { isItemContainer } from "../container-interfaces.js";
-import { Node } from "../node.js";
-class DropDownStore {
-    stringList;
-    items = [];
-    labelFn;
-    constructor(labelFn) {
-        this.stringList = new Gtk.StringList([]);
-        this.labelFn = labelFn;
-    }
-    getModel() {
-        return this.stringList;
-    }
-    append(item) {
-        const label = this.labelFn(item);
-        this.stringList.append(label);
-        this.items.push(item);
-    }
-    remove(item) {
-        const index = this.items.indexOf(item);
-        if (index !== -1) {
-            this.stringList.remove(index);
-            this.items.splice(index, 1);
-        }
-    }
-    getItem(index) {
-        return this.items[index];
-    }
-    get length() {
-        return this.items.length;
-    }
-}
-export class DropDownNode extends Node {
-    static matches(type) {
-        return type === "DropDown.Root";
-    }
-    initialize(props) {
-        const labelFn = props.itemLabel ?? ((item) => String(item));
-        const store = new DropDownStore(labelFn);
-        const onSelectionChanged = props.onSelectionChanged;
-        this.state = { store, onSelectionChanged };
-        super.initialize(props);
-        this.widget.setModel(getInterface(store.getModel(), Gio.ListModel));
-        if (onSelectionChanged) {
-            const handler = () => {
-                const index = this.widget.getSelected();
-                const item = this.state.store.getItem(index);
-                this.state.onSelectionChanged?.(item, index);
-            };
-            this.connectSignal(this.widget, "notify::selected", handler);
-        }
-    }
-    addItem(item) {
-        this.state.store.append(item);
-    }
-    insertItemBefore(item, _beforeItem) {
-        this.addItem(item);
-    }
-    removeItem(item) {
-        this.state.store.remove(item);
-    }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("itemLabel");
-        consumed.add("onSelectionChanged");
-        return consumed;
-    }
-    updateProps(oldProps, newProps) {
-        if (oldProps.onSelectionChanged !== newProps.onSelectionChanged) {
-            this.state.onSelectionChanged = newProps.onSelectionChanged;
-        }
-        super.updateProps(oldProps, newProps);
-    }
-}
-export class DropDownItemNode extends Node {
-    static matches(type) {
-        return type === "DropDown.Item";
-    }
-    isVirtual() {
-        return true;
-    }
-    item;
-    initialize(props) {
-        super.initialize(props);
-        this.item = props.item;
-    }
-    getItem() {
-        return this.item;
-    }
-    attachToParent(parent) {
-        if (!isItemContainer(parent))
-            return;
-        parent.addItem(this.item);
-    }
-    detachFromParent(parent) {
-        if (!isItemContainer(parent))
-            return;
-        parent.removeItem(this.item);
-    }
-}

package/dist/nodes/list.d.ts

@@ -1,43 +0,0 @@
-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";
-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;
-    initialize(props: Props): void;
-    private initializeStateWithPlaceholders;
-    private createGtkModels;
-    private connectFactorySignals;
-    private syncStringList;
-    addItem(item: unknown): void;
-    insertItemBefore(item: unknown, beforeItem: unknown): void;
-    removeItem(item: unknown): void;
-    protected consumedProps(): Set<string>;
-    updateProps(oldProps: Props, newProps: Props): void;
-}
-export declare class ListItemNode extends Node {
-    static matches(type: string): boolean;
-    protected isVirtual(): boolean;
-    private item;
-    initialize(props: Props): void;
-    getItem(): unknown;
-    attachToParent(parent: Node): void;
-    attachToParentBefore(parent: Node, before: Node): void;
-    detachFromParent(parent: Node): void;
-}
-export {};

package/dist/nodes/list.js

@@ -1,153 +0,0 @@
-import { getInterface, getObject, getObjectId } from "@gtkx/ffi";
-import * as Gio from "@gtkx/ffi/gio";
-import * as Gtk from "@gtkx/ffi/gtk";
-import { scheduleFlush } from "../batch.js";
-import { isItemContainer } from "../container-interfaces.js";
-import { createFiberRoot } from "../fiber-root.js";
-import { Node } from "../node.js";
-import { reconciler } from "../reconciler.js";
-export class ListViewNode extends Node {
-    static matches(type) {
-        return type === "ListView.Root" || type === "GridView.Root";
-    }
-    initialize(props) {
-        this.initializeStateWithPlaceholders(props);
-        super.initialize(props);
-        this.createGtkModels();
-        this.connectFactorySignals();
-        this.widget.setModel(this.state.selectionModel);
-        this.widget.setFactory(this.state.factory);
-    }
-    initializeStateWithPlaceholders(props) {
-        this.state = {
-            stringList: null,
-            selectionModel: null,
-            factory: null,
-            renderItem: props.renderItem,
-            listItemCache: new Map(),
-            items: [],
-            committedLength: 0,
-        };
-    }
-    createGtkModels() {
-        const stringList = new Gtk.StringList([]);
-        const selectionModel = new Gtk.SingleSelection(getInterface(stringList, Gio.ListModel));
-        const factory = new Gtk.SignalListItemFactory();
-        this.state.stringList = stringList;
-        this.state.selectionModel = selectionModel;
-        this.state.factory = factory;
-    }
-    connectFactorySignals() {
-        const factory = this.state.factory;
-        factory.connect("setup", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj.id);
-            const id = getObjectId(listItemObj.id);
-            const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
-            listItem.setChild(box);
-            const fiberRoot = createFiberRoot(box);
-            this.state.listItemCache.set(id, { box, fiberRoot });
-            const element = this.state.renderItem(null);
-            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
-        });
-        factory.connect("bind", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj.id);
-            const id = getObjectId(listItemObj.id);
-            const info = this.state.listItemCache.get(id);
-            if (!info)
-                return;
-            const position = listItem.getPosition();
-            const item = this.state.items[position];
-            const element = this.state.renderItem(item);
-            reconciler.getInstance().updateContainer(element, info.fiberRoot, null, () => { });
-        });
-        factory.connect("unbind", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj.id);
-            const info = this.state.listItemCache.get(id);
-            if (!info)
-                return;
-            reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
-        });
-        factory.connect("teardown", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj.id);
-            const info = this.state.listItemCache.get(id);
-            if (info) {
-                reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
-                this.state.listItemCache.delete(id);
-            }
-        });
-    }
-    syncStringList = () => {
-        const newLength = this.state.items.length;
-        if (newLength === this.state.committedLength)
-            return;
-        const placeholders = Array.from({ length: newLength }, () => "");
-        this.state.stringList.splice(0, this.state.committedLength, placeholders);
-        this.state.committedLength = newLength;
-    };
-    addItem(item) {
-        this.state.items.push(item);
-        scheduleFlush(this.syncStringList);
-    }
-    insertItemBefore(item, beforeItem) {
-        const beforeIndex = this.state.items.indexOf(beforeItem);
-        if (beforeIndex === -1) {
-            this.state.items.push(item);
-        }
-        else {
-            this.state.items.splice(beforeIndex, 0, item);
-        }
-        scheduleFlush(this.syncStringList);
-    }
-    removeItem(item) {
-        const index = this.state.items.indexOf(item);
-        if (index !== -1) {
-            this.state.items.splice(index, 1);
-            scheduleFlush(this.syncStringList);
-        }
-    }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("renderItem");
-        return consumed;
-    }
-    updateProps(oldProps, newProps) {
-        if (oldProps.renderItem !== newProps.renderItem) {
-            this.state.renderItem = newProps.renderItem;
-        }
-        super.updateProps(oldProps, newProps);
-    }
-}
-export class ListItemNode extends Node {
-    static matches(type) {
-        return type === "ListView.Item" || type === "GridView.Item";
-    }
-    isVirtual() {
-        return true;
-    }
-    item;
-    initialize(props) {
-        this.item = props.item;
-        super.initialize(props);
-    }
-    getItem() {
-        return this.item;
-    }
-    attachToParent(parent) {
-        if (isItemContainer(parent)) {
-            parent.addItem(this.item);
-        }
-    }
-    attachToParentBefore(parent, before) {
-        if (isItemContainer(parent) && before instanceof ListItemNode) {
-            parent.insertItemBefore(this.item, before.getItem());
-        }
-        else {
-            this.attachToParent(parent);
-        }
-    }
-    detachFromParent(parent) {
-        if (isItemContainer(parent)) {
-            parent.removeItem(this.item);
-        }
-    }
-}