react-native-month-day-picker 0.1.0

package/src/BirthdayPickerModal.tsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import { BirthdayPicker } from './BirthdayPicker';
+import type { BirthdayPickerModalProps, BirthdayValue } from './types';
+import { DEFAULT_BIRTHDAY_VALUE } from './constants';
+
+/**
+ * A modal wrapper for BirthdayPicker that provides confirm/cancel functionality.
+ *
+ * @example
+ * ```tsx
+ * const [visible, setVisible] = useState(false);
+ * const [birthday, setBirthday] = useState({ month: 1, day: 1 });
+ *
+ * <BirthdayPickerModal
+ *   visible={visible}
+ *   value={birthday}
+ *   onConfirm={(value) => {
+ *     setBirthday(value);
+ *     setVisible(false);
+ *   }}
+ *   onCancel={() => setVisible(false)}
+ * />
+ * ```
+ */
+export function BirthdayPickerModal({
+  visible,
+  onConfirm,
+  onCancel,
+  value: externalValue,
+  defaultValue = DEFAULT_BIRTHDAY_VALUE,
+  title = 'Select Birthday',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  animationType = 'slide',
+  locale,
+  monthFormat,
+  allowLeapDay,
+  disabled,
+  testID,
+  itemHeight,
+  visibleItems,
+  monthAccessibilityLabel,
+  dayAccessibilityLabel,
+}: BirthdayPickerModalProps): React.ReactElement {
+  // Internal state to track the selection while modal is open
+  const [internalValue, setInternalValue] = useState<BirthdayValue>(
+    () => externalValue ?? defaultValue
+  );
+
+  // Reset internal value when modal opens or external value changes
+  useEffect(() => {
+    if (visible) {
+      setInternalValue(externalValue ?? defaultValue);
+    }
+  }, [visible, externalValue, defaultValue]);
+
+  // Handle value changes from the picker
+  const handleChange = useCallback((newValue: BirthdayValue) => {
+    setInternalValue(newValue);
+  }, []);
+
+  // Handle confirm button press
+  const handleConfirm = useCallback(() => {
+    onConfirm(internalValue);
+  }, [onConfirm, internalValue]);
+
+  // Handle cancel button press
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType={animationType}
+      onRequestClose={handleCancel}
+      testID={testID}
+    >
+      <View style={styles.overlay}>
+        <SafeAreaView style={styles.safeArea}>
+          <View style={styles.container}>
+            {/* Header */}
+            <View style={styles.header}>
+              <TouchableOpacity
+                onPress={handleCancel}
+                style={styles.headerButton}
+                accessibilityRole="button"
+                accessibilityLabel={cancelText}
+                testID={testID ? `${testID}-cancel` : undefined}
+              >
+                <Text style={styles.cancelText}>{cancelText}</Text>
+              </TouchableOpacity>
+
+              <Text style={styles.title}>{title}</Text>
+
+              <TouchableOpacity
+                onPress={handleConfirm}
+                style={styles.headerButton}
+                accessibilityRole="button"
+                accessibilityLabel={confirmText}
+                testID={testID ? `${testID}-confirm` : undefined}
+              >
+                <Text style={styles.confirmText}>{confirmText}</Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Picker */}
+            <View style={styles.pickerWrapper}>
+              <BirthdayPicker
+                value={internalValue}
+                onChange={handleChange}
+                locale={locale}
+                monthFormat={monthFormat}
+                allowLeapDay={allowLeapDay}
+                disabled={disabled}
+                itemHeight={itemHeight}
+                visibleItems={visibleItems}
+                monthAccessibilityLabel={monthAccessibilityLabel}
+                dayAccessibilityLabel={dayAccessibilityLabel}
+                testID={testID ? `${testID}-picker` : undefined}
+              />
+            </View>
+          </View>
+        </SafeAreaView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  safeArea: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    overflow: 'hidden',
+  },
+  container: {
+    backgroundColor: 'white',
+    paddingBottom: Platform.OS === 'android' ? 16 : 0,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ccc',
+  },
+  headerButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    minWidth: 60,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    flex: 1,
+  },
+  cancelText: {
+    fontSize: 17,
+    color: '#007AFF',
+  },
+  confirmText: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#007AFF',
+    textAlign: 'right',
+  },
+  pickerWrapper: {
+    paddingVertical: 16,
+  },
+});
+
+export default BirthdayPickerModal;

