Merge pull request activepieces#6411 from activepieces/feat/date-time…

…-picker

chore: date time picker follow up

packages/react-ui/src/components/ui/date-time-picker-range.tsx

@@ -22,8 +22,8 @@ import {
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 
-import { ClockPicker } from './clock-picker';
 import { Separator } from './separator';
+import { TimePicker } from './time-picker';
 
 type DateTimePickerWithRangeProps = {
   onChange: (date: DateRange | undefined) => void;
@@ -47,11 +47,14 @@ const applyTimeToDate = ({
   const minutes = timeDate.getMinutes();
   const seconds = timeDate.getSeconds();
   const milliseconds = timeDate.getMilliseconds();
-
-  // Apply the time components to targetDate
-  targetDate.setHours(hours, minutes, seconds, milliseconds);
-
-  return targetDate; // Return the updated targetDate
+  return new Date(
+    new Date(new Date(targetDate)).setHours(
+      hours,
+      minutes,
+      seconds,
+      milliseconds,
+    ),
+  ); // Return the updated targetDate
 };
 const getStartToEndDayTime = () => {
   const now = new Date();
@@ -87,21 +90,14 @@ export function DateTimePickerWithRange({
   minDate,
   presetType = 'past',
 }: DateTimePickerWithRangeProps) {
-  const [date, setDate] = React.useState<DateRange | undefined>();
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: from ? new Date(from) : undefined,
+    to: to ? new Date(to) : undefined,
+  });
   const [timeDate, setTimeDate] = React.useState<DateRange>({
-    from: undefined,
-    to: undefined,
+    from: from ? new Date(from) : undefined,
+    to: to ? new Date(to) : undefined,
   });
-  React.useEffect(() => {
-    setDate({
-      from: from ? new Date(from) : undefined,
-      to: to ? new Date(to) : undefined,
-    });
-    setTimeDate({
-      from: from ? new Date(from) : undefined,
-      to: to ? new Date(to) : undefined,
-    });
-  }, [from, to]);
 
   const handleSelect = (selectedDate: DateRange | undefined) => {
     if (selectedDate) {
@@ -162,7 +158,6 @@ export function DateTimePickerWithRange({
     newDate.from!.setHours(0, 0, 0, 0);
     newDate.to!.setHours(23, 59, 59, 999);
     setDate(newDate);
-    setTimeDate(newDate);
     onChange(newDate);
   };
 
@@ -236,15 +231,56 @@ export function DateTimePickerWithRange({
             fromDate={minDate}
           />
           <Separator className="mb-4"></Separator>
-          <div className="flex gap-1.5 px-2 items-center text-sm">
-            <Clock className="w-4 h-4 text-muted-foreground"></Clock>
-            {t('Select Time Range')}
+          <div className="flex justify-between items-center ">
+            <div className="flex gap-1.5 px-2 items-center text-sm">
+              <Clock className="w-4 h-4 text-muted-foreground"></Clock>
+              {t('Select Time Range')}
+            </div>
+            <Button
+              variant={'ghost'}
+              size={'sm'}
+              className="text-primary hover:!text-primary"
+              onClick={() => {
+                const fromTime = getStartToEndDayTime().from;
+                const toTime = getStartToEndDayTime().to;
+                const fromDate = date?.from
+                  ? applyTimeToDate({
+                      timeDate: fromTime,
+                      targetDate: date.from,
+                    })
+                  : undefined;
+
+                const toDate = date?.to
+                  ? applyTimeToDate({
+                      timeDate: toTime,
+                      targetDate: date.to,
+                    })
+                  : undefined;
+
+                setTimeDate({
+                  from: fromTime,
+                  to: toTime,
+                });
+
+                setDate({
+                  from: fromDate,
+                  to: toDate,
+                });
+                onChange({
+                  from: fromDate,
+                  to: toDate,
+                });
+              }}
+            >
+              {t('Clear')}
+            </Button>
           </div>
 
           <div className="flex gap-3  items-center mt-3 px-2 mb-2">
             <div className="flex gap-2 grow justify-center items-center items-center">
-              <ClockPicker
+              <TimePicker
                 date={timeDate.from}
+                name="from"
                 setDate={(fromTime) => {
                   const fromDate = date?.from ?? new Date();
                   const fromWithCorrectedTime = applyTimeToDate({
@@ -261,16 +297,17 @@ export function DateTimePickerWithRange({
                   });
                   setTimeDate({ ...timeDate, from: fromTime });
                 }}
-              ></ClockPicker>
+              ></TimePicker>
             </div>
 
             {t('to')}
 
             <div className="flex gap-2 grow justify-center items-center ">
-              <ClockPicker
+              <TimePicker
                 date={timeDate.to}
+                name="to"
                 setDate={(toTime) => {
-                  const toDate = date?.to ?? new Date();
+                  const toDate = date?.to ?? date?.from ?? new Date();
                   const toWithCorrectedTime = applyTimeToDate({
                     timeDate: toTime,
                     targetDate: toDate,
@@ -285,7 +322,7 @@ export function DateTimePickerWithRange({
                   });
                   setTimeDate({ ...timeDate, to: toTime });
                 }}
-              ></ClockPicker>
+              ></TimePicker>
             </div>
           </div>
         </PopoverContent>

packages/react-ui/src/components/ui/time-period-select.tsx

@@ -36,7 +36,6 @@ export const TimePeriodSelect = React.forwardRef<
       if (e.key === 'ArrowRight') onRightFocus?.();
       if (e.key === 'ArrowLeft') onLeftFocus?.();
     };
-
     const handleValueChange = (value: Period) => {
       setPeriod(value);
 
@@ -60,16 +59,15 @@ export const TimePeriodSelect = React.forwardRef<
     return (
       <div className="flex h-10 items-center">
         <Select
-          defaultValue={period}
+          value={period}
           onValueChange={(value: Period) => handleValueChange(value)}
         >
           <SelectTrigger
             ref={ref}
             className={cn(
-              'w-[73px] h-[29px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1  rounded-xs justify-center p-0 transition-all border-none text-sm shadow-none gap-3 ',
+              ' hover:bg-accent w-[73px] h-[29px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1  rounded-xs justify-center p-0 transition-all border-none text-sm shadow-none gap-3 ',
               {
                 'bg-background': isActive,
-                'hover:bg-accent': !isActive,
               },
             )}
             onKeyDown={handleKeyDown}

packages/react-ui/src/components/ui/clock-picker.tsx → packages/react-ui/src/components/ui/time-picker.tsx

@@ -6,13 +6,14 @@ import { cn } from '@/lib/utils';
 import { isNil } from '@activepieces/shared';
 
 import { TimePeriodSelect } from './time-period-select';
-import { TimePickerInput } from './time-picker-input';
 import { Period } from './time-picker-utils';
+import { TimeUnitPickerInput } from './time-unit-input';
 
-interface TimePickerDemoProps {
+interface TimePickerProps {
   date: Date | undefined;
   setDate: (date: Date) => void;
   showSeconds?: boolean;
+  name?: string;
 }
 
 const minutesItems = new Array(60).fill(0).map((_, index) => ({
@@ -25,18 +26,30 @@ const hoursItems = new Array(12).fill(0).map((_, index) => ({
   label: index + 1 < 10 ? `0${index + 1}` : (index + 1).toString(),
 }));
 
-export function ClockPicker({
+export function TimePicker({
   date,
   setDate,
   showSeconds,
-}: TimePickerDemoProps) {
+  name = 'from',
+}: TimePickerProps) {
   const [period, setPeriod] = React.useState<Period>(() => {
     if (date) {
       return date.getHours() >= 12 ? 'PM' : 'AM';
     }
-    return 'AM';
+    return name === 'from' ? 'AM' : 'PM';
   });
-  const isActive = !isNil(date);
+  React.useEffect(() => {
+    if (date && date.getHours() >= 12) {
+      setPeriod('PM');
+    } else if (!date) {
+      setPeriod(name === 'from' ? 'AM' : 'PM');
+    }
+  }, [date]);
+  const hasValueChanged =
+    name === 'from'
+      ? date?.getHours() !== 0 || date?.getMinutes() !== 0 || period !== 'AM'
+      : date?.getHours() !== 23 || date?.getMinutes() !== 59 || period !== 'PM';
+  const isActive = !isNil(date) && hasValueChanged;
   const minuteRef = React.useRef<HTMLInputElement>(null);
   const hourRef = React.useRef<HTMLInputElement>(null);
   const secondRef = React.useRef<HTMLInputElement>(null);
@@ -52,24 +65,27 @@ export function ClockPicker({
       )}
     >
       <div className="grid gap-1 text-center">
-        <TimePickerInput
+        <TimeUnitPickerInput
           picker="12hours"
           isActive={isActive}
           period={period}
           date={date}
           setDate={setDate}
+          name={name}
           ref={hourRef}
           onRightFocus={() => minuteRef.current?.focus()}
           autoCompleteList={hoursItems}
         />
       </div>
       :
       <div className="grid gap-1 text-center">
-        <TimePickerInput
+        <TimeUnitPickerInput
           picker="minutes"
           id="minutes12"
           isActive={isActive}
+          name={name}
           date={date}
+          period={period}
           setDate={setDate}
           ref={minuteRef}
           onLeftFocus={() => hourRef.current?.focus()}
@@ -81,9 +97,10 @@ export function ClockPicker({
         <>
           :
           <div className="grid gap-1 text-center">
-            <TimePickerInput
+            <TimeUnitPickerInput
               picker="seconds"
               id="seconds12"
+              name={name}
               isActive={isActive}
               date={date}
               setDate={setDate}