react-mapfilter/es5/components/FeatureDetail/FeatureDetail.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 _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Paper = require('@material-ui/core/Paper');

var _Paper2 = _interopRequireDefault(_Paper);

var _Button = require('@material-ui/core/Button');

var _Button2 = _interopRequireDefault(_Button);

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

var _IconButton2 = _interopRequireDefault(_IconButton);

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

var _Close2 = _interopRequireDefault(_Close);

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

var _Edit = require('@material-ui/icons/Edit');

var _Edit2 = _interopRequireDefault(_Edit);

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

var _Dialog2 = _interopRequireDefault(_Dialog);

var _DialogActions = require('@material-ui/core/DialogActions');

var _DialogActions2 = _interopRequireDefault(_DialogActions);

var _DialogTitle = require('@material-ui/core/DialogTitle');

var _DialogTitle2 = _interopRequireDefault(_DialogTitle);

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

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

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _flat = require('flat');

var _MediaCarousel = require('./MediaCarousel');

var _MediaCarousel2 = _interopRequireDefault(_MediaCarousel);

var _FeatureTable = require('../Shared/FeatureTable');

var _FeatureTable2 = _interopRequireDefault(_FeatureTable);

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

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

var styles = {
  root: {
    width: '100%',
    position: 'relative',
    backgroundColor: 'white'
  },
  closeButton: {
    position: 'absolute',
    top: 0,
    right: 0,
    zIndex: 500,
    color: 'white',
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 0
  }
};

var messages = (0, _reactIntl.defineMessages)({
  editButton: {
    'id': 'feature.editButton',
    'defaultMessage': 'Edit'
  },
  closeButton: {
    'id': 'feature.closeButton',
    'defaultMessage': 'Close'
  },
  deleteButton: {
    'id': 'feature.deleteButton',
    'defaultMessage': 'Delete'
  },
  cancelButton: {
    'id': 'feature.cancelButton',
    'defaultMessage': 'Cancel'
  },
  saveButton: {
    'id': 'feature.saveButton',
    'defaultMessage': 'Save'
  }
});

var ViewActions = function ViewActions(_ref) {
  var onCloseClick = _ref.onCloseClick,
      onEditClick = _ref.onEditClick,
      detailViewButtons = _ref.detailViewButtons,
      classes = _ref.classes;
  return _react2.default.createElement(
    _DialogActions2.default,
    null,
    detailViewButtons,
    _react2.default.createElement(
      _Button2.default,
      {
        id: 'FeatureDetail-edit',
        variant: 'raised',
        icon: _react2.default.createElement(_Edit2.default, null),
        onClick: onEditClick },
      _react2.default.createElement(_reactIntl.FormattedMessage, messages.editButton)
    ),
    _react2.default.createElement(
      _Button2.default,
      {
        id: 'FeatureDetail-close',
        variant: 'raised',
        color: 'primary',
        onClick: onCloseClick },
      _react2.default.createElement(_reactIntl.FormattedMessage, messages.closeButton)
    )
  );
};

