@oneblink/apps-react 8.4.0-beta.7 → 8.4.0

package/dist/form-elements/FormElementNumber.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import _debounce from 'lodash.debounce';
 import LookupButton from '../components/renderer/LookupButton';
+import { localisationService } from '@oneblink/apps';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useIsPageVisible from '../hooks/useIsPageVisible';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
@@ -10,7 +11,15 @@ import MaterialIcon from '../components/MaterialIcon';
 function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const isPageVisible = useIsPageVisible();
-    const text = React.useMemo(() => (typeof value === 'number' ? value.toString() : ''), [value]);
+    const text = React.useMemo(() => {
+        if (typeof value !== 'number') {
+            return '';
+        }
+        if (element.displayAsCurrency) {
+            return localisationService.formatCurrency(value);
+        }
+        return value.toString();
+    }, [value, element.displayAsCurrency]);
     const handleChange = React.useCallback((event) => {
         const newValue = parseFloat(event.target.value);
         onChange(element, {
@@ -38,7 +47,7 @@ function FormElementNumber({ id, element, value, onChange, validationMessage, di
                 React.createElement("div", { className: "control is-expanded has-icons-right" },
                     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, ref: htmlInputElementRef, onWheel: handleWheel, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }),
                     React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement(MaterialIcon, { className: "is-size-5" }, "tag"))),
+                        React.createElement(MaterialIcon, { className: "is-size-5" }, element.displayAsCurrency ? 'attach_money' : '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, lookupButtonConfig: element.lookupButton }))) : isPageVisible ? (React.createElement(SliderControl, { id: id, text: text, value: value, element: element, onChange: handleChange, onBlur: setIsDirty })) : undefined,
@@ -79,7 +88,7 @@ const SliderControl = React.memo(function SliderControl({ id, text, value, eleme
     }, [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 })));
+        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: number, 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/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 LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\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  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(\n    () => (typeof value === 'number' ? value.toString() : ''),\n    [value],\n  )\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\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                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">tag</MaterialIcon>\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              lookupButtonConfig={element.lookupButton}\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        {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 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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AAYrD,SAAS,iBAAiB,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,EAAE,CAAA;QACX,CAAC;QACD,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC;YAC9B,OAAO,mBAAmB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;QAClD,CAAC;QACD,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAA;IACzB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,KAA0C,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC/C,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;SAC9C,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAEhE,iEAAiE;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;;QACzC,IAAI,mBAAmB,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC3D,OAAM;QACR,CAAC;QACD,MAAA,mBAAmB,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA;QACnC,UAAU,CAAC,GAAG,EAAE;;YACd,MAAA,mBAAmB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,WAAW,EACrB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAEzB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CACnB,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAC7C,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,uCAAuC,EACjD,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,mBAAmB,EACxB,OAAO,EAAE,WAAW,sBACF,eAAe,EACjC,YAAY,EAAE,sBAAsB,GACpC;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,IAChC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CACtC,CACV,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE,CACP,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAClB,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,GAClB,CACH,CAAC,CAAC,CAAC,SAAS;YAEZ,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,MAAM,yBAAyB,GAAG,EAAE,CAAA;AAEpC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,EACtD,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,GAQP;IACC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC7D,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE3D,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAe,CAAC,CAAC,EACvE,CAAC,KAAK,CAAC,CACR,CAAA;IAED,MAAM,qBAAqB,GAAG,KAAK,CAAC,OAAO,CACzC,GAAG,EAAE,CACH,SAAS,CAAC,CAAC,aAAgC,EAAE,EAAE;QAC7C,IAAI,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACpD,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,EAAE,GAAG,CAAC,EACT,EAAE,CACH,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IACE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;YACpB,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ;YACrC,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,EACrC,CAAC;YACD,OAAM;QACR,CAAC;QAED,MAAM,aAAa,GAAG,eAAe,CAAC,OAAO,CAAA;QAC7C,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAA;QAC3C,IAAI,aAAa,IAAI,YAAY,EAAE,CAAC;YAClC,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;YACnD,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAA;YACvD,MAAM,UAAU,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAA;YAC7D,MAAM,WAAW,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAA;YAC/D,MAAM,wBAAwB,GAC5B,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC,yBAAyB,CAAA;YAEjD,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,GAAG,UAAU,IAAI,CAAA;YACzD,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,IAC/B,WAAW,GAAG,CAAC,GAAG,wBACpB,IAAI,CAAA;YAEJ,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBACrD,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;YAC5C,CAAC;YACD,qBAAqB,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,gCACE,GAAG,EAAE,eAAe,EACpB,SAAS,EAAC,yCAAyC,EACnD,OAAO,EAAE,EAAE,IAEV,IAAI,CACE;QACT,+BACE,GAAG,EAAE,cAAc,EACnB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sGAAsG,EAChH,IAAI,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAC3D,GAAG,EAAE,OAAO,CAAC,SAAS,EACtB,GAAG,EAAE,OAAO,CAAC,SAAS,EACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,MAAM,GACd,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '@oneblink/apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\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  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\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                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\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              lookupButtonConfig={element.lookupButton}\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        {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 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={number}\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": "8.4.0-beta.7",
+  "version": "8.4.0",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
-    "@oneblink/sdk-core": "^8.3.0-beta.2",
+    "@oneblink/sdk-core": "^8.4.0-beta.2",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",