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

package/dist/components/pickers/V4CompatibleTimePicker.js

@@ -1,54 +1,54 @@
-import * as React from 'react';
-import { MobileTimePicker } from '@mui/x-date-pickers';
-import { TextField, InputAdornment, IconButton } from '@mui/material';
-import { AccessTime } from '@mui/icons-material';
-import useBooleanState from '../../hooks/useBooleanState';
-const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
-    const [value, setValue] = React.useState(null);
-    const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
-    const [helperText, setHelperText] = React.useState(undefined);
-    const handleError = React.useCallback((error) => {
-        switch (error) {
-            case 'invalidDate': {
-                return setHelperText('Invalid Date Time');
-            }
-            default: {
-                return setHelperText(undefined);
-            }
-        }
-    }, []);
-    const onAccept = React.useCallback((date) => {
-        const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
-        if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
-            onChange(date);
-        }
-    }, [onChange, valueProp]);
-    const actions = React.useMemo(() => {
-        const actions = ['cancel', 'accept'];
-        if (showTodayButton) {
-            actions.unshift('today');
-        }
-        if (clearable) {
-            actions.unshift('clear');
-        }
-        return actions;
-    }, [clearable, showTodayButton]);
-    React.useEffect(() => {
-        setValue(valueProp);
-    }, [valueProp]);
-    return (React.createElement(MobileTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
-                startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
-                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
-                        React.createElement(AccessTime, null)))) : undefined,
-                endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
-                        React.createElement(AccessTime, null)))) : undefined,
-                ...(InputProps ? InputProps : {}),
-            }, "data-cypress": dataCypress })), onError: handleError, onChange: setValue, value: value, onAccept: onAccept, disabled: disabled, componentsProps: {
-            actionBar: {
-                actions,
-            },
-        }, ...rest }));
-};
-export default React.memo(V4CompatibleTimePicker);
+import * as React from 'react';
+import { MobileTimePicker } from '@mui/x-date-pickers';
+import { TextField, InputAdornment, IconButton } from '@mui/material';
+import { AccessTime } from '@mui/icons-material';
+import useBooleanState from '../../hooks/useBooleanState';
+const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
+    const [value, setValue] = React.useState(null);
+    const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
+    const [helperText, setHelperText] = React.useState(undefined);
+    const handleError = React.useCallback((error) => {
+        switch (error) {
+            case 'invalidDate': {
+                return setHelperText('Invalid Date Time');
+            }
+            default: {
+                return setHelperText(undefined);
+            }
+        }
+    }, []);
+    const onAccept = React.useCallback((date) => {
+        const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
+        if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
+            onChange(date);
+        }
+    }, [onChange, valueProp]);
+    const actions = React.useMemo(() => {
+        const actions = ['cancel', 'accept'];
+        if (showTodayButton) {
+            actions.unshift('today');
+        }
+        if (clearable) {
+            actions.unshift('clear');
+        }
+        return actions;
+    }, [clearable, showTodayButton]);
+    React.useEffect(() => {
+        setValue(valueProp);
+    }, [valueProp]);
+    return (React.createElement(MobileTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
+                startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(AccessTime, null)))) : undefined,
+                endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(AccessTime, null)))) : undefined,
+                ...(InputProps ? InputProps : {}),
+            }, "data-cypress": dataCypress })), onError: handleError, onChange: setValue, value: value, onAccept: onAccept, disabled: disabled, componentsProps: {
+            actionBar: {
+                actions,
+            },
+        }, ...rest }));
+};
+export default React.memo(V4CompatibleTimePicker);
 //# sourceMappingURL=V4CompatibleTimePicker.js.map

