Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
Add Comment
Please, Sign In to add comment