@oneblink/apps-react 2.5.3-beta.1 → 2.5.3-beta.3

package/dist/components/formStore/FormStoreTableProvider.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import querystring from 'query-string';
 import { formStoreService } from '@oneblink/apps';
 import useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad';
@@ -16,7 +16,6 @@ import { FormStoreTableContext } from './useFormStoreTableContext';
 export function FormStoreTableProvider({ form, children, }) {
     var _a, _b;
     const history = useHistory();
-    const location = useLocation();
     const { isLoading, loadError, records: formStoreRecords, onTryAgain, onRefresh, filters: parameters, onChangeFilters: onChangeParameters, nextOffset, } = useInfiniteScrollDataLoad({
         limit: 50,
         isManual: true,
@@ -64,14 +63,12 @@ export function FormStoreTableProvider({ form, children, }) {
         }, []),
     });
     React.useEffect(() => {
-        const currentSearch = querystring.parse(location.search);
         history.replace({
             search: querystring.stringify({
-                ...currentSearch,
                 parameters: JSON.stringify(parameters),
             }),
         });
-    }, [history, location.search, parameters]);
+    }, [history, parameters]);
     const submissionIdValidationMessage = useSubmissionIdValidationMessage((_b = (_a = parameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId) === null || _b === void 0 ? void 0 : _b.$eq);
     const formStoreTable = useFormStoreTable({
         formStoreRecords,

package/dist/components/formStore/FormStoreTableProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormStoreTableProvider.js","sourceRoot":"","sources":["../../../src/components/formStore/FormStoreTableProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory, useLocation } from 'react-router-dom'\nimport querystring from 'query-string'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\nimport useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad'\nimport useFormStoreTable from './table/useFormStoreTable'\nimport { Box, Button, Grid } from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport {\n  Settings as SettingsIcon,\n  ReadMore as LoadMoreIcon,\n} from '@mui/icons-material'\nimport { FormTypes } from '@oneblink/types'\nimport useSubmissionIdValidationMessage, {\n  validateIsUUID,\n} from '../../hooks/useSubmissionIdIsValid'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport NoResourcesYet from '../messages/NoResourcesYet'\nimport FormStoreIcon from './display/FormStoreIcon'\nimport { FormStoreTableContext } from './useFormStoreTableContext'\n\nexport function FormStoreTableProvider({\n  form,\n  children,\n}: {\n  form: FormTypes.Form\n  children: React.ReactNode\n}) {\n  const history = useHistory()\n  const location = useLocation()\n  const {\n    isLoading,\n    loadError,\n    records: formStoreRecords,\n    onTryAgain,\n    onRefresh,\n    filters: parameters,\n    onChangeFilters: onChangeParameters,\n    nextOffset,\n  } = useInfiniteScrollDataLoad<\n    formStoreService.FormStoreParameters,\n    FormStoreRecord\n  >({\n    limit: 50,\n    isManual: true,\n    debounceSearchMs: 1000,\n    onDefaultFilters: React.useCallback((query) => {\n      let defaultParameters: formStoreService.FormStoreParameters = {}\n      try {\n        if (typeof query.parameters === 'string') {\n          defaultParameters = JSON.parse(query.parameters)\n        }\n      } catch (error) {\n        console.warn('Could not parse filter as JSON', error)\n      }\n      if (!defaultParameters.sorting) {\n        defaultParameters.sorting = [\n          { property: 'dateTimeSubmitted', direction: 'descending' },\n        ]\n      }\n      return defaultParameters\n    }, []),\n    onSearch: React.useCallback(\n      async (currentParameters, paging, abortSignal) => {\n        // Exclude all search parameters if searching\n        // for a specific submission using an identifier\n        const filters = currentParameters.filters?.submissionId\n          ? {\n              submissionId: currentParameters.filters.submissionId,\n            }\n          : currentParameters.filters\n        const result = await formStoreService.searchFormStoreRecords(\n          {\n            ...currentParameters,\n            paging,\n            formId: form.id,\n            filters,\n          },\n          abortSignal,\n        )\n        return {\n          records: result.formStoreRecords,\n          meta: result.meta,\n        }\n      },\n      [form.id],\n    ),\n    onValidateFilters: React.useCallback(\n      (currentParameters: formStoreService.FormStoreParameters) => {\n        return validateIsUUID(currentParameters.filters?.submissionId?.$eq)\n      },\n      [],\n    ),\n  })\n\n  React.useEffect(() => {\n    const currentSearch = querystring.parse(location.search)\n    history.replace({\n      search: querystring.stringify({\n        ...currentSearch,\n        parameters: JSON.stringify(parameters),\n      }),\n    })\n  }, [history, location.search, parameters])\n\n  const submissionIdValidationMessage = useSubmissionIdValidationMessage(\n    parameters.filters?.submissionId?.$eq,\n  )\n\n  const formStoreTable = useFormStoreTable({\n    formStoreRecords,\n    parameters,\n    onChangeParameters,\n    submissionIdValidationMessage,\n    form,\n    onRefresh,\n  })\n\n  return (\n    <FormStoreTableContext.Provider value={formStoreTable}>\n      {children}\n      {formStoreTable.visibleColumns.length ? (\n        <>\n          {!formStoreRecords.length && !isLoading && !loadError && (\n            <NoResourcesYet\n              IconComponent={FormStoreIcon}\n              title=\"No Records Found...\"\n            >\n              There are no Submissions matching your filters.\n            </NoResourcesYet>\n          )}\n        </>\n      ) : (\n        <NoResourcesYet\n          IconComponent={SettingsIcon}\n          title=\"No Columns Visible\"\n          gutterBottom\n        >\n          It looks like you have hidden all of the available columns. Please\n          enable at least one column to view submissions.\n        </NoResourcesYet>\n      )}\n\n      {isLoading === 'INITIAL' && (\n        <div className=\"ob-form-store-loading-initial\">\n          <LoadingWithMessage message=\"Loading initial records...\" />\n        </div>\n      )}\n\n      {loadError && (\n        <>\n          <ErrorMessage\n            title=\"Error Retrieving Submissions\"\n            gutterBottom\n            gutterTop\n          >\n            {loadError.message}\n          </ErrorMessage>\n          <Grid container justifyContent=\"center\">\n            <Button\n              className=\"ob-form-store-try-again-button\"\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain()}\n            >\n              Try Again\n            </Button>\n          </Grid>\n        </>\n      )}\n\n      {!!nextOffset && !loadError && isLoading !== 'INITIAL' && (\n        <Box padding={4} className=\"ob-form-store-load-more-button-container\">\n          <Grid container justifyContent=\"center\">\n            <LoadingButton\n              className=\"ob-form-store-load-more-button\"\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain(nextOffset)}\n              loading={isLoading === 'MORE'}\n              size=\"large\"\n              loadingPosition=\"start\"\n              startIcon={<LoadMoreIcon />}\n              classes={{\n                loadingIndicator: 'ob-form-store-loading-more-indicator',\n              }}\n            >\n              Load More\n            </LoadingButton>\n          </Grid>\n        </Box>\n      )}\n    </FormStoreTableContext.Provider>\n  )\n}\n"]}
+{"version":3,"file":"FormStoreTableProvider.js","sourceRoot":"","sources":["../../../src/components/formStore/FormStoreTableProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport querystring from 'query-string'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\nimport useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad'\nimport useFormStoreTable from './table/useFormStoreTable'\nimport { Box, Button, Grid } from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport {\n  Settings as SettingsIcon,\n  ReadMore as LoadMoreIcon,\n} from '@mui/icons-material'\nimport { FormTypes } from '@oneblink/types'\nimport useSubmissionIdValidationMessage, {\n  validateIsUUID,\n} from '../../hooks/useSubmissionIdIsValid'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport NoResourcesYet from '../messages/NoResourcesYet'\nimport FormStoreIcon from './display/FormStoreIcon'\nimport { FormStoreTableContext } from './useFormStoreTableContext'\n\nexport function FormStoreTableProvider({\n  form,\n  children,\n}: {\n  form: FormTypes.Form\n  children: React.ReactNode\n}) {\n  const history = useHistory()\n  const {\n    isLoading,\n    loadError,\n    records: formStoreRecords,\n    onTryAgain,\n    onRefresh,\n    filters: parameters,\n    onChangeFilters: onChangeParameters,\n    nextOffset,\n  } = useInfiniteScrollDataLoad<\n    formStoreService.FormStoreParameters,\n    FormStoreRecord\n  >({\n    limit: 50,\n    isManual: true,\n    debounceSearchMs: 1000,\n    onDefaultFilters: React.useCallback((query) => {\n      let defaultParameters: formStoreService.FormStoreParameters = {}\n      try {\n        if (typeof query.parameters === 'string') {\n          defaultParameters = JSON.parse(query.parameters)\n        }\n      } catch (error) {\n        console.warn('Could not parse filter as JSON', error)\n      }\n      if (!defaultParameters.sorting) {\n        defaultParameters.sorting = [\n          { property: 'dateTimeSubmitted', direction: 'descending' },\n        ]\n      }\n      return defaultParameters\n    }, []),\n    onSearch: React.useCallback(\n      async (currentParameters, paging, abortSignal) => {\n        // Exclude all search parameters if searching\n        // for a specific submission using an identifier\n        const filters = currentParameters.filters?.submissionId\n          ? {\n              submissionId: currentParameters.filters.submissionId,\n            }\n          : currentParameters.filters\n        const result = await formStoreService.searchFormStoreRecords(\n          {\n            ...currentParameters,\n            paging,\n            formId: form.id,\n            filters,\n          },\n          abortSignal,\n        )\n        return {\n          records: result.formStoreRecords,\n          meta: result.meta,\n        }\n      },\n      [form.id],\n    ),\n    onValidateFilters: React.useCallback(\n      (currentParameters: formStoreService.FormStoreParameters) => {\n        return validateIsUUID(currentParameters.filters?.submissionId?.$eq)\n      },\n      [],\n    ),\n  })\n\n  React.useEffect(() => {\n    history.replace({\n      search: querystring.stringify({\n        parameters: JSON.stringify(parameters),\n      }),\n    })\n  }, [history, parameters])\n\n  const submissionIdValidationMessage = useSubmissionIdValidationMessage(\n    parameters.filters?.submissionId?.$eq,\n  )\n\n  const formStoreTable = useFormStoreTable({\n    formStoreRecords,\n    parameters,\n    onChangeParameters,\n    submissionIdValidationMessage,\n    form,\n    onRefresh,\n  })\n\n  return (\n    <FormStoreTableContext.Provider value={formStoreTable}>\n      {children}\n      {formStoreTable.visibleColumns.length ? (\n        <>\n          {!formStoreRecords.length && !isLoading && !loadError && (\n            <NoResourcesYet\n              IconComponent={FormStoreIcon}\n              title=\"No Records Found...\"\n            >\n              There are no Submissions matching your filters.\n            </NoResourcesYet>\n          )}\n        </>\n      ) : (\n        <NoResourcesYet\n          IconComponent={SettingsIcon}\n          title=\"No Columns Visible\"\n          gutterBottom\n        >\n          It looks like you have hidden all of the available columns. Please\n          enable at least one column to view submissions.\n        </NoResourcesYet>\n      )}\n\n      {isLoading === 'INITIAL' && (\n        <div className=\"ob-form-store-loading-initial\">\n          <LoadingWithMessage message=\"Loading initial records...\" />\n        </div>\n      )}\n\n      {loadError && (\n        <>\n          <ErrorMessage\n            title=\"Error Retrieving Submissions\"\n            gutterBottom\n            gutterTop\n          >\n            {loadError.message}\n          </ErrorMessage>\n          <Grid container justifyContent=\"center\">\n            <Button\n              className=\"ob-form-store-try-again-button\"\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain()}\n            >\n              Try Again\n            </Button>\n          </Grid>\n        </>\n      )}\n\n      {!!nextOffset && !loadError && isLoading !== 'INITIAL' && (\n        <Box padding={4} className=\"ob-form-store-load-more-button-container\">\n          <Grid container justifyContent=\"center\">\n            <LoadingButton\n              className=\"ob-form-store-load-more-button\"\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain(nextOffset)}\n              loading={isLoading === 'MORE'}\n              size=\"large\"\n              loadingPosition=\"start\"\n              startIcon={<LoadMoreIcon />}\n              classes={{\n                loadingIndicator: 'ob-form-store-loading-more-indicator',\n              }}\n            >\n              Load More\n            </LoadingButton>\n          </Grid>\n        </Box>\n      )}\n    </FormStoreTableContext.Provider>\n  )\n}\n"]}

package/dist/form-elements/FormElementNumber.js

@@ -1,4 +1,3 @@
-var _a;
 import * as React from 'react';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import _debounce from 'lodash.debounce';
@@ -6,43 +5,19 @@ import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useIsPageVisible from '../hooks/useIsPageVisible';
-import parser from 'ua-parser-js';
-let legacyAppleNumberInput = false;
-const parsedUserAgent = parser(window.navigator.userAgent);
-if (((_a = parsedUserAgent.browser.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('safari')) &&
-    typeof parsedUserAgent.browser.version === 'string') {
-    const safariVersion = parseFloat(parsedUserAgent.browser.version);
-    legacyAppleNumberInput = !Number.isNaN(safariVersion) && safariVersion < 16;
-}
 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);
+        const newValue = parseFloat(event.target.value);
+        onChange(element, isNaN(newValue) ? undefined : newValue);
     }, [element, onChange]);
