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

package/dist/form-elements/FormElementCompliance.js

@@ -1,130 +1,130 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import FormElementOptions from '../components/renderer/FormElementOptions';
-import useFormElementOptions from '../hooks/useFormElementOptions';
-import useBooleanState from '../hooks/useBooleanState';
-import useToggleComplianceChildren from '../hooks/useToggleComplianceChildren';
-import OptionButton from './OptionButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import ComplianceButton from './ComplianceButton';
-import FormElementFiles from './FormElementFiles';
-import FormElementTextarea from './FormElementTextarea';
-const baseElement = {
-    conditionallyShow: false,
-    isDataLookup: false,
-    isElementLookup: false,
-    required: false,
-    requiresAllConditionallyShowPredicates: false,
-};
-function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, isEven, }) {
-    const typedValue = value;
-    const notesElement = React.useMemo(() => ({
-        ...baseElement,
-        readOnly: element.readOnly,
-        id: `${element.id}-notes`,
-        label: 'Notes',
-        name: `${element.name}_notes`,
-        type: 'textarea',
-    }), [element.id, element.name, element.readOnly]);
-    const filesElement = React.useMemo(() => ({
-        ...baseElement,
-        readOnly: element.readOnly,
-        id: `${element.id}-files`,
-        label: 'Media',
-        name: `${element.name}_files`,
-        type: 'files',
-        maxEntries: undefined,
-        minEntries: undefined,
-        restrictFileTypes: false,
-        storageType: element.storageType,
-    }), [element.id, element.name, element.readOnly, element.storageType]);
-    const handleValueChange = React.useCallback((fe, v) => {
-        onChange(fe, (existingValue) => {
-            let newValue = undefined;
-            if (typeof v === 'function') {
-                newValue = v(existingValue ? existingValue.value : undefined);
-            }
-            else {
-                newValue = v;
-            }
-            if (!newValue) {
-                return;
-            }
-            return {
-                ...existingValue,
-                value: newValue,
-            };
-        });
-    }, [onChange]);
-    const handleNotesChange = React.useCallback((fe, v) => {
-        onChange(element, (existingValue) => {
-            if (!existingValue) {
-                return;
-            }
-            let newNotes = undefined;
-            if (typeof v === 'function') {
-                newNotes = v(existingValue.notes);
-            }
-            else {
-                newNotes = v;
-            }
-            return {
-                ...existingValue,
-                notes: newNotes,
-            };
-        });
-    }, [element, onChange]);
-    const handleFilesChange = React.useCallback((fe, v) => {
-        onChange(element, (existingValue) => {
-            if (!existingValue) {
-                return;
-            }
-            let newFiles = undefined;
-            if (typeof v === 'function') {
-                newFiles = v(existingValue.files);
-            }
-            else {
-                newFiles = v;
-            }
-            return {
-                ...existingValue,
-                files: newFiles && newFiles.length ? newFiles : undefined,
-            };
-        });
-    }, [element, onChange]);
-    const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(element, !!(typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes), handleNotesChange);
-    const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(element, !!(typedValue === null || typedValue === void 0 ? void 0 : typedValue.files), handleFilesChange);
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const filteredOptions = useFormElementOptions({
-        element,
-        value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.value,
-        onChange: handleValueChange,
-        conditionallyShownOptions,
-    });
-    return (React.createElement("div", { className: "cypress-compliance-element" },
-        React.createElement(FormElementLabelContainer, { className: `ob-compliance ${!isEven ? 'even' : 'odd'}`, id: id, element: element, required: element.required },
-            React.createElement("div", { className: "ob-compliance__container" },
-                React.createElement(FormElementOptions, { options: element.options },
-                    React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio cypress-radio-button-group" }, filteredOptions.map((option) => {
-                        const isSelected = (typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) === option.value;
-                        return (React.createElement("div", { className: "ob-button-radio-container", key: option.value },
-                            React.createElement(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => {
-                                    setIsDirty();
-                                    handleValueChange(element, option.value);
-                                }, className: clsx('button ob-button ob-button__input ob-radio__button cypress-radio-button-control', {
-                                    'is-primary': isSelected,
-                                    'is-light': !isSelected,
-                                }) })));
-                    }))),
-                (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))),
-                React.createElement("div", { className: "buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group" },
-                    React.createElement(ComplianceButton, { isActive: isShowingNotes, icon: "notes", onClick: toggleIsShowingNotes, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) }, "Notes"),
-                    React.createElement(ComplianceButton, { isActive: isShowingFiles, icon: "perm_media", onClick: toggleIsShowingFiles, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) }, "Media")),
-                isShowingNotes && (React.createElement("div", { className: "ob-compliance-child-element" },
-                    React.createElement(FormElementTextarea, { id: `${id}-notes`, onChange: handleNotesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes, element: notesElement }))),
-                isShowingFiles && (React.createElement("div", { className: "ob-compliance-child-element" },
-                    React.createElement(FormElementFiles, { id: `${id}-files`, onChange: handleFilesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.files, element: filesElement })))))));
-}
-export default React.memo(FormElementCompliance);
+import * as React from 'react';
+import clsx from 'clsx';
+import FormElementOptions from '../components/renderer/FormElementOptions';
+import useFormElementOptions from '../hooks/useFormElementOptions';
+import useBooleanState from '../hooks/useBooleanState';
+import useToggleComplianceChildren from '../hooks/useToggleComplianceChildren';
+import OptionButton from './OptionButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import ComplianceButton from './ComplianceButton';
+import FormElementFiles from './FormElementFiles';
+import FormElementTextarea from './FormElementTextarea';
+const baseElement = {
+    conditionallyShow: false,
+    isDataLookup: false,
+    isElementLookup: false,
+    required: false,
+    requiresAllConditionallyShowPredicates: false,
+};
+function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, isEven, }) {
+    const typedValue = value;
+    const notesElement = React.useMemo(() => ({
+        ...baseElement,
+        readOnly: element.readOnly,
+        id: `${element.id}-notes`,
+        label: 'Notes',
+        name: `${element.name}_notes`,
+        type: 'textarea',
+    }), [element.id, element.name, element.readOnly]);
+    const filesElement = React.useMemo(() => ({
+        ...baseElement,
+        readOnly: element.readOnly,
+        id: `${element.id}-files`,
+        label: 'Media',
+        name: `${element.name}_files`,
+        type: 'files',
+        maxEntries: undefined,
+        minEntries: undefined,
+        restrictFileTypes: false,
+        storageType: element.storageType,
+    }), [element.id, element.name, element.readOnly, element.storageType]);
+    const handleValueChange = React.useCallback((fe, v) => {
+        onChange(fe, (existingValue) => {
+            let newValue = undefined;
+            if (typeof v === 'function') {
+                newValue = v(existingValue ? existingValue.value : undefined);
+            }
+            else {
+                newValue = v;
+            }
+            if (!newValue) {
+                return;
+            }
+            return {
+                ...existingValue,
+                value: newValue,
+            };
+        });
+    }, [onChange]);
+    const handleNotesChange = React.useCallback((fe, v) => {
+        onChange(element, (existingValue) => {
+            if (!existingValue) {
+                return;
+            }
+            let newNotes = undefined;
+            if (typeof v === 'function') {
+                newNotes = v(existingValue.notes);
+            }
+            else {
+                newNotes = v;
+            }
+            return {
+                ...existingValue,
+                notes: newNotes,
+            };
+        });
+    }, [element, onChange]);
+    const handleFilesChange = React.useCallback((fe, v) => {
+        onChange(element, (existingValue) => {
+            if (!existingValue) {
+                return;
+            }
+            let newFiles = undefined;
+            if (typeof v === 'function') {
+                newFiles = v(existingValue.files);
+            }
+            else {
+                newFiles = v;
+            }
+            return {
+                ...existingValue,
+                files: newFiles && newFiles.length ? newFiles : undefined,
+            };
+        });
+    }, [element, onChange]);
+    const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(element, !!(typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes), handleNotesChange);
+    const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(element, !!(typedValue === null || typedValue === void 0 ? void 0 : typedValue.files), handleFilesChange);
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const filteredOptions = useFormElementOptions({
+        element,
+        value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.value,
+        onChange: handleValueChange,
+        conditionallyShownOptions,
+    });
+    return (React.createElement("div", { className: "cypress-compliance-element" },
+        React.createElement(FormElementLabelContainer, { className: `ob-compliance ${!isEven ? 'even' : 'odd'}`, id: id, element: element, required: element.required },
+            React.createElement("div", { className: "ob-compliance__container" },
+                React.createElement(FormElementOptions, { options: element.options },
+                    React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio cypress-radio-button-group" }, filteredOptions.map((option) => {
+                        const isSelected = (typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) === option.value;
+                        return (React.createElement("div", { className: "ob-button-radio-container", key: option.value },
+                            React.createElement(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => {
+                                    setIsDirty();
+                                    handleValueChange(element, option.value);
+                                }, className: clsx('button ob-button ob-button__input ob-radio__button cypress-radio-button-control', {
+                                    'is-primary': isSelected,
+                                    'is-light': !isSelected,
+                                }) })));
+                    }))),
+                (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))),
+                React.createElement("div", { className: "buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group" },
+                    React.createElement(ComplianceButton, { isActive: isShowingNotes, icon: "notes", onClick: toggleIsShowingNotes, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) }, "Notes"),
+                    React.createElement(ComplianceButton, { isActive: isShowingFiles, icon: "perm_media", onClick: toggleIsShowingFiles, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) }, "Media")),
+                isShowingNotes && (React.createElement("div", { className: "ob-compliance-child-element" },
+                    React.createElement(FormElementTextarea, { id: `${id}-notes`, onChange: handleNotesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes, element: notesElement }))),
+                isShowingFiles && (React.createElement("div", { className: "ob-compliance-child-element" },
+                    React.createElement(FormElementFiles, { id: `${id}-files`, onChange: handleFilesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.files, element: filesElement })))))));
+}
+export default React.memo(FormElementCompliance);
 //# sourceMappingURL=FormElementCompliance.js.map

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

