react-mapfilter/es5/containers/App.js

A React Component for viewing and filtering GeoJSON

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _styles = require('@material-ui/core/styles');

var _redux = require('redux');

var _find = require('lodash/find');

var _find2 = _interopRequireDefault(_find);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _ViewContainer = require('./ViewContainer');

var _ViewContainer2 = _interopRequireDefault(_ViewContainer);

var _AppBar = require('../components/AppBar');

var _AppBar2 = _interopRequireDefault(_AppBar);

var _action_creators = require('../action_creators');

var actionCreators = _interopRequireWildcard(_action_creators);

var _Dialog = require('@material-ui/core/Dialog');

var _Dialog2 = _interopRequireDefault(_Dialog);

var _ConnectFilterPane = require('./ConnectFilterPane');

var _ConnectFilterPane2 = _interopRequireDefault(_ConnectFilterPane);

var _ConnectFeatureDetail = require('./ConnectFeatureDetail');

var _ConnectFeatureDetail2 = _interopRequireDefault(_ConnectFeatureDetail);

var _Settings = require('../components/Settings');

var _Settings2 = _interopRequireDefault(_Settings);

var _MapView = require('../components/MapView');

var _MapView2 = _interopRequireDefault(_MapView);

var _ReportView = require('../components/ReportView');

var _ReportView2 = _interopRequireDefault(_ReportView);

var _MediaView = require('../components/MediaView');

var _MediaView2 = _interopRequireDefault(_MediaView);

var _general_helpers = require('../util/general_helpers');

var _PrintDialog = require('../components/PrintDialog');

var _PrintDialog2 = _interopRequireDefault(_PrintDialog);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = function styles(theme) {
  var _modalPaper;

  return {
    outer: {
      position: 'fixed',
      top: 0,
      bottom: 0,
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      '@media print': {
        display: 'block',
        position: 'static',
        bottom: 'auto'
      }
    },
    inner: {
      display: 'flex',
      flex: 1,
      '@media print': {
        display: 'block'
      }
    },
    modalRoot: {
      display: 'block',
      overflow: 'scroll'
    },
    modalPaper: (_modalPaper = {}, (0, _defineProperty3.default)(_modalPaper, theme.breakpoints.down('sm'), {
      padding: 0
    }), (0, _defineProperty3.default)(_modalPaper, 'backgroundColor', 'initial'), (0, _defineProperty3.default)(_modalPaper, 'maxHeight', 'initial'), (0, _defineProperty3.default)(_modalPaper, 'minHeight', '100%'), (0, _defineProperty3.default)(_modalPaper, 'position', 'relative'), (0, _defineProperty3.default)(_modalPaper, 'margin', '0 auto'), (0, _defineProperty3.default)(_modalPaper, 'padding', 32), (0, _defineProperty3.default)(_modalPaper, 'boxSizing', 'border-box'), (0, _defineProperty3.default)(_modalPaper, 'display', 'flex'), (0, _defineProperty3.default)(_modalPaper, 'alignItems', 'center'), (0, _defineProperty3.default)(_modalPaper, 'justifyContent', 'center'), (0, _defineProperty3.default)(_modalPaper, 'boxShadow', 'none'), _modalPaper),
    modalPaperMd: {
      maxWidth: 800
    },
    view: {
      flex: 3,
      position: 'relative'
    },
    actionButton: {
      position: 'absolute',
      bottom: 36,
      right: 36,
      zIndex: 2,
      '@media only print': {
        display: 'none'
      }
    },
    '@global': {
      '@media only print': {
        'body, html': {
          overflow: 'visible'
        },
        '.d-print-none': {
          display: 'none'
        },
        /* Override display: flex which breaks page-break-after */
        // Fix for page-break-after not working in Chrome see http://stackoverflow.com/questions/4884380/css-page-break-not-working-in-all-browsers/5314590
        div: {
          float: 'none !important'
        },
        /* TODO include some form of MapFilter header */
        /* TODO rotate the filter display and show state vs. allow interaction */
        '.mapboxgl-control-container': {
          display: 'none'
        }
      }
    }
  };
};

