@oneblink/apps-react 2.3.0-beta.1 → 2.3.0-beta.2

package/dist/form-elements/FormElementLocation.js

@@ -1,205 +1,205 @@
-import * as React from 'react';
-import useBooleanState from '../hooks/useBooleanState';
-import useIsOffline from '../hooks/useIsOffline';
-import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
-import geolocation from '@blinkmobile/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';
-export const stringifyLocation = (location) => {
-    if (location) {
-        return `${location.latitude},${location.longitude}`;
-    }
-};
-function parseLocationValue(value) {
-    if (!value || typeof value !== 'object') {
-        return;
-    }
-    const { latitude, longitude, zoom } = value;
-    if (typeof latitude !== 'number' || typeof longitude !== 'number') {
-        return;
-    }
-    return {
-        latitude,
-        longitude,
-        zoom: typeof zoom === 'number' ? zoom : initialMapZoom,
-    };
-}
-const mapHeight = 300;
-const initialMapZoom = 15;
-const apiUrl = 'https://maps.googleapis.com/maps/api/staticmap';
-function FormElementLocation({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] = useBooleanState(false);
-    const [location, setLocation] = React.useState(undefined);
-    const onClear = React.useCallback(() => {
-        hideLocationPicker();
-        onChange(element, undefined);
-        setLocation(undefined);
-    }, [element, hideLocationPicker, onChange]);
-    const onCancel = React.useCallback(() => {
-        hideLocationPicker();
-        setLocation(parseLocationValue(value));
-    }, [hideLocationPicker, value]);
-    const onLocate = React.useCallback(async () => {
-        showLocationPicker();
-        if (location) {
-            return;
-        }
-        let currentLocation = null;
-        try {
-            const result = await geolocation.getCurrentPosition();
-            currentLocation = result.coords;
-        }
-        catch (err) {
-            console.error('Error while attempting to find the users current location', err);
-            Sentry.captureException(err);
-        }
-        finally {
-            setLocation(parseLocationValue(currentLocation || defaultCoords()));
-        }
-    }, [location, showLocationPicker]);
-    const isLoadingLocation = !location && isLocationPickerOpen;
-    const onConfirm = React.useCallback(() => {
-        setIsDirty();
-        hideLocationPicker();
-        onChange(element, location);
-    }, [element, hideLocationPicker, location, onChange, setIsDirty]);
-    // SET DEFAULT/PREFILL DATA
-    React.useEffect(() => {
-        const newValue = parseLocationValue(value);
-        if (newValue) {
-            setLocation(newValue);
-        }
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-location-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-location", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "control" },
-                React.createElement(LocationDisplay, { isOpen: isLocationPickerOpen, isLoading: isLoadingLocation, location: location, onChange: setLocation }),
-                React.createElement("div", { className: "buttons ob-buttons ob-location__buttons" }, isLocationPickerOpen ? (React.createElement(React.Fragment, null,
-                    React.createElement("button", { type: "button", className: "is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button", onClick: onCancel, disabled: element.readOnly }, "Cancel"),
-                    React.createElement("button", { type: "button", className: "is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button", onClick: onConfirm, disabled: element.readOnly || !location }, "Confirm"))) : (React.createElement(React.Fragment, null,
-                    React.createElement("button", { type: "button", className: "is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button", onClick: onClear, disabled: element.readOnly }, "Clear"),
-                    React.createElement("button", { type: "button", className: "is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button", onClick: onLocate, disabled: element.readOnly }, "Locate"))))),
-            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
-}
-const LocationDisplay = React.memo(function LocationDisplay({ isLoading, isOpen, location, onChange, }) {
-    const isOffline = useIsOffline();
-    if (isLoading) {
-        return (React.createElement("figure", { className: "ob-figure" },
-            React.createElement("div", { className: "figure-content" },
-                React.createElement(OnLoading, { small: true }))));
-    }
-    if (isOffline) {
-        return React.createElement(LocationIsOffline, { location: location, isOpen: isOpen });
-    }
-    if (isOpen) {
-        if (!location) {
-            // There is no location to display while user is attempting to pick a location.
-            // This should never happen, if loading has finished a default should be set.
-            // Fail fast!!!
-            // https://en.wikipedia.org/wiki/Fail-fast
-            throw new Error('Default location was not set for "location" form element');
-        }
-        return React.createElement(LocationPicker, { location: location, onChange: onChange });
-    }
-    if (location) {
-        return React.createElement(LocationImage, { location: location });
-    }
-    return null;
-});
-function LocationIsOfflineFigureContent({ children, }) {
-    return (React.createElement("figure", { className: "ob-figure" },
-        React.createElement("div", { className: "figure-content has-text-centered" },
-            React.createElement("h4", { className: "title is-4" }, "You are currently offline"),
-            children)));
-}
-const LocationIsOffline = React.memo(function LocationIsOffline({ location, isOpen, }) {
-    if (isOpen) {
-        if (location) {
-            // If user is offline and attempting to pick a location and there is one set already
-            return (React.createElement(LocationIsOfflineFigureContent, null,
-                React.createElement("p", null,
-                    "Click the ",
-                    React.createElement("b", null, "Confirm"),
-                    " button below to set the location to your current position.")));
-        }
-        // If user is offline and attempting to pick a location and there is one nothing set yet
-        return (React.createElement(LocationIsOfflineFigureContent, null,
-            React.createElement("p", null,
-                "We could not find your current location. Click the ",
-                React.createElement("b", null, "Cancel"),
-                ' ',
-                "button below to try again.")));
-    }
-    // If user is offline and has confirmed a location
-    if (location) {
-        return (React.createElement(LocationIsOfflineFigureContent, null,
-            React.createElement("h3", { className: "title is-3 ob-location__latitude" }, "Latitude"),
-            React.createElement("p", null,
-                React.createElement("b", null, location.latitude)),
-            React.createElement("h3", { className: "title is-3 ob-location__longitude" }, "Longitude"),
-            React.createElement("p", null,
-                React.createElement("b", null, location.longitude))));
-    }
-    // User is offline with no location set and not attempting to pick a location
-    return null;
-});
-const LocationImage = React.memo(function LocationImage({ location, }) {
-    const googleMapsApiKey = useGoogleMapsApiKeyKey();
-    const staticUrl = React.useMemo(() => {
-        const center = `${location.latitude},${location.longitude}`;
-        const queries = {
-            key: googleMapsApiKey,
-            size: `${mapHeight}x${mapHeight}`,
-            zoom: location.zoom,
-            center,
-            markers: `color:red|${center}`,
-        };
-        return `${apiUrl}?${queryString.stringify(queries)}`;
-    }, [googleMapsApiKey, location]);
-    return (React.createElement("figure", { className: "ob-figure" },
-        React.createElement("img", { className: "ob-location__map", alt: `map with center at ${location.latitude} latitude, ${location.longitude} longitude`, src: staticUrl, height: mapHeight, width: mapHeight })));
-});
-const LocationPicker = React.memo(function SummaryResult({ location, onChange, }) {
-    const googleMapsApiKey = useGoogleMapsApiKeyKey();
-    const [map, setMap] = React.useState(null);
-    const center = React.useMemo(() => {
-        return {
-            lat: location.latitude,
-            lng: location.longitude,
-        };
-    }, [location.latitude, location.longitude]);
-    const onZoomChanged = React.useCallback(() => {
-        if (!map) {
-            return;
-        }
-        onChange({
-            latitude: location.latitude,
-            longitude: location.longitude,
-            zoom: map.getZoom(),
-        });
-    }, [location.latitude, location.longitude, map, onChange]);
-    return (React.createElement("figure", { className: "ob-figure" },
-        React.createElement(LoadScript, { googleMapsApiKey: googleMapsApiKey || '' },
-            React.createElement(GoogleMap, { onLoad: (map) => setMap(map), onUnmount: () => setMap(null), mapContainerStyle: {
-                    height: 300,
-                }, center: center, zoom: location.zoom, onZoomChanged: onZoomChanged },
-                React.createElement(Marker, { animation: 2, position: center, draggable: true, onDragEnd: (e) => {
-                        if (!e.latLng) {
-                            return;
-                        }
-                        const { lat, lng } = e.latLng.toJSON();
-                        onChange({
-                            latitude: lat,
-                            longitude: lng,
-                            zoom: location.zoom,
-                        });
-                    } })))));
-});
-export default React.memo(FormElementLocation);
+import * as React from 'react';
+import useBooleanState from '../hooks/useBooleanState';
+import useIsOffline from '../hooks/useIsOffline';
+import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
+import geolocation from '@blinkmobile/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';
+export const stringifyLocation = (location) => {
+    if (location) {
+        return `${location.latitude},${location.longitude}`;
+    }
+};
+function parseLocationValue(value) {
+    if (!value || typeof value !== 'object') {
+        return;
+    }
+    const { latitude, longitude, zoom } = value;
+    if (typeof latitude !== 'number' || typeof longitude !== 'number') {
+        return;
+    }
+    return {
+        latitude,
+        longitude,
+        zoom: typeof zoom === 'number' ? zoom : initialMapZoom,
+    };
+}
+const mapHeight = 300;
+const initialMapZoom = 15;
+const apiUrl = 'https://maps.googleapis.com/maps/api/staticmap';
+function FormElementLocation({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] = useBooleanState(false);
+    const [location, setLocation] = React.useState(undefined);
+    const onClear = React.useCallback(() => {
+        hideLocationPicker();
+        onChange(element, undefined);
+        setLocation(undefined);
+    }, [element, hideLocationPicker, onChange]);
+    const onCancel = React.useCallback(() => {
+        hideLocationPicker();
+        setLocation(parseLocationValue(value));
+    }, [hideLocationPicker, value]);
+    const onLocate = React.useCallback(async () => {
+        showLocationPicker();
+        if (location) {
+            return;
+        }
+        let currentLocation = null;
+        try {
+            const result = await geolocation.getCurrentPosition();
+            currentLocation = result.coords;
+        }
+        catch (err) {
+            console.error('Error while attempting to find the users current location', err);
+            Sentry.captureException(err);
+        }
+        finally {
+            setLocation(parseLocationValue(currentLocation || defaultCoords()));
+        }
+    }, [location, showLocationPicker]);
+    const isLoadingLocation = !location && isLocationPickerOpen;
+    const onConfirm = React.useCallback(() => {
+        setIsDirty();
+        hideLocationPicker();
+        onChange(element, location);
+    }, [element, hideLocationPicker, location, onChange, setIsDirty]);
+    // SET DEFAULT/PREFILL DATA
+    React.useEffect(() => {
+        const newValue = parseLocationValue(value);
+        if (newValue) {
+            setLocation(newValue);
+        }
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-location-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-location", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "control" },
+                React.createElement(LocationDisplay, { isOpen: isLocationPickerOpen, isLoading: isLoadingLocation, location: location, onChange: setLocation }),
+                React.createElement("div", { className: "buttons ob-buttons ob-location__buttons" }, isLocationPickerOpen ? (React.createElement(React.Fragment, null,
+                    React.createElement("button", { type: "button", className: "is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button", onClick: onCancel, disabled: element.readOnly }, "Cancel"),
+                    React.createElement("button", { type: "button", className: "is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button", onClick: onConfirm, disabled: element.readOnly || !location }, "Confirm"))) : (React.createElement(React.Fragment, null,
+                    React.createElement("button", { type: "button", className: "is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button", onClick: onClear, disabled: element.readOnly }, "Clear"),
+                    React.createElement("button", { type: "button", className: "is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button", onClick: onLocate, disabled: element.readOnly }, "Locate"))))),
+            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+}
+const LocationDisplay = React.memo(function LocationDisplay({ isLoading, isOpen, location, onChange, }) {
+    const isOffline = useIsOffline();
+    if (isLoading) {
+        return (React.createElement("figure", { className: "ob-figure" },
+            React.createElement("div", { className: "figure-content" },
+                React.createElement(OnLoading, { small: true }))));
+    }
+    if (isOffline) {
+        return React.createElement(LocationIsOffline, { location: location, isOpen: isOpen });
+    }
+    if (isOpen) {
+        if (!location) {
+            // There is no location to display while user is attempting to pick a location.
+            // This should never happen, if loading has finished a default should be set.
+            // Fail fast!!!
+            // https://en.wikipedia.org/wiki/Fail-fast
+            throw new Error('Default location was not set for "location" form element');
+        }
+        return React.createElement(LocationPicker, { location: location, onChange: onChange });
+    }
+    if (location) {
+        return React.createElement(LocationImage, { location: location });
+    }
+    return null;
+});
+function LocationIsOfflineFigureContent({ children, }) {
+    return (React.createElement("figure", { className: "ob-figure" },
+        React.createElement("div", { className: "figure-content has-text-centered" },
+            React.createElement("h4", { className: "title is-4" }, "You are currently offline"),
+            children)));
+}
+const LocationIsOffline = React.memo(function LocationIsOffline({ location, isOpen, }) {
+    if (isOpen) {
+        if (location) {
+            // If user is offline and attempting to pick a location and there is one set already
+            return (React.createElement(LocationIsOfflineFigureContent, null,
+                React.createElement("p", null,
+                    "Click the ",
+                    React.createElement("b", null, "Confirm"),
+                    " button below to set the location to your current position.")));
+        }
+        // If user is offline and attempting to pick a location and there is one nothing set yet
+        return (React.createElement(LocationIsOfflineFigureContent, null,
+            React.createElement("p", null,
+                "We could not find your current location. Click the ",
+                React.createElement("b", null, "Cancel"),
+                ' ',
+                "button below to try again.")));
+    }
+    // If user is offline and has confirmed a location
+    if (location) {
+        return (React.createElement(LocationIsOfflineFigureContent, null,
+            React.createElement("h3", { className: "title is-3 ob-location__latitude" }, "Latitude"),
+            React.createElement("p", null,
+                React.createElement("b", null, location.latitude)),
+            React.createElement("h3", { className: "title is-3 ob-location__longitude" }, "Longitude"),
+            React.createElement("p", null,
+                React.createElement("b", null, location.longitude))));
+    }
+    // User is offline with no location set and not attempting to pick a location
+    return null;
+});
+const LocationImage = React.memo(function LocationImage({ location, }) {
+    const googleMapsApiKey = useGoogleMapsApiKeyKey();
+    const staticUrl = React.useMemo(() => {
+        const center = `${location.latitude},${location.longitude}`;
+        const queries = {
+            key: googleMapsApiKey,
+            size: `${mapHeight}x${mapHeight}`,
+            zoom: location.zoom,
+            center,
+            markers: `color:red|${center}`,
+        };
+        return `${apiUrl}?${queryString.stringify(queries)}`;
+    }, [googleMapsApiKey, location]);
+    return (React.createElement("figure", { className: "ob-figure" },
+        React.createElement("img", { className: "ob-location__map", alt: `map with center at ${location.latitude} latitude, ${location.longitude} longitude`, src: staticUrl, height: mapHeight, width: mapHeight })));
+});
+const LocationPicker = React.memo(function SummaryResult({ location, onChange, }) {
+    const googleMapsApiKey = useGoogleMapsApiKeyKey();
+    const [map, setMap] = React.useState(null);
+    const center = React.useMemo(() => {
+        return {
+            lat: location.latitude,
+            lng: location.longitude,
+        };
+    }, [location.latitude, location.longitude]);
+    const onZoomChanged = React.useCallback(() => {
+        if (!map) {
+            return;
+        }
+        onChange({
+            latitude: location.latitude,
+            longitude: location.longitude,
+            zoom: map.getZoom(),
+        });
+    }, [location.latitude, location.longitude, map, onChange]);
+    return (React.createElement("figure", { className: "ob-figure" },
+        React.createElement(LoadScript, { googleMapsApiKey: googleMapsApiKey || '' },
+            React.createElement(GoogleMap, { onLoad: (map) => setMap(map), onUnmount: () => setMap(null), mapContainerStyle: {
+                    height: 300,
+                }, center: center, zoom: location.zoom, onZoomChanged: onZoomChanged },
+                React.createElement(Marker, { animation: 2, position: center, draggable: true, onDragEnd: (e) => {
+                        if (!e.latLng) {
+                            return;
+                        }
+                        const { lat, lng } = e.latLng.toJSON();
+                        onChange({
+                            latitude: lat,
+                            longitude: lng,
+                            zoom: location.zoom,
+                        });
+                    } })))));
+});
+export default React.memo(FormElementLocation);
 //# sourceMappingURL=FormElementLocation.js.map

package/dist/form-elements/FormElementNumber.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.NumberElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<number>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementNumber>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.NumberElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<number>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementNumber>;
+export default _default;

package/dist/form-elements/FormElementNumber.js

@@ -1,73 +1,73 @@
-import * as React from 'react';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import _debounce from 'lodash.debounce';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import useIsPageVisible from '../hooks/useIsPageVisible';
-function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const isPageVisible = useIsPageVisible();
-    const htmlInputElementRef = React.useRef(null);
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const text = React.useMemo(() => (typeof value === 'number' ? value.toString() : ''), [value]);
-    const handleChange = React.useCallback((event) => {
-        onChange(element, 
-        // e.target.value is a string so '0' becomes true
-        event.target.value ? parseFloat(event.target.value) : undefined);
-    }, [element, onChange]);
-    React.useEffect(() => {
-        if (htmlInputElementRef.current) {
-            htmlInputElementRef.current.value = text;
-        }
-    }, [htmlInputElementRef, text]);
-    return (React.createElement("div", { className: "cypress-number-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-number", id: id, element: element, required: element.required },
-            !element.isSlider ? (React.createElement("div", { className: "field has-addons" },
-                React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { ref: htmlInputElementRef, type: "number", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-number-control", onChange: handleChange, required: element.required, disabled: element.readOnly, onBlur: setIsDirty }),
-                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement("i", { className: "material-icons is-size-5" }, "tag"))),
-                !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
-                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage }))) : isPageVisible ? (React.createElement(SliderControl, { id: id, text: text, value: value, element: element, onChange: handleChange, onBlur: setIsDirty })) : undefined,
-            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
-}
-const sliderBubbleWidthInPixels = 24;
-const SliderControl = React.memo(function SliderControl({ id, text, value, element, onChange, onBlur, }) {
-    const sliderOutputRef = React.useRef(null);
-    const sliderInputRef = React.useRef(null);
-    const number = React.useMemo(() => (typeof value === 'number' ? value : parseFloat(value)), [value]);
-    const removeIsDraggingClass = React.useMemo(() => _debounce((outputElement) => {
-        if (outputElement.classList.contains('is-dragging')) {
-            outputElement.classList.remove('is-dragging');
-        }
-    }, 500), []);
-    React.useEffect(() => {
-        if (Number.isNaN(number) ||
-            typeof element.maxNumber !== 'number' ||
-            typeof element.minNumber !== 'number') {
-            return;
-        }
-        const outputElement = sliderOutputRef.current;
-        const inputElement = sliderInputRef.current;
-        if (outputElement && inputElement) {
-            const range = element.maxNumber - element.minNumber;
-            const percentage = (number - element.minNumber) / range;
-            const inputWidth = inputElement.getBoundingClientRect().width;
-            const outputWidth = outputElement.getBoundingClientRect().width;
-            const sliderBubbleOffSetPixels = (percentage - 0.5) * -sliderBubbleWidthInPixels;
-            outputElement.style.left = `${percentage * inputWidth}px`;
-            outputElement.style.marginLeft = `-${outputWidth / 2 - sliderBubbleOffSetPixels}px`;
-            if (!outputElement.classList.contains('is-dragging')) {
-                outputElement.classList.add('is-dragging');
-            }
-            removeIsDraggingClass(outputElement);
-        }
-    }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass]);
-    return (React.createElement("div", { className: "control" },
-        React.createElement("output", { ref: sliderOutputRef, className: "ob-number__output cypress-number-output", htmlFor: id }, text),
-        React.createElement("input", { ref: sliderInputRef, id: id, name: element.name, className: "slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control", step: element.sliderIncrement ? element.sliderIncrement : 1, min: element.minNumber, max: element.maxNumber, value: text, type: "range", onChange: onChange, required: element.required, disabled: element.readOnly, onBlur: onBlur })));
-});
-export default React.memo(FormElementNumber);
+import * as React from 'react';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import _debounce from 'lodash.debounce';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import useIsPageVisible from '../hooks/useIsPageVisible';
+function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const isPageVisible = useIsPageVisible();
+    const htmlInputElementRef = React.useRef(null);
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const text = React.useMemo(() => (typeof value === 'number' ? value.toString() : ''), [value]);
+    const handleChange = React.useCallback((event) => {
+        onChange(element, 
+        // e.target.value is a string so '0' becomes true
+        event.target.value ? parseFloat(event.target.value) : undefined);
+    }, [element, onChange]);
+    React.useEffect(() => {
+        if (htmlInputElementRef.current) {
+            htmlInputElementRef.current.value = text;
+        }
+    }, [htmlInputElementRef, text]);
+    return (React.createElement("div", { className: "cypress-number-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-number", id: id, element: element, required: element.required },
+            !element.isSlider ? (React.createElement("div", { className: "field has-addons" },
+                React.createElement("div", { className: "control is-expanded has-icons-right" },
+                    React.createElement("input", { ref: htmlInputElementRef, type: "number", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-number-control", onChange: handleChange, required: element.required, disabled: element.readOnly, onBlur: setIsDirty }),
+                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
+                        React.createElement("i", { className: "material-icons is-size-5" }, "tag"))),
+                !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
+                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage }))) : isPageVisible ? (React.createElement(SliderControl, { id: id, text: text, value: value, element: element, onChange: handleChange, onBlur: setIsDirty })) : undefined,
+            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+}
+const sliderBubbleWidthInPixels = 24;
+const SliderControl = React.memo(function SliderControl({ id, text, value, element, onChange, onBlur, }) {
+    const sliderOutputRef = React.useRef(null);
+    const sliderInputRef = React.useRef(null);
+    const number = React.useMemo(() => (typeof value === 'number' ? value : parseFloat(value)), [value]);
+    const removeIsDraggingClass = React.useMemo(() => _debounce((outputElement) => {
+        if (outputElement.classList.contains('is-dragging')) {
+            outputElement.classList.remove('is-dragging');
+        }
+    }, 500), []);
+    React.useEffect(() => {
+        if (Number.isNaN(number) ||
+            typeof element.maxNumber !== 'number' ||
+            typeof element.minNumber !== 'number') {
+            return;
+        }
+        const outputElement = sliderOutputRef.current;
+        const inputElement = sliderInputRef.current;
+        if (outputElement && inputElement) {
+            const range = element.maxNumber - element.minNumber;
+            const percentage = (number - element.minNumber) / range;
+            const inputWidth = inputElement.getBoundingClientRect().width;
+            const outputWidth = outputElement.getBoundingClientRect().width;
+            const sliderBubbleOffSetPixels = (percentage - 0.5) * -sliderBubbleWidthInPixels;
+            outputElement.style.left = `${percentage * inputWidth}px`;
+            outputElement.style.marginLeft = `-${outputWidth / 2 - sliderBubbleOffSetPixels}px`;
+            if (!outputElement.classList.contains('is-dragging')) {
+                outputElement.classList.add('is-dragging');
+            }
+            removeIsDraggingClass(outputElement);
+        }
+    }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass]);
+    return (React.createElement("div", { className: "control" },
+        React.createElement("output", { ref: sliderOutputRef, className: "ob-number__output cypress-number-output", htmlFor: id }, text),
+        React.createElement("input", { ref: sliderInputRef, id: id, name: element.name, className: "slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control", step: element.sliderIncrement ? element.sliderIncrement : 1, min: element.minNumber, max: element.maxNumber, value: text, type: "range", onChange: onChange, required: element.required, disabled: element.readOnly, onBlur: onBlur })));
+});
+export default React.memo(FormElementNumber);
 //# sourceMappingURL=FormElementNumber.js.map

package/dist/form-elements/FormElementPointAddress.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes, PointTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    formId: number;
-    id: string;
-    element: FormTypes.PointAddressElement;
-    value: PointTypes.PointAddress | undefined;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    onChange: FormElementValueChangeHandler<PointTypes.PointAddress>;
-};
-declare function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementPointAddress>;
-export default _default;
+import * as React from 'react';
+import { FormTypes, PointTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    formId: number;
+    id: string;
+    element: FormTypes.PointAddressElement;
+    value: PointTypes.PointAddress | undefined;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    onChange: FormElementValueChangeHandler<PointTypes.PointAddress>;
+};
+declare function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementPointAddress>;
+export default _default;