From 3f0200209a2ba75fa423103fcefca8d4e44896cf Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 9 May 2019 18:34:14 -0400 Subject: [PATCH] Add styling and better props management --- package-lock.json | 2 +- src/components/Root.js | 8 ++++++-- src/components/View.js | 1 - src/components/Window.js | 29 ++++++++++++++++++++++------- src/reconciler/index.js | 3 --- src/utils/createElement.js | 1 - src/utils/propsUpdater.js | 35 ++++++++++++++++++++++++++++++----- test.js | 29 ++++++++++++++++++++--------- 8 files changed, 79 insertions(+), 29 deletions(-) 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' }} + > + + + + + + + +