Fiber

.babelrc

@@ -1,3 +1,7 @@
 {
-	"presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "react"],
+  "plugins": [
+    "transform-flow-strip-types",
+    "transform-object-rest-spread"
+  ]
 }

examples/animation.jsx

@@ -1,43 +1,7 @@
-import React, {Component} from 'react';
+import React from 'react';
 import blessed from 'blessed';
-import {render} from '../src/render.js';
-
-class AnimatedBox extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      position: 0,
-      toRight: true
-    };
-
-    setInterval(() => {
-      const {position, toRight} = this.state,
-            newDirection = (position === (toRight ? 90 : 0)) ?
-              !toRight :
-              toRight,
-            newPosition = newDirection ? position + 1 : position - 1;
-
-
-      this.setState({
-        position: newPosition,
-        toRight: newDirection
-      });
-    }, 30);
-  }
-  render() {
-    const position = `${this.state.position}%`;
-
-    return (
-      <box top="center"
-           left={position}
-           width="10%"
-           height="20%"
-           border={{type: 'line'}}
-           style={{bg: 'cyan', border: {fg: 'blue'}}} />
-    );
-  }
-}
+import AnimatedBox from './components/AnimatedBox';
+import {render} from '../src';
 
 const screen = blessed.screen({
   autoPadding: true,
@@ -49,4 +13,4 @@ screen.key(['escape', 'q', 'C-c'], function(ch, key) {
   return process.exit(0);
 });
 
-render(<AnimatedBox />, screen);
+render(<AnimatedBox />, screen, (inst) => console.log('Rendered AnimatedBox!'));

examples/components/AnimatedBox.jsx

@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+
+class AnimatedBox extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      position: props.initialPosition || 0,
+      toRight: true
+    };
+
+    setInterval(() => {
+      const {position, toRight} = this.state,
+            newDirection = (position === (toRight ? 90 : 0)) ?
+              !toRight :
+              toRight,
+            newPosition = newDirection ? position + 1 : position - 1;
+
+
+      this.setState({
+        position: newPosition,
+        toRight: newDirection
+      });
+    }, props.time || 33.333333);
+  }
+  render() {
+    const position = `${this.state.position}%`;
+
+    return (
+      <box top="center"
+           left={position}
+           width={this.props.width || "10%"}
+           height={this.props.height || "20%"}
+           border={{type: 'line'}}
+           style={{bg: 'cyan', border: {fg: 'blue'}}} />
+    );
+  }
+}
+
+module.exports = AnimatedBox;
+

examples/dashboard.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import blessed from 'blessed';
-import {render} from '../src/render.js';
+import {render} from '../src';
 
 /**
  * Stylesheet

examples/demo.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import blessed from 'blessed';
-import {render} from '../src/render.js';
+import {render} from '../src';
 
 class App extends Component {
   render() {
@@ -37,7 +37,6 @@ class InnerBox extends Component {
 
     return (
       <box label={this.state.hey ? 'First step' : 'Second step'}
-           ref="box"
            left={left}
            width='45%'
            height="70%"

examples/flex.jsx

@@ -0,0 +1,91 @@
+import React, {Component} from 'react';
+import blessed from 'blessed';
+import {render} from '../src';
+
+class App extends Component {
+  render() {
+    return (
+      <box label="react-blessed demo"
+           border={{type: 'line'}}
+           style={{border: {fg: 'cyan'}}}>
+        <InnerBox position="left" />
+        <InnerBox position="right" />
+        <ProgressBar />
+        Random text here...
+      </box>
+    );
+  }
+}
+
+class InnerBox extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hey: true
+    };
+
+    setInterval(() => {
+      this.setState({hey: !this.state.hey});
+    }, 1000);
+  }
+
+  render() {
+    const position = this.props.position;
+
+    const left = position === 'left' ? '2%' : '53%';
+
+    return (
+      <box label={this.state.hey ? 'First step' : 'Second step'}
+           ref="box"
+           left={left}
+           width='45%'
+           height="70%"
+           top="10%"
+           border={{type: 'line'}}
+           style={{border: {fg: 'green'}}}>
+        {this.state.hey ? 'Hey...' : 'Ho...'}
+      </box>
+    );
+  }
+}
+
+class ProgressBar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {completion: 0};
+
+    const interval = setInterval(() => {
+      if (this.state.completion >= 100)
+        return clearInterval(interval);
+
+      this.setState({completion: this.state.completion + 10});
+    }, 1000);
+  }
+
+  render() {
+    return <progressbar orientation="horizontal"
+                        filled={this.state.completion}
+                        top="80%"
+                        left="center"
+                        height="15%"
+                        width="80%"
+                        label="progress"
+                        border={{type: 'line'}}
+                        style={{border: {fg: 'red'}, bar: {bg: 'red'}}} />
+  }
+}
+
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: 'react-blessed demo app'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+const component = render(<App />, screen);
+

examples/form.jsx

@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import blessed from 'blessed';
+import {render} from '../src';
+import AnimatedBox from './components/AnimatedBox';
+
+class Form extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+    };
+
+    this.submit = data => this.setState(state => ({name: data}));
+    this.cancel = _ => console.log('Form canceled');
+  }
+  render() {
+    return (
+      <form
+        keys
+        vi
+        onSubmit={this.submit}
+        onReset={this.cancel}
+        left="5%"
+        top="5%"
+        width="90%"
+        height="90%"
+        border={{type: 'line'}}
+        style={{bg: 'cyan', border: {fg: 'blue'}}}
+      >
+        <box width={6} height={3}>Name: </box>
+        <textbox
+          onSubmit={this.submit}
+          left={6}
+          height={3}
+          keys
+          mouse
+          inputOnFocus
+        />
+        <box top={3} height={3}>
+          {`Result: ${this.state.name}`}
+        </box>
+        <AnimatedBox />
+      </form>
+    );
+  }
+}
+
+const screen = blessed.screen({
+  autoPadding: true,
+  // smartCSR: true,
+  title: 'react-blessed form example'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Form />, screen, (inst) => console.log('Rendered Form!'));
+
+