package/src/constants.ts

@@ -0,0 +1,64 @@
+import type { BirthdayValue, MonthFormat } from './types';
+
+/**
+ * Default birthday value (January 1st)
+ */
+export const DEFAULT_BIRTHDAY_VALUE: BirthdayValue = {
+  month: 1,
+  day: 1,
+};
+
+/**
+ * Default locale for month formatting
+ */
+export const DEFAULT_LOCALE = 'en-US';
+
+/**
+ * Default month format
+ */
+export const DEFAULT_MONTH_FORMAT: MonthFormat = 'long';
+
+/**
+ * Default item height in pixels
+ */
+export const DEFAULT_ITEM_HEIGHT = 40;
+
+/**
+ * Default number of visible items
+ */
+export const DEFAULT_VISIBLE_ITEMS = 5;
+
+/**
+ * Days in each month (1-indexed, index 0 is unused)
+ * February is set to 28, leap day handling is separate
+ */
+export const DAYS_IN_MONTH: readonly number[] = [
+  0, // Index 0 unused
+  31, // January
+  28, // February (leap day handled separately)
+  31, // March
+  30, // April
+  31, // May
+  30, // June
+  31, // July
+  31, // August
+  30, // September
+  31, // October
+  30, // November
+  31, // December
+];
+
+/**
+ * Number of months in a year
+ */
+export const MONTHS_IN_YEAR = 12;
+
+/**
+ * February month number
+ */
+export const FEBRUARY = 2;
+
+/**
+ * Leap day (Feb 29)
+ */
+export const LEAP_DAY = 29;

package/src/hooks/useBirthdayPicker.ts

