diff --git a/package-lock.json b/package-lock.json
index 20da629..f073223 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4909,7 +4909,7 @@
"dev": true
},
"node-qt-napi": {
- "version": "github:kusti8/node-qt-napi#830e45ecfd06ae19789144aa93d25f8c3c2cef4a",
+ "version": "github:kusti8/node-qt-napi#fd6fef13ac8a4364ba66fe75134f49e4e4d37a7b",
"from": "github:kusti8/node-qt-napi",
"requires": {
"bindings": "^1.5.0",
diff --git a/src/components/Root.js b/src/components/Root.js
index de3ec85..98100c2 100644
--- a/src/components/Root.js
+++ b/src/components/Root.js
@@ -13,9 +13,9 @@ export default props => {
const containerProps = Container(() => {}, () => {});
- setInterval(() => element.processEvents(), 0);
+ const interval = setInterval(() => element.processEvents(), 0); // fix this
- const afterCommit = host => {
+ const traverseYoga = host => {
const queue = [host];
while (queue.length) {
const next = queue.pop();
@@ -35,6 +35,10 @@ export default props => {
}
};
+ const afterCommit = host => {
+ traverseYoga(host);
+ };
+
return {
...containerProps,
element,
diff --git a/src/components/View.js b/src/components/View.js
index 228211e..2aa0c3f 100644
--- a/src/components/View.js
+++ b/src/components/View.js
@@ -63,7 +63,6 @@ export default p => {
});
const applyYoga = root => {
- console.log(props, root);
if (root) {
node.calculateLayout(root.w, root.h, yoga.DIRECTION_LTR);
}
diff --git a/src/components/Window.js b/src/components/Window.js
index dc7bafe..a98bf09 100644
--- a/src/components/Window.js
+++ b/src/components/Window.js
@@ -4,21 +4,36 @@ import qt from 'node-qt-napi';
import { Container } from './Container';
import propsUpdater from '../utils/propsUpdater';
import { ROOT_NODE } from '../render';
+import PropTypes from 'prop-types';
+import convertStyleSheet from '../utils/convertStyleSheet';
export default p => {
- const propTypes = {};
- const defaultProps = {};
+ const propTypes = {
+ style: PropTypes.object,
+ onResize: PropTypes.func,
+ };
+ const defaultProps = {
+ style: {},
+ onResize: () => {},
+ };
const element = new qt.QMainWindow();
- element.resizeEvent(() => {
- ROOT_NODE.afterCommit(ROOT_NODE);
- console.log('Resize');
- });
let props = { ...p };
props = propChecker(props, propTypes, defaultProps, 'Window');
- const updateProps = propsUpdater({});
+ const handlers = {
+ onResize: props.onResize,
+ };
+
+ element.resizeEvent((w, h) => {
+ ROOT_NODE.afterCommit(ROOT_NODE);
+ handlers.onResize({ w, h });
+ });
+
+ const updateProps = propsUpdater([handlers, 'onResize'], {
+ style: style => element.setStyleSheet(convertStyleSheet(style)),
+ });
const containerProps = Container(
child => child.element.setParent(element),
diff --git a/src/reconciler/index.js b/src/reconciler/index.js
index 009d8f1..f7b3eb8 100644
--- a/src/reconciler/index.js
+++ b/src/reconciler/index.js
@@ -6,7 +6,6 @@ const Reconciler = require('react-reconciler');
const DesktopRenderer = Reconciler({
appendInitialChild(parentInstance, child) {
- console.log('Append');
appendChild(parentInstance, child);
},
@@ -75,12 +74,10 @@ const DesktopRenderer = Reconciler({
// MUTATION
appendChild(parentInstance, child) {
- console.log('Append');
appendChild(parentInstance, child);
},
appendChildToContainer(parentInstance, child) {
- console.log('Append');
appendChild(parentInstance, child);
},
diff --git a/src/utils/createElement.js b/src/utils/createElement.js
index 16fbc11..a6c66c1 100644
--- a/src/utils/createElement.js
+++ b/src/utils/createElement.js
@@ -9,7 +9,6 @@ function createElement(type, props) {
WINDOW: () => new Window(props),
default: undefined,
};
- console.log('Making', type, props);
return COMPONENTS[type]() || COMPONENTS.default;
}
diff --git a/src/utils/propsUpdater.js b/src/utils/propsUpdater.js
index b14225b..19afe9a 100644
--- a/src/utils/propsUpdater.js
+++ b/src/utils/propsUpdater.js
@@ -1,9 +1,34 @@
-const propsUpdater = updateMap => changes => {
- Object.entries(updateMap).forEach(([prop, updateFn]) => {
- if (prop in changes) {
- updateFn(changes[prop]);
+const propsUpdater = (...updateMaps) => changes =>
+ updateMaps.forEach(updateMap => {
+ /** updateMap can be any of:
+ * A) { [prop]: (newValue) => void }
+ * B) [ mutableObject, ...prop | { [prop]: [string objectKey] }]
+ **/
+
+ if (!Array.isArray(updateMap)) {
+ // A
+ return Object.entries(updateMap).forEach(([prop, updateFn]) => {
+ if (prop in changes) {
+ updateFn(changes[prop]);
+ }
+ });
}
+
+ // B
+ const mutableObject = updateMap[0];
+ updateMap.slice(1).forEach(p => {
+ if (typeof p === 'object') {
+ Object.entries(p).forEach(([prop, objectKey]) => {
+ if (prop in changes) {
+ mutableObject[objectKey] = changes[prop];
+ }
+ });
+ } else {
+ if (p in changes) {
+ mutableObject[p] = changes[p];
+ }
+ }
+ });
});
-};
export default propsUpdater;
diff --git a/test.js b/test.js
index 3a6a6e8..3d4022d 100644
--- a/test.js
+++ b/test.js
@@ -2,19 +2,30 @@ import React, { Component } from 'react';
import { App, AppRegistry, Window, View } from './src/';
-class Example2 extends Component {
- render() {
- return ;
- }
-}
-
class Example extends Component {
render() {
return (
-
-
-
+ console.log('Resize', size)}
+ style={{ backgroundColor: 'orange' }}
+ >
+
+
+
+
+
+
+
+