MultiLayoutViewer

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import AbstractViewerMenu from '../AbstractViewerMenu';
import MultiViewControl from '../../CollapsibleControls/MultiViewControl';
import WidgetFactory from '../../CollapsibleControls/CollapsibleControlFactory';
import MultiViewRenderer from '../../Renderers/MultiLayoutRenderer';

export default class MultiLayoutViewer extends React.Component {
constructor(props) {
super(props);
this.state = {
activeRenderer: null,
renderer: null,
};

// Bind callback
this.attachListener = this.attachListener.bind(this);
this.detachListener = this.detachListener.bind(this);
}

// FIXME need to do that properly if possible?
/* eslint-disable react/no-did-mount-set-state */
componentDidMount() {
const renderer = this.catalystWidget.getRenderer();

this.setState({ renderer });

this.activeViewportSubscription = renderer.onActiveViewportChange(
(data, envelope) => {
this.setState({
activeRenderer: this.props.renderers[data.name],
});
}
);
}
/* eslint-enable react/no-did-mount-set-state */

componentWillUpdate(nextProps, nextState) {
const previousDataModel =
this.state.activeRenderer &&
this.state.activeRenderer.builder &&
this.state.activeRenderer.builder.queryDataModel
? this.state.activeRenderer.builder.queryDataModel
: this.props.queryDataModel;
const nextDataModel =
nextState.activeRenderer &&
nextState.activeRenderer.builder &&
nextState.activeRenderer.builder.queryDataModel
? nextState.activeRenderer.builder.queryDataModel
: nextProps.queryDataModel;

if (previousDataModel !== nextDataModel) {
this.detachListener();
this.attachListener(nextDataModel);
}
}

// Auto unmount listener
componentWillUnmount() {
this.detachListener();
if (this.activeViewportSubscription) {
this.activeViewportSubscription.unsubscribe();
this.activeViewportSubscription = null;
}
}

attachListener(dataModel) {
this.detachListener();
if (dataModel) {
this.queryDataModelChangeSubscription = dataModel.onStateChange(
(data, envelope) => {
this.forceUpdate();
}
);
}
}

detachListener() {
if (this.queryDataModelChangeSubscription) {
this.queryDataModelChangeSubscription.unsubscribe();
this.queryDataModelChangeSubscription = null;
}
}

render() {
const queryDataModel =
this.state.activeRenderer &&
this.state.activeRenderer.builder &&
this.state.activeRenderer.builder.queryDataModel
? this.state.activeRenderer.builder.queryDataModel
: this.props.queryDataModel;
let controlWidgets = [];

if (this.state.activeRenderer) {
controlWidgets = WidgetFactory.getWidgets(
this.state.activeRenderer.builder || this.state.activeRenderer.painter
);
}

// Add menuAddOn if any at the top
if (this.props.menuAddOn) {
controlWidgets = this.props.menuAddOn.concat(controlWidgets);
}

return (
<AbstractViewerMenu
ref={(c) => {
this.catalystWidget = c;
}}
queryDataModel={queryDataModel}
renderers={this.props.renderers}
renderer="MultiViewRenderer"
rendererClass={MultiViewRenderer}
layout={this.props.layout}
>
<MultiViewControl renderer={this.state.renderer} />
{controlWidgets}
</AbstractViewerMenu>
);
}
}

MultiLayoutViewer.propTypes = {
layout: PropTypes.string,
menuAddOn: PropTypes.array,
queryDataModel: PropTypes.object.isRequired,
renderers: PropTypes.object,
// userData: PropTypes.object,
};

MultiLayoutViewer.defaultProps = {
layout: undefined,
menuAddOn: undefined,
renderers: undefined,
};