-    const handleBlur = React.useCallback((event) => {
-        if (htmlInputElementRef.current) {
-            const newValue = parseFloat(event.target.value);
-            if (Number.isNaN(newValue)) {
-                htmlInputElementRef.current.value = '';
-            }
-        }
-        setIsDirty();
-    }, [setIsDirty]);
-    React.useEffect(() => {
-        if (legacyAppleNumberInput && 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, value: legacyAppleNumberInput ? undefined : text, name: element.name, className: "input ob-input cypress-number-control", onChange: handleChange, required: element.required, disabled: element.readOnly, onBlur: handleBlur }),
+                    React.createElement("input", { type: "number", placeholder: element.placeholderValue, id: id, value: typeof value === 'number' ? value : '', 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" },

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport parser from 'ua-parser-js'\n\ntype Props = {\n  id: string\n  element: FormTypes.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nlet legacyAppleNumberInput = false\nconst parsedUserAgent = parser(window.navigator.userAgent)\nif (\n  parsedUserAgent.browser.name?.toLowerCase().includes('safari') &&\n  typeof parsedUserAgent.browser.version === 'string'\n) {\n  const safariVersion = parseFloat(parsedUserAgent.browser.version)\n  legacyAppleNumberInput = !Number.isNaN(safariVersion) && safariVersion < 16\n}\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const isPageVisible = useIsPageVisible()\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const text = React.useMemo(\n    () => (typeof value === 'number' ? value.toString() : ''),\n    [value],\n  )\n\n  const handleChange = React.useCallback(\n    (event) => {\n      onChange(\n        element,\n        // e.target.value is a string so '0' becomes true\n        event.target.value ? parseFloat(event.target.value) : undefined,\n      )\n    },\n    [element, onChange],\n  )\n\n  const handleBlur = React.useCallback(\n    (event) => {\n      if (htmlInputElementRef.current) {\n        const newValue = parseFloat(event.target.value)\n        if (Number.isNaN(newValue)) {\n          htmlInputElementRef.current.value = ''\n        }\n      }\n      setIsDirty()\n    },\n    [setIsDirty],\n  )\n\n  React.useEffect(() => {\n    if (legacyAppleNumberInput && htmlInputElementRef.current) {\n      htmlInputElementRef.current.value = text\n    }\n  }, [htmlInputElementRef, text])\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                ref={htmlInputElementRef}\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={legacyAppleNumberInput ? undefined : text}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={handleBlur}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <i className=\"material-icons is-size-5\">tag</i>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n          />\n        ) : undefined}\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\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 sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={text}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}
+{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\n\ntype Props = {\n  id: string\n  element: FormTypes.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const isPageVisible = useIsPageVisible()\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const text = React.useMemo(\n    () => (typeof value === 'number' ? value.toString() : ''),\n    [value],\n  )\n\n  const handleChange = React.useCallback(\n    (event) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, isNaN(newValue) ? undefined : newValue)\n    },\n    [element, onChange],\n  )\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <i className=\"material-icons is-size-5\">tag</i>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n          />\n        ) : undefined}\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\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 sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={text}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}

package/package.json

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