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

package/src/RulerIndicator.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useRulerContext } from './RulerContext';
+import { DEFAULTS } from './defaults';
+
+export interface RulerIndicatorProps {
+  children?: React.ReactNode;
+  width?: number;
+  height?: number;
+  color?: string;
+  /**
+   * Offset [x, y] in pixels of the center needle pointer.
+   * Default: [0, 0] (anchored to bottom).
+   */
+  offset?: [number, number];
+  style?: StyleProp<ViewStyle>;
+  render?: () => React.ReactNode;
+}
+
+export function RulerIndicator({
+  children,
+  width: customWidth,
+  height: customHeight,
+  color: customColor,
+  offset: customOffset,
+  style,
+  render,
+}: RulerIndicatorProps = {}) {
+  const { indicatorConfig, theme } = useRulerContext();
+
+  const customRenderer = render ?? indicatorConfig?.render;
+  const offset = customOffset ?? indicatorConfig?.offset ?? [0, 0];
+  const [offsetX = 0, offsetY = 0] = offset;
+  const indicatorStyle = style ?? indicatorConfig?.style;
+
+  if (children || customRenderer) {
+    return (
+      <View
+        pointerEvents="none"
+        style={[
+          styles.indicator,
+          {
+            bottom: offsetY,
+            transform: [{ translateX: offsetX }],
+          },
+          indicatorStyle,
+        ]}
+      >
+        {children ?? customRenderer?.()}
+      </View>
+    );
+  }
+
+  const width = customWidth ?? indicatorConfig?.width ?? DEFAULTS.indicatorWidth;
+  const height = customHeight ?? indicatorConfig?.height ?? DEFAULTS.indicatorHeight;
+  const color = customColor ?? indicatorConfig?.color ?? theme.indicatorColor;
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.indicator,
+        {
+          bottom: offsetY,
+          transform: [{ translateX: offsetX }],
+          width,
+          height,
+          backgroundColor: color,
+          borderRadius: width / 2,
+        },
+        indicatorStyle,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    zIndex: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/RulerLensTicks.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useRulerContext } from './RulerContext';
+import { LensTick } from './LensTick';
+import { DEFAULT_LENS_CONFIG } from './defaults';
+import type { LensConfig } from './types';
+
+export interface RulerLensTicksProps {
+  style?: StyleProp<ViewStyle>;
+  config?: LensConfig;
+}
+
+/**
+ * Ticks container rendering ticks with dynamic non-linear fisheye lens spacing.
+ */
+export function RulerLensTicks({ style, config: propConfig }: RulerLensTicksProps = {}) {
+  const { translateX, visibleTicks, tickSpacing, rulerHeight, lensConfig: contextConfig } =
+    useRulerContext();
+
+  const config = propConfig
+    ? { ...DEFAULT_LENS_CONFIG, ...propConfig }
+    : contextConfig ?? DEFAULT_LENS_CONFIG;
+
+  return (
+    <View pointerEvents="none" style={[styles.ticksContainer, style]}>
+      {visibleTicks.map((tick) => (
+        <LensTick
+          key={tick.offset}
+          tick={tick}
+          tickSpacing={tickSpacing}
+          rulerHeight={rulerHeight}
+          translateX={translateX}
+          magnification={config.magnification}
+          radius={config.radius}
+          scaleTicks={config.scaleTicks}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  ticksContainer: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    left: 0,
+    top: 0,
+  },
+});

package/src/RulerLensTrack.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { useRulerContext } from './RulerContext';
+import { RulerIndicator } from './RulerIndicator';
+import { RulerLensTicks } from './RulerLensTicks';
+import type { LensConfig } from './types';
+
+export interface RulerLensTrackProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  config?: LensConfig;
+}
+
+/**
+ * Horizontal ruler track with pan gesture detection and non-linear fisheye lens distortion.
+ */
+export function RulerLensTrack({ children, style, config }: RulerLensTrackProps = {}) {
+  const { panGesture, rulerHeight, width } = useRulerContext();
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View style={[styles.rulerContainer, { width, height: rulerHeight }, style]}>
+        {children ? (
+          children
+        ) : (
+          <>
+            <RulerIndicator />
+            <RulerLensTicks config={config} />
+          </>
+        )}
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  rulerContainer: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});

package/src/RulerRange.ts

