@gtkx/react 0.6.0 → 0.7.0

package/dist/nodes/column-view.js

@@ -1,67 +1,47 @@
-import { getInterface, getObject, getObjectId } from "@gtkx/ffi";
-import * as Gio from "@gtkx/ffi/gio";
+import { getObject } from "@gtkx/ffi";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { scheduleFlush } from "../batch.js";
-import { isColumnContainer, isItemContainer, } from "../container-interfaces.js";
-import { createFiberRoot } from "../fiber-root.js";
+import { isColumnContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
-import { reconciler } from "../reconciler.js";
-export class ColumnViewNode extends Node {
+import { connectListItemFactorySignals } from "./list-item-factory.js";
+import { SelectableListNode } from "./selectable-list.js";
+import { VirtualItemNode } from "./virtual-item.js";
+export class ColumnViewNode extends SelectableListNode {
+    static consumedPropNames = [
+        "sortColumn",
+        "sortOrder",
+        "onSortChange",
+        "selected",
+        "onSelectionChanged",
+        "selectionMode",
+    ];
     static matches(type) {
         return type === "ColumnView.Root";
     }
     initialize(props) {
-        this.initializeStateWithPlaceholders(props);
-        super.initialize(props);
-        this.createGtkModels();
-        this.connectSorterChangedSignal();
-    }
-    initializeStateWithPlaceholders(props) {
+        const selectionState = this.initializeSelectionState(props);
         this.state = {
-            stringList: null,
-            selectionModel: null,
-            sortListModel: null,
-            items: [],
+            ...selectionState,
             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,
         };
-    }
-    createGtkModels() {
-        const stringList = new Gtk.StringList([]);
-        const sortListModel = new Gtk.SortListModel(getInterface(stringList, Gio.ListModel), this.widget.getSorter());
-        sortListModel.setIncremental(true);
-        const selectionModel = new Gtk.SingleSelection(getInterface(sortListModel, Gio.ListModel));
-        this.widget.setModel(selectionModel);
-        this.state.stringList = stringList;
-        this.state.sortListModel = sortListModel;
-        this.state.selectionModel = selectionModel;
+        super.initialize(props);
+        this.applySelectionModel();
+        this.connectSorterChangedSignal();
     }
     connectSorterChangedSignal() {
         const sorter = this.widget.getSorter();
         if (!sorter || !this.state.onSortChange)
             return;
         this.state.sorterChangedHandlerId = sorter.connect("changed", () => {
-            this.waitForSortComplete(() => this.notifySortChange());
+            this.notifySortChange();
         });
     }
-    waitForSortComplete(callback) {
-        const sortingInProgress = this.state.sortListModel.getPending() > 0;
-        if (sortingInProgress) {
-            setTimeout(() => this.waitForSortComplete(callback), 0);
-        }
-        else {
-            callback();
-        }
-    }
     disconnectSorterChangedSignal() {
         if (this.state.sorterChangedHandlerId === null)
             return;
@@ -81,41 +61,42 @@ export class ColumnViewNode extends Node {
         const column = sorter.getPrimarySortColumn();
         const order = sorter.getPrimarySortOrder();
         const columnId = column?.getId() ?? null;
-        const sortStateUnchanged = columnId === this.state.lastNotifiedColumn && order === this.state.lastNotifiedOrder;
-        if (sortStateUnchanged) {
+        if (columnId === this.state.lastNotifiedColumn && order === this.state.lastNotifiedOrder) {
             return;
         }
         this.state.lastNotifiedColumn = columnId;
         this.state.lastNotifiedOrder = order;
         this.state.onSortChange(columnId, order);
     }
-    getItems() {
-        return this.state.items;
-    }
-    getSortFn() {
-        return this.state.sortFn;
+    detachFromParent(parent) {
+        this.disconnectSorterChangedSignal();
+        this.cleanupSelection();
+        super.detachFromParent(parent);
     }
-    compareItems(a, b, columnId) {
-        if (this.state.isSorting || !this.state.sortFn)
-            return 0;
-        this.state.isSorting = true;
-        try {
-            return this.state.sortFn(a, b, columnId);
-        }
-        finally {
-            this.state.isSorting = false;
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        const newSortColumn = newProps.sortColumn ?? null;
+        const newSortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
+        const newOnSortChange = newProps.onSortChange ?? null;
+        if (oldProps.onSortChange !== newProps.onSortChange) {
+            const hadCallback = this.state.onSortChange !== null;
+            this.state.onSortChange = newOnSortChange;
+            const hasCallback = this.state.onSortChange !== null;
+            if (!hadCallback && hasCallback) {
+                this.connectSorterChangedSignal();
+            }
+            else if (hadCallback && !hasCallback) {
+                this.disconnectSorterChangedSignal();
+            }
         }
-    }
-    addColumn(columnNode) {
-        this.state.columns.push(columnNode);
-        const column = columnNode.getColumn();
-        this.widget.appendColumn(column);
-        columnNode.setColumnView(this);
-        if (columnNode.getId() === this.state.sortColumn && this.state.sortColumn !== null) {
-            this.applySortByColumn();
+        if (oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
+            this.state.sortColumn = newSortColumn;
+            this.state.sortOrder = newSortOrder;
+            this.applySortIndicator();
         }
+        this.updateSelectionProps(oldProps, newProps);
     }
-    applySortByColumn() {
+    applySortIndicator() {
         if (this.state.sortColumn === null) {
             this.widget.sortByColumn(this.state.sortOrder, null);
             return;
@@ -125,15 +106,12 @@ export class ColumnViewNode extends Node {
             this.widget.sortByColumn(this.state.sortOrder, column.getColumn());
         }
     }
-    findColumnById(id) {
-        return this.state.columns.find((c) => c.getId() === id);
-    }
-    removeColumn(column) {
-        const index = this.state.columns.indexOf(column);
-        if (index !== -1) {
-            this.state.columns.splice(index, 1);
-            this.widget.removeColumn(column.getColumn());
-            column.setColumnView(null);
+    addColumn(columnNode) {
+        this.state.columns.push(columnNode);
+        this.widget.appendColumn(columnNode.getColumn());
+        columnNode.setColumnView(this);
+        if (columnNode.getId() === this.state.sortColumn) {
+            this.applySortIndicator();
         }
     }
     insertColumnBefore(column, before) {
@@ -146,76 +124,17 @@ export class ColumnViewNode extends Node {
         this.widget.insertColumn(beforeIndex, column.getColumn());
         column.setColumnView(this);
     }
-    syncStringList = () => {
-        const newLength = this.state.items.length;
-        if (newLength === this.state.committedLength)
-            return;
-        const itemIndicesForSorter = Array.from({ length: newLength }, (_, i) => String(i));
-        this.state.stringList.splice(0, this.state.committedLength, itemIndicesForSorter);
-        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);
+    removeColumn(column) {
+        const index = this.state.columns.indexOf(column);
         if (index !== -1) {
-            this.state.items.splice(index, 1);
-            scheduleFlush(this.syncStringList);
-        }
-    }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("sortColumn");
-        consumed.add("sortOrder");
-        consumed.add("onSortChange");
-        consumed.add("sortFn");
-        return consumed;
-    }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps, newProps);
-        const newSortColumn = newProps.sortColumn ?? null;
-        const newSortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
-        const newSortFn = newProps.sortFn ?? null;
-        const newOnSortChange = newProps.onSortChange ?? null;
-        if (oldProps.onSortChange !== newProps.onSortChange) {
-            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) {
-                this.connectSorterChangedSignal();
-            }
-            else if (callbackRemoved) {
-                this.disconnectSorterChangedSignal();
-            }
-        }
-        if (oldProps.sortFn !== newProps.sortFn) {
-            this.state.sortFn = newSortFn;
-            for (const column of this.state.columns) {
-                column.updateSorterFromRoot();
-            }
-        }
-        if (oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
-            this.state.sortColumn = newSortColumn;
-            this.state.sortOrder = newSortOrder;
-            this.applySortByColumn();
+            this.state.columns.splice(index, 1);
+            this.widget.removeColumn(column.getColumn());
+            column.setColumnView(null);
         }
     }
 }
 export class ColumnViewColumnNode extends Node {
+    static consumedPropNames = ["renderCell", "title", "expand", "resizable", "fixedWidth", "id"];
     static matches(type) {
         return type === "ColumnView.Column";
     }
@@ -230,6 +149,7 @@ export class ColumnViewColumnNode extends Node {
         this.state = {
             column,
             factory,
+            factoryHandlers: null,
             renderCell: props.renderCell,
             columnId,
             sorter: null,
@@ -248,44 +168,11 @@ export class ColumnViewColumnNode extends Node {
         if (props.fixedWidth !== undefined) {
             column.setFixedWidth(props.fixedWidth);
         }
-        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.renderCell(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();
-            if (this.columnView) {
-                const items = this.columnView.getItems();
-                const item = items[position];
-                const element = this.state.renderCell(item ?? null);
-                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);
-            }
+        this.state.factoryHandlers = connectListItemFactorySignals({
+            factory,
+            listItemCache: this.state.listItemCache,
+            getRenderFn: () => this.state.renderCell,
+            getItemAtPosition: (position) => this.columnView?.getItems()[position] ?? null,
         });
     }
     getColumn() {
@@ -296,38 +183,16 @@ export class ColumnViewColumnNode extends Node {
     }
     setColumnView(columnView) {
         this.columnView = columnView;
-        this.updateSorterFromRoot();
+        this.updateSorter();
     }
-    updateSorterFromRoot() {
+    updateSorter() {
         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.state.column.setSorter(null);
-            this.state.sorter = null;
-            return;
-        }
-        const columnId = this.state.columnId;
-        const columnView = this.columnView;
-        const wrappedSortFn = (stringObjPtrA, stringObjPtrB) => {
-            const items = columnView.getItems();
-            const stringObjA = getObject(stringObjPtrA);
-            const stringObjB = getObject(stringObjPtrB);
-            const indexA = Number.parseInt(stringObjA.getString(), 10);
-            const indexB = Number.parseInt(stringObjB.getString(), 10);
-            if (Number.isNaN(indexA) || Number.isNaN(indexB))
-                return 0;
-            const itemA = items[indexA] ?? null;
-            const itemB = items[indexB] ?? null;
-            if (itemA === null || itemB === null)
-                return 0;
-            const result = columnView.compareItems(itemA, itemB, columnId);
-            return typeof result === "number" ? result : 0;
-        };
-        this.state.sorter = new Gtk.CustomSorter(wrappedSortFn);
+        const noOpSortFn = () => 0;
+        this.state.sorter = new Gtk.CustomSorter(noOpSortFn);
         this.state.column.setSorter(this.state.sorter);
     }
     attachToParent(parent) {
@@ -344,20 +209,11 @@ export class ColumnViewColumnNode extends Node {
         }
     }
     detachFromParent(parent) {
+        this.state.factoryHandlers?.disconnect();
         if (isColumnContainer(parent)) {
             parent.removeColumn(this);
         }
     }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("renderCell");
-        consumed.add("title");
-        consumed.add("expand");
-        consumed.add("resizable");
-        consumed.add("fixedWidth");
-        consumed.add("id");
-        return consumed;
-    }
     updateProps(oldProps, newProps) {
         if (oldProps.renderCell !== newProps.renderCell) {
             this.state.renderCell = newProps.renderCell;
@@ -380,37 +236,8 @@ export class ColumnViewColumnNode extends Node {
         }
     }
 }
-export class ColumnViewItemNode extends Node {
+export class ColumnViewItemNode extends VirtualItemNode {
     static matches(type) {
         return type === "ColumnView.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 ColumnViewItemNode) {
-            parent.insertItemBefore(this.item, before.getItem());
-        }
-        else {
-            this.attachToParent(parent);
-        }
-    }
-    detachFromParent(parent) {
-        if (isItemContainer(parent)) {
-            parent.removeItem(this.item);
-        }
-    }
 }

package/dist/nodes/combo-row.d.ts

@@ -0,0 +1,5 @@
+import type * as Adw from "@gtkx/ffi/adw";
+import { StringListContainerNode } from "./string-list-container.js";
+export declare class ComboRowNode extends StringListContainerNode<Adw.ComboRow> {
+    static matches(type: string): boolean;
+}

package/dist/nodes/combo-row.js

@@ -0,0 +1,6 @@
+import { StringListContainerNode } from "./string-list-container.js";
+export class ComboRowNode extends StringListContainerNode {
+    static matches(type) {
+        return type === "AdwComboRow.Root";
+    }
+}

package/dist/nodes/drop-down.d.ts

@@ -0,0 +1,9 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import { StringListContainerNode } from "./string-list-container.js";
+import { StringListItemNode } from "./string-list-item.js";
+export declare class DropDownNode extends StringListContainerNode<Gtk.DropDown> {
+    static matches(type: string): boolean;
+}
+export declare class DropDownItemNode extends StringListItemNode {
+    static matches(type: string): boolean;
+}

package/dist/nodes/drop-down.js

@@ -0,0 +1,12 @@
+import { StringListContainerNode } from "./string-list-container.js";
+import { StringListItemNode } from "./string-list-item.js";
+export class DropDownNode extends StringListContainerNode {
+    static matches(type) {
+        return type === "DropDown.Root";
+    }
+}
+export class DropDownItemNode extends StringListItemNode {
+    static matches(type) {
+        return type === "DropDown.Item" || type === "AdwComboRow.Item";
+    }
+}

package/dist/nodes/flow-box.d.ts

@@ -1,9 +1,7 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
-import type { ChildContainer } from "../container-interfaces.js";
-import { Node } from "../node.js";
-export declare class FlowBoxNode extends Node<Gtk.FlowBox> implements ChildContainer {
+import { IndexedChildContainerNode } from "./indexed-child-container.js";
+export declare class FlowBoxNode extends IndexedChildContainerNode<Gtk.FlowBox> {
     static matches(type: string): boolean;
-    attachChild(child: Gtk.Widget): void;
-    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
-    detachChild(child: Gtk.Widget): void;
+    protected getInsertionIndex(before: Gtk.Widget): number;
+    protected getWidgetToRemove(child: Gtk.Widget): Gtk.Widget;
 }

package/dist/nodes/flow-box.js

@@ -1,25 +1,17 @@
-import { Node } from "../node.js";
-const isFlowBoxChild = (widget) => "getIndex" in widget && "getChild" in widget && typeof widget.getIndex === "function";
-export class FlowBoxNode extends Node {
+import { isFlowBoxChild } from "../predicates.js";
+import { IndexedChildContainerNode } from "./indexed-child-container.js";
+export class FlowBoxNode extends IndexedChildContainerNode {
     static matches(type) {
         return type === "FlowBox";
     }
-    attachChild(child) {
-        this.widget.append(child);
-    }
-    insertChildBefore(child, before) {
+    getInsertionIndex(before) {
         const beforeParent = before.getParent();
         if (beforeParent && isFlowBoxChild(beforeParent)) {
-            this.widget.insert(child, beforeParent.getIndex());
-        }
-        else {
-            this.widget.append(child);
+            return beforeParent.getIndex();
         }
+        return -1;
     }
-    detachChild(child) {
-        const flowBoxChild = child.getParent();
-        if (flowBoxChild) {
-            this.widget.remove(flowBoxChild);
-        }
+    getWidgetToRemove(child) {
+        return child.getParent() ?? child;
     }
 }

package/dist/nodes/grid.d.ts

@@ -2,26 +2,26 @@ import type * as Gtk from "@gtkx/ffi/gtk";
 import { type GridContainer } from "../container-interfaces.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
+import { VirtualSlotNode } from "./virtual-slot.js";
 export declare class GridNode extends Node<Gtk.Grid> implements GridContainer {
     static matches(type: string): boolean;
     attachToGrid(child: Gtk.Widget, column: number, row: number, colSpan: number, rowSpan: number): void;
     removeFromGrid(child: Gtk.Widget): void;
 }
-export declare class GridChildNode extends Node<never> {
+type GridChildProps = {
+    column: number;
+    row: number;
+    columnSpan: number;
+    rowSpan: number;
+};
+export declare class GridChildNode extends VirtualSlotNode<GridContainer, GridChildProps> {
     static matches(type: string): boolean;
-    protected isVirtual(): boolean;
-    private column;
-    private row;
-    private columnSpan;
-    private rowSpan;
-    private childWidget;
-    private parentContainer;
-    initialize(props: Props): void;
-    appendChild(child: Node): void;
-    removeChild(child: Node): void;
-    private attachChildToGrid;
-    private detachChildFromGrid;
-    attachToParent(parent: Node): void;
-    detachFromParent(parent: Node): void;
+    protected isValidContainer(parent: Node): parent is Node & GridContainer;
+    protected extractSlotProps(props: Props): GridChildProps;
+    protected addToContainer(container: GridContainer, child: Gtk.Widget, props: GridChildProps): void;
+    protected insertBeforeInContainer(container: GridContainer, child: Gtk.Widget, props: GridChildProps, _before: Gtk.Widget): void;
+    protected removeFromContainer(container: GridContainer, child: Gtk.Widget): void;
+    protected updateInContainer(container: GridContainer, child: Gtk.Widget, props: GridChildProps): void;
     updateProps(oldProps: Props, newProps: Props): void;
 }
+export {};

package/dist/nodes/grid.js

@@ -1,6 +1,6 @@
 import { isGridContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
-import { getNumberProp } from "../props.js";
+import { VirtualSlotNode } from "./virtual-slot.js";
 export class GridNode extends Node {
     static matches(type) {
         return type === "Grid.Root";
@@ -12,78 +12,35 @@ export class GridNode extends Node {
         this.widget.remove(child);
     }
 }
-export class GridChildNode extends Node {
+export class GridChildNode extends VirtualSlotNode {
     static matches(type) {
         return type === "Grid.Child";
     }
-    isVirtual() {
-        return true;
+    isValidContainer(parent) {
+        return isGridContainer(parent);
     }
-    column = 0;
-    row = 0;
-    columnSpan = 1;
-    rowSpan = 1;
-    childWidget = null;
-    parentContainer = null;
-    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);
+    extractSlotProps(props) {
+        return {
+            column: props.column ?? 0,
+            row: props.row ?? 0,
+            columnSpan: props.columnSpan ?? 1,
+            rowSpan: props.rowSpan ?? 1,
+        };
     }
-    appendChild(child) {
-        const widget = child.getWidget();
-        if (widget) {
-            this.childWidget = widget;
-            if (this.parentContainer) {
-                this.attachChildToGrid();
-            }
-        }
+    addToContainer(container, child, props) {
+        container.attachToGrid(child, props.column, props.row, props.columnSpan, props.rowSpan);
     }
-    removeChild(child) {
-        const widget = child.getWidget();
-        if (widget && this.childWidget === widget) {
-            this.detachChildFromGrid();
-            this.childWidget = null;
-        }
+    insertBeforeInContainer(container, child, props, _before) {
+        this.addToContainer(container, child, props);
     }
-    attachChildToGrid() {
-        if (!this.parentContainer || !this.childWidget)
-            return;
-        this.parentContainer.attachToGrid(this.childWidget, this.column, this.row, this.columnSpan, this.rowSpan);
+    removeFromContainer(container, child) {
+        container.removeFromGrid(child);
     }
-    detachChildFromGrid() {
-        if (!this.parentContainer || !this.childWidget)
-            return;
-        this.parentContainer.removeFromGrid(this.childWidget);
-    }
-    attachToParent(parent) {
-        if (isGridContainer(parent)) {
-            this.parentContainer = parent;
-            if (this.childWidget) {
-                this.attachChildToGrid();
-            }
-        }
-    }
-    detachFromParent(parent) {
-        if (isGridContainer(parent)) {
-            this.detachChildFromGrid();
-            this.parentContainer = null;
-        }
+    updateInContainer(container, child, props) {
+        container.removeFromGrid(child);
+        container.attachToGrid(child, props.column, props.row, props.columnSpan, props.rowSpan);
     }
     updateProps(oldProps, newProps) {
-        const positionChanged = oldProps.column !== newProps.column ||
-            oldProps.row !== newProps.row ||
-            oldProps.columnSpan !== newProps.columnSpan ||
-            oldProps.rowSpan !== newProps.rowSpan;
-        if (positionChanged) {
-            this.detachChildFromGrid();
-            this.column = getNumberProp(newProps, "column", 0);
-            this.row = getNumberProp(newProps, "row", 0);
-            this.columnSpan = getNumberProp(newProps, "columnSpan", 1);
-            this.rowSpan = getNumberProp(newProps, "rowSpan", 1);
-            this.attachChildToGrid();
-        }
+        this.updateSlotPropsIfChanged(oldProps, newProps, ["column", "row", "columnSpan", "rowSpan"]);
     }
 }