@contentful/field-editor-location 1.2.3 → 1.3.0

package/dist/cjs/GoogleMapView.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GoogleMapView", {
+    enumerable: true,
+    get: function() {
+        return GoogleMapView;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _emotion = require("emotion");
+const _googlemapreact = _interop_require_default(require("google-map-react"));
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    root: (0, _emotion.css)({
+        height: '300px',
+        width: '100%'
+    })
+};
+const BerlinLocation = {
+    lat: 52.5018,
+    lng: 13.41115439
+};
+class GoogleMapView extends _react.Component {
+    componentDidUpdate() {
+        if (this.state.marker && this.state.maps) {
+            if (this.props.location) {
+                const latLng = new this.state.maps.LatLng(this.props.location.lat, this.props.location.lng);
+                this.state.marker.setPosition(latLng);
+                this.state.marker.setVisible(true);
+            } else {
+                this.state.marker.setVisible(false);
+            }
+            this.state.marker.setDraggable(!this.props.disabled);
+            this.state.marker.setCursor(this.props.disabled ? 'not-allowed' : 'auto');
+        }
+    }
+    render() {
+        return _react.createElement("div", {
+            className: styles.root
+        }, _react.createElement(_googlemapreact.default, {
+            draggable: !this.props.disabled,
+            bootstrapURLKeys: this.props.googleMapsKey ? {
+                key: this.props.googleMapsKey
+            } : undefined,
+            defaultCenter: BerlinLocation,
+            center: this.props.location,
+            options: {
+                scrollwheel: false,
+                mapTypeId: 'roadmap'
+            },
+            defaultZoom: 6,
+            yesIWantToUseGoogleMapApiInternals: true,
+            onGoogleApiLoaded: this.onGoogleApiLoaded
+        }));
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "onGoogleApiLoaded", (event)=>{
+            const { maps , map  } = event;
+            const marker = new maps.Marker({
+                map,
+                position: map.getCenter(),
+                cursor: this.props.disabled ? 'not-allowed' : 'auto',
+                draggable: !this.props.disabled,
+                visible: Boolean(this.props.location)
+            });
+            maps.event.addListener(map, 'click', (event)=>{
+                if (this.props.disabled || !this.state.marker || !this.state.maps) {
+                    return;
+                }
+                this.state.marker.setPosition(event.latLng);
+                this.state.marker.setVisible(true);
+                this.props.onChangeLocation({
+                    lat: event.latLng.lat(),
+                    lng: event.latLng.lng()
+                });
+            });
+            maps.event.addListener(marker, 'dragend', (event)=>{
+                this.props.onChangeLocation({
+                    lat: event.latLng.lat(),
+                    lng: event.latLng.lng()
+                });
+            });
+            this.setState({
+                marker,
+                maps
+            }, ()=>{
+                this.props.onGoogleApiLoaded({
+                    maps
+                });
+            });
+        });
+        this.state = {
+            marker: undefined,
+            maps: undefined
+        };
+    }
+}