@@ -0,0 +1,106 @@
+import { useState, useCallback, useMemo } from 'react';
+import type {
+  BirthdayValue,
+  UseBirthdayPickerOptions,
+  UseBirthdayPickerReturn,
+} from '../types';
+import { DEFAULT_BIRTHDAY_VALUE } from '../constants';
+import {
+  getDaysInMonth,
+  clampDay,
+  isValidBirthday,
+  normalizeBirthday,
+} from '../utils/dateUtils';
+
+/**
+ * Hook for managing birthday picker state
+ *
+ * @param options - Configuration options
+ * @returns State and handlers for birthday picker
+ *
+ * @example
+ * ```tsx
+ * const { value, setMonth, setDay, daysInMonth } = useBirthdayPicker({
+ *   initialValue: { month: 6, day: 15 },
+ * });
+ * ```
+ */
+export function useBirthdayPicker(
+  options: UseBirthdayPickerOptions = {}
+): UseBirthdayPickerReturn {
+  const { initialValue = DEFAULT_BIRTHDAY_VALUE, allowLeapDay = true } =
+    options;
+
+  // Normalize the initial value
+  const normalizedInitial = useMemo(
+    () => normalizeBirthday(initialValue, allowLeapDay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [] // Only compute once on mount
+  );
+
+  const [value, setValueInternal] = useState<BirthdayValue>(normalizedInitial);
+
+  /**
+   * Set the month, clamping the day if necessary
+   */
+  const setMonth = useCallback(
+    (month: number) => {
+      setValueInternal((prev) => {
+        const clampedMonth = Math.max(1, Math.min(month, 12));
+        const clampedDay = clampDay(prev.day, clampedMonth, allowLeapDay);
+        return { month: clampedMonth, day: clampedDay };
+      });
+    },
+    [allowLeapDay]
+  );
+
+  /**
+   * Set the day, clamping to valid range for current month
+   */
+  const setDay = useCallback(
+    (day: number) => {
+      setValueInternal((prev) => {
+        const clampedDay = clampDay(day, prev.month, allowLeapDay);
+        return { ...prev, day: clampedDay };
+      });
+    },
+    [allowLeapDay]
+  );
+
+  /**
+   * Set the entire value, normalizing both month and day
+   */
+  const setValue = useCallback(
+    (newValue: BirthdayValue) => {
+      setValueInternal(normalizeBirthday(newValue, allowLeapDay));
+    },
+    [allowLeapDay]
+  );
+
+  /**
+   * Number of days in the currently selected month
+   */
+  const daysInMonth = useMemo(
+    () => getDaysInMonth(value.month, allowLeapDay),
+    [value.month, allowLeapDay]
+  );
+
+  /**
+   * Whether the current value is valid
+   */
+  const isValid = useMemo(
+    () => isValidBirthday(value, allowLeapDay),
+    [value, allowLeapDay]
+  );
+
+  return {
+    value,
+    setMonth,
+    setDay,
+    setValue,
+    daysInMonth,
+    isValid,
+  };
+}
+
+export default useBirthdayPicker;

package/src/index.ts

@@ -0,0 +1,31 @@
+// Main components
+export { BirthdayPicker } from './BirthdayPicker';
+export { BirthdayPickerModal } from './BirthdayPickerModal';
+
+// Hook
+export { useBirthdayPicker } from './hooks/useBirthdayPicker';
+
+// Types
+export type {
+  BirthdayValue,
+  MonthFormat,
+  BirthdayPickerProps,
+  BirthdayPickerModalProps,
+  UseBirthdayPickerOptions,
+  UseBirthdayPickerReturn,
+} from './types';
+
+// Utilities (for advanced usage)
+export {
+  getDaysInMonth,
+  clampDay,
+  isValidBirthday,
+  getDaysArray,
+  getMonthsArray,
+  normalizeBirthday,
+} from './utils/dateUtils';
+
+export { getMonthNames, formatMonth, formatDay } from './utils/localeUtils';
+
+// Default export
+export { BirthdayPicker as default } from './BirthdayPicker';

package/src/types.ts

@@ -0,0 +1,189 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Represents a month-day birthday value without year.
+ * Month is 1-indexed (1 = January, 12 = December)
+ * Day is 1-indexed (1-31 depending on month)
+ */
+export type BirthdayValue = {
+  month: number; // 1-12
+  day: number; // 1-31
+};
+
+/**
+ * Format for displaying month names
+ */
+export type MonthFormat = 'long' | 'short' | 'numeric';
+
+/**
+ * Props for the BirthdayPicker component
+ */
+export interface BirthdayPickerProps {
+  /**
+   * Current value (controlled mode)
+   */
+  value?: BirthdayValue;
+
+  /**
+   * Default value (uncontrolled mode)
+   */
+  defaultValue?: BirthdayValue;
+
+  /**
+   * Called when value changes
+   */
+  onChange?: (value: BirthdayValue) => void;
+
+  /**
+   * BCP 47 locale string for month name formatting
+   * @default 'en-US'
+   */
+  locale?: string;
+
+  /**
+   * How to format month names
+   * @default 'long'
+   */
+  monthFormat?: MonthFormat;
+
+  /**
+   * Whether to allow Feb 29 as a valid birthday
+   * @default true
+   */
+  allowLeapDay?: boolean;
+
+  /**
+   * Disable interaction
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Container style
+   */
+  style?: ViewStyle;
+
+  /**
+   * Height of each item in the wheel
+   * @default 40
+   */
+  itemHeight?: number;
+
+  /**
+   * Number of visible items in each wheel (must be odd)
+   * @default 5
+   */
+  visibleItems?: number;
+
+  /**
+   * Accessibility label for month picker
+   * @default 'Month picker'
+   */
+  monthAccessibilityLabel?: string;
+
+  /**
+   * Accessibility label for day picker
+   * @default 'Day picker'
+   */
+  dayAccessibilityLabel?: string;
+}
+
+/**
+ * Props for the BirthdayPickerModal component
+ */
+export interface BirthdayPickerModalProps extends BirthdayPickerProps {
+  /**
+   * Whether the modal is visible
+   */
+  visible: boolean;
+
+  /**
+   * Called when user confirms selection
+   */
+  onConfirm: (value: BirthdayValue) => void;
+
+  /**
+   * Called when user cancels
+   */
+  onCancel: () => void;
+
+  /**
+   * Modal title
+   * @default 'Select Birthday'
+   */
+  title?: string;
+
+  /**
+   * Confirm button text
+   * @default 'Confirm'
+   */
+  confirmText?: string;
+
+  /**
+   * Cancel button text
+   * @default 'Cancel'
+   */
+  cancelText?: string;
+
+  /**
+   * Animation type for modal presentation
+   * @default 'slide'
+   */
+  animationType?: 'slide' | 'fade' | 'none';
+}
+
+/**
+ * Options for useBirthdayPicker hook
+ */
+export interface UseBirthdayPickerOptions {
+  /**
+   * Initial value
+   */
+  initialValue?: BirthdayValue;
+
+  /**
+   * Whether to allow Feb 29
+   * @default true
+   */
+  allowLeapDay?: boolean;
+}
+
+/**
+ * Return type of useBirthdayPicker hook
+ */
+export interface UseBirthdayPickerReturn {
+  /**
+   * Current birthday value
+   */
+  value: BirthdayValue;
+
+  /**
+   * Set the month (will clamp day if needed)
+   */
+  setMonth: (month: number) => void;
+
+  /**
+   * Set the day
+   */
+  setDay: (day: number) => void;
+
+  /**
+   * Set the entire value
+   */
+  setValue: (value: BirthdayValue) => void;
+
+  /**
+   * Number of days in the currently selected month
+   */
+  daysInMonth: number;
+
+  /**
+   * Whether the current value is valid
+   */
+  isValid: boolean;
+}

package/src/utils/dateUtils.ts

@@ -0,0 +1,101 @@
+import {
+  DAYS_IN_MONTH,
+  FEBRUARY,
+  LEAP_DAY,
+  MONTHS_IN_YEAR,
+} from '../constants';
+import type { BirthdayValue } from '../types';
+
+/**
+ * Get the number of days in a given month
+ * @param month - Month (1-12)
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Number of days in the month
+ */
+export function getDaysInMonth(month: number, allowLeapDay = true): number {
+  if (month < 1 || month > MONTHS_IN_YEAR) {
+    throw new Error(`Invalid month: ${month}. Must be between 1 and 12.`);
+  }
+
+  if (month === FEBRUARY && allowLeapDay) {
+    return LEAP_DAY;
+  }
+
+  return DAYS_IN_MONTH[month];
+}
+
+/**
+ * Clamp a day value to be valid for a given month
+ * @param day - Day to clamp
+ * @param month - Month (1-12)
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Clamped day value
+ */
+export function clampDay(
+  day: number,
+  month: number,
+  allowLeapDay = true
+): number {
+  const maxDays = getDaysInMonth(month, allowLeapDay);
+  return Math.max(1, Math.min(day, maxDays));
+}
+
+/**
+ * Check if a birthday value is valid
+ * @param value - Birthday value to validate
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Whether the value is valid
+ */
+export function isValidBirthday(
+  value: BirthdayValue,
+  allowLeapDay = true
+): boolean {
+  const { month, day } = value;
+
+  // Check month range
+  if (month < 1 || month > MONTHS_IN_YEAR) {
+    return false;
+  }
+
+  // Check day range
+  const maxDays = getDaysInMonth(month, allowLeapDay);
+  if (day < 1 || day > maxDays) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Generate an array of day numbers for a given month
+ * @param month - Month (1-12)
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Array of day numbers [1, 2, 3, ..., n]
+ */
+export function getDaysArray(month: number, allowLeapDay = true): number[] {
+  const maxDays = getDaysInMonth(month, allowLeapDay);
+  return Array.from({ length: maxDays }, (_, i) => i + 1);
+}
+
+/**
+ * Generate an array of month numbers
+ * @returns Array of month numbers [1, 2, 3, ..., 12]
+ */
+export function getMonthsArray(): number[] {
+  return Array.from({ length: MONTHS_IN_YEAR }, (_, i) => i + 1);
+}
+
+/**
+ * Normalize a birthday value to ensure it's valid
+ * @param value - Birthday value to normalize
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Normalized birthday value
+ */
+export function normalizeBirthday(
+  value: BirthdayValue,
+  allowLeapDay = true
+): BirthdayValue {
+  const month = Math.max(1, Math.min(value.month, MONTHS_IN_YEAR));
+  const day = clampDay(value.day, month, allowLeapDay);
+  return { month, day };
+}