index.js

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

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

    this.state = {
      rows: [{
        name: 'andersevenrud'
      }, {
        name: '3HMonkey'
      }]
    };

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

  createPopup(data) {
    this.props.bus.emit('create-popup', data)
  }

  render() {
    return (
      <div>
        <table>
        {this.state.rows.map((row, index) => (
          <tr>
            <td>{ row.name }</td>
            <td>
              <button onClick={() => this.createPopup({row, index})}>Edit</button>
            </td>
          </tr>
        ))}
        </table>
      </div>
    );
  }

  componentDidMount() {
    this.props.bus.on('update-row', (row, index) => {
      const rows = this.state.rows;
      rows[index] = row;
      this.setState({rows});
    });
  }
}


class DialogWindowComponent extends React.Component {

  constructor(props) {
    super(props);

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

    this.state = {
      row: props.row
    };
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.row.name} onInput={this.onInput} />
        <button onClick={this.onClick}>Press me</button>
      </div>
    );
  }

  onInput(ev) {
    this.setState({row: {name: ev.target.value}})
  }

  onClick() {
    this.props.bus.emit('update-row', this.state.row, this.props.index);

    this.props.win.close();
  }

}

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

  const bus = core.make('osjs/event-handler', 'MyAwesomeBusName');

  const render = (componentRef, props = {}) => ($content, win) => ReactDOM.render(
    React.createElement(componentRef, Object.assign({bus, win}, props)),
    $content
  );

  const createWindow = (componentRef, options, props) => {
    const win = proc.createWindow(options);
    win.render(render(componentRef, props));
    return win;
  };

  const createMainWindow = (options, componentRef, props) => {
    if (mainWindow) {
      throw new Error('Main Window already created');
    }

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


    return mainWindow;
  };

  const createPopupWindow = (options, componentRef, props, parent) => createWindow(componentRef, Object.assign({
    title: 'Popup Window',
    parent: parent || mainWindow,
    attributes: {
      modal: true
    }
  }), props);

  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',
    dimension: {width: 400, height: 400}
  }, MainWindowComponent);

  lib.bus.on('create-popup', data => {
    lib.createPopupWindow({
      title: 'Edit - ' + data.row.name,
      dimension: {width: 400, height: 400}
    }, DialogWindowComponent, data);
  })

  return proc;
};

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