@oneblink/apps-react 5.11.0-beta.5 → 5.12.0-beta.1

package/dist/components/renderer/Modal.js

@@ -13,7 +13,7 @@ function Modal({ isOpen, title, children, className, cardClassName, titleClassNa
             'is-active': isOpen,
         }), open: isOpen, slots: {
             backdrop: () => React.createElement("div", { className: "modal-background-faded" }),
-        }, container: ref === null || ref === void 0 ? void 0 : ref.current },
+        }, container: ref === null || ref === void 0 ? void 0 : ref.current, disableScrollLock: true },
         React.createElement("div", { className: clsx('modal-card', cardClassName) },
             title && (React.createElement("header", { className: "modal-card-head" },
                 React.createElement("p", { className: clsx('modal-card-title', titleClassName) }, title))),

package/dist/components/renderer/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/renderer/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAajD,MAAM,CAAC,MAAM,qBAAqB,GAChC,KAAK,CAAC,aAAa,CAAyC,IAAI,CAAC,CAAA;AAEnE,MAAM,UAAU,sBAAsB,CAAC,EACrC,QAAQ,EACR,SAAS,GAIV;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEnD,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;QAC7C,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,IACrC,QAAQ,CACL,CACyB,CAClC,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EACb,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,OAAO,GACD;IACN,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAA;IACnD,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE;YAC3C,WAAW,EAAE,MAAM;SACpB,CAAC,EACF,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE;YACL,QAAQ,EAAE,GAAG,EAAE,CAAC,6BAAK,SAAS,EAAC,wBAAwB,GAAO;SAC/D,EACD,SAAS,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO;QAEvB,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC;YAC9C,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAC,iBAAiB;gBACjC,2BAAG,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAG,KAAK,CAAK,CAC5D,CACV;YACD,iCAAS,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,IACvD,QAAQ,CACD;YACT,OAAO,IAAI,gCAAQ,SAAS,EAAC,iBAAiB,IAAE,OAAO,CAAU,CAC9D,CACG,CACZ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Modal as MuiModal } from '@mui/material'\n\ntype Props = {\n  isOpen: boolean\n  title?: string\n  children: React.ReactNode\n  actions: React.ReactNode | null\n  className?: string\n  cardClassName?: string\n  titleClassName?: string\n  bodyClassName?: string\n}\n\nexport const ModalContainerContext =\n  React.createContext<React.RefObject<HTMLDivElement> | null>(null)\n\nexport function ModalContainerProvider({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  const modalRef = React.useRef<HTMLDivElement>(null)\n\n  return (\n    <ModalContainerContext.Provider value={modalRef}>\n      <div ref={modalRef} className={className}>\n        {children}\n      </div>\n    </ModalContainerContext.Provider>\n  )\n}\n\nfunction Modal({\n  isOpen,\n  title,\n  children,\n  className,\n  cardClassName,\n  titleClassName,\n  bodyClassName,\n  actions,\n}: Props) {\n  const ref = React.useContext(ModalContainerContext)\n  return (\n    <MuiModal\n      className={clsx('modal ob-modal', className, {\n        'is-active': isOpen,\n      })}\n      open={isOpen}\n      slots={{\n        backdrop: () => <div className=\"modal-background-faded\"></div>,\n      }}\n      container={ref?.current}\n    >\n      <div className={clsx('modal-card', cardClassName)}>\n        {title && (\n          <header className=\"modal-card-head\">\n            <p className={clsx('modal-card-title', titleClassName)}>{title}</p>\n          </header>\n        )}\n        <section className={clsx('modal-card-body', bodyClassName)}>\n          {children}\n        </section>\n        {actions && <footer className=\"modal-card-foot\">{actions}</footer>}\n      </div>\n    </MuiModal>\n  )\n}\n\nexport default React.memo(Modal)\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/renderer/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAajD,MAAM,CAAC,MAAM,qBAAqB,GAChC,KAAK,CAAC,aAAa,CAAyC,IAAI,CAAC,CAAA;AAEnE,MAAM,UAAU,sBAAsB,CAAC,EACrC,QAAQ,EACR,SAAS,GAIV;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEnD,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;QAC7C,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,IACrC,QAAQ,CACL,CACyB,CAClC,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EACb,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,OAAO,GACD;IACN,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAA;IACnD,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE;YAC3C,WAAW,EAAE,MAAM;SACpB,CAAC,EACF,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE;YACL,QAAQ,EAAE,GAAG,EAAE,CAAC,6BAAK,SAAS,EAAC,wBAAwB,GAAO;SAC/D,EACD,SAAS,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,EACvB,iBAAiB,EAAE,IAAI;QAEvB,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC;YAC9C,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAC,iBAAiB;gBACjC,2BAAG,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAG,KAAK,CAAK,CAC5D,CACV;YACD,iCAAS,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,IACvD,QAAQ,CACD;YACT,OAAO,IAAI,gCAAQ,SAAS,EAAC,iBAAiB,IAAE,OAAO,CAAU,CAC9D,CACG,CACZ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Modal as MuiModal } from '@mui/material'\n\ntype Props = {\n  isOpen: boolean\n  title?: string\n  children: React.ReactNode\n  actions: React.ReactNode | null\n  className?: string\n  cardClassName?: string\n  titleClassName?: string\n  bodyClassName?: string\n}\n\nexport const ModalContainerContext =\n  React.createContext<React.RefObject<HTMLDivElement> | null>(null)\n\nexport function ModalContainerProvider({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  const modalRef = React.useRef<HTMLDivElement>(null)\n\n  return (\n    <ModalContainerContext.Provider value={modalRef}>\n      <div ref={modalRef} className={className}>\n        {children}\n      </div>\n    </ModalContainerContext.Provider>\n  )\n}\n\nfunction Modal({\n  isOpen,\n  title,\n  children,\n  className,\n  cardClassName,\n  titleClassName,\n  bodyClassName,\n  actions,\n}: Props) {\n  const ref = React.useContext(ModalContainerContext)\n  return (\n    <MuiModal\n      className={clsx('modal ob-modal', className, {\n        'is-active': isOpen,\n      })}\n      open={isOpen}\n      slots={{\n        backdrop: () => <div className=\"modal-background-faded\"></div>,\n      }}\n      container={ref?.current}\n      disableScrollLock={true}\n    >\n      <div className={clsx('modal-card', cardClassName)}>\n        {title && (\n          <header className=\"modal-card-head\">\n            <p className={clsx('modal-card-title', titleClassName)}>{title}</p>\n          </header>\n        )}\n        <section className={clsx('modal-card-body', bodyClassName)}>\n          {children}\n        </section>\n        {actions && <footer className=\"modal-card-foot\">{actions}</footer>}\n      </div>\n    </MuiModal>\n  )\n}\n\nexport default React.memo(Modal)\n"]}

package/dist/form-elements/FormElementLocation.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
+import { Sentry } from '@oneblink/apps';
+import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api';
+import queryString from 'query-string';
 import useBooleanState from '../hooks/useBooleanState';
 import useIsOffline from '../hooks/useIsOffline';
-import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api';
 import * as geolocation from '../services/geolocation';
-import queryString from 'query-string';
 import OnLoading from '../components/renderer/OnLoading';
 import defaultCoords from '../services/defaultCoordinates';
 import useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import { Sentry } from '@oneblink/apps';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 export const stringifyLocation = (location) => {
     if (location) {
@@ -177,12 +177,27 @@ const LocationPicker = React.memo(function SummaryResult({ location, onChange, }
         googleMapsApiKey: googleMapsApiKey !== null && googleMapsApiKey !== void 0 ? googleMapsApiKey : '',
     });
     const [map, setMap] = React.useState(null);
-    const center = React.useMemo(() => {
-        return {
-            lat: location.latitude,
-            lng: location.longitude,
-        };
-    }, [location.latitude, location.longitude]);
+    const [marker, setMarker] = React.useState(null);
+    const originalCenter = React.useRef({
+        lat: location.latitude,
+        lng: location.longitude,
+    });
+    const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, []);
+    React.useEffect(() => {
+        if (!map) {
+            return;
+        }
+        const latLng = { lat: location.latitude, lng: location.longitude };
+        map.panTo(latLng);
+        if (!marker) {
+            return;
+        }
+        marker.setPosition(latLng);
+        //this enables the marker to animate after moving it
+        marker.setMap(null);
+        marker.setAnimation(markerAnimation);
+        marker.setMap(map);
+    }, [map, marker, markerAnimation, location.latitude, location.longitude]);
     const onZoomChanged = React.useCallback(() => {
         if (!map) {
             return;
@@ -193,20 +208,21 @@ const LocationPicker = React.memo(function SummaryResult({ location, onChange, }
             zoom: map.getZoom(),
         });
     }, [location.latitude, location.longitude, map, onChange]);
+    const mapMouseEvent = React.useCallback((e) => {
+        if (!e.latLng) {
+            return;
+        }
+        const { lat, lng } = e.latLng.toJSON();
+        onChange({
+            latitude: lat,
+            longitude: lng,
+            zoom: location.zoom,
+        });
+    }, [onChange, location.zoom]);
     return (React.createElement("figure", { className: "ob-figure" }, isLoaded && (React.createElement(GoogleMap, { onLoad: (map) => setMap(map), onUnmount: () => setMap(null), mapContainerStyle: {
             height: 300,
-        }, center: center, zoom: location.zoom, onZoomChanged: onZoomChanged },
-        React.createElement(Marker, { animation: google.maps.Animation.DROP, position: center, draggable: true, onDragEnd: (e) => {
-                if (!e.latLng) {
-                    return;
-                }
-                const { lat, lng } = e.latLng.toJSON();
-                onChange({
-                    latitude: lat,
-                    longitude: lng,
-                    zoom: location.zoom,
-                });
-            } })))));
+        }, center: originalCenter.current, zoom: location.zoom, onZoomChanged: onZoomChanged, onClick: mapMouseEvent, options: { draggableCursor: 'pointer' } },
+        React.createElement(Marker, { onLoad: (marker) => setMarker(marker), onUnmount: () => setMarker(null), animation: markerAnimation, position: originalCenter.current, draggable: true, onDragEnd: mapMouseEvent })))));
 });
 export default React.memo(FormElementLocation);
 //# sourceMappingURL=FormElementLocation.js.map

package/dist/form-elements/FormElementLocation.js.map

@@ -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 useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'\nimport * as geolocation from '../services/geolocation'\nimport queryString from 'query-string'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\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\n  const center = React.useMemo(() => {\n    return {\n      lat: location.latitude,\n      lng: location.longitude,\n    }\n  }, [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  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={center}\n          zoom={location.zoom}\n          onZoomChanged={onZoomChanged}\n        >\n          <Marker\n            animation={google.maps.Animation.DROP}\n            position={center}\n            draggable\n            onDragEnd={(e) => {\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          ></Marker>\n        </GoogleMap>\n      )}\n    </figure>\n  )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
+{"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"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "5.11.0-beta.5",
+  "version": "5.12.0-beta.1",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"