OS.js v3 w/React and bi-directional events via bus

index.js

import React from 'react';
import ReactDOM from 'react-dom';

//
// Your component(s).
//
class MainWindowComponent extends React.Component {
  constructor(props) {
    super(props);

    // You should now have this.props.bus :tada:
    // You can pass that on to other components
    console.log(this.props.bus)

    this.state = {data: 'Nobody'};
  }

  render() {
    return (
      <div>Hello {this.state.data}</div>
    );
  }

  componentDidMount() {
    // Example of how to get data from another component.
    // Simply use `this.props.emit('my-event', {foo: 'bar'})`
    // or anywhere in your code via the bus.
    this.props.bus.on('my-event', data => {
      this.setState({
        data
      });
    });
  }
}

class DialogWindowComponent extends React.Component {

  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Press me</button>
      </div>
    );
  }

  onClick() {
    this.props.bus.emit('my-event', 'World');
  }

}

//
// Your shared library. Just place this as a separate npm module.
//
const myLibrary = (core, proc) => {
  let mainWindow;

  // A new bus to pass around data etc.
  const bus = core.make('osjs/event-handler', 'MyAwesomeBusName');

  // Wrapper for rendering a react component
  // Note that this takes a component Class reference
  const render = componentRef => $content => ReactDOM.render(
    // Pass on the bus to the react element as prop
    React.createElement(componentRef, {bus}),

    // Then reneder inside window
    $content
  );

  // Wrapper for creating a window
  const createWindow = (componentRef, options) => {
    const win = proc.createWindow(options);
    win.render(render(componentRef));
    return win;
  };

  // Helper for maing the main window
  const createMainWindow = (options, componentRef) => {
    if (mainWindow) {
      throw new Error('Main Window already created');
    }

    mainWindow = createWindow(componentRef, Object.assign({
      // Defaults
      title: 'Main Window'
    }, options));


    return mainWindow;
  };

  // Helper for making a dialog popup
  const createPopupWindow = (options, componentRef, parent) => createWindow(componentRef, Object.assign({
    title: 'Popup Window',
    // In latest release you can set modal if a parent is given
    // so you don't have to do the setState('loading') things.
    parent: parent || mainWindow,
    attributes: {
      modal: true
    }
  }));

  return {bus, createMainWindow, createPopupWindow};
};

//
// Your Application
//
const register = (core, args, options, metadata) => {
  const proc = core.make('osjs/application', {
    args,
    options,
    metadata
  });

  const lib = myLibrary(core, proc);

  // Example on how to make main window
  lib.createMainWindow({
    title: 'My new main window'
  }, MainWindowComponent);

  // Dialog works just the same
  lib.createPopupWindow({
    title: 'My new dialog window with auto-modal'
  }, DialogWindowComponent);

  return proc;
};

OSjs.make('osjs/packages')
  .register('ReactExampleApplication', register);