react-native-ruler-date-picker 0.1.0 → 0.2.0

package/src/RulerDatePicker.tsx

@@ -1,462 +1,64 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Dimensions,
-  TouchableOpacity,
-} from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withDecay,
-  withTiming,
-  useAnimatedReaction,
-  runOnJS,
-} from 'react-native-reanimated';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-
-import type { RulerDatePickerProps, TickData } from './types';
-import { DEFAULTS, MS_PER_DAY } from './defaults';
-import {
-  formatDateString,
-  dateToDayOffset,
-  dayOffsetToDate,
-  useResolvedColors,
-  shouldShowLabel,
-  computeDayRange,
-} from './utils';
-import { useHaptics } from './useHaptics';
-import { Tick } from './Tick';
-
-const SCREEN_WIDTH = Dimensions.get('window').width;
+import React from 'react';
+import type { RulerDatePickerProps } from './types';
+import { RulerRoot } from './RulerRoot';
+import { RulerHeader } from './RulerHeader';
+import { RulerTrack } from './RulerTrack';
+import { RulerIndicator } from './RulerIndicator';
+import { RulerTicks } from './RulerTicks';
+import { RulerLensTrack } from './RulerLensTrack';
 
 /**
- * A performant, customizable ruler-style date picker for React Native.
+ * A performant, customizable horizontal ruler date picker for React Native & Expo.
  *
  * Features:
- * - 60 FPS scrolling via Reanimated 3 decay physics + snap alignment
- * - Dual-speed haptic feedback engine (discrete ticks vs continuous buzz)
- * - Windowed tick rendering for memory efficiency
- * - Fully configurable dimensions, colors, and behaviors
+ * - 60 FPS scrolling via Reanimated 3 decay physics & snap alignment
+ * - Generic, unopinionated Rule-Based Tick System (`TickRule[]`)
+ * - Windowed tick rendering for high memory efficiency
+ * - Dual-speed haptic feedback (discrete ticks vs continuous buzz)
+ * - Non-linear fisheye lens distortion (`lensEffect`)
+ * - Automatic Dark/Light mode theme detection
  *
  * @example
  * ```tsx
  * <RulerDatePicker
- *   selectedDate={new Date()}
- *   onSelectDate={(date, dateString) => console.log(dateString)}
+ *   value={selectedDate}
+ *   onChange={(date, dateString) => console.log(dateString)}
+ *   lensEffect
  * />
  * ```
  */
 export function RulerDatePicker(props: RulerDatePickerProps) {
   const {
-    selectedDate,
-    onSelectDate,
-    minDate,
-    maxDate,
-    labelInterval,
-    highlightDays,
-    tickSpacing = DEFAULTS.tickSpacing,
-    tickHeight = DEFAULTS.tickHeight,
-    tickTallHeight = DEFAULTS.tickTallHeight,
-    tickThickness = DEFAULTS.tickThickness,
-    height = DEFAULTS.height,
-    rulerHeight = DEFAULTS.rulerHeight,
-    indicatorWidth = DEFAULTS.indicatorWidth,
-    indicatorHeight = DEFAULTS.indicatorHeight,
-    todayDotSize = DEFAULTS.todayDotSize,
-    labelFontSize = DEFAULTS.labelFontSize,
-    bufferTicks = DEFAULTS.bufferTicks,
-    updateDebounceMs = DEFAULTS.updateDebounceMs,
-    enableHaptics = DEFAULTS.enableHaptics,
-    onHapticTrigger,
-    fastSwipeTickThreshold = DEFAULTS.fastSwipeTickThreshold,
-    continuousHapticIntervalMs = DEFAULTS.continuousHapticIntervalMs,
-    showResetToToday = DEFAULTS.showResetToToday,
-    renderHeader,
+    header = true,
+    indicator = true,
+    lensEffect,
+    ...rootProps
   } = props;
 
-  // ── Resolve colors ──────────────────────────────────────────────────────
-  const colors = useResolvedColors(props);
-
-  // ── Haptics ─────────────────────────────────────────────────────────────
-  const { fireDiscreteHaptic, startContinuousHaptic, stopContinuousHaptic } =
-    useHaptics({
-      enableHaptics,
-      onHapticTrigger,
-      continuousHapticIntervalMs,
-    });
-
-  // ── Reference time (midnight today) ─────────────────────────────────────
-  const todayTime = useMemo(() => {
-    const d = new Date();
-    d.setHours(0, 0, 0, 0);
-    return d.getTime();
-  }, []);
-
-  // ── Date boundaries ─────────────────────────────────────────────────────
-  const { minOffset, maxOffset } = useMemo(
-    () => computeDayRange(todayTime, minDate, maxDate),
-    [todayTime, minDate, maxDate]
-  );
-
-  // ── Initial offset from today ───────────────────────────────────────────
-  const initialOffsetDays = useMemo(() => {
-    return dateToDayOffset(selectedDate, todayTime);
-    // Intentionally only computed once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const halfVisible = Math.ceil(SCREEN_WIDTH / 2 / tickSpacing);
-  const windowSize = halfVisible + bufferTicks;
-
-  // ── Animated values ─────────────────────────────────────────────────────
-  const translateX = useSharedValue(-initialOffsetDays * tickSpacing);
-  const contextX = useSharedValue(0);
-  const previousIndex = useSharedValue(-initialOffsetDays);
-  const isFastMode = useSharedValue(false);
-
-  // ── State ───────────────────────────────────────────────────────────────
-  const initialDateStr = useMemo(() => {
-    const d =
-      typeof selectedDate === 'string'
-        ? new Date(selectedDate)
-        : new Date(selectedDate);
-    d.setHours(0, 0, 0, 0);
-    return formatDateString(d);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const [displayDateStr, setDisplayDateStr] = useState(initialDateStr);
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [windowCenter, setWindowCenter] = useState(-initialOffsetDays);
-
-  // ── Visible ticks (windowed rendering) ──────────────────────────────────
-  const visibleTicks = useMemo(() => {
-    const ticks: TickData[] = [];
-
-    const start = Math.max(windowCenter - windowSize, minOffset);
-    const end = Math.min(windowCenter + windowSize, maxOffset);
-
-    for (let i = start; i <= end; i++) {
-      const d = new Date(todayTime + i * MS_PER_DAY);
-      ticks.push({
-        offset: i,
-        isLabeled: shouldShowLabel(d, labelInterval, todayTime),
-        isToday: i === 0,
-        isHighlighted: highlightDays
-          ? highlightDays.includes(d.getDay())
-          : false,
-        dateStr: d.getDate().toString(),
-      });
-    }
-    return ticks;
-  }, [
-    windowCenter,
-    windowSize,
-    todayTime,
-    minOffset,
-    maxOffset,
-    labelInterval,
-    highlightDays,
-  ]);
-
-  // ── Tick change callbacks ───────────────────────────────────────────────
-
-  const onTickChanged = useCallback(
-    (index: number, enteringFastMode: boolean) => {
-      if (enteringFastMode) {
-        startContinuousHaptic();
-      } else {
-        stopContinuousHaptic();
-        fireDiscreteHaptic();
-      }
+  // Resolve Header
+  const isHeaderVisible = header !== false;
+  const headerConfig = typeof header === 'object' ? header : undefined;
 
-      // Update display date
-      const d = dayOffsetToDate(index, todayTime);
-      const dateStr = formatDateString(d);
-      setWindowCenter((prevCenter) => {
-        if (Math.abs(index - prevCenter) >= 5) {
-          return index;
-        }
-        return prevCenter;
-      });
+  // Resolve Indicator
+  const isIndicatorVisible = indicator !== false;
+  const indicatorConfig = typeof indicator === 'object' ? indicator : undefined;
 
-      // Debounce the heavy onSelectDate callback
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      debounceTimerRef.current = setTimeout(() => {
-        onSelectDate(d, dateStr);
-      }, updateDebounceMs);
-    },
-    [
-      todayTime,
-      onSelectDate,
-      updateDebounceMs,
-      startContinuousHaptic,
-      stopContinuousHaptic,
-      fireDiscreteHaptic,
-    ]
-  );
-
-  const onAnimationSettled = useCallback(
-    (index: number) => {
-      stopContinuousHaptic();
-      fireDiscreteHaptic();
-      const d = dayOffsetToDate(index, todayTime);
-      const dateStr = formatDateString(d);
-      setDisplayDateStr(dateStr);
-      setWindowCenter(index);
-      onSelectDate(d, dateStr);
-    },
-    [todayTime, onSelectDate, stopContinuousHaptic, fireDiscreteHaptic]
-  );
-
-  // ── Animated reaction ───────────────────────────────────────────────────
-  useAnimatedReaction(
-    () => Math.round(-translateX.value / tickSpacing),
-    (index, prev) => {
-      if (
-        index !== prev &&
-        index >= minOffset &&
-        index <= maxOffset
-      ) {
-        previousIndex.value = index;
-        const ticksSkipped = prev !== null ? Math.abs(index - prev) : 1;
-        const shouldBeFast = ticksSkipped > fastSwipeTickThreshold;
-
-        if (shouldBeFast && !isFastMode.value) {
-          isFastMode.value = true;
-          runOnJS(onTickChanged)(index, true);
-        } else if (!shouldBeFast && isFastMode.value) {
-          isFastMode.value = false;
-          runOnJS(onTickChanged)(index, false);
-        } else if (!shouldBeFast) {
-          runOnJS(onTickChanged)(index, false);
-        }
-        if (shouldBeFast && isFastMode.value) {
-          runOnJS(onTickChanged)(index, true);
-        }
-      }
-    },
-    [tickSpacing, minOffset, maxOffset, fastSwipeTickThreshold]
-  );
-
-  // ── Pan gesture ─────────────────────────────────────────────────────────
-  const pan = Gesture.Pan()
-    .onStart(() => {
-      contextX.value = translateX.value;
-    })
-    .onUpdate((event) => {
-      translateX.value = contextX.value + event.translationX;
-    })
-    .onEnd((event) => {
-      translateX.value = withDecay(
-        {
-          velocity: event.velocityX,
-          deceleration: 0.99,
-        },
-        (finished) => {
-          if (finished) {
-            const maxTranslateX = -minOffset * tickSpacing;
-            const minTranslateX = -maxOffset * tickSpacing;
-            const clampedX = Math.min(
-              Math.max(translateX.value, minTranslateX),
-              maxTranslateX
-            );
-            const snappedIndex = Math.round(clampedX / tickSpacing);
-            const snappedX = snappedIndex * tickSpacing;
-            translateX.value = withTiming(
-              snappedX,
-              { duration: 150 },
-              (done) => {
-                if (done) {
-                  isFastMode.value = false;
-                  const index = Math.round(-snappedX / tickSpacing);
-                  runOnJS(onAnimationSettled)(index);
-                }
-              }
-            );
-          }
-        }
-      );
-    });
-
-  const animatedStyle = useAnimatedStyle(
-    () => ({
-      transform: [{ translateX: translateX.value }],
-    }),
-    [translateX]
-  );
-
-  // ── Header ──────────────────────────────────────────────────────────────
-  const displayDate = new Date(displayDateStr);
-  const displayFormat = displayDate.toLocaleDateString('en-US', {
-    weekday: 'long',
-    month: 'long',
-    day: 'numeric',
-  });
-  const displayYear = displayDate.getFullYear();
-  const currentYear = new Date().getFullYear();
-  const showYear = displayYear !== currentYear;
-  const isTodaySelected =
-    displayDateStr === formatDateString(new Date(todayTime));
-
-  const handleResetToToday = useCallback(() => {
-    stopContinuousHaptic();
-    translateX.value = withTiming(0, { duration: 300 });
-    const todayStr = formatDateString(new Date(todayTime));
-    setDisplayDateStr(todayStr);
-    setWindowCenter(0);
-    onSelectDate(new Date(todayTime), todayStr);
-  }, [todayTime, onSelectDate, stopContinuousHaptic, translateX]);
-
-  // ── Render ──────────────────────────────────────────────────────────────
   return (
-    <View
-      style={[
-        styles.container,
-        { height, backgroundColor: colors.backgroundColor },
-      ]}
+    <RulerRoot
+      {...rootProps}
+      header={header}
+      lensEffect={lensEffect}
+      indicator={indicatorConfig}
     >
-      {/* Header */}
-      {renderHeader ? (
-        renderHeader(displayDate, isTodaySelected, handleResetToToday)
+      {isHeaderVisible && <RulerHeader {...headerConfig} />}
+      {lensEffect ? (
+        <RulerLensTrack />
       ) : (
-        <View style={styles.headerContainer}>
-          <View style={styles.dateHeader}>
-            <Text
-              style={[styles.yearText, { color: colors.labelColor }]}
-            >
-              {showYear ? displayYear : ''}
-            </Text>
-            <Text
-              style={[
-                styles.dateText,
-                { color: colors.accentColor },
-              ]}
-            >
-              {displayFormat}
-            </Text>
-          </View>
-
-          {showResetToToday && !isTodaySelected && (
-            <TouchableOpacity
-              onPress={handleResetToToday}
-              style={styles.resetBtn}
-            >
-              <Text
-                style={[
-                  styles.resetText,
-                  { color: colors.accentColor },
-                ]}
-              >
-                Today
-              </Text>
-            </TouchableOpacity>
-          )}
-        </View>
+        <RulerTrack>
+          {isIndicatorVisible && <RulerIndicator />}
+          <RulerTicks />
+        </RulerTrack>
       )}
-
-      {/* Ruler */}
-      <GestureDetector gesture={pan}>
-        <View style={[styles.rulerContainer, { height: rulerHeight }]}>
-          <View
-            style={[
-              styles.centerIndicator,
-              {
-                backgroundColor: colors.indicatorColor,
-                width: indicatorWidth,
-                height: indicatorHeight,
-              },
-            ]}
-          />
-
-          <Animated.View style={[styles.ticksWrapper, animatedStyle]}>
-            {visibleTicks.map((tick: TickData) => (
-              <Tick
-                key={tick.offset}
-                offset={tick.offset}
-                isLabeled={tick.isLabeled}
-                isToday={tick.isToday}
-                isHighlighted={tick.isHighlighted}
-                dateStr={tick.dateStr}
-                tickSpacing={tickSpacing}
-                tickHeight={tickHeight}
-                tickTallHeight={tickTallHeight}
-                tickThickness={tickThickness}
-                tickColor={colors.tickColor}
-                tickTallColor={colors.tickTallColor}
-                labelColor={colors.labelColor}
-                accentColor={colors.accentColor}
-                todayDotSize={todayDotSize}
-                labelFontSize={labelFontSize}
-                rulerHeight={rulerHeight}
-              />
-            ))}
-          </Animated.View>
-        </View>
-      </GestureDetector>
-    </View>
+    </RulerRoot>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  headerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    paddingHorizontal: 20,
-    marginBottom: 20,
-    height: 40,
-  },
-  dateHeader: {
-    alignItems: 'center',
-  },
-  yearText: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginBottom: 2,
-  },
-  dateText: {
-    fontSize: 18,
-    fontWeight: '600',
-  },
-  resetBtn: {
-    position: 'absolute',
-    right: 20,
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    borderRadius: 16,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-  },
-  resetText: {
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  rulerContainer: {
-    width: SCREEN_WIDTH,
-    position: 'relative',
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-  centerIndicator: {
-    position: 'absolute',
-    zIndex: 10,
-    bottom: 0,
-  },
-  ticksWrapper: {
-    position: 'absolute',
-    height: '100%',
-    width: 0,
-    left: SCREEN_WIDTH / 2,
-  },
-});

package/src/RulerDateRangePicker.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { RulerDateRangePickerProps } from './types';
+import { RulerRangeRoot } from './RulerRangeRoot';
+import { RulerRangeHeader } from './RulerRangeHeader';
+import { RulerRangeTrack } from './RulerRangeTrack';
+
+/**
+ * A performant, customizable horizontal ruler date range picker for React Native & Expo.
+ *
+ * @experimental This component is experimental. The API surface, options, and physics
+ * mechanics may undergo breaking changes in future minor releases as dual-handle
+ * interactions and gestures are refined.
+ *
+ * Features:
+ * - Dual-handle windowed date range selection with connecting highlight strip
+ * - Active handle auto-switching (tap near a handle or tap between to focus)
+ * - 60 FPS scrolling via Reanimated 3 decay physics & snap alignment
+ * - Min/max selectable span in days (`minSpanDays`, `maxSpanDays`)
+ * - Automatic Dark/Light mode theme detection
+ *
+ * @example
+ * ```tsx
+ * <RulerDateRangePicker
+ *   value={{ start: new Date(), end: new Date(Date.now() + 7 * 86400000) }}
+ *   onChange={({ startDate, endDate }) => console.log(startDate, endDate)}
+ * />
+ * ```
+ */
+export function RulerDateRangePicker(props: RulerDateRangePickerProps) {
+  const {
+    header = true,
+    indicator = true,
+    highlight = true,
+    ...rootProps
+  } = props;
+
+  const isHeaderVisible = header !== false;
+  const headerConfig = typeof header === 'object' ? header : undefined;
+  const indicatorConfig = typeof indicator === 'object' ? indicator : undefined;
+  const highlightConfig = typeof highlight === 'object' ? highlight : undefined;
+
+  return (
+    <RulerRangeRoot
+      {...rootProps}
+      header={header}
+      indicator={indicatorConfig}
+      highlight={highlightConfig}
+    >
+      {isHeaderVisible && <RulerRangeHeader {...headerConfig} />}
+      <RulerRangeTrack />
+    </RulerRangeRoot>
+  );
+}

package/src/RulerHeader.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { useRulerContext } from './RulerContext';
+import { RulerResetButton } from './RulerResetButton';
+
+export interface RulerHeaderProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  dateStyle?: StyleProp<TextStyle>;
+  yearStyle?: StyleProp<TextStyle>;
+  showResetToToday?: boolean;
+  resetLabel?: string;
+  format?: (date: Date) => string;
+  render?: (
+    selectedDate: Date,
+    isToday: boolean,
+    resetToToday: () => void
+  ) => React.ReactNode;
+}
+
+export function RulerHeader({
+  children,
+  style,
+  dateStyle,
+  yearStyle,
+  showResetToToday: customShowReset,
+  resetLabel: customResetLabel,
+  format: customFormat,
+  render,
+}: RulerHeaderProps = {}) {
+  const {
+    selectedDate,
+    isTodaySelected,
+    resetToToday,
+    theme,
+    headerConfig,
+    locale = 'default',
+  } = useRulerContext();
+
+  const headerStyle = style ?? headerConfig?.style;
+
+  if (children) {
+    return <View style={[styles.headerContainer, headerStyle]}>{children}</View>;
+  }
+
+  const customRenderer = render ?? headerConfig?.render;
+  if (customRenderer) {
+    return <>{customRenderer(selectedDate, isTodaySelected, resetToToday)}</>;
+  }
+
+  const showReset = customShowReset ?? headerConfig?.showResetToToday ?? false;
+  const resetLabel = customResetLabel ?? headerConfig?.resetLabel;
+  const formatFn = customFormat ?? headerConfig?.format;
+
+  const displayFormat = formatFn
+    ? formatFn(selectedDate)
+    : selectedDate.toLocaleDateString(locale, {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+      });
+  const displayYear = selectedDate.getFullYear();
+  const currentYear = new Date().getFullYear();
+  const showYear = !formatFn && displayYear !== currentYear;
+
+  const resolvedDateStyle = dateStyle ?? headerConfig?.dateStyle;
+  const resolvedYearStyle = yearStyle ?? headerConfig?.yearStyle;
+
+  return (
+    <View style={[styles.headerContainer, headerStyle]}>
+      <View style={styles.dateHeader}>
+        {showYear && (
+          <Text style={[styles.yearText, { color: theme.labelColor }, resolvedYearStyle]}>
+            {displayYear}
+          </Text>
+        )}
+        <Text
+          style={[
+            styles.dateText,
+            { color: theme.accentColor },
+            resolvedDateStyle,
+          ]}
+        >
+          {displayFormat}
+        </Text>
+      </View>
+
+      {showReset && !isTodaySelected && (
+        <RulerResetButton
+          style={styles.resetBtnPosition}
+          label={resetLabel}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    paddingHorizontal: 20,
+    marginBottom: 16,
+    minHeight: 40,
+    position: 'relative',
+  },
+  dateHeader: {
+    alignItems: 'center',
+  },
+  yearText: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2,
+  },
+  dateText: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  resetBtnPosition: {
+    position: 'absolute',
+    right: 20,
+  },
+});