var App = function (_React$Component) {
  (0, _inherits3.default)(App, _React$Component);

  function App() {
    (0, _classCallCheck3.default)(this, App);
    return (0, _possibleConstructorReturn3.default)(this, (App.__proto__ || (0, _getPrototypeOf2.default)(App)).apply(this, arguments));
  }

  (0, _createClass3.default)(App, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.redirectIfNecessary(this.props);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.redirectIfNecessary(nextProps);
    }
  }, {
    key: 'redirectIfNecessary',
    value: function redirectIfNecessary(_ref) {
      var activeModal = _ref.activeModal,
          activeView = _ref.activeView,
          views = _ref.views,
          redirectView = _ref.redirectView;

      if (!(0, _find2.default)(views, { MfViewId: activeView })) return redirectView(views[0].MfViewId);
      // if (activeModal && !getModalComponent(activeModal)) redirectView(activeView)
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          activeView = _props.activeView,
          activeModal = _props.activeModal,
          actionButton = _props.actionButton,
          classes = _props.classes,
          views = _props.views,
          switchView = _props.switchView,
          closeModal = _props.closeModal,
          appBarMenuItems = _props.appBarMenuItems,
          detailViewButtons = _props.detailViewButtons,
          settingsTab = _props.settingsTab,
          appBarButtons = _props.appBarButtons,
          appBarTitle = _props.appBarTitle,
          willPrint = _props.willPrint,
          paperSize = _props.paperSize,
          cancelPrint = _props.cancelPrint,
          changePaperSize = _props.changePaperSize,
          mapControls = _props.mapControls;

      var ViewComponent = getViewComponent(activeView, views);

      return _react2.default.createElement(
        'div',
        { className: classes.outer },
        _react2.default.createElement(_AppBar2.default, {
          views: views,
          activeView: activeView,
          onChangeTab: switchView,
          buttons: appBarButtons,
          menuItems: appBarMenuItems,
          title: appBarTitle }),
        _react2.default.createElement(
          'div',
          { className: classes.inner },
          _react2.default.createElement(_ConnectFilterPane2.default, null),
          _react2.default.createElement(
            'div',
            { className: classes.view },
            _react2.default.createElement(_ViewContainer2.default, { component: ViewComponent, mapControls: activeView === 'map' ? mapControls : undefined })
          ),
          actionButton && _react2.default.createElement(
            'div',
            { className: classes.actionButton },
            (0, _general_helpers.createElement)(actionButton)
          )
        ),
        _react2.default.createElement(
          _Dialog2.default,
          {
            onClose: closeModal,
            open: activeModal === 'feature',
            fullWidth: true,
            maxWidth: 'md',
            classes: { root: classes.modalRoot, paper: classes.modalPaper, paperWidthMd: classes.modalPaperMd } },
          _react2.default.createElement(_ConnectFeatureDetail2.default, { detailViewButtons: detailViewButtons, onRequestClose: closeModal }),
          '}'
        ),
        _react2.default.createElement(
          _Dialog2.default,
          {
            onClose: closeModal,
            open: activeModal === 'settings',
            fullWidth: true,
            classes: { root: classes.modalRoot, paper: classes.modalPaper } },
          _react2.default.createElement(_Settings2.default, { activeTabId: settingsTab, onRequestClose: closeModal }),
          '}'
        ),
        _react2.default.createElement(_PrintDialog2.default, {
          onClose: cancelPrint,
          open: willPrint,
          onChangePaperSize: changePaperSize,
          paperSize: paperSize })
      );
    }
  }]);
  return App;
}(_react2.default.Component);

App.defaultProps = {
  views: [_MapView2.default, _MediaView2.default, _ReportView2.default],
  activeView: 'map'
};

function getViewComponent(activeView, views) {
  var view = (0, _find2.default)(views, { MfViewId: activeView });
  if (!view) return function () {
    return _react2.default.createElement('div', null);
  };
  return view;
}

exports.default = (0, _reactRedux.connect)(function (state) {
  return (0, _objectAssign2.default)({}, state.ui || {}, state.print);
}, function (dispatch) {
  return (0, _redux.bindActionCreators)(actionCreators, dispatch);
})((0, _styles.withStyles)(styles)(App));
//# sourceMappingURL=App.js.map