package/dist/components/renderer/AnnotationModal.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-declare function AnnotationModal({ imageSrc, onClose, onSave, }: {
-    imageSrc: string;
-    onClose: () => void;
-    onSave: (newValue: string) => void;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof AnnotationModal>;
-export default _default;
+import * as React from 'react';
+declare function AnnotationModal({ imageSrc, onClose, onSave, }: {
+    imageSrc: string;
+    onClose: () => void;
+    onSave: (newValue: string) => void;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AnnotationModal>;
+export default _default;

package/dist/components/renderer/AnnotationModal.js

@@ -1,102 +1,102 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import SignatureCanvas from 'react-signature-canvas';
-import useBooleanState from '../../hooks/useBooleanState';
-import scrollingService from '../../services/scrolling-service';
-const annotationButtonColours = [
-    '#000000',
-    '#ffffff',
-    '#f44336',
-    '#e91e63',
-    '#9c27b0',
-    '#673ab7',
-    '#3f51b5',
-    '#2196f3',
-    '#03a9f4',
-    '#00bcd4',
-    '#009688',
-    '#4caf50',
-    '#8bc34a',
-    '#cddc39',
-    '#ffee58',
-    '#ffca28',
-    '#ffa726',
-    '#ff5722',
-];
-function AnnotationModal({ imageSrc, onClose, onSave, }) {
-    const annotationContentElementRef = React.useRef(null);
-    const bmSignaturePadRef = React.useRef(null);
-    const signatureCanvasRef = React.useRef(null);
-    const [isDirty, setDirty] = useBooleanState(false);
-    const [penColour, setPenColour] = React.useState(annotationButtonColours[0]);
-    const handleCancelAnnotation = React.useCallback(() => {
-        if (signatureCanvasRef.current) {
-            console.log('Clearing annotation...');
-            signatureCanvasRef.current.clear();
-        }
-        onClose();
-    }, [onClose]);
-    const handleSaveAnnotation = React.useCallback(() => {
-        if (signatureCanvasRef.current) {
-            onSave(signatureCanvasRef.current.toDataURL());
-        }
-    }, [onSave]);
-    // SETTING CANVAS FROM PASSED VALUE
-    React.useEffect(() => {
-        const annotationContentElement = annotationContentElementRef.current;
-        const bmSignaturePadElement = bmSignaturePadRef.current;
-        const signatureCanvas = signatureCanvasRef.current;
-        if (!annotationContentElement ||
-            !bmSignaturePadElement ||
-            !signatureCanvas ||
-            typeof imageSrc !== 'string') {
-            return;
-        }
-        const canvasElement = signatureCanvas.getCanvas();
-        // Disable scrolling to allow for smooth drawing
-        scrollingService.disableScrolling();
-        const maxWidth = annotationContentElement.clientWidth;
-        const maxHeight = annotationContentElement.clientHeight;
-        const i = new Image();
-        i.onload = function () {
-            const imageWidth = i.width;
-            const imageHeight = i.height;
-            let canvasWidth = imageWidth;
-            let canvasHeight = imageHeight;
-            if (imageWidth > maxWidth || imageHeight > maxHeight) {
-                const widthRatio = maxWidth / imageWidth;
-                const heightRatio = maxHeight / imageHeight;
-                const ratio = Math.min(widthRatio, heightRatio);
-                canvasWidth = ratio * imageWidth;
-                canvasHeight = ratio * imageHeight;
-            }
-            bmSignaturePadElement.style.width = `${canvasWidth}px`;
-            bmSignaturePadElement.style.height = `${canvasHeight}px`;
-            bmSignaturePadElement.style.backgroundSize = 'cover';
-            bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`;
-            canvasElement.width = canvasWidth;
-            canvasElement.height = canvasHeight;
-        };
-        console.log('imageSrc', imageSrc);
-        i.src = imageSrc;
-        return () => {
-            scrollingService.enableScrolling();
-        };
-    }, [imageSrc]);
-    return (React.createElement("div", { className: "modal is-active" },
-        React.createElement("div", { className: "modal-background-faded" }),
-        React.createElement("div", { className: "ob-annotation" },
-            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-colours" }, annotationButtonColours.map((colour, index) => {
-                return (React.createElement("button", { key: index, type: "button", className: clsx('button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button', {
-                        'is-selected': penColour === colour,
-                    }), onClick: () => setPenColour(colour), style: { backgroundColor: colour } }));
-            })),
-            React.createElement("div", { ref: annotationContentElementRef, className: "ob-annotation__content" },
-                React.createElement("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad" },
-                    React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, onEnd: setDirty, penColor: penColour }))),
-            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
-                React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button", onClick: handleCancelAnnotation }, "Cancel"),
-                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button", disabled: !isDirty, onClick: handleSaveAnnotation }, "Save")))));
-}
-export default React.memo(AnnotationModal);
+import * as React from 'react';
+import clsx from 'clsx';
+import SignatureCanvas from 'react-signature-canvas';
+import useBooleanState from '../../hooks/useBooleanState';
+import scrollingService from '../../services/scrolling-service';
+const annotationButtonColours = [
+    '#000000',
+    '#ffffff',
+    '#f44336',
+    '#e91e63',
+    '#9c27b0',
+    '#673ab7',
+    '#3f51b5',
+    '#2196f3',
+    '#03a9f4',
+    '#00bcd4',
+    '#009688',
+    '#4caf50',
+    '#8bc34a',
+    '#cddc39',
+    '#ffee58',
+    '#ffca28',
+    '#ffa726',
+    '#ff5722',
+];
+function AnnotationModal({ imageSrc, onClose, onSave, }) {
+    const annotationContentElementRef = React.useRef(null);
+    const bmSignaturePadRef = React.useRef(null);
+    const signatureCanvasRef = React.useRef(null);
+    const [isDirty, setDirty] = useBooleanState(false);
+    const [penColour, setPenColour] = React.useState(annotationButtonColours[0]);
+    const handleCancelAnnotation = React.useCallback(() => {
+        if (signatureCanvasRef.current) {
+            console.log('Clearing annotation...');
+            signatureCanvasRef.current.clear();
+        }
+        onClose();
+    }, [onClose]);
+    const handleSaveAnnotation = React.useCallback(() => {
+        if (signatureCanvasRef.current) {
+            onSave(signatureCanvasRef.current.toDataURL());
+        }
+    }, [onSave]);
+    // SETTING CANVAS FROM PASSED VALUE
+    React.useEffect(() => {
+        const annotationContentElement = annotationContentElementRef.current;
+        const bmSignaturePadElement = bmSignaturePadRef.current;
+        const signatureCanvas = signatureCanvasRef.current;
+        if (!annotationContentElement ||
+            !bmSignaturePadElement ||
+            !signatureCanvas ||
+            typeof imageSrc !== 'string') {
+            return;
+        }
+        const canvasElement = signatureCanvas.getCanvas();
+        // Disable scrolling to allow for smooth drawing
+        scrollingService.disableScrolling();
+        const maxWidth = annotationContentElement.clientWidth;
+        const maxHeight = annotationContentElement.clientHeight;
+        const i = new Image();
+        i.onload = function () {
+            const imageWidth = i.width;
+            const imageHeight = i.height;
+            let canvasWidth = imageWidth;
+            let canvasHeight = imageHeight;
+            if (imageWidth > maxWidth || imageHeight > maxHeight) {
+                const widthRatio = maxWidth / imageWidth;
+                const heightRatio = maxHeight / imageHeight;
+                const ratio = Math.min(widthRatio, heightRatio);
+                canvasWidth = ratio * imageWidth;
+                canvasHeight = ratio * imageHeight;
+            }
+            bmSignaturePadElement.style.width = `${canvasWidth}px`;
+            bmSignaturePadElement.style.height = `${canvasHeight}px`;
+            bmSignaturePadElement.style.backgroundSize = 'cover';
+            bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`;
+            canvasElement.width = canvasWidth;
+            canvasElement.height = canvasHeight;
+        };
+        console.log('imageSrc', imageSrc);
+        i.src = imageSrc;
+        return () => {
+            scrollingService.enableScrolling();
+        };
+    }, [imageSrc]);
+    return (React.createElement("div", { className: "modal is-active" },
+        React.createElement("div", { className: "modal-background-faded" }),
+        React.createElement("div", { className: "ob-annotation" },
+            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-colours" }, annotationButtonColours.map((colour, index) => {
+                return (React.createElement("button", { key: index, type: "button", className: clsx('button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button', {
+                        'is-selected': penColour === colour,
+                    }), onClick: () => setPenColour(colour), style: { backgroundColor: colour } }));
+            })),
+            React.createElement("div", { ref: annotationContentElementRef, className: "ob-annotation__content" },
+                React.createElement("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad" },
+                    React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, onEnd: setDirty, penColor: penColour }))),
+            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
+                React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button", onClick: handleCancelAnnotation }, "Cancel"),
+                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button", disabled: !isDirty, onClick: handleSaveAnnotation }, "Save")))));
+}
+export default React.memo(AnnotationModal);
 //# sourceMappingURL=AnnotationModal.js.map

package/dist/components/renderer/AutocompleteDropdown.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-declare type AutocompleteOption<T> = {
-    label: string;
-    value: string;
-    data?: T;
-};
-declare type Props<T> = {
-    id: string;
-    label: string;
-    value: unknown | undefined;
-    placeholder: string | undefined;
-    required: boolean | undefined;
-    disabled: boolean | undefined;
-    isLoading?: boolean;
-    hasError?: boolean;
-    validationMessage: string | undefined;
-    displayValidationMessage: boolean;
-    searchDebounceMs: number;
-    searchMinCharacters: number;
-    onChangeValue: (newValue: string | undefined, data?: T) => Promise<void> | void;
-    onChangeLabel: (newLabel: string) => void;
-    onSearch: (label: string, abortSignal: AbortSignal) => Promise<AutocompleteOption<T>[]>;
-};
-declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, }: Props<T>): JSX.Element;
-declare const _default: typeof AutocompleteDropdown;
-export default _default;
+/// <reference types="react" />
+declare type AutocompleteOption<T> = {
+    label: string;
+    value: string;
+    data?: T;
+};
+declare type Props<T> = {
+    id: string;
+    label: string;
+    value: unknown | undefined;
+    placeholder: string | undefined;
+    required: boolean | undefined;
+    disabled: boolean | undefined;
+    isLoading?: boolean;
+    hasError?: boolean;
+    validationMessage: string | undefined;
+    displayValidationMessage: boolean;
+    searchDebounceMs: number;
+    searchMinCharacters: number;
+    onChangeValue: (newValue: string | undefined, data?: T) => Promise<void> | void;
+    onChangeLabel: (newLabel: string) => void;
+    onSearch: (label: string, abortSignal: AbortSignal) => Promise<AutocompleteOption<T>[]>;
+};
+declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, }: Props<T>): JSX.Element;
+declare const _default: typeof AutocompleteDropdown;
+export default _default;