package/dist/cjs/LocationEditor.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LocationEditor: function() {
+        return LocationEditor;
+    },
+    LocationEditorConnected: function() {
+        return LocationEditorConnected;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _deepequal = _interop_require_default(require("deep-equal"));
+const _isNumber = _interop_require_default(require("lodash/isNumber"));
+const _throttle = _interop_require_default(require("lodash/throttle"));
+const _GoogleMapView = require("./GoogleMapView");
+const _LocationSelector = require("./LocationSelector");
+const _types = require("./types");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function toLocationValue(coords) {
+    if (coords && (0, _isNumber.default)(coords.lat) && (0, _isNumber.default)(coords.lng)) {
+        return {
+            lat: coords.lat,
+            lon: coords.lng
+        };
+    } else {
+        return null;
+    }
+}
+class LocationEditor extends _react.Component {
+    render() {
+        const { mapsObject , localValue  } = this.state;
+        return _react.createElement("div", {
+            "data-test-id": "location-editor"
+        }, _react.createElement(_GoogleMapView.GoogleMapView, {
+            disabled: this.props.disabled || mapsObject === null,
+            googleMapsKey: this.props.googleMapsKey,
+            location: localValue,
+            onGoogleApiLoaded: ({ maps  })=>{
+                this.setState({
+                    mapsObject: maps
+                });
+            },
+            onChangeLocation: (coords)=>{
+                this.setState({
+                    localValue: coords
+                });
+                this.props.setValue(toLocationValue(coords));
+            }
+        }), _react.createElement(_LocationSelector.LocationSelector, {
+            disabled: this.props.disabled || mapsObject === null,
+            value: localValue,
+            view: this.props.selectedView,
+            onChangeView: (view)=>{
+                this.props.setSelectedView(view);
+            },
+            onChangeLocation: (coords)=>{
+                this.setState({
+                    localValue: coords
+                });
+                this.props.setValue(toLocationValue(coords));
+            },
+            onSearchAddress: this.onSearchAddress,
+            onGetAddressFromLocation: this.onGetAddressFromLocation
+        }));
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "onSearchAddress", (0, _throttle.default)((value)=>{
+            if (!this.state.mapsObject) {
+                return Promise.resolve(null);
+            }
+            const { mapsObject  } = this.state;
+            if (!value) {
+                return Promise.resolve(null);
+            }
+            return new Promise((resolve)=>{
+                const geocoder = new mapsObject.Geocoder();
+                geocoder.geocode({
+                    address: value
+                }, resolve, ()=>{
+                    resolve(null);
+                });
+            });
+        }, 300));
+        _define_property(this, "onGetAddressFromLocation", (location, value)=>{
+            if (!this.state.mapsObject || !location) {
+                return Promise.resolve('');
+            }
+            const { mapsObject  } = this.state;
+            return new Promise((resolve)=>{
+                const geocoder = new mapsObject.Geocoder();
+                geocoder.geocode({
+                    location
+                }, (result)=>{
+                    if (result && result.length > 0) {
+                        const addresses = result.map((item)=>item.formatted_address);
+                        resolve(addresses.find((item)=>item === value) || addresses[0]);
+                    } else {
+                        resolve('');
+                    }
+                }, ()=>{
+                    resolve('');
+                });
+            });
+        });
+        this.state = {
+            localValue: props.value ? {
+                lng: props.value.lon,
+                lat: props.value.lat
+            } : undefined,
+            mapsObject: null
+        };
+    }
+}
+function LocationEditorConnected(props) {
+    const { field  } = props;
+    const googleMapsKey = props.parameters ? props.parameters.instance.googleMapsKey : undefined;
+    const [selectedView, setSelectedView] = _react.useState(_types.ViewType.Address);
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        isEqualValues: (value1, value2)=>{
+            return (0, _deepequal.default)(value1, value2);
+        },
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        return _react.createElement(LocationEditor, {
+            key: `location-editor-${externalReset}`,
+            value: value,
+            disabled: disabled,
+            setValue: setValue,
+            googleMapsKey: googleMapsKey,
+            selectedView: selectedView,
+            setSelectedView: setSelectedView
+        });
+    });
+}
+LocationEditorConnected.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/cjs/LocationSearchInput.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LocationSearchInput", {
+    enumerable: true,
+    get: function() {
+        return LocationSearchInput;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    root: (0, _emotion.css)({
+        width: '100%'
+    }),
+    input: (0, _emotion.css)({
+        position: 'relative',
+        width: '100%'
+    }),
+    spinner: (0, _emotion.css)({
+        position: 'absolute',
+        right: 10,
+        top: 10,
+        zIndex: 99
+    }),
+    validationMessage: (0, _emotion.css)({
+        marginTop: _f36tokens.default.spacingS
+    }),
+    suggestion: (0, _emotion.css)({
+        position: 'absolute',
+        transform: 'translateY(100%)',
+        bottom: 0,
+        left: 0,
+        zIndex: 1
+    })
+};
+function LocationSearchInput(props) {
+    const [isSearching, setIsSearching] = _react.useState(false);
+    const [address, setAddress] = _react.useState('');
+    const [hasError, setHasError] = _react.useState(false);
+    const [suggestion, setSuggestion] = _react.useState(null);
+    _react.useEffect(()=>{
+        setIsSearching(true);
+        props.onGetAddressFromLocation(props.value, address).then((address)=>{
+            setAddress(address);
+            setIsSearching(false);
+        });
+    }, [
+        props.value,
+        props.disabled
+    ]);
+    return _react.createElement("div", {
+        className: styles.root
+    }, _react.createElement("div", {
+        className: styles.input
+    }, _react.createElement(_f36components.TextInput, {
+        testId: "location-editor-search",
+        isInvalid: hasError,
+        placeholder: "Start typing to find location",
+        value: address,
+        onChange: (e)=>{
+            setAddress(e.target.value);
+            setHasError(false);
+            setSuggestion(null);
+            if (e.target.value === '') {
+                props.onChangeLocation(undefined);
+                return;
+            }
+            setIsSearching(true);
+            props.onSearchAddress(e.target.value).then((value)=>{
+                setIsSearching(false);
+                if (value === null) {
+                    setHasError(false);
+                } else if (value.length === 0) {
+                    setHasError(true);
+                } else {
+                    setHasError(false);
+                    setSuggestion({
+                        address: value[0].formatted_address,
+                        location: {
+                            lat: Number(value[0].geometry.location.lat().toString().slice(0, 8)),
+                            lng: Number(value[0].geometry.location.lng().toString().slice(0, 8))
+                        }
+                    });
+                }
+            });
+        },
+        isDisabled: props.disabled
+    }), isSearching && _react.createElement(_f36components.Spinner, {
+        className: styles.spinner
+    }), suggestion && _react.createElement(_f36components.Card, {
+        padding: "none",
+        className: styles.suggestion
+    }, _react.createElement(_f36components.Button, {
+        variant: "transparent",
+        testId: "location-editor-suggestion",
+        onClick: ()=>{
+            setAddress(suggestion.address);
+            props.onChangeLocation(suggestion.location);
+            setSuggestion(null);
+        }
+    }, suggestion.address)), hasError && _react.createElement(_f36components.ValidationMessage, {
+        testId: "location-editor-not-found",
+        className: styles.validationMessage
+    }, "No results found for ", _react.createElement("strong", null, address), ". Please make sure that address is spelled correctly.")));
+}

