@contentful/field-editor-location 1.2.2 → 1.3.0

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LocationEditor", {
+    enumerable: true,
+    get: function() {
+        return LocationEditor;
+    }
+});
+const _LocationEditor = require("./LocationEditor");
+const LocationEditor = _LocationEditor.LocationEditorConnected;

package/dist/cjs/types.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ViewType", {
+    enumerable: true,
+    get: function() {
+        return ViewType;
+    }
+});
+var ViewType;
+(function(ViewType) {
+    ViewType["Address"] = "Address";
+    ViewType["Coordinates"] = "Coordinates";
+})(ViewType || (ViewType = {}));

package/dist/esm/GoogleMapView.js

@@ -0,0 +1,102 @@
+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;
+}
+import * as React from 'react';
+import { css } from 'emotion';
+import GoogleMapReact from 'google-map-react';
+const styles = {
+    root: css({
+        height: '300px',
+        width: '100%'
+    })
+};
+const BerlinLocation = {
+    lat: 52.5018,
+    lng: 13.41115439
+};
+export 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, {
+            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/esm/LocationEditor.js

@@ -0,0 +1,142 @@
+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;
+}
+import * as React from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import deepEqual from 'deep-equal';
+import isNumber from 'lodash/isNumber';
+import throttle from 'lodash/throttle';
+import { GoogleMapView } from './GoogleMapView';
+import { LocationSelector } from './LocationSelector';
+import { ViewType } from './types';
+function toLocationValue(coords) {
+    if (coords && isNumber(coords.lat) && isNumber(coords.lng)) {
+        return {
+            lat: coords.lat,
+            lon: coords.lng
+        };
+    } else {
+        return null;
+    }
+}
+export class LocationEditor extends React.Component {
+    render() {
+        const { mapsObject , localValue  } = this.state;
+        return React.createElement("div", {
+            "data-test-id": "location-editor"
+        }, React.createElement(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, {
+            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", throttle((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
+        };
+    }
+}
+export function LocationEditorConnected(props) {
+    const { field  } = props;
+    const googleMapsKey = props.parameters ? props.parameters.instance.googleMapsKey : undefined;
+    const [selectedView, setSelectedView] = React.useState(ViewType.Address);
+    return React.createElement(FieldConnector, {
+        isEqualValues: (value1, value2)=>{
+            return deepEqual(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/esm/LocationSearchInput.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { Button, Card, Spinner, TextInput, ValidationMessage } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    root: css({
+        width: '100%'
+    }),
+    input: css({
+        position: 'relative',
+        width: '100%'
+    }),
+    spinner: css({
+        position: 'absolute',
+        right: 10,
+        top: 10,
+        zIndex: 99
+    }),
+    validationMessage: css({
+        marginTop: tokens.spacingS
+    }),
+    suggestion: css({
+        position: 'absolute',
+        transform: 'translateY(100%)',
+        bottom: 0,
+        left: 0,
+        zIndex: 1
+    })
+};
+export 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(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(Spinner, {
+        className: styles.spinner
+    }), suggestion && React.createElement(Card, {
+        padding: "none",
+        className: styles.suggestion
+    }, React.createElement(Button, {
+        variant: "transparent",
+        testId: "location-editor-suggestion",
+        onClick: ()=>{
+            setAddress(suggestion.address);
+            props.onChangeLocation(suggestion.location);
+            setSuggestion(null);
+        }
+    }, suggestion.address)), hasError && React.createElement(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/esm/LocationSelector.js

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { Flex, Radio, TextInput, TextLink } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import { LocationSearchInput } from './LocationSearchInput';
+import { ViewType } from './types';
+const styles = {
+    root: css({
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: tokens.spacingS,
+        alignItems: 'flex-end'
+    }),
+    main: css({
+        flexGrow: 1
+    }),
+    secondary: css({
+        minWidth: '70px',
+        textAlign: 'right'
+    }),
+    inputsRow: css({
+        display: 'flex',
+        marginTop: tokens.spacingS,
+        fontSize: tokens.fontSizeM,
+        color: tokens.gray900,
+        fontFamily: tokens.fontStackPrimary,
+        alignItems: 'center'
+    }),
+    splitter: css({
+        width: tokens.spacingL
+    }),
+    clearBtn: css({
+        marginBottom: tokens.spacingS
+    })
+};
+export function LocationSelector(props) {
+    return React.createElement("div", {
+        className: styles.root
+    }, React.createElement("div", {
+        className: styles.main
+    }, React.createElement(Flex, {
+        flexDirection: "row"
+    }, React.createElement(Radio, {
+        className: css({
+            flexBasis: '100%'
+        }),
+        id: ViewType.Address,
+        testId: "location-editor-address-radio",
+        isDisabled: props.disabled,
+        value: ViewType.Address,
+        isChecked: props.view === ViewType.Address,
+        onChange: ()=>{
+            props.onChangeView(ViewType.Address);
+        }
+    }, "Address"), React.createElement(Radio, {
+        className: css({
+            flexBasis: '100%'
+        }),
+        id: ViewType.Coordinates,
+        testId: "location-editor-coordinates-radio",
+        isDisabled: props.disabled,
+        value: ViewType.Coordinates,
+        isChecked: props.view === ViewType.Coordinates,
+        onChange: ()=>{
+            props.onChangeView(ViewType.Coordinates);
+        }
+    }, "Coordinates")), props.view === ViewType.Address && React.createElement("div", {
+        className: styles.inputsRow
+    }, React.createElement(LocationSearchInput, {
+        onSearchAddress: props.onSearchAddress,
+        onGetAddressFromLocation: props.onGetAddressFromLocation,
+        disabled: props.disabled,
+        value: props.value,
+        onChangeLocation: props.onChangeLocation
+    })), props.view === ViewType.Coordinates && React.createElement("div", {
+        className: styles.inputsRow
+    }, React.createElement("label", {
+        htmlFor: "latitude"
+    }, "Latitude"), React.createElement("div", {
+        className: styles.splitter
+    }), React.createElement(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(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(TextLink, {
+        as: "button",
+        isDisabled: props.disabled,
+        testId: "location-editor-clear",
+        className: styles.clearBtn,
+        onClick: ()=>{
+            props.onChangeLocation(undefined);
+        }
+    }, "Clear")));
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import { LocationEditorConnected } from './LocationEditor';
+export const LocationEditor = LocationEditorConnected;

package/dist/esm/types.js

@@ -0,0 +1,5 @@
+export var ViewType;
+(function(ViewType) {
+    ViewType["Address"] = "Address";
+    ViewType["Coordinates"] = "Coordinates";
+})(ViewType || (ViewType = {}));

package/dist/{GoogleMapView.d.ts → types/GoogleMapView.d.ts}

@@ -1,25 +1,25 @@
-import React from 'react';
-import { Coords } from './types';
-declare type GoogleMapViewProps = {
-    disabled: boolean;
-    location: Coords | undefined;
-    onGoogleApiLoaded: ({ maps }: {
-        maps: any;
-    }) => void;
-    onChangeLocation: (location: Coords) => void;
-    googleMapsKey?: string;
-};
-declare type GoogleMapsViewState = {
-    marker: any;
-    maps: any;
-};
-export declare class GoogleMapView extends React.Component<GoogleMapViewProps, GoogleMapsViewState> {
-    constructor(props: GoogleMapViewProps);
-    componentDidUpdate(): void;
-    onGoogleApiLoaded: (event: {
-        maps: any;
-        map: any;
-    }) => void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from 'react';
+import { Coords } from './types';
+type GoogleMapViewProps = {
+    disabled: boolean;
+    location: Coords | undefined;
+    onGoogleApiLoaded: ({ maps }: {
+        maps: any;
+    }) => void;
+    onChangeLocation: (location: Coords) => void;
+    googleMapsKey?: string;
+};
+type GoogleMapsViewState = {
+    marker: any;
+    maps: any;
+};
+export declare class GoogleMapView extends React.Component<GoogleMapViewProps, GoogleMapsViewState> {
+    constructor(props: GoogleMapViewProps);
+    componentDidUpdate(): void;
+    onGoogleApiLoaded: (event: {
+        maps: any;
+        map: any;
+    }) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/{LocationEditor.d.ts → types/LocationEditor.d.ts}

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import { FieldAPI, ParametersAPI } from '@contentful/field-editor-shared';
-import { ViewType, NullableLocationValue, Coords, GeocodeApiResponse } from './types';
-export interface LocationEditorConnectedProps {
-    /**
-     * is the field disabled initially
-     */
-    isInitiallyDisabled: boolean;
-    /**
-     * sdk.field
-     */
-    field: FieldAPI;
-    /**
-     * sdk.parameters
-     */
-    parameters?: ParametersAPI & {
-        instance: {
-            googleMapsKey?: string;
-        };
-    };
-}
-declare type LocationEditorProps = {
-    disabled: boolean;
-    value: NullableLocationValue;
-    setValue: (value: NullableLocationValue) => void;
-    googleMapsKey?: string;
-    selectedView: ViewType;
-    setSelectedView: (view: ViewType) => void;
-};
-export declare class LocationEditor extends React.Component<LocationEditorProps, {
-    localValue?: Coords;
-    mapsObject: any;
-}> {
-    constructor(props: LocationEditorProps);
-    onSearchAddress: (value: string) => Promise<GeocodeApiResponse>;
-    onGetAddressFromLocation: (location: Coords | undefined, value: string) => Promise<string>;
-    render(): JSX.Element;
-}
-export declare function LocationEditorConnected(props: LocationEditorConnectedProps): JSX.Element;
-export declare namespace LocationEditorConnected {
-    var defaultProps: {
-        isInitiallyDisabled: boolean;
-    };
-}
-export {};
+import * as React from 'react';
+import { FieldAPI, ParametersAPI } from '@contentful/field-editor-shared';
+import { ViewType, NullableLocationValue, Coords, GeocodeApiResponse } from './types';
+export interface LocationEditorConnectedProps {
+    /**
+     * is the field disabled initially
+     */
+    isInitiallyDisabled: boolean;
+    /**
+     * sdk.field
+     */
+    field: FieldAPI;
+    /**
+     * sdk.parameters
+     */
+    parameters?: ParametersAPI & {
+        instance: {
+            googleMapsKey?: string;
+        };
+    };
+}
+type LocationEditorProps = {
+    disabled: boolean;
+    value: NullableLocationValue;
+    setValue: (value: NullableLocationValue) => void;
+    googleMapsKey?: string;
+    selectedView: ViewType;
+    setSelectedView: (view: ViewType) => void;
+};
+export declare class LocationEditor extends React.Component<LocationEditorProps, {
+    localValue?: Coords;
+    mapsObject: any;
+}> {
+    constructor(props: LocationEditorProps);
+    onSearchAddress: (value: string) => Promise<GeocodeApiResponse>;
+    onGetAddressFromLocation: (location: Coords | undefined, value: string) => Promise<string>;
+    render(): React.JSX.Element;
+}
+export declare function LocationEditorConnected(props: LocationEditorConnectedProps): React.JSX.Element;
+export declare namespace LocationEditorConnected {
+    var defaultProps: {
+        isInitiallyDisabled: boolean;
+    };
+}
+export {};

package/dist/{LocationSearchInput.d.ts → types/LocationSearchInput.d.ts}

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { Coords, GeocodeApiResponse } from './types';
-declare type LocationSearchInputProps = {
-    disabled: boolean;
-    value?: Coords;
-    onSearchAddress: (term: string) => Promise<GeocodeApiResponse>;
-    onGetAddressFromLocation: (coors: Coords | undefined, value: string) => Promise<string>;
-    onChangeLocation: (location?: Coords) => void;
-};
-export declare function LocationSearchInput(props: LocationSearchInputProps): JSX.Element;
-export {};
+import * as React from 'react';
+import { Coords, GeocodeApiResponse } from './types';
+type LocationSearchInputProps = {
+    disabled: boolean;
+    value?: Coords;
+    onSearchAddress: (term: string) => Promise<GeocodeApiResponse>;
+    onGetAddressFromLocation: (coors: Coords | undefined, value: string) => Promise<string>;
+    onChangeLocation: (location?: Coords) => void;
+};
+export declare function LocationSearchInput(props: LocationSearchInputProps): React.JSX.Element;
+export {};