@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -1,98 +1,359 @@
-import { StackProps } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import { Input } from '@/shadcn-components/Input/Input/Input';
 import {
-  DateTimePicker as MuiDateTimePicker,
-  DateTimePickerProps as MuiDateTimePickerProps,
-  PickersShortcutsItem,
-  PickerValidDate,
-} from '@mui/x-date-pickers';
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
 import { format as DateFnsFormat } from 'date-fns';
-
-import { Icons } from '../../export';
+import { CalendarDays } from 'lucide-react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../Button/Button';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
-type DateTimePickerProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
-> = {
-  format?:
-    | 'yyyy'
-    | 'MMMM yyyy'
-    | 'MMM yyyy'
-    | 'dd MMMM yyyy'
-    | 'dd/MM/yyyy'
-    | 'MM/dd/yyyy'
-    | 'yyyy-MM-dd'
-    | 'yyyy-MM-dd hh:mm a'
-    | 'yyyy-MM-dd HH:mm'
-    | 'dd MMM yyyy HH:mm'
-    | 'dd MMM yyyy hh:mm a'
-    | 'dd/MM/yyyy hh:mm a'
-    | 'dd/MM/yyyy HH:mm'
-    | 'hh:mm a'
-    | 'HH:mm'
-    | 'hh:mm:ss a'
-    | 'HH:mm:ss'
-    | 'MMM dd, yyyy hh:mm a'
-    | 'MMMM dd, yyyy HH:mm'
-    | 'EEE, MMM dd yyyy'
-    | 'EEEE, MMMM dd, yyyy';
-  views?: ('year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds')[];
+type DateTimePickerViews =
+  | 'year'
+  | 'month'
+  | 'day'
+  | 'hours'
+  | 'minutes'
+  | 'seconds';
+
+type DateTimeFormat =
+  | 'yyyy'
+  | 'MMMM yyyy'
+  | 'MMM yyyy'
+  | 'dd MMMM yyyy'
+  | 'dd/MM/yyyy'
+  | 'MM/dd/yyyy'
+  | 'yyyy-MM-dd'
+  | 'yyyy-MM-dd hh:mm a'
+  | 'dd MMM yyyy hh:mm a'
+  | 'dd/MM/yyyy hh:mm a'
+  | 'yyyy-MM-dd hh:mm:ss a'
+  | 'dd MMM yyyy hh:mm:ss a'
+  | 'dd/MM/yyyy hh:mm:ss a'
+  | 'hh:mm a'
+  | 'hh:mm:ss a'
+  | 'MMM dd, yyyy hh:mm a'
+  | 'MMM dd, yyyy hh:mm:ss a'
+  | 'EEE, MMM dd yyyy'
+  | 'EEEE, MMMM dd, yyyy';
+
+export type DateTimePickerProps = {
+  label?: React.ReactNode | string;
+  name?: string;
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  format?: DateTimeFormat;
+  views?: DateTimePickerViews[];
   helperText?: string;
   placeholder?: string;
-  shortcutsItems?: PickersShortcutsItem<any>[];
+  shortcutsItems?: { label: string; getValue: () => Date }[];
   required?: boolean;
-  containerProps?: StackProps;
-  openPickerIcon?: React.ElementType;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  openPickerIcon?: React.ReactNode;
   error?: any;
-} & MuiDateTimePickerProps<TEnableAccessibleFieldDOMStructure>;
+  disabled?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  shouldDisableDate?: (date: Date) => boolean;
+  shouldDisableMonth?: (date: Date) => boolean;
+  shouldDisableYear?: (date: Date) => boolean;
+  className?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onBlur?: React.FocusEventHandler;
+  fullWidth?: boolean;
+  [key: string]: any;
+};
 
