@idealyst/datepicker 1.0.0 → 1.0.58

package/src/DateTimePicker/DateTimePickerBase.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Button } from '@idealyst/components';
+import { DateTimePickerProps } from './types';
+import { dateTimePickerStyles } from './DateTimePicker.styles';
+import { getDimensions, addEventListener } from './utils/dimensions';
+
+interface DateTimePickerBaseProps extends DateTimePickerProps {
+  renderCalendar: (props: {
+    value: Date | undefined;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled: boolean;
+  }) => React.ReactNode;
+  renderTimePicker: (props: {
+    value: Date;
+    onChange: (date: Date) => void;
+    disabled: boolean;
+    mode: '12h' | '24h';
+    step: number;
+  }) => React.ReactNode;
+}
+
+type ViewMode = 'responsive' | 'date' | 'time';
+
+export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  timeMode = '12h',
+  timeStep = 1,
+  style,
+  testID,
+  renderCalendar,
+  renderTimePicker,
+}) => {
+  const [screenData, setScreenData] = useState(() => getDimensions());
+  const [viewMode, setViewMode] = useState<ViewMode>('responsive');
+
+  // 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 >= 600; // Tablet width threshold
+  const canFitSideBySide = screenData.width >= 480; // 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 handleDateChange = useCallback((newDate: Date) => {
+    if (value) {
+      // Preserve the time from current value
+      const updatedDate = new Date(newDate);
+      updatedDate.setHours(value.getHours(), value.getMinutes(), value.getSeconds());
+      onChange(updatedDate);
+    } else {
+      onChange(newDate);
+    }
+    
+    // Auto-advance to time selection on small screens after date selection
+    if (!canFitSideBySide && viewMode === 'date') {
+      setViewMode('time');
+    }
+  }, [value, onChange, canFitSideBySide, viewMode]);
+
+  const handleTimeChange = useCallback((newTime: Date) => {
+    if (value) {
+      // Update time while preserving the date
+      const updatedDate = new Date(value);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange(updatedDate);
+    } else {
+      // If no date is selected, use today's date with the new time
+      const today = new Date();
+      today.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange(today);
+    }
+  }, [value, onChange]);
+
+  // Side-by-side layout for larger screens
+  if (viewMode === 'responsive' && shouldUseSideBySide) {
+    return (
+      <View style={[dateTimePickerStyles.container, style]} testID={testID} data-testid={testID}>
+        {/* Side by side layout */}
+        <View style={{ 
+          flexDirection: 'row', 
+          gap: 16, 
+          alignItems: 'flex-start',
+          _web: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 16,
+            alignItems: 'flex-start',
+          }
+        }}>
+          {renderCalendar({
+            value,
+            onChange: handleDateChange,
+            minDate,
+            maxDate,
+            disabled,
+          })}
+          
+          {renderTimePicker({
+            value: value || new Date(),
+            onChange: handleTimeChange,
+            disabled,
+            mode: timeMode,
+            step: timeStep,
+          })}
+        </View>
+      </View>
+    );
+  }
+
+  // Step-by-step layout for smaller screens
+  const isDateStep = viewMode === 'date';
+  const isTimeStep = viewMode === 'time';
+
+  return (
+    <View style={[dateTimePickerStyles.container, style]} testID={testID} data-testid={testID}>
+      {/* Step Navigation */}
+      <View style={{
+        flexDirection: 'row',
+        gap: 8,
+        marginBottom: 8,
+        _web: {
+          display: 'flex',
+          flexDirection: 'row',
+          gap: 8,
+        }
+      }}>
+        <Button
+          variant={isDateStep ? 'primary' : 'outlined'}
+          size="small"
+          onPress={() => setViewMode('date')}
+          disabled={disabled}
+          style={{ flex: 1 }}
+        >
+          1. Date
+        </Button>
+        <Button
+          variant={isTimeStep ? 'primary' : 'outlined'}
+          size="small"
+          onPress={() => setViewMode('time')}
+          disabled={disabled || !value}
+          style={{ flex: 1 }}
+        >
+          2. Time
+        </Button>
+      </View>
+
+      {/* Step Content */}
+      {isDateStep && (
+        <View>
+          {renderCalendar({
+            value,
+            onChange: handleDateChange,
+            minDate,
+            maxDate,
+            disabled,
+          })}
+        </View>
+      )}
+
+      {isTimeStep && (
+        <View>
+          {renderTimePicker({
+            value: value || new Date(),
+            onChange: handleTimeChange,
+            disabled,
+            mode: timeMode,
+            step: timeStep,
+          })}
+          
+          {/* Back to Date button */}
+          <View style={{ marginTop: 12, alignItems: 'flex-start' }}>
+            <Button
+              variant="text"
+              size="small"
+              onPress={() => setViewMode('date')}
+              disabled={disabled}
+            >
+              ← Back to Date
+            </Button>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/DateTimePicker/TimePicker.native.tsx

@@ -1,204 +1,17 @@
 import React from 'react';
-import { View, Text, Button } from '@idealyst/components';
 import { TimePickerProps } from './types';
+import { TimePickerBase } from './TimePickerBase';
+import { ClockFace, TimeInput } from './primitives';
 import { timePickerStyles } from './TimePicker.styles';
 
-export const TimePicker: React.FC<TimePickerProps> = ({
-  value = new Date(),
-  onChange,
-  disabled = false,
-  mode = '12h',
-  showSeconds = false,
-  step = 1,
-  style,
-  testID,
-}) => {
-  const hours = value.getHours();
-  const minutes = value.getMinutes();
-  const seconds = value.getSeconds();
-
-  const displayHours = mode === '12h' ? (hours === 0 ? 12 : hours > 12 ? hours - 12 : hours) : hours;
-  const ampm = mode === '12h' ? (hours >= 12 ? 'PM' : 'AM') : null;
-
-  const updateTime = (newHours: number, newMinutes: number, newSeconds?: number) => {
-    const newDate = new Date(value);
-    newDate.setHours(newHours, newMinutes, newSeconds || 0);
-    onChange(newDate);
-  };
-
-  const handleHourChange = (delta: number) => {
-    let newHours = hours + delta;
-    if (mode === '12h') {
-      if (newHours < 0) newHours = 23;
-      if (newHours > 23) newHours = 0;
-    } else {
-      if (newHours < 0) newHours = 23;
-      if (newHours > 23) newHours = 0;
-    }
-    updateTime(newHours, minutes, seconds);
-  };
-
-  const handleMinuteChange = (delta: number) => {
-    let newMinutes = minutes + (delta * step);
-    let newHours = hours;
-    
-    if (newMinutes < 0) {
-      newMinutes = 60 + newMinutes;
-      newHours = hours - 1;
-      if (newHours < 0) newHours = 23;
-    } else if (newMinutes >= 60) {
-      newMinutes = newMinutes - 60;
-      newHours = hours + 1;
-      if (newHours > 23) newHours = 0;
-    }
-    
-    updateTime(newHours, newMinutes, seconds);
-  };
-
-  const handleSecondChange = (delta: number) => {
-    let newSeconds = seconds + delta;
-    let newMinutes = minutes;
-    let newHours = hours;
-    
-    if (newSeconds < 0) {
-      newSeconds = 59;
-      newMinutes = minutes - 1;
-      if (newMinutes < 0) {
-        newMinutes = 59;
-        newHours = hours - 1;
-        if (newHours < 0) newHours = 23;
-      }
-    } else if (newSeconds >= 60) {
-      newSeconds = 0;
-      newMinutes = minutes + 1;
-      if (newMinutes >= 60) {
-        newMinutes = 0;
-        newHours = hours + 1;
-        if (newHours > 23) newHours = 0;
-      }
-    }
-    
-    updateTime(newHours, newMinutes, newSeconds);
-  };
-
-  const toggleAmPm = () => {
-    if (mode === '12h') {
-      const newHours = hours >= 12 ? hours - 12 : hours + 12;
-      updateTime(newHours, minutes, seconds);
-    }
-  };
-
+export const TimePicker: React.FC<TimePickerProps> = (props) => {
   timePickerStyles.useVariants({});
-
+  
   return (
-    <View style={[timePickerStyles.container, style]} testID={testID}>
-      {/* Hours */}
-      <View style={timePickerStyles.timeSection}>
-        <View style={timePickerStyles.stepperContainer}>
-          <Button
-            variant="text"
-            size="small"
-            onPress={() => handleHourChange(1)}
-            disabled={disabled}
-            style={timePickerStyles.stepperButton}
-          >
-            <Text style={timePickerStyles.stepperText}>▲</Text>
-          </Button>
-          <View style={timePickerStyles.timeInput}>
-            <Text style={{ textAlign: 'center', fontSize: 16, fontWeight: '600' }}>
-              {String(displayHours).padStart(2, '0')}
-            </Text>
-          </View>
-          <Button
-            variant="text"
-            size="small"
-            onPress={() => handleHourChange(-1)}
-            disabled={disabled}
-            style={timePickerStyles.stepperButton}
-          >
-            <Text style={timePickerStyles.stepperText}>▼</Text>
-          </Button>
-        </View>
-      </View>
-
-      {/* Separator */}
-      <Text style={timePickerStyles.timeSeparator}>:</Text>
-
-      {/* Minutes */}
-      <View style={timePickerStyles.timeSection}>
-        <View style={timePickerStyles.stepperContainer}>
-          <Button
-            variant="text"
-            size="small"
-            onPress={() => handleMinuteChange(1)}
-            disabled={disabled}
-            style={timePickerStyles.stepperButton}
-          >
-            <Text style={timePickerStyles.stepperText}>▲</Text>
-          </Button>
-          <View style={timePickerStyles.timeInput}>
-            <Text style={{ textAlign: 'center', fontSize: 16, fontWeight: '600' }}>
-              {String(minutes).padStart(2, '0')}
-            </Text>
-          </View>
-          <Button
-            variant="text"
-            size="small"
-            onPress={() => handleMinuteChange(-1)}
-            disabled={disabled}
-            style={timePickerStyles.stepperButton}
-          >
-            <Text style={timePickerStyles.stepperText}>▼</Text>
-          </Button>
-        </View>
-      </View>
-
-      {/* Seconds */}
-      {showSeconds && (
-        <>
-          <Text style={timePickerStyles.timeSeparator}>:</Text>
-          <View style={timePickerStyles.timeSection}>
-            <View style={timePickerStyles.stepperContainer}>
-              <Button
-                variant="text"
-                size="small"
-                onPress={() => handleSecondChange(1)}
-                disabled={disabled}
-                style={timePickerStyles.stepperButton}
-              >
-                <Text style={timePickerStyles.stepperText}>▲</Text>
-              </Button>
-              <View style={timePickerStyles.timeInput}>
-                <Text style={{ textAlign: 'center', fontSize: 16, fontWeight: '600' }}>
-                  {String(seconds).padStart(2, '0')}
-                </Text>
-              </View>
-              <Button
-                variant="text"
-                size="small"
-                onPress={() => handleSecondChange(-1)}
-                disabled={disabled}
-                style={timePickerStyles.stepperButton}
-              >
-                <Text style={timePickerStyles.stepperText}>▼</Text>
-              </Button>
-            </View>
-          </View>
-        </>
-      )}
-
-      {/* AM/PM */}
-      {mode === '12h' && ampm && (
-        <Button
-          variant="outlined"
-          size="small"
-          onPress={toggleAmPm}
-          disabled={disabled}
-          style={timePickerStyles.ampmButton}
-        >
-          {ampm}
-        </Button>
-      )}
-    </View>
+    <TimePickerBase
+      {...props}
+      renderClock={(clockProps) => <ClockFace {...clockProps} />}
+      renderTimeInput={(inputProps) => <TimeInput {...inputProps} />}
+    />
   );
 };

package/src/DateTimePicker/TimePicker.styles.tsx

@@ -36,8 +36,8 @@ export const timePickerStyles = StyleSheet.create((theme) => ({
     }
   },
   timeInput: {
-    width: 32,
-    height: 32,
+    width: 44,
+    height: 40,
     textAlign: 'center',
     fontSize: 16,
     fontWeight: '600',
@@ -46,6 +46,8 @@ export const timePickerStyles = StyleSheet.create((theme) => ({
     borderBottomWidth: 0,
     borderRadius: 0,
     backgroundColor: 'transparent',
+    paddingHorizontal: 0,
+    paddingVertical: 0,
     
     _web: {
       border: 'none',