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

package/dist/form-elements/FormElementTextarea.js

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const text = typeof value === 'string' ? value : '';
-    const isDisplayingCopyButton = !!element.readOnly && !!value;
-    const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
-    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage;
-    return (React.createElement("div", { className: "cypress-textarea-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "control" },
-                React.createElement("textarea", { placeholder: element.placeholderValue, id: id, name: element.name, className: "textarea input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
-            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
-                    isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),
-                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
-                            'has-text-danger': text.length > element.maxLength,
-                        }) },
-                        text.length,
-                        " / ",
-                        element.maxLength))))),
-            (isDisplayingLookupButton || isDisplayingCopyButton) && (React.createElement("div", { className: "buttons ob-buttons has-margin-top-8" },
-                isDisplayingCopyButton && (React.createElement(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })),
-                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage })))))));
-}
-export default React.memo(FormElementTextarea);
+import * as React from 'react';
+import clsx from 'clsx';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const text = typeof value === 'string' ? value : '';
+    const isDisplayingCopyButton = !!element.readOnly && !!value;
+    const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
+    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage;
+    return (React.createElement("div", { className: "cypress-textarea-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "control" },
+                React.createElement("textarea", { placeholder: element.placeholderValue, id: id, name: element.name, className: "textarea input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
+            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
+                    isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),
+                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                            'has-text-danger': text.length > element.maxLength,
+                        }) },
+                        text.length,
+                        " / ",
+                        element.maxLength))))),
+            (isDisplayingLookupButton || isDisplayingCopyButton) && (React.createElement("div", { className: "buttons ob-buttons has-margin-top-8" },
+                isDisplayingCopyButton && (React.createElement(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })),
+                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage })))))));
+}
+export default React.memo(FormElementTextarea);
 //# sourceMappingURL=FormElementTextarea.js.map

package/dist/form-elements/FormElementTime.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.TimeElement;
-    value: unknown | undefined;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementTime>;
-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.TimeElement;
+    value: unknown | undefined;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementTime>;
+export default _default;

package/dist/form-elements/FormElementTime.js

