react-mapfilter/es5/components/MapView/Popup.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 _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 _redux = require('redux');

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

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

var _Typography2 = _interopRequireDefault(_Typography);

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Image = require('../Image');

var _Image2 = _interopRequireDefault(_Image);

var _FormattedValue = require('../Shared/FormattedValue');

var _FormattedValue2 = _interopRequireDefault(_FormattedValue);

var _features_by_id = require('../../selectors/features_by_id');

var _features_by_id2 = _interopRequireDefault(_features_by_id);

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

var _field_mapping2 = _interopRequireDefault(_field_mapping);

var _color_index = require('../../selectors/color_index');

var _color_index2 = _interopRequireDefault(_color_index);

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

var _field_analysis2 = _interopRequireDefault(_field_analysis);

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

var styles = {
  wrapper: {
    width: 200,
    padding: 0,
    backgroundColor: 'black',
    cursor: 'pointer',
    position: 'absolute',
    willChange: 'transform',
    top: 0,
    left: 0,
    pointerEvents: 'none'
  },
  wrapperImage: {
    height: 200
  },
  image: {
    width: 200,
    height: 200,
    objectFit: 'cover',
    display: 'block',
    background: '#000000'
  },
  titleBox: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    color: 'white',
    padding: '0.25em 0.5em',
    boxSizing: 'border-box'
  },
  title: {
    color: 'white'
  },
  subheading: {
    color: 'white'
  }
};

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

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

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

    _this.state = {};

    _this.update = function (lngLat) {
      if (!Array.isArray(lngLat) || lngLat.length !== 2) lngLat = _this.props.lngLat;
      var w = _this._el.offsetWidth;
      var h = _this._el.offsetHeight;
      _this.setState({
        transform: getPopupTransform(_this.map, lngLat, w, h, _this.props.offset)
      });
    };

    _this.map = props.map;
    return _this;
  }

  (0, _createClass3.default)(Popup, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var lngLat = this.props.lngLat;

      this.map.on('move', this.update);
      this.update(lngLat);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(_ref) {
      var lngLat = _ref.lngLat;

      this.update(lngLat);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.map.off('move', this.update);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          media = _props.media,
          title = _props.title,
          subtitle = _props.subtitle,
          classes = _props.classes,
          titleType = _props.titleType,
          subtitleType = _props.subtitleType;
      var transform = this.state.transform;


      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(classes.wrapper, (0, _defineProperty3.default)({}, classes.wrapperImage, media)), style: { transform: transform }, ref: function ref(el) {
            return _this2._el = el;
          } },
        media && _react2.default.createElement(_Image2.default, { src: media, className: classes.image }),
        _react2.default.createElement(
          'div',
          { className: classes.titleBox },
          title && _react2.default.createElement(
            _Typography2.default,
            { variant: 'title', className: classes.title },
            _react2.default.createElement(_FormattedValue2.default, { value: title, type: titleType })
          ),
          subtitle && _react2.default.createElement(
            _Typography2.default,
            { variant: 'subheading', className: classes.subheading },
            _react2.default.createElement(_FormattedValue2.default, { value: subtitle, type: subtitleType })
          )
        )
      );
    }
  }]);
  return Popup;
}(_react2.default.Component);

Popup.defaultProps = {
  offset: {
    x: 0,
    y: 0
  }
};


function getPopupTransform(map, lngLat, width, height) {
  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : { x: 0, y: 0 };

  var pos = map.project(lngLat).round();
  var anchor = void 0;

  if (pos.y < height) {
    anchor = 'top';
  } else {
    anchor = 'bottom';
  }

  if (pos.x > map.transform.width - width) {
    anchor += '-right';
  } else {
    anchor += '-left';
  }

  var anchorTranslate = {
    'top-left': 'translate(0,0)',
    'top-right': 'translate(-100%,0)',
    'bottom-left': 'translate(0,-100%)',
    'bottom-right': 'translate(-100%,-100%)'
  };

  return anchorTranslate[anchor] + ' translate(' + (pos.x + offset.x) + 'px,' + (pos.y + offset.y) + 'px)';
}

var mapStateToProps = function mapStateToProps(state, ownProps) {
  var featuresById = (0, _features_by_id2.default)(state);
  var colorIndex = (0, _color_index2.default)(state);
  var fieldMapping = (0, _field_mapping2.default)(state);
  var feature = featuresById[ownProps.id];
  if (!feature) return {};
  var geojsonProps = feature.properties;
  var fieldAnalysisProps = (0, _field_analysis2.default)(state).properties;
  return {
    media: geojsonProps[fieldMapping.media],
    title: geojsonProps[fieldMapping.title],
    subtitle: geojsonProps[fieldMapping.subtitle],
    color: colorIndex[geojsonProps[fieldMapping.color]],
    titleType: fieldAnalysisProps[fieldMapping.title] && fieldAnalysisProps[fieldMapping.title].type,
    subtitleType: fieldAnalysisProps[fieldMapping.subtitle] && fieldAnalysisProps[fieldMapping.subtitle].type
  };
};

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