@bigfishtv/cockpit/es/components/input/GoogleMapsInput.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp2, _class2, _class3, _temp3;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withFormValue, Field } from '@bigfishtv/react-forms';
import GoogleMap from 'google-map-react';
import _get from 'lodash/get';
import _find from 'lodash/find';
import cn from 'classnames';
import $ from 'jquery';

import Icon from '../Icon';
import Cell from '../cell/Cell';

var defaultMapOptions = function defaultMapOptions(maps) {
	return {
		panControl: true,
		mapTypeControl: false,
		scrollwheel: true
	};
};

var DefaultMarker = function DefaultMarker(props) {
	return React.createElement(
		'div',
		{ style: { position: 'absolute', left: -18, top: -36, cursor: 'pointer' } },
		React.createElement(Icon, { name: 'place', size: 36 })
	);
};

var GoogleMapsSearchBox = (_temp2 = _class = function (_Component) {
	_inherits(GoogleMapsSearchBox, _Component);

	function GoogleMapsSearchBox() {
		var _temp, _this, _ret;

		_classCallCheck(this, GoogleMapsSearchBox);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.onPlaceChanged = function () {
			if (_this.props.onPlaceChanged) {
				_this.props.onPlaceChanged(_this.autoComplete.getPlace(), _this.input.value);
			}
		}, _this.handleKeyDown = function (event) {
			if (event.key === 'Enter') {
				event.preventDefault();
			}
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	GoogleMapsSearchBox.prototype.componentDidMount = function componentDidMount() {
		var _this2 = this;

		if (this.props.apiLoaded) this.addListener();
		if (window.MutationObserver) {
			var observerHack = new MutationObserver(function () {
				observerHack.disconnect();
				$(_this2.input).attr('autocomplete', 'new-password');
			});
			observerHack.observe(this.input, {
				attributes: true,
				attributeFilter: ['autocomplete']
			});
		}
	};

	GoogleMapsSearchBox.prototype.componentWillUnmount = function componentWillUnmount() {
		if (this.props.apiLoaded && this.searchBoxListener) {
			google.maps.event.removeListener(this.searchBoxListener);
		}
	};

	GoogleMapsSearchBox.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
		if (prevProps.apiLoaded != this.props.apiLoaded && this.props.apiLoaded) this.addListener();
	};

	GoogleMapsSearchBox.prototype.addListener = function addListener() {
		this.autoComplete = new google.maps.places.Autocomplete(this.input, this.props.autoCompleteOptions || {});
		this.autoCompleteListener = this.autoComplete.addListener('place_changed', this.onPlaceChanged);
	};

	GoogleMapsSearchBox.prototype.render = function render() {
		var _this3 = this;

		var _props = this.props,
		    value = _props.value,
		    inputProps = _props.inputProps,
		    error = _props.error,
		    onInputChange = _props.onInputChange,
		    onInputBlur = _props.onInputBlur;

		return React.createElement(
			'div',
			{ className: 'form-field', style: { margin: '0.5rem 0' } },
			React.createElement('input', _extends({}, inputProps, {
				type: 'text',
				value: value,
				className: cn(inputProps.className, error && 'error'),
				ref: function ref(elem) {
					return _this3.input = elem;
				},
				onChange: function onChange(e) {
					return onInputChange(e.target.value);
				},
				onKeyDown: this.handleKeyDown,
				onBlur: onInputBlur
			}))
		);
	};

	return GoogleMapsSearchBox;
}(Component), _class.propTypes = {
	apiLoaded: PropTypes.bool,
	placeholder: PropTypes.string,
	onPlaceChanged: PropTypes.func
}, _temp2);

var GoogleMapsInput = withFormValue(_class2 = (_temp3 = _class3 = function (_Component2) {
	_inherits(GoogleMapsInput, _Component2);

	function GoogleMapsInput(props) {
		_classCallCheck(this, GoogleMapsInput);

		var _this4 = _possibleConstructorReturn(this, _Component2.call(this, props));

		_this4.handlePlaceChange = function (place, typedAddress) {
			var _newValue;

			var _this4$props = _this4.props,
			    selectPrepend = _this4$props.selectPrepend,
			    clearInputOnSelect = _this4$props.clearInputOnSelect;

			var address = place.formatted_address;
			if (place.name && address.indexOf(place.name) < 0) address = place.name + ', ' + address;
			var newValue = (_newValue = {}, _newValue[selectPrepend + 'lat'] = place.geometry.location.lat(), _newValue[selectPrepend + 'lng'] = place.geometry.location.lng(), _newValue[selectPrepend + 'google_maps_url'] = place.url, _newValue[selectPrepend + 'address'] = address, _newValue);
			if (place.name) newValue.title = place.name;
			_this4.setState({ inputValue: clearInputOnSelect ? '' : typedAddress }, function () {
				_this4.props.formValue.update(_extends({}, _this4.props.formValue.value || {}, newValue));
			});
		};

		_this4.handleChildMouseDown = function (hoverKey, childProps, mouse) {
			if (_this4.props.disableMarkerDrag) return;
			_this4.setState({
				dragging: true,
				lat: mouse.lat,
				lng: mouse.lng,
				latOffset: childProps.lat - mouse.lat,
				lngOffset: childProps.lng - mouse.lng
			});
		};

		_this4.handleChildMouseUp = function (hoverKey, childProps, mouse) {
			if (_this4.props.disableMarkerDrag) return;
			_this4.setState({ dragging: false });
			_this4.props.formValue.update(_extends({}, _this4.props.formValue.value, {
				lat: mouse.lat + _this4.state.latOffset,
				lng: mouse.lng + _this4.state.lngOffset
			}));
		};

		_this4.handleChildMouseMove = function (hoverKey, childProps, mouse) {
			if (_this4.props.disableMarkerDrag) return;
			_this4.setState({ lat: mouse.lat, lng: mouse.lng });
		};

		_this4.handleChange = function (mapState) {
			if (mapState.zoom) {
				_this4.props.formValue.update(_extends({}, _this4.props.formValue.value, {
					zoom: mapState.zoom
				}));
			}
		};

		_this4.state = {
			inputValue: '',
			dragging: false,
			apiLoaded: false
		};
		return _this4;
	}

	GoogleMapsInput.prototype.handleClear = function handleClear() {
		var _props2 = this.props,
		    selectPrepend = _props2.selectPrepend,
		    formValue = _props2.formValue,
		    isOwnEntity = _props2.isOwnEntity;


		if (isOwnEntity) {
			formValue.update(null);
		} else {
			var oldFormValue = formValue.value;
			var newFormValue = {};
			var excludeKeys = ['address', 'lat', 'lng', 'google_maps_url', 'zoom'].map(function (val) {
				return selectPrepend + val;
			});
			Object.keys(oldFormValue).forEach(function (key) {
				if (excludeKeys.indexOf(key) < 0) newFormValue[key] = oldFormValue[key];
			});
			formValue.update(newFormValue);
		}
	};

	GoogleMapsInput.prototype.render = function render() {
		var _this5 = this;

		var _props3 = this.props,
		    apiKey = _props3.apiKey,
		    width = _props3.width,
		    height = _props3.height,
		    className = _props3.className,
		    inputProps = _props3.inputProps,
		    label = _props3.label,
		    instructions = _props3.instructions,
		    selectPrepend = _props3.selectPrepend,
		    zoom = _props3.zoom,
		    minZoom = _props3.minZoom,
		    showMap = _props3.showMap,
		    placeholder = _props3.placeholder,
		    createMapOptions = _props3.createMapOptions,
		    defaultCenter = _props3.defaultCenter,
		    autoCompleteOptions = _props3.autoCompleteOptions,
		    formValue = _props3.formValue,
		    showTitleField = _props3.showTitleField,
		    showAddressField = _props3.showAddressField,
		    showDetailFields = _props3.showDetailFields,
		    Marker = _props3.Marker,
		    SearchBox = _props3.SearchBox;
		var _state = this.state,
		    apiLoaded = _state.apiLoaded,
		    dragging = _state.dragging,
		    inputValue = _state.inputValue,
		    latOffset = _state.latOffset,
		    lngOffset = _state.lngOffset;


		var lat = _get(formValue.value, selectPrepend + 'lat');
		var lng = _get(formValue.value, selectPrepend + 'lng');
		var address = _get(formValue.value, selectPrepend + 'address');

		var center = lat && lng ? [lat, lng] : defaultCenter;
		var currentZoom = zoom;

		if (dragging) {
			lat = this.state.lat + latOffset;
			lng = this.state.lng + lngOffset;
		}

		var keyPath = formValue.keyPath.length > 0 ? formValue.keyPath.join('.') + '.' : '';
		var addressError = _find(formValue.completeErrorList, {
			field: 'data.' + keyPath + selectPrepend + 'address'
		});

		return React.createElement(
			'div',
			{ className: className },
			showTitleField && React.createElement(Field, { select: 'title', label: 'Place title' }),
			React.createElement(
				'label',
				null,
				label
			),
			instructions && React.createElement(
				'p',
				{ className: 'form-message' },
				instructions
			),
			address ? React.createElement(
				'div',
				null,
				React.createElement(Cell, {
					className: 'cell-input',
					icon: 'place',
					title: address,
					editable: false,
					onRemove: function onRemove() {
						return _this5.handleClear();
					}
				}),
				addressError && React.createElement(
					'div',
					{ className: 'form-message error' },
					addressError.message
				)
			) : React.createElement(SearchBox, {
				apiLoaded: apiLoaded,
				placeholder: placeholder,
				value: inputValue,
				inputProps: inputProps,
				error: addressError,
				autoCompleteOptions: autoCompleteOptions,
				onInputChange: function onInputChange(inputValue) {
					return _this5.setState({ inputValue: inputValue });
				},
				onPlaceChanged: this.handlePlaceChange
			}),
			React.createElement(
				'div',
				{ style: { width: width, height: showMap ? height : 0 } },
				React.createElement(
					GoogleMap,
					{
						bootstrapURLKeys: { key: apiKey, libraries: 'places' },
						onGoogleApiLoaded: function onGoogleApiLoaded() {
							return console.log('API LOADEWD THO') || _this5.setState({ apiLoaded: true });
						},
						options: createMapOptions,
						hoverDistance: 20,
						center: center,
						zoom: currentZoom,
						minZoom: minZoom,
						draggable: !this.state.dragging,
						onChange: this.handleChange,
						onChildMouseDown: this.handleChildMouseDown,
						onChildMouseUp: this.handleChildMouseUp,
						onChildMouseMove: this.handleChildMouseMove,
						yesIWantToUseGoogleMapApiInternals: true },
					React.createElement(Marker, { lat: center[0], lng: center[1] })
				)
			),
			showAddressField && React.createElement(Field, { select: 'address' }),
			showDetailFields && React.createElement(
				'div',
				{ className: 'row gutter-top' },
				React.createElement(
					'div',
					{ className: 'column-1-3' },
					React.createElement(Field, { select: 'lat' })
				),
				React.createElement(
					'div',
					{ className: 'column-1-3' },
					React.createElement(Field, { select: 'lng' })
				),
				React.createElement(
					'div',
					{ className: 'column-1-3' },
					React.createElement(Field, { select: 'zoom' })
				)
			)
		);
	};

	return GoogleMapsInput;
}(Component), _class3.defaultProps = {
	width: '100%',
	height: 350,
	className: '',

	apiKey: null,
	selectPrepend: '',
	label: 'Location',
	instructions: null,
	placeholder: 'Search for place...',

	showMap: true,
	clearInputOnSelect: true,
	showTitleField: false,
	showAddressField: false,
	showDetailFields: false,
	isOwnEntity: false,
	disableMarkerDrag: true,

	inputProps: {},
	autoCompleteOptions: {},
	createMapOptions: defaultMapOptions,
	defaultCenter: [-27.471, 153.0142812],
	zoom: 12,
	minZoom: 4,
	center: null,

	Marker: DefaultMarker,
	SearchBox: GoogleMapsSearchBox
}, _temp3)) || _class2;

export { GoogleMapsInput as default };