@@ -0,0 +1,33 @@
+import { RulerRangeRoot } from './RulerRangeRoot';
+import { RulerRangeTrack } from './RulerRangeTrack';
+import { RulerRangeHeader } from './RulerRangeHeader';
+import { RulerRangeIndicator } from './RulerRangeIndicator';
+import { RulerRangeHighlight } from './RulerRangeHighlight';
+import { RulerRangeTicks } from './RulerRangeTicks';
+import { Tick } from './Tick';
+
+/**
+ * Compound Anatomy API for Date Range Ruler Picker.
+ *
+ * @experimental This compound API is experimental and subject to breaking changes.
+ *
+ * @example
+ * ```tsx
+ * <RulerRange.Root value={range} onChange={setRange}>
+ *   <RulerRange.Header />
+ *   <RulerRange.Track>
+ *     <RulerRange.Indicator />
+ *     <RulerRange.Ticks />
+ *   </RulerRange.Track>
+ * </RulerRange.Root>
+ * ```
+ */
+export const RulerRange = {
+  Root: RulerRangeRoot,
+  Track: RulerRangeTrack,
+  Indicator: RulerRangeIndicator,
+  Header: RulerRangeHeader,
+  Highlight: RulerRangeHighlight,
+  Ticks: RulerRangeTicks,
+  Tick: Tick,
+};

package/src/RulerRangeContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import type { UseRulerDateRangePickerReturn } from './useRulerDateRangePicker';
+import type { RangeIndicatorConfig, RangeHeaderConfig, RangeHighlightConfig } from './types';
+
+export interface RulerRangeContextValue extends UseRulerDateRangePickerReturn {
+  indicatorConfig?: RangeIndicatorConfig;
+  headerConfig?: RangeHeaderConfig;
+  highlightConfig?: RangeHighlightConfig;
+  locale?: string;
+}
+
+export const RulerRangeContext = createContext<RulerRangeContextValue | null>(null);
+
+export function useRulerRangeContext(): RulerRangeContextValue {
+  const context = useContext(RulerRangeContext);
+  if (!context) {
+    throw new Error('RulerRange compound subcomponents must be rendered within a <RulerRange.Root> provider.');
+  }
+  return context;
+}

package/src/RulerRangeHeader.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useRulerRangeContext } from './RulerRangeContext';
+import type { RangeHeaderContext } from './types';
+
+export interface RulerRangeHeaderProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  dateStyle?: StyleProp<TextStyle>;
+  format?: (date: Date) => string;
+  render?: (context: RangeHeaderContext) => React.ReactNode;
+}
+
+export function RulerRangeHeader({
+  children,
+  style,
+  dateStyle,
+  format: customFormat,
+  render,
+}: RulerRangeHeaderProps = {}) {
+  const {
+    startDate,
+    endDate,
+    spanDays,
+    activeHandle,
+    scrollToHandle,
+    theme,
+    headerConfig,
+    locale = 'default',
+  } = useRulerRangeContext();
+
+  const headerStyle = style ?? headerConfig?.style;
+
+  if (children) {
+    return <View style={[styles.headerContainer, headerStyle]}>{children}</View>;
+  }
+
+  const customRenderer = render ?? headerConfig?.render;
+  if (customRenderer) {
+    return (
+      <>
+        {customRenderer({
+          start: startDate,
+          end: endDate,
+          spanDays,
+          activeHandle,
+          scrollToHandle,
+        })}
+      </>
+    );
+  }
+
+  const formatFn = customFormat ?? headerConfig?.format;
+
+  const startFormatted = formatFn
+    ? formatFn(startDate)
+    : startDate.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+      });
+  const endFormatted = formatFn
+    ? formatFn(endDate)
+    : endDate.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+      });
+
+  const resolvedDateStyle = dateStyle ?? headerConfig?.dateStyle;
+
+  return (
+    <View style={[styles.headerContainer, headerStyle]}>
+      {/* Start Date Button */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={() => scrollToHandle('start', true)}
+        style={[
+          styles.pill,
+          activeHandle === 'start' && {
+            borderColor: theme.accentColor,
+            backgroundColor: `${theme.accentColor}15`,
+          },
+        ]}
+      >
+        <Text style={[styles.subLabel, { color: theme.labelColor }]}>START</Text>
+        <Text
+          style={[
+            styles.dateLabel,
+            { color: activeHandle === 'start' ? theme.accentColor : theme.labelColor },
+            resolvedDateStyle,
+          ]}
+        >
+          {startFormatted}
+        </Text>
+      </TouchableOpacity>
+
+      {/* Arrow & Span Indicator */}
+      <View style={styles.arrowContainer}>
+        <Text style={[styles.arrowText, { color: theme.labelColor }]}>➔</Text>
+        <Text style={[styles.spanText, { color: theme.accentColor }]}>
+          {spanDays} {spanDays === 1 ? 'day' : 'days'}
+        </Text>
+      </View>
+
+      {/* End Date Button */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={() => scrollToHandle('end', true)}
+        style={[
+          styles.pill,
+          activeHandle === 'end' && {
+            borderColor: theme.accentColor,
+            backgroundColor: `${theme.accentColor}15`,
+          },
+        ]}
+      >
+        <Text style={[styles.subLabel, { color: theme.labelColor }]}>END</Text>
+        <Text
+          style={[
+            styles.dateLabel,
+            { color: activeHandle === 'end' ? theme.accentColor : theme.labelColor },
+            resolvedDateStyle,
+          ]}
+        >
+          {endFormatted}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    paddingHorizontal: 20,
+    marginBottom: 16,
+    minHeight: 48,
+  },
+  pill: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+    borderWidth: 1.5,
+    borderColor: 'transparent',
+    alignItems: 'center',
+  },
+  subLabel: {
+    fontSize: 9,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    marginBottom: 2,
+  },
+  dateLabel: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  arrowContainer: {
+    marginHorizontal: 12,
+    alignItems: 'center',
+  },
+  arrowText: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  spanText: {
+    fontSize: 10,
+    fontWeight: '600',
+    marginTop: 2,
+  },
+});

