react-mapfilter/es5/components/Settings/Settings.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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _redux = require('redux');

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

var _Card = require('@material-ui/core/Card');

var _Card2 = _interopRequireDefault(_Card);

var _CardHeader = require('@material-ui/core/CardHeader');

var _CardHeader2 = _interopRequireDefault(_CardHeader);

var _IconButton = require('@material-ui/core/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _ButtonBase = require('@material-ui/core/ButtonBase');

var _ButtonBase2 = _interopRequireDefault(_ButtonBase);

var _Close = require('@material-ui/icons/Close');

var _Close2 = _interopRequireDefault(_Close);

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

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _FilterSettings = require('./FilterSettings');

var _FilterSettings2 = _interopRequireDefault(_FilterSettings);

var _GeneralSettings = require('./GeneralSettings');

var _GeneralSettings2 = _interopRequireDefault(_GeneralSettings);

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

var styles = {
  card: {
    maxHeight: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    position: 'relative'
  },
  title: {
    borderBottom: '1px solid #e0e0e0',
    boxSizing: 'border-box',
    padding: '1em',
    position: 'relative'
  },
  tabList: {
    borderRight: '1px solid #e0e0e0',
    flex: 1
  },
  tab: {
    justifyContent: 'left',
    textAlign: 'left',
    paddingLeft: 16,
    paddingRight: 16,
    fontSize: 13,
    height: 48,
    width: '100%'
  },
  tabActive: {
    backgroundColor: 'rgba(0,0,0,.05)',
    fontWeight: 'bold'
  },
  body: {
    display: 'flex'
  },
  content: {
    flex: 3,
    padding: 16
  },
  cardContainerStyle: {
    flex: 1,
    flexDirection: 'column',
    display: 'flex'
  },
  header: {
    lineHeight: '22px',
    boxSizing: 'content-box',
    borderBottom: '1px solid #cccccc'
  },
  icon: {
    position: 'absolute',
    top: 7,
    right: 7,
    zIndex: 1
  },
  scrollable: {
    overflow: 'auto'
  }
};

var messages = (0, _reactIntl.defineMessages)({
  settingsTitle: {
    'id': 'settings.title',
    'defaultMessage': 'Settings'
  },
  filters: {
    'id': 'settings.filters',
    'defaultMessage': 'Change Filters'
  },
  fields: {
    'id': 'settings.fields',
    'defaultMessage': 'Visible Fields'
  },
  general: {
    'id': 'settings.general',
    'defaultMessage': 'General'
  }
});

var tabs = [{
  id: 'filters',
  component: _FilterSettings2.default
}, {
  id: 'general',
  component: _GeneralSettings2.default
}];

var Tab = function Tab(_ref) {
  var active = _ref.active,
      label = _ref.label,
      onClick = _ref.onClick,
      classes = _ref.classes;
  return _react2.default.createElement(
    _ButtonBase2.default,
    {
      disableRipple: true,
      className: (0, _classnames2.default)(classes.tab, (0, _defineProperty3.default)({}, classes.tabActive, active)),
      onClick: onClick },
    label
  );
};

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

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

  (0, _createClass3.default)(Settings, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          onRequestClose = _props.onRequestClose,
          activeTabId = _props.activeTabId,
          onChangeTab = _props.onChangeTab,
          classes = _props.classes,
          className = _props.className;

      var tabIndex = getTabIndex(activeTabId);
      var TabComponent = tabs[tabIndex].component;
      return _react2.default.createElement(
        _Card2.default,
        { className: (0, _classnames2.default)(classes.card, className) },
        _react2.default.createElement(
          _IconButton2.default,
          { className: classes.icon, onClick: onRequestClose },
          _react2.default.createElement(_Close2.default, null)
        ),
        _react2.default.createElement(_CardHeader2.default, {
          className: classes.title,
          title: _react2.default.createElement(_reactIntl.FormattedMessage, messages.settingsTitle) }),
        _react2.default.createElement(
          'div',
          { className: classes.body },
          _react2.default.createElement(
            'div',
            { className: classes.tabList },
            tabs.map(function (tab, i) {
              return _react2.default.createElement(Tab, {
                key: i,
                label: _react2.default.createElement(_reactIntl.FormattedMessage, messages[tab.id]),
                active: i === tabIndex,
                classes: classes,
                onClick: function onClick(e) {
                  return onChangeTab(tab.id, e);
                } });
            })
          ),
          _react2.default.createElement(
            'div',
            { className: classes.content },
            _react2.default.createElement(TabComponent, null)
          )
        )
      );
    }
  }]);
  return Settings;
}(_react2.default.Component);

Settings.propTypes = {
  onRequestClose: _propTypes2.default.func.isRequired,
  onChangeTab: _propTypes2.default.func.isRequired,
  activeTabId: _propTypes2.default.string
};


function getTabIndex(tabId) {
  for (var i = 0; i < tabs.length; i++) {
    if (tabs[i].id === tabId) return i;
  }
  return 0;
}

function mapDispatchToProps(dispatch) {
  return {
    onChangeTab: function onChangeTab(settingsTab) {
      return dispatch((0, _action_creators.openSettings)(settingsTab));
    }
  };
}

function mapStateToProps(state) {
  return {
    filters: state.filters, filterFields: state.filterFields
  };
}

exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(styles))(Settings);
//# sourceMappingURL=Settings.js.map