@idealyst/datepicker 1.0.0 → 1.0.58

package/src/DatePicker/Calendar.native.tsx

@@ -1,10 +1,73 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback, memo, useRef } from 'react';
 import { View, Text, Button } from '@idealyst/components';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, StyleSheet } from 'react-native';
 import { CalendarProps } from './types';
 import { calendarStyles } from './Calendar.styles';
 
-export const Calendar: React.FC<CalendarProps> = ({
+// Memoized day cell component for better performance
+const DayCell = memo(({ 
+  date, 
+  isSelected, 
+  isDisabled, 
+  onPress,
+  dayButtonStyle,
+  textColorSelected,
+  textColorDefault
+}: {
+  date: Date | null;
+  isSelected: boolean;
+  isDisabled: boolean;
+  onPress: (date: Date) => void;
+  dayButtonStyle: any;
+  textColorSelected: string;
+  textColorDefault: string;
+}) => {
+  const handlePress = useCallback(() => {
+    if (date && !isDisabled) {
+      onPress(date);
+    }
+  }, [date, isDisabled, onPress]);
+
+  if (!date) {
+    return <View style={calendarStyles.dayCell} />;
+  }
+
+  return (
+    <View style={calendarStyles.dayCell}>
+      <TouchableOpacity
+        onPressIn={handlePress}
+        disabled={isDisabled}
+        style={[
+          dayButtonStyle,
+          isSelected && styles.selectedButton,
+          isDisabled && styles.disabledButton
+        ]}
+      >
+        <Text 
+          style={[
+            styles.dayText,
+            { color: isSelected ? textColorSelected : textColorDefault }
+          ]}
+        >
+          {date.getDate()}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison function to prevent unnecessary re-renders
+  // Only re-render if the relevant props actually changed
+  return (
+    prevProps.date === nextProps.date &&
+    prevProps.isSelected === nextProps.isSelected &&
+    prevProps.isDisabled === nextProps.isDisabled &&
+    prevProps.onPress === nextProps.onPress
+  );
+});
+
+DayCell.displayName = 'DayCell';
+
+export const Calendar: React.FC<CalendarProps> = memo(({
   value,
   onChange,
   minDate,
@@ -21,74 +84,96 @@ export const Calendar: React.FC<CalendarProps> = ({
 
   const currentMonth = controlledCurrentMonth || internalCurrentMonth;
 
-  const handleMonthChange = (newMonth: Date) => {
-    if (onMonthChange) {
-      onMonthChange(newMonth);
+  // Store latest callbacks in refs to avoid recreating functions
+  const onChangeRef = useRef(onChange);
+  const onMonthChangeRef = useRef(onMonthChange);
+  onChangeRef.current = onChange;
+  onMonthChangeRef.current = onMonthChange;
+
+  const handleMonthChange = useCallback((newMonth: Date) => {
+    if (onMonthChangeRef.current) {
+      onMonthChangeRef.current(newMonth);
     } else {
       setInternalCurrentMonth(newMonth);
     }
-  };
+  }, []);
 
-  const { monthStart, monthEnd, daysInMonth, startingDayOfWeek } = useMemo(() => {
+  // Memoize calendar data calculation with selection state
+  const { calendarDays, monthName } = useMemo(() => {
     const monthStart = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
     const monthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
     const daysInMonth = monthEnd.getDate();
     const startingDayOfWeek = monthStart.getDay();
     
-    return { monthStart, monthEnd, daysInMonth, startingDayOfWeek };
-  }, [currentMonth]);
-
-  const isDateDisabled = (date: Date): boolean => {
-    if (disabled) return true;
-    if (minDate && date < minDate) return true;
-    if (maxDate && date > maxDate) return true;
-    return false;
-  };
-
-  const isDateSelected = (date: Date): boolean => {
-    if (!value) return false;
-    return (
-      date.getDate() === value.getDate() &&
-      date.getMonth() === value.getMonth() &&
-      date.getFullYear() === value.getFullYear()
-    );
-  };
-
-  const handleDateClick = (date: Date) => {
-    if (!isDateDisabled(date)) {
-      onChange(date);
+    // Pre-calculate all calendar days with their states
+    const days: Array<{
+      date: Date | null;
+      isSelected: boolean;
+      isDisabled: boolean;
+      key: string;
+    }> = [];
+    
+    // Add empty cells for days before month starts
+    for (let i = 0; i < startingDayOfWeek; i++) {
+      days.push({
+        date: null,
+        isSelected: false,
+        isDisabled: false,
+        key: `empty-${i}`
+      });
+    }
+    
+    // Add days of the month with pre-calculated states
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+      const dateTime = date.getTime();
+      
+      // Pre-calculate selection state
+      const isSelected = value ? (
+        date.getDate() === value.getDate() &&
+        date.getMonth() === value.getMonth() &&
+        date.getFullYear() === value.getFullYear()
+      ) : false;
+      
+      // Pre-calculate disabled state
+      const isDisabled = disabled ||
+        (minDate && dateTime < minDate.getTime()) ||
+        (maxDate && dateTime > maxDate.getTime());
+      
+      days.push({
+        date,
+        isSelected,
+        isDisabled: !!isDisabled,
+        key: `${date.getFullYear()}-${date.getMonth()}-${day}`
+      });
     }
-  };
 
-  const goToPreviousMonth = () => {
+    const name = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    
+    return { calendarDays: days, monthName: name };
+  }, [currentMonth, value, disabled, minDate, maxDate]);
+
+
+  const handleDateClick = useCallback((date: Date) => {
+    onChangeRef.current(date);
+  }, []);
+
+  const goToPreviousMonth = useCallback(() => {
     const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
     handleMonthChange(newMonth);
-  };
+  }, [currentMonth, handleMonthChange]);
 
-  const goToNextMonth = () => {
+  const goToNextMonth = useCallback(() => {
     const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
     handleMonthChange(newMonth);
-  };
-
-  const monthName = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-
-  // Create calendar grid
-  const calendarDays = [];
-  
-  // Add empty cells for days before month starts
-  for (let i = 0; i < startingDayOfWeek; i++) {
-    calendarDays.push(null);
-  }
-  
-  // Add days of the month
-  for (let day = 1; day <= daysInMonth; day++) {
-    const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
-    calendarDays.push(date);
-  }
+  }, [currentMonth, handleMonthChange]);
 
   // Use Unistyles
   calendarStyles.useVariants({});
 
+  // Pre-calculate styles to avoid inline objects
+  const dayButtonStyle = calendarStyles.dayButton;
+
   return (
     <View style={[calendarStyles.container, style]} testID={testID}>
       {/* Header */}
@@ -116,7 +201,7 @@ export const Calendar: React.FC<CalendarProps> = ({
 
       {/* Weekday headers */}
       <View style={calendarStyles.weekdayHeader}>
-        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
+        {weekdays.map((day) => (
           <View key={day} style={calendarStyles.weekdayCell}>
             <Text style={calendarStyles.weekdayText}>
               {day}
@@ -127,33 +212,50 @@ export const Calendar: React.FC<CalendarProps> = ({
 
       {/* Calendar grid */}
       <View style={calendarStyles.calendarGrid}>
-        {calendarDays.map((date, index) => (
-          <View key={index} style={calendarStyles.dayCell}>
-            {date && (
-              <TouchableOpacity
-                onPress={() => handleDateClick(date)}
-                disabled={isDateDisabled(date)}
-                style={[
-                  calendarStyles.dayButton,
-                  {
-                    backgroundColor: isDateSelected(date) ? '#3b82f6' : 'transparent',
-                    opacity: isDateDisabled(date) ? 0.5 : 1,
-                  }
-                ]}
-              >
-                <Text 
-                  style={{ 
-                    color: isDateSelected(date) ? 'white' : 'black',
-                    fontSize: 13,
-                  }}
-                >
-                  {date.getDate()}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
+        {calendarDays.map((dayInfo) => (
+          <DayCell
+            key={dayInfo.key}
+            date={dayInfo.date}
+            isSelected={dayInfo.isSelected}
+            isDisabled={dayInfo.isDisabled}
+            onPress={handleDateClick}
+            dayButtonStyle={dayButtonStyle}
+            textColorSelected="#ffffff"
+            textColorDefault="#000000"
+          />
         ))}
       </View>
     </View>
   );
-};
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent unnecessary re-renders
+  // Skip checking callbacks since we handle them with refs
+  return (
+    prevProps.value?.getTime() === nextProps.value?.getTime() &&
+    prevProps.minDate?.getTime() === nextProps.minDate?.getTime() &&
+    prevProps.maxDate?.getTime() === nextProps.maxDate?.getTime() &&
+    prevProps.disabled === nextProps.disabled &&
+    prevProps.currentMonth?.getTime() === nextProps.currentMonth?.getTime() &&
+    prevProps.style === nextProps.style &&
+    prevProps.testID === nextProps.testID
+  );
+});
+
+Calendar.displayName = 'Calendar';
+
+// Static weekday labels
+const weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+// Pre-defined styles to avoid inline style objects
+const styles = StyleSheet.create({
+  selectedButton: {
+    backgroundColor: '#3b82f6'
+  },
+  disabledButton: {
+    opacity: 0.5
+  },
+  dayText: {
+    fontSize: 13,
+    textAlign: 'center'
+  }
+});

package/src/DatePicker/Calendar.styles.tsx

@@ -38,47 +38,42 @@ export const calendarStyles = StyleSheet.create((theme) => ({
     padding: theme.spacing?.sm || 12,
     backgroundColor: theme.colors?.surface?.secondary || '#f9fafb',
     borderRadius: theme.borderRadius?.md || 8,
-    border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
     
-    // Native specific styles
-    _native: {
-      borderWidth: 1,
-      borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    // Web specific styles
+    _web: {
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
     },
   },
 
   monthPickerGrid: {
-    display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 6,
-    width: '100%',
     justifyContent: 'space-between',
+    width: '100%',
     
-    // Native fallback
-    _native: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
+    // Web specific styles
+    _web: {
+      display: 'flex',
+      gap: 6,
     },
   },
 
   yearPickerGrid: {
-    display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 4,
+    justifyContent: 'space-between',
     maxHeight: 200,
-    overflowY: 'auto',
     width: '100%',
-    justifyContent: 'space-between',
     
-    // Native fallback
-    _native: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-      maxHeight: 200,
+    // Web specific styles
+    _web: {
+      display: 'flex',
+      gap: 4,
+      overflowY: 'auto',
     },
   },
 
@@ -87,56 +82,64 @@ export const calendarStyles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing?.xs || 6,
     paddingVertical: theme.spacing?.xs || 4,
     minHeight: 32,
-    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '30%',
+    marginBottom: 4,
     
     // Month buttons: 3 per row with equal spacing
     variants: {
       monthButton: {
         true: {
-          flex: '1 0 30%',
-          maxWidth: 'calc(33.333% - 4px)',
+          _web: {
+            flex: '1 0 30%',
+            maxWidth: 'calc(33.333% - 4px)',
+            width: undefined,
+          },
         },
       },
       yearButton: {
         true: {
-          flex: '1 0 22%',
-          maxWidth: 'calc(25% - 3px)',
+          _web: {
+            flex: '1 0 22%',
+            maxWidth: 'calc(25% - 3px)',
+            width: undefined,
+          },
         },
       },
     },
     
-    // Native specific sizing
-    _native: {
-      width: '30%',
-      marginBottom: 4,
+    // Web specific styles
+    _web: {
+      display: 'flex',
+      width: undefined,
+      marginBottom: undefined,
     },
   },
 
   weekdayHeader: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
-    gap: 2,
+    flexDirection: 'row',
     marginBottom: theme.spacing?.xs || 8,
     
-    // Native fallback
-    _native: {
-      flexDirection: 'row',
+    // Web specific styles
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: 2,
+      flexDirection: undefined,
     },
   },
 
   weekdayCell: {
-    display: 'flex',
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: theme.spacing?.xs || 4,
     
-    // Native fallback
-    _native: {
-      flex: 1,
-      alignItems: 'center',
-      paddingVertical: theme.spacing?.xs || 4,
+    // Web specific styles
+    _web: {
+      display: 'flex',
+      flex: undefined,
     },
   },
 
@@ -147,44 +150,44 @@ export const calendarStyles = StyleSheet.create((theme) => ({
   },
 
   calendarGrid: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
-    gap: 2,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
     marginBottom: theme.spacing?.xs || 8,
     
-    // Native fallback
-    _native: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
+    // Web specific styles
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: 2,
+      flexDirection: undefined,
+      flexWrap: undefined,
     },
   },
 
   dayCell: {
-    display: 'flex',
+    width: '14.28%', // 100% / 7 days
+    aspectRatio: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    aspectRatio: '1',
     minHeight: 32,
     
-    // Native specific sizing
-    _native: {
-      width: '14.28%', // 100% / 7 days
-      aspectRatio: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
+    // Web specific styles
+    _web: {
+      display: 'flex',
+      width: undefined,
     },
   },
 
   dayButton: {
-    width: '100%',
-    height: '100%',
-    maxWidth: 36,
-    maxHeight: 36,
+    width: 28,
+    height: 28,
     minWidth: 28,
     minHeight: 28,
     padding: 0,
     borderRadius: theme.borderRadius?.sm || 6,
     fontSize: theme.typography?.sizes?.small || 13,
+    alignItems: 'center',
+    justifyContent: 'center',
     
     variants: {
       selected: {
@@ -197,13 +200,13 @@ export const calendarStyles = StyleSheet.create((theme) => ({
       },
     },
     
-    // Native specific styling
-    _native: {
-      width: 28,
-      height: 28,
-      minWidth: 28,
-      minHeight: 28,
-      borderRadius: theme.borderRadius?.sm || 6,
+    // Web specific styling
+    _web: {
+      width: '100%',
+      height: '100%',
+      maxWidth: 36,
+      maxHeight: 36,
+      display: 'flex',
     },
   },
 

package/src/DatePicker/DatePicker.native.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useCallback, memo, useRef } from 'react';
 import { View, Text } from '@idealyst/components';
 import { DatePickerProps } from './types';
 import { Calendar } from './Calendar.native';
 import { datePickerStyles } from './DatePicker.styles';
 
-const DatePicker: React.FC<DatePickerProps> = ({
+const DatePicker: React.FC<DatePickerProps> = memo(({
   value,
   onChange,
   minDate,
@@ -13,9 +13,14 @@ const DatePicker: React.FC<DatePickerProps> = ({
   style,
   testID,
 }) => {
-  const handleDateSelect = (date: Date) => {
-    onChange(date);
-  };
+  // Store the latest onChange function in a ref to avoid recreating handleDateSelect
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  
+  // Stable callback that uses the latest onChange function
+  const handleDateSelect = useCallback((date: Date) => {
+    onChangeRef.current(date);
+  }, []); // Empty dependency array - this function never changes
 
   return (
     <Calendar
@@ -28,6 +33,19 @@ const DatePicker: React.FC<DatePickerProps> = ({
       testID={testID}
     />
   );
-};
+}, (prevProps, nextProps) => {
+  // Custom comparison to reduce unnecessary re-renders
+  // Skip checking onChange since we handle it with a ref
+  return (
+    prevProps.value?.getTime() === nextProps.value?.getTime() &&
+    prevProps.minDate?.getTime() === nextProps.minDate?.getTime() &&
+    prevProps.maxDate?.getTime() === nextProps.maxDate?.getTime() &&
+    prevProps.disabled === nextProps.disabled &&
+    prevProps.style === nextProps.style &&
+    prevProps.testID === nextProps.testID
+  );
+});
+
+DatePicker.displayName = 'DatePicker';
 
 export default DatePicker;

package/src/DatePicker/DatePicker.styles.tsx

@@ -14,20 +14,27 @@ export const datePickerStyles = StyleSheet.create((theme) => ({
 
   picker: {
     borderRadius: theme.borderRadius?.md || 8,
-    border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
     backgroundColor: theme.colors?.surface?.primary || '#ffffff',
     padding: theme.spacing?.md || 16,
-    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
     
-    // Native specific styles
-    _native: {
-      borderWidth: 1,
-      borderColor: theme.colors?.border?.primary || '#e5e7eb',
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.1,
-      shadowRadius: 3,
-      elevation: 2,
+    // Web specific styles
+    _web: {
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+      shadowColor: undefined,
+      shadowOffset: undefined,
+      shadowOpacity: undefined,
+      shadowRadius: undefined,
+      elevation: undefined,
     },
   },
 

package/src/DatePicker/DatePicker.web.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DatePickerProps } from './types';
-import { Calendar } from './Calendar';
+import { Calendar } from './Calendar.web';
 
 const DatePicker: React.FC<DatePickerProps> = ({
   value,

package/src/DatePicker/index.ts

@@ -1,3 +1,3 @@
 export { default as DatePicker } from './DatePicker.web';
-export { Calendar } from './Calendar';
+export { Calendar } from './Calendar.web';
 export type { DatePickerProps, CalendarProps } from './types';