var EditActions = function EditActions(_ref2) {
  var onCancelClick = _ref2.onCancelClick,
      onSaveClick = _ref2.onSaveClick,
      onDeleteClick = _ref2.onDeleteClick,
      classes = _ref2.classes;
  return _react2.default.createElement(
    _DialogActions2.default,
    null,
    _react2.default.createElement(
      _Button2.default,
      {
        id: 'FeatureDetail-delete',
        color: 'accent',
        variant: 'raised',
        onClick: onDeleteClick },
      _react2.default.createElement(_reactIntl.FormattedMessage, messages.deleteButton)
    ),
    _react2.default.createElement(
      _Button2.default,
      {
        id: 'FeatureDetail-cancel-edit',
        variant: 'raised',
        onClick: onCancelClick,
        className: classes.button },
      _react2.default.createElement(_reactIntl.FormattedMessage, messages.cancelButton)
    ),
    _react2.default.createElement(
      _Button2.default,
      {
        raised: true,
        id: 'FeatureDetail-save-edit',
        color: 'primary',
        onClick: onSaveClick },
      _react2.default.createElement(_reactIntl.FormattedMessage, messages.saveButton)
    )
  );
};

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

  function FeatureDetail(props) {
    (0, _classCallCheck3.default)(this, FeatureDetail);

    var _this = (0, _possibleConstructorReturn3.default)(this, (FeatureDetail.__proto__ || (0, _getPrototypeOf2.default)(FeatureDetail)).call(this, props));

    _this.handleEditClick = function () {
      _this.setState({
        editMode: true,
        feature: _this.props.feature
      });
    };

    _this.handleCancelClick = function () {
      _this.setState({ editMode: false });
    };

    _this.handleSaveClick = function () {
      if (_this.state.feature !== _this.props.feature) {
        var newFeature = untransformFeature(_this.state.feature, _this.props.fieldAnalysis);
        _this.props.onEditFeature(newFeature);
      }
      _this.setState({ editMode: false });
    };

    _this.handleValueChange = function (key, value) {
      var feature = _this.state.feature;
      var newFeature = (0, _objectAssign2.default)({}, feature, {
        properties: (0, _objectAssign2.default)({}, feature.properties, (0, _defineProperty3.default)({}, key, value))
      });
      _this.setState({ feature: newFeature });
    };

    _this.handleDeleteConfirm = function () {
      _this.props.onDeleteFeature(_this.props.feature.id);
      // this.props.onRequestClose()
    };

    _this.state = {
      editMode: false,
      confirmDelete: false
    };
    if (!props.feature) props.onRequestClose();
    return _this;
  }

  (0, _createClass3.default)(FeatureDetail, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!nextProps.feature) return nextProps.onRequestClose();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          feature = _props.feature,
          onRequestClose = _props.onRequestClose,
          fieldOrder = _props.fieldOrder,
          classes = _props.classes,
          media = _props.media,
          detailViewButtons = _props.detailViewButtons,
          coordFormat = _props.coordFormat,
          fieldAnalysis = _props.fieldAnalysis;
      var _state = this.state,
          editMode = _state.editMode,
          editedFeature = _state.feature;

      if (!feature) return null;
      return _react2.default.createElement(
        _Paper2.default,
        { className: classes.root, elevation: 24 },
        _react2.default.createElement(
          _IconButton2.default,
          { onClick: onRequestClose, className: classes.closeButton },
          _react2.default.createElement(_Close2.default, null)
        ),
        !!media.length && _react2.default.createElement(_MediaCarousel2.default, { media: media }),
        _react2.default.createElement(_FeatureTable2.default, {
          editMode: editMode,
          feature: editMode ? editedFeature : feature,
          fieldAnalysis: fieldAnalysis,
          fieldOrder: fieldOrder,
          coordFormat: coordFormat,
          onValueChange: this.handleValueChange
        }),
        editMode ? _react2.default.createElement(EditActions, {
          classes: classes,
          onCancelClick: this.handleCancelClick,
          onSaveClick: this.handleSaveClick,
          onDeleteClick: function onDeleteClick() {
            return _this2.setState({ confirmDelete: true });
          } }) : _react2.default.createElement(ViewActions, {
          detailViewButtons: detailViewButtons.map(function (button) {
            return _react2.default.cloneElement(button, { feature: feature, onRequestClose: onRequestClose });
          }),
          classes: classes,
          onEditClick: this.handleEditClick,
          onCloseClick: onRequestClose }),
        _react2.default.createElement(
          _Dialog2.default,
          { ignoreBackdropClick: true, open: this.state.confirmDelete, maxWidth: 'xs', fullWidth: true },
          _react2.default.createElement(
            _DialogTitle2.default,
            null,
            'Delete Feature?'
          ),
          _react2.default.createElement(
            _DialogActions2.default,
            null,
            _react2.default.createElement(
              _Button2.default,
              { id: 'DeleteConfirm-cancel', onClick: function onClick() {
                  return _this2.setState({ confirmDelete: false });
                }, color: 'primary' },
              'Cancel'
            ),
            _react2.default.createElement(
              _Button2.default,
              { id: 'DeleteConfirm-ok', onClick: this.handleDeleteConfirm, color: 'primary' },
              'Ok'
            )
          )
        )
      );
    }
  }]);
  return FeatureDetail;
}(_react2.default.Component);

FeatureDetail.propTypes = {
  feature: _propTypes2.default.object.isRequired,
  onRequestClose: _propTypes2.default.func.isRequired,
  fieldOrder: _propTypes2.default.object,
  classes: _propTypes2.default.object.isRequired,
  media: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    fieldname: _propTypes2.default.string.isRequired,
    value: _propTypes2.default.string.isRequired
  })),
  coordFormat: _propTypes2.default.string.isRequired,
  fieldAnalysis: _propTypes2.default.object.isRequired,
  onDeleteFeature: _propTypes2.default.func.isRequired,
  onEditFeature: _propTypes2.default.func.isRequired
};

FeatureDetail.defaultProps = {
  coordFormat: _constants.FORMATS_DEC_DEG,
  detailViewButtons: [],
  media: [],
  fieldOrder: {}

  // The selectors transform input features, we want to undo this before we save
};function untransformFeature(feature, fieldAnalysis) {
  var newProps = {};
  var prevProps = feature.properties;
  (0, _keys2.default)(prevProps).forEach(function (key) {
    if (typeof prevProps[key] === 'string') {
      newProps[key] = prevProps[key].trim();
    }
    switch (fieldAnalysis.properties[key].type) {
      case _constants.FIELD_TYPE_SPACE_DELIMITED:
        newProps[key] = Array.isArray(prevProps[key]) ? prevProps[key].join(' ') : prevProps[key];
        break;
      default:
        newProps[key] = prevProps[key];
    }
  });
  return (0, _flat.unflatten)((0, _objectAssign2.default)({}, feature, {
    properties: newProps
  }));
}

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