-export const DateTimePicker = <
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
->({
+export const DateTimePicker = ({
   label,
   name,
+  value,
+  onChange,
   required = false,
   format = 'dd MMM yyyy hh:mm a',
   views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
   helperText,
-  placeholder = '',
+  placeholder = 'Pick a date and time',
   shortcutsItems = [],
-  openPickerIcon: Icon = Icons.NoteIcon,
+  openPickerIcon: Icon = <CalendarDays />,
   containerProps,
-  value,
   error,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
   ...rest
-}: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
+}: DateTimePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const [dateTime, setDateTime] = useState<Date | undefined>(value);
+  const [timeValue, setTimeValue] = useState<string>('');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Determine view configurations based on views prop
+  const viewConfig = useMemo(() => {
+    const hasTime =
+      views.includes('hours') ||
+      views.includes('minutes') ||
+      views.includes('seconds');
+    const hasDate =
+      views.includes('day') ||
+      views.includes('month') ||
+      views.includes('year');
+
+    return {
+      showTime: hasTime,
+      showDate: hasDate,
+    };
+  }, [views]);
+
+  // Update time value when dateTime changes
+  useEffect(() => {
+    if (dateTime && viewConfig.showTime) {
+      const hours = dateTime.getHours(),
+        minutes = dateTime.getMinutes(),
+        seconds = dateTime.getSeconds(),
+        timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(
+          2,
+          '0',
+        )}:${String(seconds).padStart(2, '0')}`;
+      setTimeValue(timeStr);
+    }
+  }, [dateTime, viewConfig.showTime]);
+
+  const formatDateTimeString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy hh:mm a');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const handleDateSelect = (date: Date | undefined) => {
+    if (date) {
+      const newDateTime = new Date(date);
+      // Preserve existing time if we have one
+      if (dateTime) {
+        newDateTime.setHours(
+          dateTime.getHours(),
+          dateTime.getMinutes(),
+          dateTime.getSeconds(),
+        );
+      }
+      setDateTime(newDateTime);
+      onChange?.(newDateTime);
+    } else {
+      setDateTime(undefined);
+      onChange?.(undefined);
+    }
+  };
+
+  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const timeStr = e.target.value;
+    setTimeValue(timeStr);
+
+    if (timeStr) {
+      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
+      const newDateTime = dateTime ? new Date(dateTime) : new Date();
+      newDateTime.setHours(hours || 0, minutes || 0, seconds || 0);
+      setDateTime(newDateTime);
+      onChange?.(newDateTime);
+    }
+  };
+
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  // If only time selection (no date), render native time input directly
+  if (viewConfig.showTime && !viewConfig.showDate) {
+    return (
+      <LabelWrapper
+        label={label}
+        required={required}
+        name={name}
+        containerProps={containerProps}
+      >
+        <Input
+          type="time"
+          step="1"
+          value={timeValue}
+          onChange={handleTimeChange}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={cn(
+            'bg-input-background border-none text-muted-foreground',
+            error && 'border-destructive',
+            className,
+          )}
+          {...rest}
+        />
+
+        {/* Helper Text / Error */}
+        {(helperText || error) && (
+          <Typography
+            variant="small"
+            className={cn('ml-1 mt-1', error && 'text-destructive')}
+          >
+            {typeof error === 'string' ? error : error?.message || helperText}
+          </Typography>
+        )}
+      </LabelWrapper>
+    );
+  }
+
   return (
     <LabelWrapper
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
-      <MuiDateTimePicker
-        format={format}
-        views={views}
-        defaultValue={value}
-        slotProps={{
-          textField: {
-            helperText,
-            placeholder,
-            error: !!error,
-          },
-          shortcuts: {
-            items: shortcutsItems,
-          },
-        }}
-        slots={{
-          openPickerIcon: Icon,
-        }}
-        dayOfWeekFormatter={(day: any) => {
-          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
-        }}
-        {...rest}
-      />
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
+          >
+            <Button
+              variant="input"
+              className={cn(
+                'w-full justify-between text-left font-normal',
+                !dateTime && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>
+                {dateTime ? formatDateTimeString(dateTime) : placeholder}
+              </span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4 ',
+                })}
+            </Button>
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col">
+            {/* Shortcuts */}
+            {shortcutsItems.length > 0 && (
+              <div className="border-b p-2">
+                <div className="flex flex-wrap gap-1">
+                  {shortcutsItems.map((shortcut, index) => (
+                    <Button
+                      key={index}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const newDate = shortcut.getValue();
+                        onChange?.(newDate);
+                        setDateTime(newDate);
+                        setOpen(false);
+                      }}
+                    >
+                      {shortcut.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Calendar */}
+            {viewConfig.showDate && (
+              <Calendar
+                mode="single"
+                selected={dateTime}
+                onSelect={handleDateSelect}
+                disabled={(date) => {
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+                  const compareDate = new Date(date);
+                  compareDate.setHours(0, 0, 0, 0);
+
+                  if (minDate) {
+                    const min = new Date(minDate);
+                    min.setHours(0, 0, 0, 0);
+                    if (compareDate < min) return true;
+                  }
+                  if (maxDate) {
+                    const max = new Date(maxDate);
+                    max.setHours(0, 0, 0, 0);
+                    if (compareDate > max) return true;
+                  }
+
+                  if (disablePast && compareDate < today) return true;
+                  if (disableFuture && compareDate > today) return true;
+                  if (shouldDisableDate && shouldDisableDate(date)) return true;
+                  if (shouldDisableMonth && shouldDisableMonth(date))
+                    return true;
+                  if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+                  return false;
+                }}
+                captionLayout={'dropdown'}
+                defaultMonth={dateTime}
+              />
+            )}
+
+            {/* Time Picker */}
+            {viewConfig.showTime && (
+              <div className={cn('p-3', viewConfig.showDate && 'border-t')}>
+                <Input
+                  type="time"
+                  step="1"
+                  value={timeValue}
+                  onChange={handleTimeChange}
+                  className="bg-input-background border-none text-muted-foreground appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+                />
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Helper Text / Error */}
+      {(helperText || error) && (
+        <Typography
+          variant="small"
+          className={cn('ml-1 mt-1', error && 'text-destructive')}
+        >
+          {typeof error === 'string' ? error : error?.message || helperText}
+        </Typography>
+      )}
     </LabelWrapper>
   );
 };