@idealyst/datepicker 1.0.0 → 1.0.41

package/src/DateTimePicker/primitives/ClockFace.native.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { TouchableOpacity } from 'react-native';
+import Svg, { Circle, Line } from 'react-native-svg';
+import { timePickerStyles } from '../TimePicker.styles';
+
+interface ClockFaceProps {
+  activeSelection: 'hour' | 'minute';
+  hours: number;
+  minutes: number;
+  displayHours: number;
+  mode: '12h' | '24h';
+  disabled: boolean;
+  onHourClick: (hour: number) => void;
+  onMinuteClick: (minute: number) => void;
+}
+
+export const ClockFace: React.FC<ClockFaceProps> = ({
+  activeSelection,
+  hours,
+  minutes,
+  displayHours,
+  mode,
+  disabled,
+  onHourClick,
+  onMinuteClick,
+}) => {
+  // Clock configuration
+  const CLOCK_SIZE = 180;
+  const CENTER = CLOCK_SIZE / 2;
+  const CLOCK_RADIUS = CENTER - 5;
+  const NUMBER_RADIUS = CENTER - 24;
+  const HOUR_HAND_LENGTH = CENTER - 44;
+  const MINUTE_HAND_LENGTH = CENTER - 36;
+  const CIRCLE_RADIUS = 15;
+
+  if (activeSelection === 'hour') {
+    return (
+      <View style={[timePickerStyles.clockContainer, { position: 'relative' }]}>
+        <Svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
+          {/* Clock face */}
+          <Circle 
+            cx={CENTER} 
+            cy={CENTER} 
+            r={CLOCK_RADIUS} 
+            fill="#f9fafb" 
+            stroke="#e5e7eb" 
+            strokeWidth="2"
+          />
+          
+          {/* Hour hand pointing to selected hour */}
+          {(() => {
+            const selectedHour = mode === '12h' ? displayHours : hours;
+            const hourFor12Clock = selectedHour === 12 ? 0 : selectedHour;
+            const hourAngle = (hourFor12Clock * 30) - 90;
+            const handX = CENTER + HOUR_HAND_LENGTH * Math.cos(hourAngle * Math.PI / 180);
+            const handY = CENTER + HOUR_HAND_LENGTH * Math.sin(hourAngle * Math.PI / 180);
+            
+            return (
+              <Line
+                x1={CENTER}
+                y1={CENTER}
+                x2={handX}
+                y2={handY}
+                stroke="#3b82f6"
+                strokeWidth="3"
+                strokeLinecap="round"
+              />
+            );
+          })()}
+          
+          {/* Center dot */}
+          <Circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
+        </Svg>
+        
+        {/* TouchableOpacity buttons for hour numbers */}
+        {[...Array(12)].map((_, i) => {
+          const hour = i === 0 ? 12 : i;
+          const angle = (i * 30) - 90;
+          const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
+          const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
+          const isSelected = (mode === '12h' ? displayHours : hours) === (hour === 12 ? (mode === '12h' ? 12 : 0) : hour);
+          
+          return (
+            <TouchableOpacity
+              key={`touch-${i}`}
+              onPressIn={() => !disabled && onHourClick(hour)}
+              disabled={disabled}
+              style={{
+                position: 'absolute',
+                left: x - CIRCLE_RADIUS,
+                top: y - CIRCLE_RADIUS,
+                width: CIRCLE_RADIUS * 2,
+                height: CIRCLE_RADIUS * 2,
+                borderRadius: CIRCLE_RADIUS,
+                backgroundColor: isSelected ? '#3b82f6' : 'transparent',
+                borderWidth: 1,
+                borderColor: isSelected ? '#3b82f6' : '#e5e7eb',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Text style={{
+                fontSize: 14,
+                fontWeight: '500',
+                color: isSelected ? '#ffffff' : '#374151',
+                textAlign: 'center',
+              }}>
+                {hour}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  } else {
+    // Minute selection clock
+    return (
+      <View style={[timePickerStyles.clockContainer, { position: 'relative' }]}>
+        <Svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
+          {/* Clock face */}
+          <Circle 
+            cx={CENTER} 
+            cy={CENTER} 
+            r={CLOCK_RADIUS} 
+            fill="#f9fafb" 
+            stroke="#e5e7eb" 
+            strokeWidth="2"
+          />
+          
+          {/* Minute hand */}
+          {(() => {
+            const minuteAngle = (minutes * 6) - 90;
+            const handX = CENTER + MINUTE_HAND_LENGTH * Math.cos(minuteAngle * Math.PI / 180);
+            const handY = CENTER + MINUTE_HAND_LENGTH * Math.sin(minuteAngle * Math.PI / 180);
+            
+            return (
+              <Line
+                x1={CENTER}
+                y1={CENTER}
+                x2={handX}
+                y2={handY}
+                stroke="#3b82f6"
+                strokeWidth="3"
+                strokeLinecap="round"
+              />
+            );
+          })()}
+          
+          {/* Center dot */}
+          <Circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
+        </Svg>
+        
+        {/* TouchableOpacity buttons for minute numbers */}
+        {[...Array(12)].map((_, i) => {
+          const minute = i * 5;
+          const angle = (i * 30) - 90;
+          const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
+          const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
+          const isSelected = Math.floor(minutes / 5) * 5 === minute;
+          
+          return (
+            <TouchableOpacity
+              key={`touch-${i}`}
+              onPressIn={() => !disabled && onMinuteClick(minute)}
+              disabled={disabled}
+              style={{
+                position: 'absolute',
+                left: x - CIRCLE_RADIUS,
+                top: y - CIRCLE_RADIUS,
+                width: CIRCLE_RADIUS * 2,
+                height: CIRCLE_RADIUS * 2,
+                borderRadius: CIRCLE_RADIUS,
+                backgroundColor: isSelected ? '#3b82f6' : 'transparent',
+                borderWidth: 1,
+                borderColor: isSelected ? '#3b82f6' : '#e5e7eb',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Text style={{
+                fontSize: 14,
+                fontWeight: '500',
+                color: isSelected ? '#ffffff' : '#374151',
+                textAlign: 'center',
+              }}>
+                {String(minute).padStart(2, '0')}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+};

package/src/DateTimePicker/primitives/ClockFace.web.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { View } from '@idealyst/components';
+import { timePickerStyles } from '../TimePicker.styles';
+
+interface ClockFaceProps {
+  activeSelection: 'hour' | 'minute';
+  hours: number;
+  minutes: number;
+  displayHours: number;
+  mode: '12h' | '24h';
+  disabled: boolean;
+  onHourClick: (hour: number) => void;
+  onMinuteClick: (minute: number) => void;
+}
+
+export const ClockFace: React.FC<ClockFaceProps> = ({
+  activeSelection,
+  hours,
+  minutes,
+  displayHours,
+  mode,
+  disabled,
+  onHourClick,
+  onMinuteClick,
+}) => {
+  // Clock configuration
+  const CLOCK_SIZE = 180;
+  const CENTER = CLOCK_SIZE / 2;
+  const CLOCK_RADIUS = CENTER - 5;
+  const NUMBER_RADIUS = CENTER - 24;
+  const HOUR_HAND_LENGTH = CENTER - 44;
+  const MINUTE_HAND_LENGTH = CENTER - 36;
+  const CIRCLE_RADIUS = 15;
+
+  if (activeSelection === 'hour') {
+    return (
+      <View style={timePickerStyles.clockContainer}>
+        <svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
+          {/* Clock face */}
+          <circle cx={CENTER} cy={CENTER} r={CLOCK_RADIUS} fill="#f9fafb" stroke="#e5e7eb" strokeWidth="2"/>
+          
+          {/* Hour numbers - clickable */}
+          {[...Array(12)].map((_, i) => {
+            const hour = i === 0 ? 12 : i;
+            const angle = (i * 30) - 90;
+            const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
+            const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
+            const isSelected = (mode === '12h' ? displayHours : hours) === (hour === 12 ? (mode === '12h' ? 12 : 0) : hour);
+            
+            return (
+              <g key={i} onClick={() => !disabled && onHourClick(hour)}>
+                <circle
+                  cx={x}
+                  cy={y}
+                  r={CIRCLE_RADIUS}
+                  fill={isSelected ? '#3b82f6' : 'transparent'}
+                  stroke={isSelected ? '#3b82f6' : '#e5e7eb'}
+                  strokeWidth="1"
+                  style={{ cursor: disabled ? 'default' : 'pointer' }}
+                />
+                <text
+                  x={x}
+                  y={y + 4}
+                  textAnchor="middle"
+                  fontSize="14"
+                  fill={isSelected ? '#ffffff' : '#374151'}
+                  fontWeight="500"
+                  style={{ cursor: disabled ? 'default' : 'pointer', userSelect: 'none', pointerEvents: 'none' }}
+                >
+                  {hour}
+                </text>
+              </g>
+            );
+          })}
+          
+          {/* Hour hand pointing to selected hour */}
+          {(() => {
+            const selectedHour = mode === '12h' ? displayHours : hours;
+            const hourFor12Clock = selectedHour === 12 ? 0 : selectedHour;
+            const hourAngle = (hourFor12Clock * 30) - 90;
+            const handX = CENTER + HOUR_HAND_LENGTH * Math.cos(hourAngle * Math.PI / 180);
+            const handY = CENTER + HOUR_HAND_LENGTH * Math.sin(hourAngle * Math.PI / 180);
+            
+            return (
+              <line
+                x1={CENTER}
+                y1={CENTER}
+                x2={handX}
+                y2={handY}
+                stroke="#3b82f6"
+                strokeWidth="3"
+                strokeLinecap="round"
+              />
+            );
+          })()}
+          
+          {/* Center dot */}
+          <circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
+        </svg>
+      </View>
+    );
+  } else {
+    return (
+      <View style={timePickerStyles.clockContainer}>
+        <svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
+          {/* Clock face */}
+          <circle cx={CENTER} cy={CENTER} r={CLOCK_RADIUS} fill="#f9fafb" stroke="#e5e7eb" strokeWidth="2"/>
+          
+          {/* Minute markers - every 5 minutes */}
+          {[...Array(12)].map((_, i) => {
+            const minute = i * 5;
+            const angle = (i * 30) - 90;
+            const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
+            const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
+            const isSelected = Math.floor(minutes / 5) * 5 === minute;
+            
+            return (
+              <g key={i} onClick={() => !disabled && onMinuteClick(minute)}>
+                <circle
+                  cx={x}
+                  cy={y}
+                  r={CIRCLE_RADIUS}
+                  fill={isSelected ? '#3b82f6' : 'transparent'}
+                  stroke={isSelected ? '#3b82f6' : '#e5e7eb'}
+                  strokeWidth="1"
+                  style={{ cursor: disabled ? 'default' : 'pointer' }}
+                />
+                <text
+                  x={x}
+                  y={y + 4}
+                  textAnchor="middle"
+                  fontSize="12"
+                  fill={isSelected ? '#ffffff' : '#374151'}
+                  fontWeight="500"
+                  style={{ cursor: disabled ? 'default' : 'pointer', userSelect: 'none', pointerEvents: 'none' }}
+                >
+                  {minute.toString().padStart(2, '0')}
+                </text>
+              </g>
+            );
+          })}
+          
+          {/* Minute hand pointing to selected minute */}
+          {(() => {
+            const minuteAngle = (minutes * 6) - 90;
+            const handX = CENTER + MINUTE_HAND_LENGTH * Math.cos(minuteAngle * Math.PI / 180);
+            const handY = CENTER + MINUTE_HAND_LENGTH * Math.sin(minuteAngle * Math.PI / 180);
+            
+            return (
+              <line
+                x1={CENTER}
+                y1={CENTER}
+                x2={handX}
+                y2={handY}
+                stroke="#3b82f6"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            );
+          })()}
+          
+          {/* Center dot */}
+          <circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
+        </svg>
+      </View>
+    );
+  }
+};

package/src/DateTimePicker/primitives/TimeInput.native.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import { timePickerStyles } from '../TimePicker.styles';
+
+interface TimeInputProps {
+  type: 'hour' | 'minute';
+  value: string;
+  onChangeText: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  isActive: boolean;
+  disabled: boolean;
+  inputRef: React.RefObject<TextInput>;
+}
+
+export const TimeInput: React.FC<TimeInputProps> = ({
+  type,
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  isActive,
+  disabled,
+  inputRef,
+}) => {
+  const maxLength = type === 'hour' ? 2 : 2;
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={value}
+      onChangeText={onChangeText}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      keyboardType="numeric"
+      maxLength={maxLength}
+      selectTextOnFocus
+      editable={!disabled}
+      style={[
+        timePickerStyles.timeInput,
+        isActive && timePickerStyles.activeInput,
+        {
+          fontSize: 16,
+          fontWeight: '600',
+          color: isActive ? '#3b82f6' : '#111827',
+          textAlign: 'center',
+          paddingHorizontal: 2,
+          paddingVertical: 2,
+        }
+      ]}
+    />
+  );
+};

package/src/DateTimePicker/primitives/TimeInput.web.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Input } from '@idealyst/components';
+import { timePickerStyles } from '../TimePicker.styles';
+
+interface TimeInputProps {
+  type: 'hour' | 'minute';
+  value: string;
+  onChangeText: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  isActive: boolean;
+  disabled: boolean;
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+export const TimeInput: React.FC<TimeInputProps> = ({
+  type,
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  isActive,
+  disabled,
+  inputRef,
+}) => {
+  const handleChange = (inputValue: string) => {
+    onChangeText(inputValue);
+    
+    // Smart focus switching for web
+    if (type === 'hour') {
+      const num = parseInt(inputValue);
+      if (!isNaN(num) && num >= 2) {
+        // Wait a moment then focus minutes
+        setTimeout(() => {
+          const minuteInput = document.querySelector('input[data-time-input="minute"]') as HTMLInputElement;
+          minuteInput?.focus();
+        }, 100);
+      }
+    }
+  };
+
+  const handleFocus = () => {
+    onFocus();
+    // For web, sync the displayed value on focus
+    if (type === 'minute' && value.length === 1) {
+      onChangeText(value.padStart(2, '0'));
+    }
+  };
+
+  return (
+    <Input
+      ref={inputRef}
+      variant="bare"
+      value={value}
+      onChangeText={handleChange}
+      onFocus={handleFocus}
+      onBlur={onBlur}
+      style={[
+        timePickerStyles.timeInput,
+        isActive ? timePickerStyles.activeInput : {}
+      ]}
+      disabled={disabled}
+      data-time-input={type}
+    />
+  );
+};

package/src/DateTimePicker/primitives/index.native.ts

@@ -0,0 +1,2 @@
+export { ClockFace } from './ClockFace';
+export { TimeInput } from './TimeInput';

package/src/DateTimePicker/primitives/index.ts

@@ -0,0 +1,2 @@
+export { ClockFace } from './ClockFace';
+export { TimeInput } from './TimeInput';

package/src/DateTimePicker/primitives/index.web.ts

@@ -0,0 +1,2 @@
+export { ClockFace } from './ClockFace';
+export { TimeInput } from './TimeInput';

package/src/DateTimePicker/types.ts

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

package/src/DateTimePicker/utils/dimensions.native.ts

@@ -0,0 +1,9 @@
+import { Dimensions } from 'react-native';
+
+export const getDimensions = () => Dimensions.get('window');
+
+export const addEventListener = (callback: (data: { window: { width: number; height: number } }) => void) => {
+  return Dimensions.addEventListener('change', ({ window }) => {
+    callback({ window });
+  });
+};

package/src/DateTimePicker/utils/dimensions.ts

@@ -0,0 +1,9 @@
+import { Dimensions } from 'react-native';
+
+export const getDimensions = () => Dimensions.get('window');
+
+export const addEventListener = (callback: (data: { window: { width: number; height: number } }) => void) => {
+  return Dimensions.addEventListener('change', ({ window }) => {
+    callback({ window });
+  });
+};

package/src/DateTimePicker/utils/dimensions.web.ts

@@ -0,0 +1,33 @@
+export const getDimensions = () => {
+  if (typeof window !== 'undefined') {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  }
+  
+  return { width: 1024, height: 768 }; // Default desktop size
+};
+
+export const addEventListener = (callback: (data: { window: { width: number; height: number } }) => void) => {
+  if (typeof window !== 'undefined') {
+    const handleResize = () => {
+      callback({
+        window: {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        },
+      });
+    };
+    
+    window.addEventListener('resize', handleResize);
+    
+    return {
+      remove: () => window.removeEventListener('resize', handleResize),
+    };
+  }
+  
+  return {
+    remove: () => {},
+  };
+};