@oneblink/apps-react 5.12.0-beta.1 → 5.12.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -171,11 +171,14 @@ const LocationImage = React.memo(function LocationImage({ location, }) {
|
|
|
171
171
|
return (React.createElement("figure", { className: "ob-figure" },
|
|
172
172
|
React.createElement("img", { className: "ob-location__map", alt: `map with center at ${location.latitude} latitude, ${location.longitude} longitude`, src: staticUrl, height: mapHeight, width: mapHeight })));
|
|
173
173
|
});
|
|
174
|
-
const LocationPicker = React.memo(function
|
|
174
|
+
const LocationPicker = React.memo(function LocationPicker({ location, onChange, }) {
|
|
175
175
|
const googleMapsApiKey = useGoogleMapsApiKeyKey();
|
|
176
176
|
const { isLoaded } = useJsApiLoader({
|
|
177
177
|
googleMapsApiKey: googleMapsApiKey !== null && googleMapsApiKey !== void 0 ? googleMapsApiKey : '',
|
|
178
178
|
});
|
|
179
|
+
return (React.createElement("figure", { className: "ob-figure" }, isLoaded && (React.createElement(GoogleLocationPicker, { location: location, onChange: onChange }))));
|
|
180
|
+
});
|
|
181
|
+
const GoogleLocationPicker = React.memo(function GoogleLocationPicker({ location, onChange, }) {
|
|
179
182
|
const [map, setMap] = React.useState(null);
|
|
180
183
|
const [marker, setMarker] = React.useState(null);
|
|
181
184
|
const originalCenter = React.useRef({
|
|
@@ -219,10 +222,10 @@ const LocationPicker = React.memo(function SummaryResult({ location, onChange, }
|
|
|
219
222
|
zoom: location.zoom,
|
|
220
223
|
});
|
|
221
224
|
}, [onChange, location.zoom]);
|
|
222
|
-
return (React.createElement(
|
|
225
|
+
return (React.createElement(GoogleMap, { onLoad: (map) => setMap(map), onUnmount: () => setMap(null), mapContainerStyle: {
|
|
223
226
|
height: 300,
|
|
224
227
|
}, center: originalCenter.current, zoom: location.zoom, onZoomChanged: onZoomChanged, onClick: mapMouseEvent, options: { draggableCursor: 'pointer' } },
|
|
225
|
-
React.createElement(Marker, { onLoad: (marker) => setMarker(marker), onUnmount: () => setMarker(null), animation: markerAnimation, position: originalCenter.current, draggable: true, onDragEnd: mapMouseEvent })))
|
|
228
|
+
React.createElement(Marker, { onLoad: (marker) => setMarker(marker), onUnmount: () => setMarker(null), animation: markerAnimation, position: originalCenter.current, draggable: true, onDragEnd: mapMouseEvent })));
|
|
226
229
|
});
|
|
227
230
|
export default React.memo(FormElementLocation);
|
|
228
231
|
//# sourceMappingURL=FormElementLocation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '@oneblink/apps'\nimport { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'\nimport queryString from 'query-string'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport * as geolocation from '../services/geolocation'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\n\ntype Props = {\n id: string\n element: FormTypes.LocationElement\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<Coords>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Coords = {\n latitude: number\n longitude: number\n zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n if (location) {\n return `${location.latitude},${location.longitude}`\n }\n}\n\nfunction parseLocationValue(value: unknown): Coords | undefined {\n if (!value || typeof value !== 'object') {\n return\n }\n\n const { latitude, longitude, zoom } = value as Record<string, unknown>\n if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n return\n }\n\n return {\n latitude,\n longitude,\n zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\nfunction FormElementLocation({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n useBooleanState(false)\n\n const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n const onClear = React.useCallback(() => {\n hideLocationPicker()\n onChange(element, {\n value: undefined,\n })\n setLocation(undefined)\n }, [element, hideLocationPicker, onChange])\n\n const onCancel = React.useCallback(() => {\n hideLocationPicker()\n setLocation(parseLocationValue(value))\n }, [hideLocationPicker, value])\n\n const onLocate = React.useCallback(async () => {\n showLocationPicker()\n\n if (location) {\n return\n }\n\n let currentLocation = null\n try {\n const result = await geolocation.getCurrentPosition()\n currentLocation = result.coords\n } catch (err) {\n console.error(\n 'Error while attempting to find the users current location',\n err,\n )\n Sentry.captureException(err)\n } finally {\n setLocation(parseLocationValue(currentLocation || defaultCoords()))\n }\n }, [location, showLocationPicker])\n\n const isLoadingLocation = !location && isLocationPickerOpen\n\n const onConfirm = React.useCallback(() => {\n setIsDirty()\n hideLocationPicker()\n onChange(element, {\n value: location,\n })\n }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n // SET DEFAULT/PREFILL DATA\n React.useEffect(() => {\n const newValue = parseLocationValue(value)\n if (newValue) {\n setLocation(newValue)\n }\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-location-element\">\n <FormElementLabelContainer\n className=\"ob-location\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n <LocationDisplay\n isOpen={isLocationPickerOpen}\n isLoading={isLoadingLocation}\n location={location}\n onChange={setLocation}\n />\n\n <div className=\"buttons ob-buttons ob-location__buttons\">\n {isLocationPickerOpen ? (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n onClick={onCancel}\n disabled={element.readOnly}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button\"\n onClick={onConfirm}\n disabled={element.readOnly || !location}\n >\n Confirm\n </button>\n </>\n ) : (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n onClick={onClear}\n disabled={element.readOnly}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n onClick={onLocate}\n disabled={element.readOnly}\n >\n Locate\n </button>\n </>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n isLoading,\n isOpen,\n location,\n onChange,\n}: {\n isLoading: boolean\n isOpen: boolean\n location: Coords | undefined\n onChange: (location: Coords) => void\n}) {\n const isOffline = useIsOffline()\n\n if (isLoading) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <OnLoading small></OnLoading>\n </div>\n </figure>\n )\n }\n\n if (isOffline) {\n return <LocationIsOffline location={location} isOpen={isOpen} />\n }\n\n if (isOpen) {\n if (!location) {\n // There is no location to display while user is attempting to pick a location.\n // This should never happen, if loading has finished a default should be set.\n // Fail fast!!!\n // https://en.wikipedia.org/wiki/Fail-fast\n throw new Error(\n 'Default location was not set for \"location\" form element',\n )\n }\n\n return <LocationPicker location={location} onChange={onChange} />\n }\n\n if (location) {\n return <LocationImage location={location} />\n }\n\n return null\n})\n\nfunction LocationIsOfflineFigureContent({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <h4 className=\"title is-4\">You are currently offline</h4>\n {children}\n </div>\n </figure>\n )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n location,\n isOpen,\n}: {\n location: Coords | undefined\n isOpen: boolean\n}) {\n if (isOpen) {\n if (location) {\n // If user is offline and attempting to pick a location and there is one set already\n return (\n <LocationIsOfflineFigureContent>\n <p>\n Click the <b>Confirm</b> button below to set the location to your\n current position.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and attempting to pick a location and there is one nothing set yet\n return (\n <LocationIsOfflineFigureContent>\n <p>\n We could not find your current location. Click the <b>Cancel</b>{' '}\n button below to try again.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and has confirmed a location\n if (location) {\n return (\n <LocationIsOfflineFigureContent>\n <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n <p>\n <b>{location.latitude}</b>\n </p>\n <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n <p>\n <b>{location.longitude}</b>\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // User is offline with no location set and not attempting to pick a location\n return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n location,\n}: {\n location: Coords\n}) {\n const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n const staticUrl = React.useMemo(() => {\n const center = `${location.latitude},${location.longitude}`\n const queries = {\n key: googleMapsApiKey,\n size: `${mapHeight}x${mapHeight}`,\n zoom: location.zoom,\n center,\n markers: `color:red|${center}`,\n }\n return `${apiUrl}?${queryString.stringify(queries)}`\n }, [googleMapsApiKey, location])\n\n return (\n <figure className=\"ob-figure\">\n <img\n className=\"ob-location__map\"\n alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n src={staticUrl}\n height={mapHeight}\n width={mapHeight}\n />\n </figure>\n )\n})\n\nconst LocationPicker = React.memo(function SummaryResult({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n const { isLoaded } = useJsApiLoader({\n googleMapsApiKey: googleMapsApiKey ?? '',\n })\n const [map, setMap] = React.useState<google.maps.Map | null>(null)\n const [marker, setMarker] = React.useState<google.maps.Marker | null>(null)\n\n const originalCenter = React.useRef<{ lat: number; lng: number }>({\n lat: location.latitude,\n lng: location.longitude,\n })\n\n const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, [])\n\n React.useEffect(() => {\n if (!map) {\n return\n }\n const latLng = { lat: location.latitude, lng: location.longitude }\n map.panTo(latLng)\n if (!marker) {\n return\n }\n marker.setPosition(latLng)\n //this enables the marker to animate after moving it\n marker.setMap(null)\n marker.setAnimation(markerAnimation)\n marker.setMap(map)\n }, [map, marker, markerAnimation, location.latitude, location.longitude])\n\n const onZoomChanged = React.useCallback(() => {\n if (!map) {\n return\n }\n\n onChange({\n latitude: location.latitude,\n longitude: location.longitude,\n zoom: map.getZoom(),\n })\n }, [location.latitude, location.longitude, map, onChange])\n\n const mapMouseEvent = React.useCallback(\n (e: google.maps.MapMouseEvent) => {\n if (!e.latLng) {\n return\n }\n const { lat, lng } = e.latLng.toJSON()\n onChange({\n latitude: lat,\n longitude: lng,\n zoom: location.zoom,\n })\n },\n [onChange, location.zoom],\n )\n\n return (\n <figure className=\"ob-figure\">\n {isLoaded && (\n <GoogleMap\n onLoad={(map) => setMap(map)}\n onUnmount={() => setMap(null)}\n mapContainerStyle={{\n height: 300,\n }}\n center={originalCenter.current}\n zoom={location.zoom}\n onZoomChanged={onZoomChanged}\n onClick={mapMouseEvent}\n options={{ draggableCursor: 'pointer' }}\n >\n <Marker\n onLoad={(marker) => setMarker(marker)}\n onUnmount={() => setMarker(null)}\n animation={markerAnimation}\n position={originalCenter.current}\n draggable\n onDragEnd={mapMouseEvent}\n ></Marker>\n </GoogleMap>\n )}\n </figure>\n )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '@oneblink/apps'\nimport { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'\nimport queryString from 'query-string'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport * as geolocation from '../services/geolocation'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\n\ntype Props = {\n id: string\n element: FormTypes.LocationElement\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<Coords>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Coords = {\n latitude: number\n longitude: number\n zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n if (location) {\n return `${location.latitude},${location.longitude}`\n }\n}\n\nfunction parseLocationValue(value: unknown): Coords | undefined {\n if (!value || typeof value !== 'object') {\n return\n }\n\n const { latitude, longitude, zoom } = value as Record<string, unknown>\n if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n return\n }\n\n return {\n latitude,\n longitude,\n zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\nfunction FormElementLocation({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n useBooleanState(false)\n\n const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n const onClear = React.useCallback(() => {\n hideLocationPicker()\n onChange(element, {\n value: undefined,\n })\n setLocation(undefined)\n }, [element, hideLocationPicker, onChange])\n\n const onCancel = React.useCallback(() => {\n hideLocationPicker()\n setLocation(parseLocationValue(value))\n }, [hideLocationPicker, value])\n\n const onLocate = React.useCallback(async () => {\n showLocationPicker()\n\n if (location) {\n return\n }\n\n let currentLocation = null\n try {\n const result = await geolocation.getCurrentPosition()\n currentLocation = result.coords\n } catch (err) {\n console.error(\n 'Error while attempting to find the users current location',\n err,\n )\n Sentry.captureException(err)\n } finally {\n setLocation(parseLocationValue(currentLocation || defaultCoords()))\n }\n }, [location, showLocationPicker])\n\n const isLoadingLocation = !location && isLocationPickerOpen\n\n const onConfirm = React.useCallback(() => {\n setIsDirty()\n hideLocationPicker()\n onChange(element, {\n value: location,\n })\n }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n // SET DEFAULT/PREFILL DATA\n React.useEffect(() => {\n const newValue = parseLocationValue(value)\n if (newValue) {\n setLocation(newValue)\n }\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-location-element\">\n <FormElementLabelContainer\n className=\"ob-location\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n <LocationDisplay\n isOpen={isLocationPickerOpen}\n isLoading={isLoadingLocation}\n location={location}\n onChange={setLocation}\n />\n\n <div className=\"buttons ob-buttons ob-location__buttons\">\n {isLocationPickerOpen ? (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n onClick={onCancel}\n disabled={element.readOnly}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button\"\n onClick={onConfirm}\n disabled={element.readOnly || !location}\n >\n Confirm\n </button>\n </>\n ) : (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n onClick={onClear}\n disabled={element.readOnly}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n onClick={onLocate}\n disabled={element.readOnly}\n >\n Locate\n </button>\n </>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n isLoading,\n isOpen,\n location,\n onChange,\n}: {\n isLoading: boolean\n isOpen: boolean\n location: Coords | undefined\n onChange: (location: Coords) => void\n}) {\n const isOffline = useIsOffline()\n\n if (isLoading) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <OnLoading small></OnLoading>\n </div>\n </figure>\n )\n }\n\n if (isOffline) {\n return <LocationIsOffline location={location} isOpen={isOpen} />\n }\n\n if (isOpen) {\n if (!location) {\n // There is no location to display while user is attempting to pick a location.\n // This should never happen, if loading has finished a default should be set.\n // Fail fast!!!\n // https://en.wikipedia.org/wiki/Fail-fast\n throw new Error(\n 'Default location was not set for \"location\" form element',\n )\n }\n\n return <LocationPicker location={location} onChange={onChange} />\n }\n\n if (location) {\n return <LocationImage location={location} />\n }\n\n return null\n})\n\nfunction LocationIsOfflineFigureContent({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <h4 className=\"title is-4\">You are currently offline</h4>\n {children}\n </div>\n </figure>\n )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n location,\n isOpen,\n}: {\n location: Coords | undefined\n isOpen: boolean\n}) {\n if (isOpen) {\n if (location) {\n // If user is offline and attempting to pick a location and there is one set already\n return (\n <LocationIsOfflineFigureContent>\n <p>\n Click the <b>Confirm</b> button below to set the location to your\n current position.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and attempting to pick a location and there is one nothing set yet\n return (\n <LocationIsOfflineFigureContent>\n <p>\n We could not find your current location. Click the <b>Cancel</b>{' '}\n button below to try again.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and has confirmed a location\n if (location) {\n return (\n <LocationIsOfflineFigureContent>\n <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n <p>\n <b>{location.latitude}</b>\n </p>\n <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n <p>\n <b>{location.longitude}</b>\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // User is offline with no location set and not attempting to pick a location\n return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n location,\n}: {\n location: Coords\n}) {\n const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n const staticUrl = React.useMemo(() => {\n const center = `${location.latitude},${location.longitude}`\n const queries = {\n key: googleMapsApiKey,\n size: `${mapHeight}x${mapHeight}`,\n zoom: location.zoom,\n center,\n markers: `color:red|${center}`,\n }\n return `${apiUrl}?${queryString.stringify(queries)}`\n }, [googleMapsApiKey, location])\n\n return (\n <figure className=\"ob-figure\">\n <img\n className=\"ob-location__map\"\n alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n src={staticUrl}\n height={mapHeight}\n width={mapHeight}\n />\n </figure>\n )\n})\n\nconst LocationPicker = React.memo(function LocationPicker({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n const { isLoaded } = useJsApiLoader({\n googleMapsApiKey: googleMapsApiKey ?? '',\n })\n\n return (\n <figure className=\"ob-figure\">\n {isLoaded && (\n <GoogleLocationPicker location={location} onChange={onChange} />\n )}\n </figure>\n )\n})\n\nconst GoogleLocationPicker = React.memo(function GoogleLocationPicker({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const [map, setMap] = React.useState<google.maps.Map | null>(null)\n const [marker, setMarker] = React.useState<google.maps.Marker | null>(null)\n\n const originalCenter = React.useRef<{ lat: number; lng: number }>({\n lat: location.latitude,\n lng: location.longitude,\n })\n\n const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, [])\n\n React.useEffect(() => {\n if (!map) {\n return\n }\n const latLng = { lat: location.latitude, lng: location.longitude }\n map.panTo(latLng)\n if (!marker) {\n return\n }\n marker.setPosition(latLng)\n //this enables the marker to animate after moving it\n marker.setMap(null)\n marker.setAnimation(markerAnimation)\n marker.setMap(map)\n }, [map, marker, markerAnimation, location.latitude, location.longitude])\n\n const onZoomChanged = React.useCallback(() => {\n if (!map) {\n return\n }\n\n onChange({\n latitude: location.latitude,\n longitude: location.longitude,\n zoom: map.getZoom(),\n })\n }, [location.latitude, location.longitude, map, onChange])\n\n const mapMouseEvent = React.useCallback(\n (e: google.maps.MapMouseEvent) => {\n if (!e.latLng) {\n return\n }\n const { lat, lng } = e.latLng.toJSON()\n onChange({\n latitude: lat,\n longitude: lng,\n zoom: location.zoom,\n })\n },\n [onChange, location.zoom],\n )\n\n return (\n <GoogleMap\n onLoad={(map) => setMap(map)}\n onUnmount={() => setMap(null)}\n mapContainerStyle={{\n height: 300,\n }}\n center={originalCenter.current}\n zoom={location.zoom}\n onZoomChanged={onZoomChanged}\n onClick={mapMouseEvent}\n options={{ draggableCursor: 'pointer' }}\n >\n <Marker\n onLoad={(marker) => setMarker(marker)}\n onUnmount={() => setMarker(null)}\n animation={markerAnimation}\n position={originalCenter.current}\n draggable\n onDragEnd={mapMouseEvent}\n ></Marker>\n </GoogleMap>\n )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "5.12.0-beta.
|
|
4
|
+
"version": "5.12.0-beta.2",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|