MultiViewControl

Source

index.js

import React from 'react';
import PropTypes from 'prop-types';

import CollapsibleWidget from '../../Widgets/CollapsibleWidget';
import LayoutsWidget from '../../Widgets/LayoutsWidget';

/* eslint-disable react/no-unused-state */

/**
 * This React component expect the following input properties:
 *   - renderer:
 *       Expect a MultiViewRenderer instance.
 */
export default class MultiViewControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      renderMethod: '',
      layout: '',
    };

    // Bind callback
    this.onLayoutChange = this.onLayoutChange.bind(this);
    this.onRenderMethodChange = this.onRenderMethodChange.bind(this);
    this.onLayoutChangeCallback = this.onLayoutChangeCallback.bind(this);
    this.onActiveViewportCallback = this.onActiveViewportCallback.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.renderer && nextProps.renderer) {
      const renderer = nextProps.renderer;
      this.layoutSubscription = renderer.onLayoutChange(
        this.onLayoutChangeCallback
      );
      this.renderMethodSubscription = renderer.onActiveViewportChange(
        this.onActiveViewportCallback
      );
      this.setState({
        renderMethod: renderer.getActiveRenderMethod(),
        layout: renderer.getActiveLayout(),
      });
    }
  }

  componentWillUnmount() {
    if (this.layoutSubscription) {
      this.layoutSubscription.unsubscribe();
      this.layoutSubscription = null;
    }
    if (this.renderMethodSubscription) {
      this.renderMethodSubscription.unsubscribe();
      this.renderMethodSubscription = null;
    }
  }

  onLayoutChange(layout) {
    this.props.renderer.setLayout(layout);
  }

  onRenderMethodChange(event) {
    const renderMethod = event.target.value;
    this.props.renderer.setRenderMethod(renderMethod);
  }

  onLayoutChangeCallback(data, envelope) {
    this.setState({
      layout: data,
    });
  }

  onActiveViewportCallback(data, envelope) {
    this.setState({
      renderMethod: data.name,
    });
  }

  render() {
    const renderer = this.props.renderer;
    let renderMethods = [];

    if (renderer) {
      renderMethods = renderer.getRenderMethods().map((v) => (
        <option key={v} value={v}>
          {v}
        </option>
      ));
    }

    return (
      <div>
        <CollapsibleWidget title="Layout">
          <LayoutsWidget onChange={this.onLayoutChange} />
        </CollapsibleWidget>
        <CollapsibleWidget title="Viewport">
          <select
            style={{ width: '100%' }}
            value={this.state.renderMethod}
            onChange={this.onRenderMethodChange}
          >
            {renderMethods}
          </select>
        </CollapsibleWidget>
      </div>
    );
  }
}

MultiViewControl.propTypes = {
  renderer: PropTypes.object,
};

MultiViewControl.defaultProps = {
  renderer: undefined,
};