Add styling and better props management

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",

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,

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);
     }

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),

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);
   },
 

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;
 }
 

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;

test.js

@@ -2,19 +2,30 @@ import React, { Component } from 'react';
 
 import { App, AppRegistry, Window, View } from './src/';
 
-class Example2 extends Component {
-  render() {
-    return <View />;
-  }
-}
-
 class Example extends Component {
   render() {
     return (
       <App>
-        <Window>
-          <View style={{ backgroundColor: 'black', flex: 1, margin: 30 }}>
-            <Example2 />
+        <Window
+          onResize={size => console.log('Resize', size)}
+          style={{ backgroundColor: 'orange' }}
+        >
+          <View
+            style={{ backgroundColor: 'red', flex: 1, margin: 30, padding: 30 }}
+          >
+            <View
+              style={{
+                backgroundColor: 'black',
+                flex: 1,
+                justifyContent: 'space-between',
+              }}
+            >
+              <View style={{ backgroundColor: 'white', height: 100 }} />
+              <View style={{ backgroundColor: 'yellow', height: 100 }} />
+              <View style={{ backgroundColor: 'purple', height: 100 }} />
+            </View>
+            <View style={{ backgroundColor: 'green', flex: 1 }} />
+            <View style={{ backgroundColor: 'blue', flex: 1 }} />
           </View>
         </Window>
       </App>