@idealyst/datepicker 1.1.3 → 1.1.5

package/src/DateTimePicker/DateTimePickerBase.tsx

@@ -1,185 +0,0 @@
-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={dateTimePickerStyles.sideBySideLayout}>
-          {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={dateTimePickerStyles.stepNavigation}>
-        <Button
-          variant={isDateStep ? 'primary' : 'outlined'}
-          size="sm"
-          onPress={() => setViewMode('date')}
-          disabled={disabled}
-          style={dateTimePickerStyles.stepButton}
-        >
-          1. Date
-        </Button>
-        <Button
-          variant={isTimeStep ? 'primary' : 'outlined'}
-          size="sm"
-          onPress={() => setViewMode('time')}
-          disabled={disabled || !value}
-          style={dateTimePickerStyles.stepButton}
-        >
-          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={dateTimePickerStyles.backButtonContainer}>
-            <Button
-              variant="text"
-              size="sm"
-              onPress={() => setViewMode('date')}
-              disabled={disabled}
-            >
-              ← Back to Date
-            </Button>
-          </View>
-        </View>
-      )}
-    </View>
-  );
-};

package/src/DateTimePicker/TimePicker.native.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { TimePickerProps } from './types';
-import { TimePickerBase } from './TimePickerBase';
-import { ClockFace, TimeInput } from './primitives';
-import { timePickerStyles } from './TimePicker.styles';
-
-export const TimePicker: React.FC<TimePickerProps> = (props) => {
-  timePickerStyles.useVariants({});
-  
-  return (
-    <TimePickerBase
-      {...props}
-      renderClock={(clockProps) => <ClockFace {...clockProps} />}
-      renderTimeInput={(inputProps) => <TimeInput {...inputProps} />}
-    />
-  );
-};

package/src/DateTimePicker/TimePicker.styles.tsx

@@ -1,115 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export const timePickerStyles = StyleSheet.create((theme) => ({
-  container: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: 4,
-    width: 170,
-  },
-  clockContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 4,
-    
-    _web: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }
-  },
-  clockSvg: {
-    _web: {
-      cursor: 'pointer',
-    }
-  },
-  timeInputRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    
-    _web: {
-      display: 'flex',
-      alignItems: 'center',
-    }
-  },
-  timeInput: {
-    width: 44,
-    height: 40,
-    textAlign: 'center',
-    fontSize: 16,
-    fontWeight: '600',
-    color: theme.colors?.text?.primary || '#111827',
-    borderWidth: 0,
-    borderBottomWidth: 0,
-    borderRadius: 0,
-    backgroundColor: 'transparent',
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-
-    _web: {
-      border: 'none',
-      borderBottom: 'none',
-      outline: 'none',
-      cursor: 'pointer',
-    }
-  },
-  activeInput: {
-    color: theme.colors?.accent?.primary || '#3b82f6',
-    borderBottomWidth: 2,
-    borderBottomColor: theme.colors?.accent?.primary || '#3b82f6',
-    borderRadius: 0,
-  },
-  timeSeparator: {
-    fontSize: 16,
-    fontWeight: '300',
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-  ampmButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    minWidth: 36,
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  tabBar: {
-    flexDirection: 'row',
-    gap: 4,
-    marginBottom: 4,
-    padding: 2,
-    backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
-    borderRadius: 6,
-    
-    _web: {
-      display: 'flex',
-    }
-  },
-  tabButton: {
-    flex: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    fontSize: 13,
-    fontWeight: '500',
-    borderRadius: 4,
-    borderWidth: 0,
-
-    _web: {
-      border: 'none',
-      cursor: 'pointer',
-      transition: 'all 0.2s',
-    }
-  },
-  activeTab: {
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    color: theme.colors?.accent?.primary || '#3b82f6',
-    
-    _web: {
-      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
-    }
-  },
-  inactiveTab: {
-    backgroundColor: 'transparent',
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-}));

package/src/DateTimePicker/TimePicker.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { TimePickerProps } from './types';
-import { TimePickerBase } from './TimePickerBase';
-import { ClockFace, TimeInput } from './primitives';
-
-export const TimePicker: React.FC<TimePickerProps> = (props) => {
-  return (
-    <TimePickerBase
-      {...props}
-      renderClock={(clockProps) => <ClockFace {...clockProps} />}
-      renderTimeInput={(inputProps) => <TimeInput {...inputProps} />}
-    />
-  );
-};

package/src/DateTimePicker/TimePickerBase.tsx

