@evoke-platform/ui-components 1.1.0-testing.12 → 1.1.0-testing.13

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js

@@ -3,6 +3,7 @@ import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
 import { TimePicker } from '@mui/x-date-pickers';
 import React, { useEffect, useRef, useState } from 'react';
+import { InvalidDate } from '../../../util';
 import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
@@ -32,6 +33,7 @@ const ValueEditor = (props) => {
             }));
         }
     }
+    const [invalidDateTime, setInvalidDateTime] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
@@ -82,12 +84,47 @@ const ValueEditor = (props) => {
     const groupRenderGroup = (params) => (React.createElement("li", { key: params.key },
         React.createElement(GroupHeader, null, params.group),
         React.createElement(GroupItems, null, params.children)));
-    function parseISOStringToLocalDateTime(value) {
+    function validateDateTime(value) {
         if (!value) {
             return null;
         }
-        const d = new Date(value);
-        return LocalDateTime.ofInstant(Instant.ofEpochMilli(d.getTime()), ZoneId.systemDefault());
+        // check if it's an ISO string
+        const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z$/;
+        if (isoRegex.test(value)) {
+            try {
+                const instant = Instant.parse(value);
+                return LocalDateTime.ofInstant(instant, ZoneId.systemDefault());
+            }
+            catch (error) {
+                console.error('Error parsing ISO string:', error);
+            }
+        }
+        return new InvalidDate(value);
+    }
+    // Prevents the RangeError issue on keyboard input by returning an empty string for invalid dates
+    // lets users type partial dates without crashing the component during the input process.
+    function convertToISOString(date) {
+        if (!date) {
+            return '';
+        }
+        try {
+            if (date instanceof InvalidDate) {
+                return '';
+            }
+            if (date instanceof LocalDateTime) {
+                return new Date(date.toString()).toISOString();
+            }
+            if (date instanceof LocalDate) {
+                // Convert LocalDate to LocalDateTime to avoid HourOfDay error
+                const dateTime = LocalDateTime.of(date, LocalTime.of(0));
+                return new Date(dateTime.toString()).toISOString();
+            }
+            return '';
+        }
+        catch (error) {
+            console.error('Error converting date to ISO string:', error);
+            return '';
+        }
     }
     const getEditor = () => {
         if (isPresetValueSelected) {
@@ -106,26 +143,44 @@ const ValueEditor = (props) => {
                 React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: styles.input })), readOnly: readOnly })));
         }
         else if (inputType === 'date-time') {
-            const dateTimeValue = parseISOStringToLocalDateTime(value);
+            const dateTimeValue = validateDateTime(value);
             return (React.createElement(LocalizationProvider, null,
                 React.createElement(DateTimePicker, { inputRef: inputRef, value: dateTimeValue, onChange: (date) => {
                         if (!date) {
                             handleOnChange('');
+                            setInvalidDateTime(false);
                             return;
                         }
-                        let localDateTime;
-                        if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
-                            // onChange initially returns a LocalDate after date is selected
-                            localDateTime = LocalDateTime.of(date, LocalTime.of(0));
+                        if (date instanceof InvalidDate) {
+                            setInvalidDateTime(true);
+                            return;
                         }
-                        else {
-                            localDateTime = date;
+                        try {
+                            let localDateTime;
+                            if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
+                                // onChange initially returns a LocalDate after date is selected
+                                localDateTime = LocalDateTime.of(date, LocalTime.of(0));
+                            }
+                            else {
+                                localDateTime = date;
+                            }
+                            const isoString = convertToISOString(localDateTime);
+                            if (isoString) {
+                                setInvalidDateTime(false);
+                                handleOnChange(isoString);
+                            }
+                            else {
+                                setInvalidDateTime(true);
+                            }
+                        }
+                        catch (error) {
+                            console.error('Error processing date value:', error);
+                            setInvalidDateTime(true);
                         }
-                        handleOnChange(new Date(localDateTime.toString()).toISOString());
                     }, onClose: onClose, PopperProps: {
                         anchorEl,
                     }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
-                        React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
+                        React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef, error: invalidDateTime }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.12",
+    "version": "1.1.0-testing.13",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",