package/dist/cjs/LocationSelector.js

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LocationSelector", {
+    enumerable: true,
+    get: function() {
+        return LocationSelector;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _LocationSearchInput = require("./LocationSearchInput");
+const _types = require("./types");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    root: (0, _emotion.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: _f36tokens.default.spacingS,
+        alignItems: 'flex-end'
+    }),
+    main: (0, _emotion.css)({
+        flexGrow: 1
+    }),
+    secondary: (0, _emotion.css)({
+        minWidth: '70px',
+        textAlign: 'right'
+    }),
+    inputsRow: (0, _emotion.css)({
+        display: 'flex',
+        marginTop: _f36tokens.default.spacingS,
+        fontSize: _f36tokens.default.fontSizeM,
+        color: _f36tokens.default.gray900,
+        fontFamily: _f36tokens.default.fontStackPrimary,
+        alignItems: 'center'
+    }),
+    splitter: (0, _emotion.css)({
+        width: _f36tokens.default.spacingL
+    }),
+    clearBtn: (0, _emotion.css)({
+        marginBottom: _f36tokens.default.spacingS
+    })
+};
+function LocationSelector(props) {
+    return _react.createElement("div", {
+        className: styles.root
+    }, _react.createElement("div", {
+        className: styles.main
+    }, _react.createElement(_f36components.Flex, {
+        flexDirection: "row"
+    }, _react.createElement(_f36components.Radio, {
+        className: (0, _emotion.css)({
+            flexBasis: '100%'
+        }),
+        id: _types.ViewType.Address,
+        testId: "location-editor-address-radio",
+        isDisabled: props.disabled,
+        value: _types.ViewType.Address,
+        isChecked: props.view === _types.ViewType.Address,
+        onChange: ()=>{
+            props.onChangeView(_types.ViewType.Address);
+        }
+    }, "Address"), _react.createElement(_f36components.Radio, {
+        className: (0, _emotion.css)({
+            flexBasis: '100%'
+        }),
+        id: _types.ViewType.Coordinates,
+        testId: "location-editor-coordinates-radio",
+        isDisabled: props.disabled,
+        value: _types.ViewType.Coordinates,
+        isChecked: props.view === _types.ViewType.Coordinates,
+        onChange: ()=>{
+            props.onChangeView(_types.ViewType.Coordinates);
+        }
+    }, "Coordinates")), props.view === _types.ViewType.Address && _react.createElement("div", {
+        className: styles.inputsRow
+    }, _react.createElement(_LocationSearchInput.LocationSearchInput, {
+        onSearchAddress: props.onSearchAddress,
+        onGetAddressFromLocation: props.onGetAddressFromLocation,
+        disabled: props.disabled,
+        value: props.value,
+        onChangeLocation: props.onChangeLocation
+    })), props.view === _types.ViewType.Coordinates && _react.createElement("div", {
+        className: styles.inputsRow
+    }, _react.createElement("label", {
+        htmlFor: "latitude"
+    }, "Latitude"), _react.createElement("div", {
+        className: styles.splitter
+    }), _react.createElement(_f36components.TextInput, {
+        id: "latitude",
+        testId: "location-editor-latitude",
+        placeholder: "Between -90 and 90",
+        isDisabled: props.disabled,
+        value: props.value ? String(props.value.lat) : '',
+        onChange: (e)=>{
+            props.onChangeLocation({
+                lng: props.value && props.value.lng !== undefined ? props.value.lng : 0,
+                lat: Number(e.target.value) || 0
+            });
+        },
+        type: "number",
+        max: "90",
+        min: "-90",
+        step: "0.1"
+    }), _react.createElement("div", {
+        className: styles.splitter
+    }), _react.createElement("label", {
+        htmlFor: "longitude"
+    }, "Longitude"), _react.createElement("div", {
+        className: styles.splitter
+    }), _react.createElement(_f36components.TextInput, {
+        id: "longitude",
+        testId: "location-editor-longitude",
+        placeholder: "Between -180 and 180",
+        isDisabled: props.disabled,
+        value: props.value ? String(props.value.lng) : '',
+        onChange: (e)=>{
+            props.onChangeLocation({
+                lat: props.value && props.value.lat !== undefined ? props.value.lat : 0,
+                lng: Number(e.target.value) || 0
+            });
+        },
+        type: "number",
+        max: "180",
+        min: "-180",
+        step: "0.1"
+    }))), _react.createElement("div", {
+        className: styles.secondary
+    }, _react.createElement(_f36components.TextLink, {
+        as: "button",
+        isDisabled: props.disabled,
+        testId: "location-editor-clear",
+        className: styles.clearBtn,
+        onClick: ()=>{
+            props.onChangeLocation(undefined);
+        }
+    }, "Clear")));
+}