feat(datetime): temporal values changes on input

DevoInc · Jan 14, 2025 · cdf3ff8 · cdf3ff8
1 parent d14fa18
commit cdf3ff8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/packages/datetime/src/components/DateTimeRangeFloatingPicker/DateTimeRangeFloatingPicker.tsx b/packages/datetime/src/components/DateTimeRangeFloatingPicker/DateTimeRangeFloatingPicker.tsx
@@ -104,7 +104,6 @@ export const DateTimeRangeFloatingPicker: React.FC<
   const { inputValue, inputOnChange, errors, updateValue } =
     useDateTimeRangeInputValidation({
       value: tmpValue,
-      // onChange: setValue,
       onChange: (range) => {
         setMonthDate(tryParseDate(parseDate)(range[0]));
         if (autoApply) {
@@ -113,8 +112,9 @@ export const DateTimeRangeFloatingPicker: React.FC<
           setTmpValue(range);
         }
       },
-      reprDate: formatDate,
-      parseDate: parseStrDate,
+      //reprDate: formatDate,
+      reprDate: (ts: number) => formatDate(ts),
+      parseDate,
     });
 
   return (
@@ -124,7 +124,13 @@ export const DateTimeRangeFloatingPicker: React.FC<
       id={`${id}__popover`}
       isOpened={isOpened}
       placement={placement}
-      onClose={onCloseCallback}
+      onClose={() => {
+        setTmpValue(value);
+        updateValue(value);
+        if (onCloseCallback) {
+          onCloseCallback();
+        }
+      }}
     >
       {({ ref, setOpened }) => (
         <div ref={ref}>
@@ -191,14 +197,19 @@ export const DateTimeRangeFloatingPicker: React.FC<
                   <Button
                     colorScheme={'accent'}
                     key={'apply'}
+                    aria-disabled={tmpValue.length !== 2}
+                    state={
+                      tmpValue.length !== 2 || disableApplyButton
+                        ? 'disabled'
+                        : 'enabled'
+                    }
                     onClick={() => {
                       updateValue(tmpValue);
                       setOpened(false);
                       if (onChange) {
                         onChange(tmpValue);
                       }
                     }}
-                    state={disableApplyButton ? 'disabled' : 'enabled'}
                   >
                     {i18n.applyButton}
                   </Button>,

diff --git a/packages/datetime/src/components/DateTimeRangeInput/DateTimeRangeInput.tsx b/packages/datetime/src/components/DateTimeRangeInput/DateTimeRangeInput.tsx
@@ -156,7 +156,7 @@ export const DateTimeRangeInput: React.FC<DateTimeRangeInputProps> = ({
             size={size}
             status={statuses[0]}
             style={cssDateTimeRangeInput({ size, status: statuses[0] })}
-            value={value[0]}
+            value={value[0] ?? ''}
           />
         </Field>
         <GIArrowRight
@@ -191,7 +191,7 @@ export const DateTimeRangeInput: React.FC<DateTimeRangeInputProps> = ({
             size={size}
             status={statuses[1]}
             style={cssDateTimeRangeInput({ size, status: statuses[1] })}
-            value={value[1]}
+            value={value[1] ?? ''}
           />
         </Field>
         {hasRealTime(realTime) && (

diff --git a/packages/datetime/src/components/DateTimeRangeInput/helpers.ts b/packages/datetime/src/components/DateTimeRangeInput/helpers.ts
@@ -21,10 +21,13 @@ export const cssDateTimeRangeInput = ({
         height: ${rangeControlInputTokens.size.height[size]};
         padding: ${rangeControlInputTokens.space.padding[size]};
 
-        &:focus {
-          box-shadow: inset
-            ${rangeControlTokens.elevation.boxShadow[status].focused};
-        }
+        ${hasStatus &&
+        css`
+          &:focus {
+            box-shadow: inset
+              ${rangeControlTokens.elevation.boxShadow[status].focused};
+          }
+        `}
       `;
     }};
   `;