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

package/src/presets.ts

@@ -0,0 +1,108 @@
+import type { TickRule } from './types';
+
+/**
+ * Calendar preset:
+ * - 1st of month: tall (30px), bold, month name + day label
+ * - Weekly (every 7th day): medium-tall (24px), labeled with day number
+ * - Weekends (Saturday & Sunday): medium (18px)
+ * - Base daily ticks: short (12px)
+ */
+export const DEFAULT_CALENDAR_TICKS: TickRule[] = [
+  {
+    condition: 'monthly',
+    height: 30,
+    width: 3.5,
+    label: {
+      format: (d) =>
+        d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+      fontWeight: '700',
+    },
+  },
+  {
+    condition: 'weekly',
+    height: 24,
+    width: 3,
+    label: {
+      format: (d) => `${d.getDate()}`,
+      fontWeight: '600',
+    },
+  },
+  {
+    condition: { dayOfWeek: [0, 6] },
+    height: 18,
+    width: 2.5,
+  },
+  {
+    // Catch-all daily fallback
+    condition: 'daily',
+    height: 12,
+    width: 2,
+  },
+];
+
+/**
+ * Metric preset:
+ * - Every 10th day: tall (28px), labeled
+ * - Every 5th day: medium (18px)
+ * - Daily: short (12px)
+ */
+export const DEFAULT_METRIC_TICKS: TickRule[] = [
+  {
+    condition: { interval: 10 },
+    height: 28,
+    width: 3.5,
+    label: {
+      format: (d) => `${d.getDate()}`,
+      fontWeight: '600',
+    },
+  },
+  {
+    condition: { interval: 5 },
+    height: 18,
+    width: 2.5,
+  },
+  {
+    condition: 'daily',
+    height: 12,
+    width: 2,
+  },
+];
+
+/**
+ * Minimal preset:
+ * - Weekly (7-day): tall (24px), labeled
+ * - Daily: short (12px)
+ */
+export const DEFAULT_MINIMAL_TICKS: TickRule[] = [
+  {
+    condition: 'weekly',
+    height: 24,
+    width: 3,
+    label: {
+      format: (d) => `${d.getDate()}`,
+    },
+  },
+  {
+    condition: 'daily',
+    height: 12,
+    width: 2,
+  },
+];
+
+/**
+ * Resolves a tick configuration prop (preset string or rule array) into an array of TickRule objects.
+ */
+export function resolveTickRules(
+  ticks?: TickRule[] | 'calendar' | 'metric' | 'minimal'
+): TickRule[] {
+  if (Array.isArray(ticks)) {
+    return ticks;
+  }
+  if (ticks === 'metric') {
+    return DEFAULT_METRIC_TICKS;
+  }
+  if (ticks === 'minimal') {
+    return DEFAULT_MINIMAL_TICKS;
+  }
+  return DEFAULT_CALENDAR_TICKS;
+}

package/src/tickResolver.ts

@@ -0,0 +1,123 @@
+import type {
+  TickContext,
+  TickCondition,
+  TickRule,
+  ResolvedTick,
+  ResolvedRulerTheme,
+} from './types';
+import { formatDateString } from './utils';
+
+/**
+ * Checks whether a given TickCondition matches the provided TickContext.
+ */
+export function matchesCondition(
+  condition: TickCondition | undefined,
+  ctx: TickContext
+): boolean {
+  if (condition === undefined || condition === 'daily') {
+    return true;
+  }
+
+  if (condition === 'weekly') {
+    return ctx.offset % 7 === 0;
+  }
+
+  if (condition === 'monthly') {
+    return ctx.date.getDate() === 1;
+  }
+
+  if (condition === 'yearly') {
+    return ctx.date.getDate() === 1 && ctx.date.getMonth() === 0;
+  }
+
+  if (typeof condition === 'object') {
+    if ('interval' in condition && typeof condition.interval === 'number') {
+      return condition.interval !== 0 && ctx.offset % condition.interval === 0;
+    }
+    if ('dayOfWeek' in condition && Array.isArray(condition.dayOfWeek)) {
+      return condition.dayOfWeek.includes(ctx.date.getDay());
+    }
+  }
+
+  if (typeof condition === 'function') {
+    return condition(ctx);
+  }
+
+  return false;
+}
+
+/**
+ * Resolves visual attributes for a tick by evaluating the rule array in order (first match wins).
+ */
+export function resolveTick(
+  ctx: TickContext,
+  rules: TickRule[],
+  theme: ResolvedRulerTheme,
+  defaultWidth: number = 3
+): ResolvedTick {
+  // Find the first matching rule, or fall back to the last rule in the list
+  const matchedRule =
+    rules.find((rule) => matchesCondition(rule.condition, ctx)) ??
+    rules[rules.length - 1];
+
+  const height = matchedRule?.height ?? 12;
+  const width = matchedRule?.width ?? defaultWidth;
+  const color = matchedRule?.color ?? theme.defaultTickColor;
+
+  // Resolve label
+  let labelText: string | undefined;
+  let labelColor = theme.labelColor;
+  let labelFontSize = 10;
+  let labelFontWeight: ResolvedTick['labelFontWeight'] = 'normal';
+
+  if (matchedRule?.label) {
+    if (typeof matchedRule.label === 'object') {
+      labelText = matchedRule.label.format
+        ? matchedRule.label.format(ctx.date, ctx)
+        : String(ctx.date.getDate());
+      if (matchedRule.label.color) labelColor = matchedRule.label.color;
+      if (matchedRule.label.fontSize) labelFontSize = matchedRule.label.fontSize;
+      if (matchedRule.label.fontWeight) labelFontWeight = matchedRule.label.fontWeight;
+    } else if (matchedRule.label === true) {
+      labelText = String(ctx.date.getDate());
+    }
+  }
+
+  // Resolve dot indicator
+  let hasDot = false;
+  let dotSize = 6;
+  let dotColor = theme.accentColor;
+
+  if (matchedRule?.dot !== undefined) {
+    if (typeof matchedRule.dot === 'object') {
+      hasDot = true;
+      if (matchedRule.dot.size) dotSize = matchedRule.dot.size;
+      if (matchedRule.dot.color) dotColor = matchedRule.dot.color;
+    } else if (matchedRule.dot === true) {
+      hasDot = true;
+    }
+  } else if (ctx.isToday) {
+    // Default: show today dot if rule didn't explicitly disable it
+    hasDot = true;
+  }
+
+  return {
+    offset: ctx.offset,
+    date: ctx.date,
+    dateStr: formatDateString(ctx.date),
+    height,
+    width,
+    color,
+    labelText,
+    labelColor,
+    labelFontSize,
+    labelFontWeight,
+    hasDot,
+    dotSize,
+    dotColor,
+    customRender: matchedRule?.render,
+    isToday: ctx.isToday,
+    isSelected: ctx.isSelected,
+    isInRange: ctx.isInRange ?? false,
+  };
+}