package/dist/form-elements/FormElementDate.js

@@ -1,75 +1,75 @@
-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';
-import { generateDate, parseDateValue } from '../services/generate-default-data';
-function FormElementDate({ 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: 'Y-m-d',
-            altFormat: localisationService.getFlatpickrFormats().shortDate,
-            allowInput: true,
-            altInputClass: 'input ob-input cypress-date-control',
-            minDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: element.fromDateDaysOffset,
-                value: element.fromDate,
-            }),
-            maxDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: element.toDateDaysOffset,
-                value: element.toDate,
-            }),
-            defaultDate: undefined,
-            allowInvalidPreload: true,
-            onClose: setIsDirty,
-        };
-        return opts;
-    }, [
-        element.fromDate,
-        element.fromDateDaysOffset,
-        element.toDate,
-        element.toDateDaysOffset,
-        setIsDirty,
-    ]);
-    const handleChange = React.useCallback((newValue) => onChange(element, newValue), [element, onChange]);
-    useFlatpickr({
-        id,
-        value,
-        onChange: handleChange,
-        dateOnly: true,
-    }, flatpickrOptions, htmlDivElementRef);
-    const text = React.useMemo(() => {
-        if (typeof value === 'string') {
-            const date = generateDate({
-                daysOffset: undefined,
-                value,
-                dateOnly: true,
-            });
-            if (date) {
-                return localisationService.formatDate(date);
-            }
-        }
-        return null;
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-date-element", ref: htmlDivElementRef },
-        React.createElement(FormElementLabelContainer, { className: "ob-date", 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: "date", 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" }, "event"))),
-                !!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(FormElementDate);
+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';
+import { generateDate, parseDateValue } from '../services/generate-default-data';
+function FormElementDate({ 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: 'Y-m-d',
+            altFormat: localisationService.getFlatpickrFormats().shortDate,
+            allowInput: true,
+            altInputClass: 'input ob-input cypress-date-control',
+            minDate: parseDateValue({
+                dateOnly: false,
+                daysOffset: element.fromDateDaysOffset,
+                value: element.fromDate,
+            }),
+            maxDate: parseDateValue({
+                dateOnly: false,
+                daysOffset: element.toDateDaysOffset,
+                value: element.toDate,
+            }),
+            defaultDate: undefined,
+            allowInvalidPreload: true,
+            onClose: setIsDirty,
+        };
+        return opts;
+    }, [
+        element.fromDate,
+        element.fromDateDaysOffset,
+        element.toDate,
+        element.toDateDaysOffset,
+        setIsDirty,
+    ]);
+    const handleChange = React.useCallback((newValue) => onChange(element, newValue), [element, onChange]);
+    useFlatpickr({
+        id,
+        value,
+        onChange: handleChange,
+        dateOnly: true,
+    }, flatpickrOptions, htmlDivElementRef);
+    const text = React.useMemo(() => {
+        if (typeof value === 'string') {
+            const date = generateDate({
+                daysOffset: undefined,
+                value,
+                dateOnly: true,
+            });
+            if (date) {
+                return localisationService.formatDate(date);
+            }
+        }
+        return null;
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-date-element", ref: htmlDivElementRef },
+        React.createElement(FormElementLabelContainer, { className: "ob-date", 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: "date", 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" }, "event"))),
+                !!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(FormElementDate);
 //# sourceMappingURL=FormElementDate.js.map

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

package/dist/form-elements/FormElementDateTime.js

@@ -1,68 +1,68 @@
-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';
-import { parseDateValue } from '../services/generate-default-data';
-function FormElementDateTime({ 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: 'Y-m-dTH:i:S',
-            altFormat: localisationService.getFlatpickrFormats().shortDateTime,
-            allowInput: false,
-            altInputClass: 'input ob-input cypress-date-time-control',
-            minDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: element.fromDateDaysOffset,
-                value: element.fromDate,
-            }),
-            maxDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: element.toDateDaysOffset,
-                value: element.toDate,
-            }),
-            defaultDate: undefined,
-            enableTime: true,
-            allowInvalidPreload: true,
-            onClose: setIsDirty,
-        };
-        return opts;
-    }, [
-        element.fromDate,
-        element.fromDateDaysOffset,
-        element.toDate,
-        element.toDateDaysOffset,
-        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.formatDatetime(new Date(value));
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-datetime-element", ref: htmlDivElementRef },
-        React.createElement(FormElementLabelContainer, { className: "ob-datetime", 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: "datetime-local", 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" }, "date_range"))),
-                !!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(FormElementDateTime);
+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';
+import { parseDateValue } from '../services/generate-default-data';
+function FormElementDateTime({ 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: 'Y-m-dTH:i:S',
+            altFormat: localisationService.getFlatpickrFormats().shortDateTime,
+            allowInput: false,
+            altInputClass: 'input ob-input cypress-date-time-control',
+            minDate: parseDateValue({
+                dateOnly: false,
+                daysOffset: element.fromDateDaysOffset,
+                value: element.fromDate,
+            }),
+            maxDate: parseDateValue({
+                dateOnly: false,
+                daysOffset: element.toDateDaysOffset,
+                value: element.toDate,
+            }),
+            defaultDate: undefined,
+            enableTime: true,
+            allowInvalidPreload: true,
+            onClose: setIsDirty,
+        };
+        return opts;
+    }, [
+        element.fromDate,
+        element.fromDateDaysOffset,
+        element.toDate,
+        element.toDateDaysOffset,
+        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.formatDatetime(new Date(value));
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-datetime-element", ref: htmlDivElementRef },
+        React.createElement(FormElementLabelContainer, { className: "ob-datetime", 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: "datetime-local", 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" }, "date_range"))),
+                !!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(FormElementDateTime);
 //# sourceMappingURL=FormElementDateTime.js.map