package/src/RulerRangeHighlight.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useRulerRangeContext } from './RulerRangeContext';
+
+export interface RulerRangeHighlightProps {
+  style?: StyleProp<ViewStyle>;
+  color?: string;
+}
+
+export function RulerRangeHighlight({ style, color }: RulerRangeHighlightProps = {}) {
+  const { startOffset, endOffset, tickSpacing, rulerHeight, theme, highlightConfig } =
+    useRulerRangeContext();
+
+  if (highlightConfig?.render) {
+    return <>{highlightConfig.render(startOffset, endOffset, tickSpacing)}</>;
+  }
+
+  const highlightColor = color ?? highlightConfig?.color ?? theme.rangeHighlightColor;
+  const left = startOffset * tickSpacing - tickSpacing / 2;
+  const width = Math.max(tickSpacing, (endOffset - startOffset + 1) * tickSpacing);
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.highlight,
+        {
+          left,
+          width,
+          height: rulerHeight,
+          backgroundColor: highlightColor,
+        },
+        highlightConfig?.style,
+        style,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  highlight: {
+    position: 'absolute',
+    bottom: 0,
+    borderRadius: 8,
+    zIndex: 1,
+  },
+});

package/src/RulerRangeIndicator.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useRulerRangeContext } from './RulerRangeContext';
+import { DEFAULTS } from './defaults';
+
+export interface RulerRangeIndicatorProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  /**
+   * Offset [x, y] in pixels of the range handle needle.
+   * Default: [0, 0] (anchored to bottom).
+   */
+  offset?: [number, number];
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  render?: (handle: 'start' | 'end', date: Date) => React.ReactNode;
+}
+
+export function RulerRangeIndicator({
+  children,
+  width: customWidth,
+  height: customHeight,
+  color: customColor,
+  offset: customOffset,
+  style,
+  render,
+}: RulerRangeIndicatorProps = {}) {
+  const { indicatorConfig, theme, activeHandle, startDate, endDate } = useRulerRangeContext();
+
+  const activeDate = activeHandle === 'start' ? startDate : endDate;
+  const customRenderer = render ?? indicatorConfig?.render;
+  const offset = customOffset ?? indicatorConfig?.offset ?? [0, 0];
+  const [offsetX = 0, offsetY = 0] = offset;
+  const indicatorStyle = style ?? indicatorConfig?.style;
+
+  if (children || customRenderer) {
+    return (
+      <View
+        pointerEvents="none"
+        style={[
+          styles.indicator,
+          {
+            bottom: offsetY,
+            transform: [{ translateX: offsetX }],
+          },
+          indicatorStyle,
+        ]}
+      >
+        {children ?? customRenderer?.(activeHandle, activeDate)}
+      </View>
+    );
+  }
+
+  const width = customWidth ?? indicatorConfig?.width ?? DEFAULTS.indicatorWidth;
+  const height = customHeight ?? indicatorConfig?.height ?? DEFAULTS.indicatorHeight;
+  const color = customColor ?? indicatorConfig?.color ?? theme.indicatorColor;
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.indicator,
+        {
+          bottom: offsetY,
+          transform: [{ translateX: offsetX }],
+          width,
+          height,
+          backgroundColor: color,
+          borderRadius: width / 2,
+        },
+        indicatorStyle,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    zIndex: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/RulerRangeRoot.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { RulerDateRangePickerProps, RangeIndicatorConfig } from './types';
+import { useRulerDateRangePicker } from './useRulerDateRangePicker';
+import { RulerRangeContext } from './RulerRangeContext';
+
+export interface RulerRangeRootProps extends RulerDateRangePickerProps {
+  children?: React.ReactNode;
+}
+
+export function RulerRangeRoot(props: RulerRangeRootProps) {
+  const {
+    children,
+    style,
+    indicator,
+    highlight,
+    testID,
+  } = props;
+
+  const rangeRuler = useRulerDateRangePicker(props);
+  const indicatorConfig: RangeIndicatorConfig | undefined =
+    typeof indicator === 'object' ? indicator : undefined;
+  const headerConfig =
+    typeof props.header === 'object' ? props.header : undefined;
+  const highlightConfig =
+    typeof highlight === 'object' ? highlight : undefined;
+
+  const contextValue = {
+    ...rangeRuler,
+    indicatorConfig,
+    headerConfig,
+    highlightConfig,
+    locale: props.locale,
+  };
+
+  return (
+    <RulerRangeContext.Provider value={contextValue}>
+      <View
+        testID={testID}
+        accessible={true}
+        accessibilityRole="adjustable"
+        accessibilityLabel={props.accessibilityLabel ?? 'Date range picker'}
+        accessibilityValue={{
+          text: `${rangeRuler.startDateStr} to ${rangeRuler.endDateStr}`,
+        }}
+        accessibilityActions={[
+          { name: 'increment', label: `Next day for ${rangeRuler.activeHandle} date` },
+          { name: 'decrement', label: `Previous day for ${rangeRuler.activeHandle} date` },
+        ]}
+        onAccessibilityAction={(event) => {
+          const isStart = rangeRuler.activeHandle === 'start';
+          const target = new Date(isStart ? rangeRuler.startDate : rangeRuler.endDate);
+          if (event.nativeEvent.actionName === 'increment') {
+            target.setDate(target.getDate() + 1);
+          } else if (event.nativeEvent.actionName === 'decrement') {
+            target.setDate(target.getDate() - 1);
+          }
+          if (isStart) {
+            rangeRuler.setRange(target, rangeRuler.endDate);
+          } else {
+            rangeRuler.setRange(rangeRuler.startDate, target);
+          }
+        }}
+        style={[
+          styles.container,
+          {
+            minHeight: rangeRuler.height,
+            backgroundColor: rangeRuler.theme.background,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </RulerRangeContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    width: '100%',
+    paddingVertical: 8,
+  },
+});

package/src/RulerRangeTicks.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useRulerRangeContext } from './RulerRangeContext';
+import { RulerRangeHighlight } from './RulerRangeHighlight';
+import { Tick } from './Tick';
+import type { ResolvedTick } from './types';
+
+export interface RulerRangeTicksProps {
+  style?: StyleProp<ViewStyle>;
+  renderTick?: (tick: ResolvedTick, tickSpacing: number, rulerHeight: number) => React.ReactNode;
+  showHighlight?: boolean;
+}
+
+/**
+ * Animated ticks container for the date range picker with Reanimated transform
+ * and connected highlight span.
+ */
+export function RulerRangeTicks({
+  style,
+  renderTick,
+  showHighlight = true,
+}: RulerRangeTicksProps = {}) {
+  const { translateX, visibleTicks, tickSpacing, rulerHeight, width } =
+    useRulerRangeContext();
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: translateX.value }],
+    }),
+    [translateX]
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.ticksWrapper,
+        { left: width / 2 },
+        animatedStyle,
+        style,
+      ]}
+    >
+      {showHighlight && <RulerRangeHighlight />}
+      {visibleTicks.map((tick) =>
+        renderTick ? (
+          <React.Fragment key={tick.offset}>
+            {renderTick(tick, tickSpacing, rulerHeight)}
+          </React.Fragment>
+        ) : (
+          <Tick
+            key={tick.offset}
+            tick={tick}
+            tickSpacing={tickSpacing}
+            rulerHeight={rulerHeight}
+          />
+        )
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  ticksWrapper: {
+    position: 'absolute',
+    height: '100%',
+    width: 0,
+  },
+});