@@ -1,54 +1,54 @@
-import * as React from 'react';
-import { localisationService } from '@oneblink/apps';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useFlatpickr from '../hooks/useFlatpickr';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const htmlDivElementRef = React.useRef(null);
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const flatpickrOptions = React.useMemo(() => {
-        const opts = {
-            altInput: true,
-            dateFormat: 'H:i',
-            altFormat: localisationService.getFlatpickrFormats().time,
-            allowInput: false,
-            altInputClass: 'input ob-input cypress-time-control',
-            minDate: undefined,
-            maxDate: undefined,
-            defaultDate: undefined,
-            enableTime: true,
-            noCalendar: true,
-            time_24hr: false,
-            onClose: setIsDirty,
-        };
-        return opts;
-    }, [setIsDirty]);
-    const handleChange = React.useCallback((newValue) => onChange(element, newValue), [element, onChange]);
-    useFlatpickr({
-        id,
-        value,
-        onChange: handleChange,
-    }, flatpickrOptions, htmlDivElementRef);
-    const text = React.useMemo(() => {
-        if (typeof value !== 'string') {
-            return null;
-        }
-        return localisationService.formatTime(new Date(value));
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-time-element", ref: htmlDivElementRef },
-        React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
-                React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { type: "time", id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input" }),
-                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement("i", { className: "material-icons is-size-5" }, "schedule"))),
-                !!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 })),
-            (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))))));
-}
-export default React.memo(FormElementTime);
+import * as React from 'react';
+import { localisationService } from '@oneblink/apps';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import useFlatpickr from '../hooks/useFlatpickr';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const htmlDivElementRef = React.useRef(null);
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const flatpickrOptions = React.useMemo(() => {
+        const opts = {
+            altInput: true,
+            dateFormat: 'H:i',
+            altFormat: localisationService.getFlatpickrFormats().time,
+            allowInput: false,
+            altInputClass: 'input ob-input cypress-time-control',
+            minDate: undefined,
+            maxDate: undefined,
+            defaultDate: undefined,
+            enableTime: true,
+            noCalendar: true,
+            time_24hr: false,
+            onClose: setIsDirty,
+        };
+        return opts;
+    }, [setIsDirty]);
+    const handleChange = React.useCallback((newValue) => onChange(element, newValue), [element, onChange]);
+    useFlatpickr({
+        id,
+        value,
+        onChange: handleChange,
+    }, flatpickrOptions, htmlDivElementRef);
+    const text = React.useMemo(() => {
+        if (typeof value !== 'string') {
+            return null;
+        }
+        return localisationService.formatTime(new Date(value));
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-time-element", ref: htmlDivElementRef },
+        React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "field has-addons" },
+                React.createElement("div", { className: "control is-expanded has-icons-right" },
+                    React.createElement("input", { type: "time", id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input" }),
+                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
+                        React.createElement("i", { className: "material-icons is-size-5" }, "schedule"))),
+                !!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 })),
+            (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))))));
+}
+export default React.memo(FormElementTime);
 //# sourceMappingURL=FormElementTime.js.map

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

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-declare type Props = {
-    element: FormTypes.RadioButtonElement | FormTypes.CheckboxElement | FormTypes.ComplianceElement;
-    option: FormTypes.ChoiceElementOption;
-    isSelected: boolean;
-    onClick: () => void;
-    className: string;
-};
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare type Props = {
+    element: FormTypes.RadioButtonElement | FormTypes.CheckboxElement | FormTypes.ComplianceElement;
+    option: FormTypes.ChoiceElementOption;
+    isSelected: boolean;
+    onClick: () => void;
+    className: string;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/form-elements/OptionButton.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import useContrastColor from '../hooks/useContrastColor';
-const OptionButton = ({ element, option, isSelected, onClick, className, }) => {
-    const buttonContrastColor = useContrastColor(option.colour);
-    return (React.createElement("button", { type: "button", className: className, style: option.colour && isSelected
-            ? { backgroundColor: option.colour, color: buttonContrastColor }
-            : undefined, disabled: element.readOnly, onClick: onClick }, option.label));
-};
-export default React.memo(OptionButton);
+import * as React from 'react';
+import useContrastColor from '../hooks/useContrastColor';
+const OptionButton = ({ element, option, isSelected, onClick, className, }) => {
+    const buttonContrastColor = useContrastColor(option.colour);
+    return (React.createElement("button", { type: "button", className: className, style: option.colour && isSelected
+            ? { backgroundColor: option.colour, color: buttonContrastColor }
+            : undefined, disabled: element.readOnly, onClick: onClick }, option.label));
+};
+export default React.memo(OptionButton);
 //# sourceMappingURL=OptionButton.js.map

package/dist/hooks/attachments/useAttachment.d.ts

@@ -1,11 +1,12 @@
-import { FormTypes } from '@oneblink/types';
-import { Attachment, FormElementBinaryStorageValue } from '../../types/attachments';
-export declare type OnChange = (id: string, attachment: Attachment) => void;
-export default function useAttachment(value: FormElementBinaryStorageValue, element: FormTypes.FormElementBinaryStorage, onChange: OnChange, disableUpload?: boolean): {
-    canDownload: boolean;
-    imageUrl?: string | null | undefined;
-    loadImageUrlError?: Error | undefined;
-    isUploading: boolean;
-    uploadErrorMessage: string | undefined;
-    isLoadingImageUrl: boolean;
-};
+import { FormTypes } from '@oneblink/types';
+import { Attachment, FormElementBinaryStorageValue } from '../../types/attachments';
+export declare type OnChange = (id: string, attachment: Attachment) => void;
+export default function useAttachment(value: FormElementBinaryStorageValue, element: FormTypes.FormElementBinaryStorage, onChange: OnChange, disableUpload?: boolean): {
+    canDownload: boolean;
+    progress: number | undefined;
+    imageUrl?: string | null | undefined;
+    loadImageUrlError?: Error | undefined;
+    isUploading: boolean;
+    uploadErrorMessage: string | undefined;
+    isLoadingImageUrl: boolean;
+};