@idealyst/datepicker 1.0.0 → 1.0.41

package/src/DateTimeRangePicker/DateTimeRangePickerBase.tsx

@@ -0,0 +1,391 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { DateTimeRangePickerProps, DateTimeRange } from './types';
+import { dateTimeRangePickerStyles } from './DateTimeRangePicker.styles';
+import { timePickerStyles } from '../DateTimePicker/TimePicker.styles';
+import { getDimensions, addEventListener } from '../DateTimePicker/utils/dimensions';
+
+interface DateTimeRangePickerBaseProps extends DateTimeRangePickerProps {
+  renderRangeCalendar: (props: {
+    value: DateTimeRange;
+    onChange: (range: DateTimeRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled: boolean;
+    allowSameDay: boolean;
+    maxDays?: number;
+    onDateSelected?: (type: 'start' | 'end') => void;
+    showTimes?: boolean;
+    timeMode?: '12h' | '24h';
+  }) => React.ReactNode;
+  renderTimePicker: (props: {
+    value: Date;
+    onChange: (date: Date) => void;
+    disabled: boolean;
+    mode: '12h' | '24h';
+    step: number;
+  }) => React.ReactNode;
+}
+
+type ViewMode = 'responsive' | 'date' | 'start-time' | 'end-time';
+type TimeSelection = 'start' | 'end';
+
+export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  timeMode = '12h',
+  timeStep = 1,
+  allowSameDay = true,
+  maxDays,
+  style,
+  testID,
+  renderRangeCalendar,
+  renderTimePicker,
+}) => {
+  const [screenData, setScreenData] = useState(() => getDimensions());
+  const [viewMode, setViewMode] = useState<ViewMode>('responsive');
+  const [activeTimeSelection, setActiveTimeSelection] = useState<TimeSelection>('start');
+
+  // Listen for screen dimension changes
+  useEffect(() => {
+    const subscription = addEventListener(({ window }) => {
+      setScreenData(window);
+    });
+    return () => subscription?.remove();
+  }, []);
+
+  // Determine if we should use side-by-side layout
+  const shouldUseSideBySide = screenData.width >= 700; // Wider threshold for range picker
+  const canFitSideBySide = screenData.width >= 580; // Minimum for side-by-side
+
+  // Auto-adjust view mode based on screen size
+  useEffect(() => {
+    if (shouldUseSideBySide) {
+      setViewMode('responsive');
+    } else if (viewMode === 'responsive' && !canFitSideBySide) {
+      setViewMode('date');
+    }
+  }, [shouldUseSideBySide, canFitSideBySide, viewMode]);
+
+  const handleDateRangeChange = useCallback((newRange: DateTimeRange) => {
+    // Preserve existing times when date changes
+    const updatedRange: DateTimeRange = { ...newRange };
+    
+    if (newRange.startDate && value?.startDate) {
+      updatedRange.startDate = new Date(newRange.startDate);
+      updatedRange.startDate.setHours(
+        value.startDate.getHours(),
+        value.startDate.getMinutes(),
+        value.startDate.getSeconds()
+      );
+    }
+    
+    if (newRange.endDate && value?.endDate) {
+      updatedRange.endDate = new Date(newRange.endDate);
+      updatedRange.endDate.setHours(
+        value.endDate.getHours(),
+        value.endDate.getMinutes(),
+        value.endDate.getSeconds()
+      );
+    }
+
+    onChange(updatedRange.startDate || updatedRange.endDate ? updatedRange : null);
+  }, [value, onChange]);
+
+  const handleDateSelected = useCallback((type: 'start' | 'end') => {
+    // Auto-focus time selection when date is selected on mobile
+    if (!canFitSideBySide) {
+      setActiveTimeSelection(type);
+      setViewMode(type === 'start' ? 'start-time' : 'end-time');
+    } else {
+      // On desktop, just switch the active time tab
+      setActiveTimeSelection(type);
+    }
+  }, [canFitSideBySide]);
+
+  const handleStartTimeChange = useCallback((newTime: Date) => {
+    if (value?.startDate) {
+      const updatedDate = new Date(value.startDate);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange({ ...value, startDate: updatedDate });
+    }
+  }, [value, onChange]);
+
+  const handleEndTimeChange = useCallback((newTime: Date) => {
+    if (value?.endDate) {
+      const updatedDate = new Date(value.endDate);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange({ ...value, endDate: updatedDate });
+    }
+  }, [value, onChange]);
+
+  const formatSelectedRange = () => {
+    if (!value?.startDate) return 'No date range selected';
+    
+    const startStr = value.startDate.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric',
+      year: 'numeric'
+    });
+    
+    const startTimeStr = value.startDate.toLocaleTimeString('en-US', { 
+      hour: 'numeric', 
+      minute: '2-digit',
+      hour12: timeMode === '12h' 
+    });
+    
+    if (!value.endDate) {
+      return `${startStr} at ${startTimeStr} - (end date not selected)`;
+    }
+    
+    const endStr = value.endDate.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric',
+      year: 'numeric'
+    });
+    
+    const endTimeStr = value.endDate.toLocaleTimeString('en-US', { 
+      hour: 'numeric', 
+      minute: '2-digit',
+      hour12: timeMode === '12h' 
+    });
+    
+    return `${startStr} ${startTimeStr} - ${endStr} ${endTimeStr}`;
+  };
+
+  // Initialize styles
+  timePickerStyles.useVariants({});
+
+  // Side-by-side layout for larger screens
+  if (viewMode === 'responsive' && shouldUseSideBySide) {
+    return (
+      <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
+        {/* Selected Range Header */}
+        <View style={dateTimeRangePickerStyles.selectedRangeHeader}>
+          <Text style={dateTimeRangePickerStyles.selectedRangeLabel}>Selected Date & Time Range</Text>
+          <Text style={dateTimeRangePickerStyles.selectedRangeValue}>
+            {formatSelectedRange()}
+          </Text>
+        </View>
+
+        {/* Side by side layout */}
+        <View style={{ 
+          flexDirection: 'row', 
+          gap: 24, 
+          alignItems: 'flex-start',
+          _web: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 24,
+            alignItems: 'flex-start',
+          }
+        }}>
+          {renderRangeCalendar({
+            value: value || {},
+            onChange: handleDateRangeChange,
+            minDate,
+            maxDate,
+            disabled,
+            allowSameDay,
+            maxDays,
+            onDateSelected: handleDateSelected,
+            showTimes: true,
+            timeMode,
+          })}
+          
+          {/* Time Selection Panel */}
+          {(value?.startDate || value?.endDate) && (
+            <View style={{ minWidth: 220, flexShrink: 0 }}>
+              {/* Time Selection Tabs */}
+              <View style={timePickerStyles.tabBar}>
+                <Button
+                  onPress={() => setActiveTimeSelection('start')}
+                  disabled={disabled || !value?.startDate}
+                  style={[
+                    timePickerStyles.tabButton,
+                    activeTimeSelection === 'start' ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
+                  ]}
+                >
+                  Start Time
+                </Button>
+                <Button
+                  onPress={() => setActiveTimeSelection('end')}
+                  disabled={disabled || !value?.endDate}
+                  style={[
+                    timePickerStyles.tabButton,
+                    activeTimeSelection === 'end' ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
+                  ]}
+                >
+                  End Time
+                </Button>
+              </View>
+
+              {/* Active Time Picker */}
+              {activeTimeSelection === 'start' && value?.startDate && (
+                renderTimePicker({
+                  value: value.startDate,
+                  onChange: handleStartTimeChange,
+                  disabled,
+                  mode: timeMode,
+                  step: timeStep,
+                })
+              )}
+
+              {activeTimeSelection === 'end' && value?.endDate && (
+                renderTimePicker({
+                  value: value.endDate,
+                  onChange: handleEndTimeChange,
+                  disabled,
+                  mode: timeMode,
+                  step: timeStep,
+                })
+              )}
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+  // Step-by-step layout for smaller screens
+  const isDateStep = viewMode === 'date';
+  const isStartTimeStep = viewMode === 'start-time';
+  const isEndTimeStep = viewMode === 'end-time';
+
+  return (
+    <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
+      {/* Selected Range Header */}
+      <View style={dateTimeRangePickerStyles.selectedRangeHeader}>
+        <Text style={dateTimeRangePickerStyles.selectedRangeLabel}>
+          {isDateStep ? 'Select Date Range' : 
+           isStartTimeStep ? 'Set Start Time' : 
+           isEndTimeStep ? 'Set End Time' : 'Selected Date & Time Range'}
+        </Text>
+        <Text style={dateTimeRangePickerStyles.selectedRangeValue}>
+          {formatSelectedRange()}
+        </Text>
+      </View>
+
+      {/* Step Navigation */}
+      <View style={timePickerStyles.tabBar}>
+        <Button
+          onPress={() => setViewMode('date')}
+          disabled={disabled}
+          style={[
+            timePickerStyles.tabButton,
+            isDateStep ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
+          ]}
+        >
+          1. Dates
+        </Button>
+        <Button
+          onPress={() => setViewMode('start-time')}
+          disabled={disabled || !value?.startDate}
+          style={[
+            timePickerStyles.tabButton,
+            isStartTimeStep ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
+          ]}
+        >
+          2. Start Time
+        </Button>
+        <Button
+          onPress={() => setViewMode('end-time')}
+          disabled={disabled || !value?.endDate}
+          style={[
+            timePickerStyles.tabButton,
+            isEndTimeStep ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
+          ]}
+        >
+          3. End Time
+        </Button>
+      </View>
+
+      {/* Step Content */}
+      {isDateStep && (
+        <View>
+          {renderRangeCalendar({
+            value: value || {},
+            onChange: handleDateRangeChange,
+            minDate,
+            maxDate,
+            disabled,
+            allowSameDay,
+            maxDays,
+            onDateSelected: handleDateSelected,
+            showTimes: true,
+            timeMode,
+          })}
+        </View>
+      )}
+
+      {isStartTimeStep && value?.startDate && (
+        <View>
+          {renderTimePicker({
+            value: value.startDate,
+            onChange: handleStartTimeChange,
+            disabled,
+            mode: timeMode,
+            step: timeStep,
+          })}
+          
+          {/* Navigation */}
+          <View style={{ marginTop: 12, flexDirection: 'row', justifyContent: 'space-between' }}>
+            <Button
+              variant="text"
+              size="small"
+              onPress={() => setViewMode('date')}
+              disabled={disabled}
+            >
+              ← Back to Dates
+            </Button>
+            {value.endDate && (
+              <Button
+                variant="text"
+                size="small"
+                onPress={() => setViewMode('end-time')}
+                disabled={disabled}
+              >
+                End Time →
+              </Button>
+            )}
+          </View>
+        </View>
+      )}
+
+      {isEndTimeStep && value?.endDate && (
+        <View>
+          {renderTimePicker({
+            value: value.endDate,
+            onChange: handleEndTimeChange,
+            disabled,
+            mode: timeMode,
+            step: timeStep,
+          })}
+          
+          {/* Navigation */}
+          <View style={{ marginTop: 12, flexDirection: 'row', justifyContent: 'space-between' }}>
+            <Button
+              variant="text"
+              size="small"
+              onPress={() => setViewMode('start-time')}
+              disabled={disabled}
+            >
+              ← Start Time
+            </Button>
+            <Button
+              variant="text"
+              size="small"
+              onPress={() => setViewMode('date')}
+              disabled={disabled}
+            >
+              Back to Dates
+            </Button>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/DateTimeRangePicker/types.ts

@@ -52,8 +52,6 @@ export interface DateTimeRangePickerProps {
   /** Time picker mode */
   timeMode?: '12h' | '24h';
   
-  /** Show seconds in time picker */
-  showSeconds?: boolean;
   
   /** Time step in minutes */
   timeStep?: number;

package/src/examples/DatePickerExamples.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Screen, View, Text, Button } from '@idealyst/components';
 import { DatePicker } from '../DatePicker';
 import { DateTimePicker } from '../DateTimePicker';
-import { DateRangePicker, DateRange } from '../DateRangePicker';
 import { DateTimeRangePicker, DateTimeRange } from '../DateTimeRangePicker';
 
 export const DatePickerExamples = () => {
@@ -11,8 +10,6 @@ export const DatePickerExamples = () => {
   const [disabledDate, setDisabledDate] = useState<Date | null>(new Date());
   const [dateTime, setDateTime] = useState<Date | null>(null);
   const [dateTime24h, setDateTime24h] = useState<Date | null>(null);
-  const [dateRange, setDateRange] = useState<DateRange | null>(null);
-  const [restrictedRange, setRestrictedRange] = useState<DateRange | null>(null);
   const [dateTimeRange, setDateTimeRange] = useState<DateTimeRange | null>(null);
 
   const tomorrow = new Date();
@@ -25,9 +22,50 @@ export const DatePickerExamples = () => {
     <Screen background="primary" padding="lg">
       <View spacing="none">
         <Text size="large" weight="bold" align="center">
-          DatePicker Examples
+          DatePicker & DateTimePicker Examples
         </Text>
         
+        {/* DateTime Picker Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">DateTimePicker Examples</Text>
+          
+          {/* Basic DateTime */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">Basic DateTimePicker (12-hour)</Text>
+            <DateTimePicker
+              value={dateTime}
+              onChange={setDateTime}
+              label="Select Date & Time"
+              placeholder="Choose date and time"
+              helperText="Responsive layout - side-by-side on large screens, step-by-step on mobile"
+            />
+            {dateTime && (
+              <Text size="small" color="secondary">
+                Selected: {dateTime.toLocaleString()}
+              </Text>
+            )}
+          </View>
+
+          {/* 24-hour format */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">24-hour format with seconds</Text>
+            <DateTimePicker
+              value={dateTime24h}
+              onChange={setDateTime24h}
+              label="24-hour with seconds"
+              placeholder="Choose date and time"
+              timeMode="24h"
+              timeStep={5}
+              helperText="24-hour format with seconds, 5-minute steps"
+            />
+            {dateTime24h && (
+              <Text size="small" color="secondary">
+                Selected: {dateTime24h.toLocaleString()}
+              </Text>
+            )}
+          </View>
+        </View>
+
         {/* Basic DatePicker */}
         <View spacing="md">
           <Text size="medium" weight="semibold">Basic DatePicker</Text>
@@ -77,33 +115,6 @@ export const DatePickerExamples = () => {
           />
         </View>
 
-        {/* Size Variants */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">Size Variants</Text>
-          <View spacing="sm">
-            <DatePicker
-              value={null}
-              onChange={() => {}}
-              label="Small"
-              placeholder="Small size"
-              size="small"
-            />
-            <DatePicker
-              value={null}
-              onChange={() => {}}
-              label="Medium"
-              placeholder="Medium size"
-              size="medium"
-            />
-            <DatePicker
-              value={null}
-              onChange={() => {}}
-              label="Large"
-              placeholder="Large size"
-              size="large"
-            />
-          </View>
-        </View>
 
         {/* Actions */}
         <View spacing="md">
@@ -127,88 +138,7 @@ export const DatePickerExamples = () => {
           </View>
         </View>
 
-        {/* DateTime Picker Examples */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">DateTimePicker Examples</Text>
-          
-          {/* Basic DateTime */}
-          <View spacing="sm">
-            <Text size="small" weight="medium">12-hour format</Text>
-            <DateTimePicker
-              value={dateTime}
-              onChange={setDateTime}
-              label="Select Date & Time"
-              placeholder="Choose date and time"
-              helperText="12-hour format with AM/PM"
-            />
-            {dateTime && (
-              <Text size="small" color="secondary">
-                Selected: {dateTime.toLocaleString()}
-              </Text>
-            )}
-          </View>
-
-          {/* 24-hour format */}
-          <View spacing="sm">
-            <Text size="small" weight="medium">24-hour format with seconds</Text>
-            <DateTimePicker
-              value={dateTime24h}
-              onChange={setDateTime24h}
-              label="24-hour with seconds"
-              placeholder="Choose date and time"
-              timeMode="24h"
-              showSeconds={true}
-              timeStep={5}
-              helperText="24-hour format with seconds, 5-minute steps"
-            />
-            {dateTime24h && (
-              <Text size="small" color="secondary">
-                Selected: {dateTime24h.toLocaleString()}
-              </Text>
-            )}
-          </View>
-        </View>
-
-        {/* Date Range Picker Examples */}
-        <View spacing="md">
-          <Text size="medium" weight="semibold">DateRangePicker Examples</Text>
-          
-          {/* Basic Range */}
-          <View spacing="sm">
-            <Text size="small" weight="medium">Basic range selection</Text>
-            <DateRangePicker
-              value={dateRange}
-              onChange={setDateRange}
-              label="Select Date Range"
-              placeholder="Choose start and end dates"
-              helperText="Click dates to select a range"
-            />
-            {dateRange?.startDate && dateRange?.endDate && (
-              <Text size="small" color="secondary">
-                Range: {dateRange.startDate.toDateString()} to {dateRange.endDate.toDateString()}
-              </Text>
-            )}
-          </View>
 
-          {/* Restricted Range */}
-          <View spacing="sm">
-            <Text size="small" weight="medium">Max 14 days, future dates only</Text>
-            <DateRangePicker
-              value={restrictedRange}
-              onChange={setRestrictedRange}
-              label="Restricted Range"
-              placeholder="Maximum 14 days"
-              minDate={tomorrow}
-              maxDays={14}
-              helperText="Future dates only, max 14 days"
-            />
-            {restrictedRange?.startDate && restrictedRange?.endDate && (
-              <Text size="small" color="secondary">
-                Range: {restrictedRange.startDate.toDateString()} to {restrictedRange.endDate.toDateString()}
-              </Text>
-            )}
-          </View>
-        </View>
 
         {/* Date Time Range Picker Examples */}
         <View spacing="md">
@@ -242,9 +172,6 @@ export const DatePickerExamples = () => {
             <Text size="small" color="secondary">
               • Date and time selection
             </Text>
-            <Text size="small" color="secondary">
-              • Date range selection
-            </Text>
             <Text size="small" color="secondary">
               • Date/time range selection
             </Text>
@@ -254,9 +181,6 @@ export const DatePickerExamples = () => {
             <Text size="small" color="secondary">
               • Min/max date restrictions
             </Text>
-            <Text size="small" color="secondary">
-              • Multiple size variants
-            </Text>
             <Text size="small" color="secondary">
               • Accessible and keyboard navigable
             </Text>