react-mapfilter/es5/components/AppBar.js

A React Component for viewing and filtering GeoJSON

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _AppBar = require('@material-ui/core/AppBar');

var _AppBar2 = _interopRequireDefault(_AppBar);

var _Toolbar = require('@material-ui/core/Toolbar');

var _Toolbar2 = _interopRequireDefault(_Toolbar);

var _Typography = require('@material-ui/core/Typography');

var _Typography2 = _interopRequireDefault(_Typography);

var _Tabs = require('@material-ui/core/Tabs');

var _Tabs2 = _interopRequireDefault(_Tabs);

var _Tab = require('@material-ui/core/Tab');

var _Tab2 = _interopRequireDefault(_Tab);

var _reactIntl = require('react-intl');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _ViewContainer2 = _interopRequireDefault(_ViewContainer);

var _ConnectMenuButton = require('../containers/ConnectMenuButton');

var _ConnectMenuButton2 = _interopRequireDefault(_ConnectMenuButton);

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

var styleSheet = function styleSheet(theme) {
  var _heights, _tabLabels;

  return {
    root: {
      '@media print': {
        display: 'none'
      }
    },
    toolbar: {
      justifyContent: 'space-between',
      '-webkit-font-smoothing': 'antialiased'
    },
    buttons: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    heights: (_heights = {
      minHeight: 48
    }, (0, _defineProperty3.default)(_heights, theme.breakpoints.up('md'), {
      minHeight: 56
    }), (0, _defineProperty3.default)(_heights, theme.breakpoints.up('lg'), {
      minHeight: 64
    }), _heights),
    tabLabels: (_tabLabels = {}, (0, _defineProperty3.default)(_tabLabels, theme.breakpoints.up('md'), {
      fontSize: theme.typography.fontSize
    }), (0, _defineProperty3.default)(_tabLabels, theme.breakpoints.up('lg'), {
      fontSize: theme.typography.fontSize + 1
    }), _tabLabels)
  };
};

var messages = (0, _reactIntl.defineMessages)({
  map: {
    'id': 'view.map.name',
    'defaultMessage': 'Map'
  },
  media: {
    'id': 'view.media.name',
    'defaultMessage': 'Media'
  },
  report: {
    'id': 'view.report.name',
    'defaultMessage': 'Report'
  }
});

var getViewMessage = function getViewMessage(viewId) {
  return {
    id: 'view.' + viewId + '.name',
    defaultMessage: viewId
  };
};

function AppBar(_ref) {
  var activeView = _ref.activeView,
      views = _ref.views,
      onChangeTab = _ref.onChangeTab,
      buttons = _ref.buttons,
      title = _ref.title,
      menuItems = _ref.menuItems,
      classes = _ref.classes;

  title = typeof title === 'string' ? _react2.default.createElement(
    _Typography2.default,
    { variant: 'title', color: 'inherit' },
    title
  ) : title;
  return _react2.default.createElement(
    _AppBar2.default,
    { position: 'static', className: classes.root },
    _react2.default.createElement(
      _Toolbar2.default,
      { className: (0, _classnames2.default)(classes.toolbar, classes.heights) },
      title,
      _react2.default.createElement(
        _Tabs2.default,
        {
          value: activeView,
          onChange: function onChange(e, value) {
            return onChangeTab(value);
          },
          centered: true
        },
        views.map(function (view) {
          return _react2.default.createElement(_Tab2.default, {
            key: view.MfViewId,
            label: _react2.default.createElement(_reactIntl.FormattedMessage, messages[view.MfViewId] || getViewMessage(view.MfViewId)),
            className: classes.heights,
            classes: { label: classes.tabLabels },
            value: view.MfViewId
          });
        })
      ),
      _react2.default.createElement(
        'div',
        { className: classes.buttons },
        buttons.map(function (button, i) {
          return _react2.default.createElement(_ViewContainer2.default, { key: i, component: button });
        }),
        _react2.default.createElement(_ConnectMenuButton2.default, { menuItems: menuItems })
      )
    )
  );
}

AppBar.defaultProps = {
  buttons: [],
  title: 'MapFilter',
  views: []
};

AppBar.propTypes = {
  buttons: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func])),
  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
  views: _propTypes2.default.arrayOf(_propTypes2.default.func)
};

exports.default = (0, _styles.withStyles)(styleSheet)(AppBar);
//# sourceMappingURL=AppBar.js.map