@@ -1,232 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { View, Text, Button } from '@idealyst/components';
-import { TimePickerProps } from './types';
-import { timePickerStyles } from './TimePicker.styles';
-
-interface TimePickerBaseProps extends TimePickerProps {
-  renderClock: (props: {
-    activeSelection: 'hour' | 'minute';
-    hours: number;
-    minutes: number;
-    displayHours: number;
-    mode: '12h' | '24h';
-    disabled: boolean;
-    onHourClick: (hour: number) => void;
-    onMinuteClick: (minute: number) => void;
-  }) => React.ReactNode;
-  renderTimeInput: (props: {
-    type: 'hour' | 'minute';
-    value: string;
-    onChangeText: (value: string) => void;
-    onFocus: () => void;
-    onBlur: () => void;
-    isActive: boolean;
-    disabled: boolean;
-    inputRef: React.RefObject<any>;
-  }) => React.ReactNode;
-}
-
-export const TimePickerBase: React.FC<TimePickerBaseProps> = ({
-  value = new Date(),
-  onChange,
-  disabled = false,
-  mode = '12h',
-  step = 1,
-  style,
-  testID,
-  renderClock,
-  renderTimeInput,
-}) => {
-  const [activeSelection, setActiveSelection] = useState<'hour' | 'minute'>('hour');
-  const [hourInputValue, setHourInputValue] = useState(String(value.getHours() > 12 && mode === '12h' ? value.getHours() - 12 : value.getHours()));
-  const [minuteInputValue, setMinuteInputValue] = useState(String(value.getMinutes()).padStart(2, '0'));
-  const [hourInputFocused, setHourInputFocused] = useState(false);
-  const [minuteInputFocused, setMinuteInputFocused] = useState(false);
-  const hourInputRef = useRef<any>(null);
-  const minuteInputRef = useRef<any>(null);
-  
-  const hours = value.getHours();
-  const minutes = value.getMinutes();
-
-  const displayHours = mode === '12h' ? (hours === 0 ? 12 : hours > 12 ? hours - 12 : hours) : hours;
-  const ampm = mode === '12h' ? (hours >= 12 ? 'PM' : 'AM') : null;
-
-  // Sync input values when time changes from external sources (like clock clicks)
-  // Only update if the input is not currently focused
-  useEffect(() => {
-    if (!hourInputFocused) {
-      setHourInputValue(String(displayHours));
-    }
-    if (!minuteInputFocused) {
-      setMinuteInputValue(String(minutes).padStart(2, '0'));
-    }
-  }, [displayHours, minutes, hourInputFocused, minuteInputFocused]);
-
-  const updateTime = useCallback((newHours: number, newMinutes: number) => {
-    const newDate = new Date(value);
-    newDate.setHours(newHours, newMinutes, 0);
-    onChange(newDate);
-  }, [value, onChange]);
-
-  const handleHourClick = useCallback((hour: number) => {
-    // Dismiss keyboard when interacting with clock
-    hourInputRef.current?.blur?.();
-    minuteInputRef.current?.blur?.();
-    
-    let hour24 = hour;
-    if (mode === '12h') {
-      const isPM = hours >= 12;
-      if (hour === 12) hour24 = isPM ? 12 : 0;
-      else hour24 = isPM ? hour + 12 : hour;
-    }
-    updateTime(hour24, minutes);
-    setActiveSelection('minute');
-  }, [mode, hours, minutes, updateTime]);
-
-  const handleMinuteClick = useCallback((minute: number) => {
-    // Dismiss keyboard when interacting with clock
-    hourInputRef.current?.blur?.();
-    minuteInputRef.current?.blur?.();
-    
-    updateTime(hours, minute);
-  }, [hours, updateTime]);
-
-  const toggleAmPm = useCallback(() => {
-    if (mode === '12h') {
-      const newHours = hours >= 12 ? hours - 12 : hours + 12;
-      updateTime(newHours, minutes);
-    }
-  }, [mode, hours, minutes, updateTime]);
-
-  const handleHourInputChange = useCallback((inputValue: string) => {
-    setHourInputValue(inputValue);
-    
-    // Smart focus switching: if user types 2 or higher, focus on minutes
-    if (mode === '12h' && parseInt(inputValue) >= 2 && inputValue.length >= 1) {
-      minuteInputRef.current?.focus?.();
-      setActiveSelection('minute');
-    } else if (mode === '24h' && parseInt(inputValue) >= 3 && inputValue.length >= 1) {
-      minuteInputRef.current?.focus?.();
-      setActiveSelection('minute');
-    }
-    
-    // Try to update time if value is valid
-    const hour = parseInt(inputValue);
-    if (!isNaN(hour) && hour >= 0) {
-      let hour24 = hour;
-      if (mode === '12h' && hour <= 12) {
-        const isPM = hours >= 12;
-        if (hour === 12) hour24 = isPM ? 12 : 0;
-        else hour24 = isPM ? hour + 12 : hour;
-      }
-      if (hour24 <= 23) {
-        updateTime(hour24, minutes);
-      }
-    }
-  }, [mode, hours, minutes, updateTime]);
-
-  const handleHourInputFocus = useCallback(() => {
-    setHourInputFocused(true);
-    setActiveSelection('hour');
-  }, []);
-
-  const handleHourInputBlur = useCallback(() => {
-    setHourInputFocused(false);
-    // Handle 0 -> 12 conversion for 12h mode
-    const hour = parseInt(hourInputValue);
-    if (!isNaN(hour)) {
-      let hour24 = hour;
-      if (mode === '12h') {
-        const isPM = hours >= 12;
-        if (hour === 0) hour24 = isPM ? 12 : 0;
-        else if (hour <= 12) hour24 = isPM ? (hour === 12 ? 12 : hour + 12) : (hour === 12 ? 0 : hour);
-      }
-      if (hour24 <= 23) {
-        updateTime(hour24, minutes);
-      }
-    }
-    setHourInputValue(String(displayHours));
-  }, [hourInputValue, mode, hours, minutes, displayHours, updateTime]);
-
-  const handleMinuteInputChange = useCallback((inputValue: string) => {
-    setMinuteInputValue(inputValue);
-    
-    // Try to update time if value is valid
-    const minute = parseInt(inputValue);
-    if (!isNaN(minute) && minute >= 0 && minute <= 59) {
-      updateTime(hours, minute);
-    }
-    
-    // Auto-focus hour input if user deletes and field becomes empty
-    if (inputValue === '') {
-      hourInputRef.current?.focus?.();
-      setActiveSelection('hour');
-    }
-  }, [hours, updateTime]);
-
-  const handleMinuteInputFocus = useCallback(() => {
-    setMinuteInputFocused(true);
-    setActiveSelection('minute');
-  }, []);
-
-  const handleMinuteInputBlur = useCallback(() => {
-    setMinuteInputFocused(false);
-    setMinuteInputValue(String(minutes).padStart(2, '0'));
-  }, [minutes]);
-
-  return (
-    <View style={[timePickerStyles.container, style]} testID={testID} data-testid={testID}>
-      {/* Clock face */}
-      {renderClock({
-        activeSelection,
-        hours,
-        minutes,
-        displayHours,
-        mode,
-        disabled,
-        onHourClick: handleHourClick,
-        onMinuteClick: handleMinuteClick,
-      })}
-
-      {/* Digital time display */}
-      <View style={timePickerStyles.timeInputRow}>
-        {renderTimeInput({
-          type: 'hour',
-          value: hourInputValue,
-          onChangeText: handleHourInputChange,
-          onFocus: handleHourInputFocus,
-          onBlur: handleHourInputBlur,
-          isActive: activeSelection === 'hour',
-          disabled,
-          inputRef: hourInputRef,
-        })}
-        
-        <Text style={timePickerStyles.timeSeparator}>:</Text>
-        
-        {renderTimeInput({
-          type: 'minute',
-          value: minuteInputValue,
-          onChangeText: handleMinuteInputChange,
-          onFocus: handleMinuteInputFocus,
-          onBlur: handleMinuteInputBlur,
-          isActive: activeSelection === 'minute',
-          disabled,
-          inputRef: minuteInputRef,
-        })}
-
-
-        {mode === '12h' && ampm && (
-          <Button
-            variant="outlined"
-            size="sm"
-            onPress={toggleAmPm}
-            disabled={disabled}
-            style={timePickerStyles.ampmButton}
-          >
-            {ampm}
-          </Button>
-        )}
-      </View>
-    </View>
-  );
-};

package/src/DateTimePicker/index.native.ts

@@ -1,3 +0,0 @@
-export { default as DateTimePicker } from './DateTimePicker.native';
-export { TimePicker } from './TimePicker.native';
-export * from './types';

package/src/DateTimePicker/index.ts

@@ -1,3 +0,0 @@
-export { default as DateTimePicker } from './DateTimePicker';
-export { TimePicker } from './TimePicker';
-export * from './types';