react-planner-viewer/src/index.js

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

import React from 'react';
import {Map} from 'immutable';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import ReactPlanner from './react-planner';
import PropTypes from 'prop-types';

import MyCatalog from './catalog/myCatalog/myCatalog';

import * as PlannerModels from './models';
import PlannerReducer from './reducers/reducer';


let AppState = Map({
  'react-planner': new PlannerModels.State()
});

//define reducer
let reducer = (state, action) => {
  state = state || AppState;
  state = state.update('react-planner', plannerState => PlannerReducer(plannerState, action));
  return state;
};

let store = createStore(reducer, null);

class ReactPlannerViewer extends React.Component {

  render() {
    let {width, height, project, scene, heatMapValues, heatMapColors, onSelectArea} = this.props;
    return (
      <Provider store={store}>
        <ReactPlanner 
          catalog={MyCatalog} 
          width={width} 
          height={height} 
          newScene={scene}
          heatMapColors={heatMapColors}
          heatMapValues={heatMapValues}
          onSelectArea={onSelectArea}
          stateExtractor={state => state.get('react-planner')}
        />
      </Provider>
    );
  }
}

ReactPlannerViewer.propTypes = {
  heatMapColors: PropTypes.array,
  heatmapValues: PropTypes.arrayOf(PropTypes.object),
  width: PropTypes.number,
  height: PropTypes.number,
  onSelectArea: PropTypes.func,
  scene: PropTypes.object,
};
ReactPlannerViewer.defaultProps = {
  heatMapValues: [],
  width: 300,
  height: 300,
  onSelectArea: (areaName)=>{},
}

export default ReactPlannerViewer;