react-mapfilter/es5/components/Settings/GeneralSettings.js

A React Component for viewing and filtering GeoJSON

'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

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 _titleFieldTypes; // import PropTypes from 'prop-types'


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _redux = require('redux');

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

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

var _List = require('@material-ui/core/List');

var _List2 = _interopRequireDefault(_List);

var _ListItem = require('@material-ui/core/ListItem');

var _ListItem2 = _interopRequireDefault(_ListItem);

var _ListItemSecondaryAction = require('@material-ui/core/ListItemSecondaryAction');

var _ListItemSecondaryAction2 = _interopRequireDefault(_ListItemSecondaryAction);

var _ListItemText = require('@material-ui/core/ListItemText');

var _ListItemText2 = _interopRequireDefault(_ListItemText);

var _Input = require('@material-ui/core/Input');

var _Input2 = _interopRequireDefault(_Input);

var _FormControl = require('@material-ui/core/FormControl');

var _FormControl2 = _interopRequireDefault(_FormControl);

var _Select = require('@material-ui/core/Select');

var _Select2 = _interopRequireDefault(_Select);

var _field_analysis = require('../../selectors/field_analysis');

var _field_analysis2 = _interopRequireDefault(_field_analysis);

var _field_mapping = require('../../selectors/field_mapping');

var _field_mapping2 = _interopRequireDefault(_field_mapping);

var _FormattedFieldname = require('../Shared/FormattedFieldname');

var _FormattedFieldname2 = _interopRequireDefault(_FormattedFieldname);

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

var _constants = require('../../constants');

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

var titleFieldTypes = (_titleFieldTypes = {}, (0, _defineProperty3.default)(_titleFieldTypes, _constants.FIELD_TYPE_STRING, true), (0, _defineProperty3.default)(_titleFieldTypes, _constants.FIELD_TYPE_DATE, true), _titleFieldTypes);

var styles = {
  select: {
    width: 200
  }
};

var SelectField = function SelectField(_ref) {
  var id = _ref.id,
      value = _ref.value,
      onChange = _ref.onChange,
      children = _ref.children,
      classes = _ref.classes;
  return _react2.default.createElement(
    _FormControl2.default,
    null,
    _react2.default.createElement(
      _Select2.default,
      {
        native: true,
        className: classes.select,
        value: value,
        onChange: onChange,
        input: _react2.default.createElement(_Input2.default, { fullWidth: true, id: id })
      },
      children
    )
  );
};

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

  function GeneralSettings() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, GeneralSettings);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref2 = GeneralSettings.__proto__ || (0, _getPrototypeOf2.default)(GeneralSettings)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (name) {
      return function (e) {
        if (name === 'coords') {
          _this.props.onChangeCoordinates(e.target.value);
        } else {
          _this.props.onChangeFieldMapping(name, e.target.value);
        }
      };
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(GeneralSettings, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          coordFormat = _props.coordFormat,
          fields = _props.fields,
          fieldAnalysis = _props.fieldAnalysis,
          fieldMapping = _props.fieldMapping,
          classes = _props.classes;

      var potentialColoredFields = fields.filter(function (field) {
        return fieldAnalysis.properties[field].filterType === _constants.FILTER_TYPE_DISCRETE;
      });
      var potentialTitleFields = fields.filter(function (field) {
        return titleFieldTypes[fieldAnalysis.properties[field].type];
      });
      return _react2.default.createElement(
        _List2.default,
        null,
        _react2.default.createElement(
          _ListItem2.default,
          null,
          _react2.default.createElement(_ListItemText2.default, { primary: 'Coordinate format' }),
          _react2.default.createElement(
            _ListItemSecondaryAction2.default,
            null,
            _react2.default.createElement(
              SelectField,
              {
                id: 'coords',
                classes: classes,
                value: coordFormat,
                onChange: this.handleChange('coords') },
              _react2.default.createElement(
                'option',
                { value: _constants.FORMATS_DEC_DEG },
                'Decimal degrees'
              ),
              _react2.default.createElement(
                'option',
                { value: _constants.FORMATS_DEG_MIN_SEC },
                'Degrees, minutes, seconds'
              ),
              _react2.default.createElement(
                'option',
                { value: _constants.FORMATS_UTM },
                'UTM'
              )
            )
          )
        ),
        _react2.default.createElement(
          _ListItem2.default,
          null,
          _react2.default.createElement(_ListItemText2.default, { primary: 'Title field' }),
          _react2.default.createElement(
            _ListItemSecondaryAction2.default,
            null,
            _react2.default.createElement(
              SelectField,
              {
                id: 'title-field',
                fullWidth: true,
                classes: classes,
                value: fieldMapping.title,
                onChange: this.handleChange('title') },
              potentialTitleFields.map(function (field, i) {
                return _react2.default.createElement(
                  _FormattedFieldname2.default,
                  { key: i, fieldname: field },
                  function (msg) {
                    return _react2.default.createElement(
                      'option',
                      { value: field },
                      msg
                    );
                  }
                );
              })
            )
          )
        ),
        _react2.default.createElement(
          _ListItem2.default,
          null,
          _react2.default.createElement(_ListItemText2.default, { primary: 'Subtitle field' }),
          _react2.default.createElement(
            _ListItemSecondaryAction2.default,
            null,
            _react2.default.createElement(
              SelectField,
              {
                id: 'subtitle-field',
                value: fieldMapping.subtitle,
                classes: classes,
                onChange: this.handleChange('subtitle') },
              potentialTitleFields.map(function (field, i) {
                return _react2.default.createElement(
                  _FormattedFieldname2.default,
                  { key: i, fieldname: field },
                  function (msg) {
                    return _react2.default.createElement(
                      'option',
                      { value: field },
                      msg
                    );
                  }
                );
              })
            )
          )
        ),
        _react2.default.createElement(
          _ListItem2.default,
          null,
          _react2.default.createElement(_ListItemText2.default, { primary: 'Colored field' }),
          _react2.default.createElement(
            _ListItemSecondaryAction2.default,
            null,
            _react2.default.createElement(
              SelectField,
              {
                id: 'colored-field',
                classes: classes,
                value: fieldMapping.color,
                onChange: this.handleChange('color') },
              potentialColoredFields.map(function (field, i) {
                return _react2.default.createElement(
                  _FormattedFieldname2.default,
                  { key: i, fieldname: field },
                  function (msg) {
                    return _react2.default.createElement(
                      'option',
                      { value: field },
                      msg
                    );
                  }
                );
              })
            )
          )
        )
      );
    }
  }]);
  return GeneralSettings;
}(_react2.default.Component);

function mapStateToProps(state) {
  return {
    coordFormat: state.settings.coordFormat,
    fields: (0, _keys2.default)((0, _field_analysis2.default)(state).properties),
    fieldAnalysis: (0, _field_analysis2.default)(state),
    fieldMapping: (0, _field_mapping2.default)(state)
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onChangeCoordinates: function onChangeCoordinates(coordFormat) {
      console.log(coordFormat);
      dispatch((0, _action_creators.changeCoordinates)(coordFormat));
    },
    onChangeFieldMapping: function onChangeFieldMapping(type, field) {
      return dispatch((0, _action_creators.updateFieldMapping)({ type: type, field: field }));
    }
  };
}

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