@lyra/google-maps-input/lib/GeopointInput.js

Lyra plugin providing input handlers for geo-related input types using Google Maps

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _googleMapsInput = require('config:@lyra/google-maps-input');

var _googleMapsInput2 = _interopRequireDefault(_googleMapsInput);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/dialogs/default');

var _default4 = _interopRequireDefault(_default3);

var _default5 = require('part:@lyra/components/fieldsets/default');

var _default6 = _interopRequireDefault(_default5);

var _patchEvent = require('part:@lyra/form-builder/patch-event');

var _GeopointInput = require('../styles/GeopointInput.css');

var _GeopointInput2 = _interopRequireDefault(_GeopointInput);

var _GeopointSelect = require('./GeopointSelect');

var _GeopointSelect2 = _interopRequireDefault(_GeopointSelect);

var _GoogleMapsLoadProxy = require('./GoogleMapsLoadProxy');

var _GoogleMapsLoadProxy2 = _interopRequireDefault(_GoogleMapsLoadProxy);

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

const getLocale = context => {
  const intl = context.intl || {};
  return intl.locale || typeof window !== 'undefined' && window.navigator.language || 'en';
};

const getStaticImageUrl = value => {
  const loc = `${value.lat},${value.lng}`;
  const params = {
    key: _googleMapsInput2.default.apiKey,
    center: loc,
    markers: loc,
    zoom: 13,
    scale: 2,
    size: '640x300'
  };

  const qs = Object.keys(params).reduce((res, param) => {
    return res.concat(`${param}=${encodeURIComponent(params[param])}`);
  }, []);

  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`;
};

class GeopointInput extends _react2.default.Component {

  constructor() {
    super();

    this.handleChange = latLng => {
      var _props = this.props;
      const type = _props.type,
            onChange = _props.onChange;

      onChange(_patchEvent.PatchEvent.from([(0, _patchEvent.setIfMissing)({
        _type: type.name
      }), (0, _patchEvent.set)(latLng.lat(), ['lat']), (0, _patchEvent.set)(latLng.lng(), ['lng'])]));
    };

    this.handleClear = () => {
      const onChange = this.props.onChange;

      onChange(_patchEvent.PatchEvent.from((0, _patchEvent.unset)()));
    };

    this.handleToggleModal = this.handleToggleModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);

    this.state = {
      modalOpen: false
    };
  }

  handleToggleModal() {
    this.setState(prevState => ({ modalOpen: !prevState.modalOpen }));
  }

  handleCloseModal() {
    this.setState({ modalOpen: false });
  }

  render() {
    var _props2 = this.props;
    const value = _props2.value,
          type = _props2.type,
          markers = _props2.markers;


    if (!_googleMapsInput2.default || !_googleMapsInput2.default.apiKey) {
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'p',
          null,
          'The',
          ' ',
          _react2.default.createElement(
            'a',
            { href: 'https://vegapublish.com/docs/schema-types/geopoint-type' },
            'Geopoint type'
          ),
          ' ',
          'needs a Google Maps API key with access to:'
        ),
        _react2.default.createElement(
          'ul',
          null,
          _react2.default.createElement(
            'li',
            null,
            'Google Maps JavaScript API'
          ),
          _react2.default.createElement(
            'li',
            null,
            'Google Places API Web Service'
          ),
          _react2.default.createElement(
            'li',
            null,
            'Google Static Maps API'
          )
        ),
        _react2.default.createElement(
          'p',
          null,
          'Please enter the API key with access to these services in',
          _react2.default.createElement(
            'code',
            { style: { whitespace: 'nowrap' } },
            '`<project-root>/config/@lyra/google-maps-input.json`'
          )
        )
      );
    }

    return _react2.default.createElement(
      _default6.default,
      {
        legend: type.title,
        description: type.description,
        className: _GeopointInput2.default.root,
        markers: markers
      },
      value && _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('img', {
          className: _GeopointInput2.default.previewImage,
          src: getStaticImageUrl(value)
        })
      ),
      _react2.default.createElement(
        'div',
        { className: _GeopointInput2.default.functions },
        _react2.default.createElement(
          _default2.default,
          { onClick: this.handleToggleModal },
          value ? 'Edit' : 'Set location'
        ),
        value && _react2.default.createElement(
          _default2.default,
          { type: 'button', onClick: this.handleClear },
          'Remove'
        )
      ),
      this.state.modalOpen && _react2.default.createElement(
        _default4.default,
        {
          title: 'Place on map',
          onClose: this.handleCloseModal,
          onCloseClick: this.handleCloseModal,
          onOpen: this.handleOpenModal,
          message: 'Select location by dragging the marker or search for a place',
          isOpen: this.state.modalOpen
        },
        _react2.default.createElement(
          'div',
          { className: _GeopointInput2.default.dialogInner },
          _react2.default.createElement(_GoogleMapsLoadProxy2.default, {
            value: value,
            apiKey: _googleMapsInput2.default.apiKey,
            onChange: this.handleChange,
            defaultLocation: _googleMapsInput2.default.defaultLocation,
            defaultZoom: _googleMapsInput2.default.defaultZoom,
            locale: getLocale(this.context),
            component: _GeopointSelect2.default
          })
        )
      )
    );
  }
}

GeopointInput.propTypes = {
  onChange: _propTypes2.default.func.isRequired,
  markers: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    type: _propTypes2.default.string
  })),
  value: _propTypes2.default.shape({
    lat: _propTypes2.default.number,
    lng: _propTypes2.default.number
  }),
  type: _propTypes2.default.shape({
    title: _propTypes2.default.string.isRequired,
    description: _propTypes2.default.string
  })
};
GeopointInput.defaultProps = {
  markers: []
};
GeopointInput.contextTypes = {
  intl: _propTypes2.default.shape({
    locale: _propTypes2.default.string
  })
};
exports.default = GeopointInput;