react-planner-viewer/src/react-planner.jsx

react-planner-viewer is a React Component for view plans builded with react-planner in 2D mode

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import _ from 'lodash';

import Translator from './translator/translator';
import Catalog from './catalog/catalog';
import actions from './actions/export';
import { objectsMap } from './utils/objects-utils';
import {
  Content,
} from './components/export';
import { VERSION } from './version';

const wrapperStyle = {
  display: 'flex',
  flexFlow: 'row nowrap'
};

class ReactPlanner extends Component {

  getChildContext() {
    return {
      ...objectsMap(actions, actionNamespace => this.props[actionNamespace]),
      translator: this.props.translator,
      catalog: this.props.catalog,
    }
  }

  componentWillMount() {
    let { store } = this.context;
    let { projectActions, catalog, stateExtractor, plugins, state, areaActions, heatMapValues, heatMapColors, newScene } = this.props;
    plugins.forEach(plugin => plugin(store, stateExtractor));
    projectActions.initCatalog(catalog);

    //modified for the viewer
    let plannerState = stateExtractor(state);
    const { scene } = plannerState;
    const layerID = scene.selectedLayer;
    if(newScene){
      projectActions.loadProject(newScene);
    }
    areaActions.showHeatMapAreas(layerID, heatMapValues, heatMapColors);
  }

  componentWillReceiveProps(nextProps) {
    let { stateExtractor, areaActions, state, projectActions, catalog, newScene } = nextProps;
    let plannerState = stateExtractor(state);
    let catalogReady = plannerState.getIn(['catalog', 'ready']);
    if (!catalogReady) {
      projectActions.initCatalog(catalog);
    } 
    if(nextProps.newScene && nextProps.newScene !== newScene){
      let json = JSON.parse(nextProps.newScene);
      projectActions.loadProject(json);
    }

    //AREA KPIS
    const { scene } = plannerState;
    const layerID = scene.selectedLayer;
    if (!_.isEqual(nextProps.heatMapValues, this.props.heatMapValues)) {
      areaActions.showHeatMapAreas(layerID, nextProps.heatMapValues, this.props.heatMapColors);
    }

  }
  render() {
    let { width, height, state, stateExtractor, ...props } = this.props;
    let contentW = width;
    let contentH = height;
    let extractedState = stateExtractor(state);
    //change sizes
    contentW = width;
    contentH = height;
    return (
      <div style={{ ...wrapperStyle, height }}>
        <Content width={contentW} height={contentH} state={extractedState} {...props} onWheel={event => event.preventDefault()} />
      </div>
    );
  }
}

ReactPlanner.propTypes = {
  translator: PropTypes.instanceOf(Translator),
  catalog: PropTypes.instanceOf(Catalog),
  allowProjectFileSupport: PropTypes.bool,
  plugins: PropTypes.arrayOf(PropTypes.func),
  autosaveKey: PropTypes.string,
  autosaveDelay: PropTypes.number,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  stateExtractor: PropTypes.func.isRequired,
  toolbarButtons: PropTypes.array,
  sidebarComponents: PropTypes.array,
  footerbarComponents: PropTypes.array,
  customContents: PropTypes.object,
  softwareSignature: PropTypes.string,
  //modified for the viewer
  heatMapValues: PropTypes.arrayOf(PropTypes.object),
  heatMapColors: PropTypes.array,
  onSelectArea: PropTypes.func,
  newScene: PropTypes.object,
};

ReactPlanner.contextTypes = {
  store: PropTypes.object.isRequired,
};

ReactPlanner.childContextTypes = {
  ...objectsMap(actions, () => PropTypes.object),
  translator: PropTypes.object,
  catalog: PropTypes.object,
};

ReactPlanner.defaultProps = {
  translator: new Translator(),
  catalog: new Catalog(),
  plugins: [],
  allowProjectFileSupport: true,
  softwareSignature: `React-Planner ${VERSION}`,
  toolbarButtons: [],
  sidebarComponents: [],
  footerbarComponents: [],
  customContents: {},
  heatMapValues: [],
  heatMapColors: ['white','blue'],
};

//redux connect
function mapStateToProps(reduxState) {
  return {
    state: reduxState
  }
}

function mapDispatchToProps(dispatch) {
  return objectsMap(actions, actionNamespace => bindActionCreators(actions[actionNamespace], dispatch));
}

export default connect(mapStateToProps, mapDispatchToProps)(ReactPlanner);