react-native-bikram-sambat 0.1.4 → 0.1.5

package/src/components/NepaliCalendar/CalendarHeader.tsx

@@ -18,6 +18,7 @@ type CalendarHeaderProps = {
   theme: CalendarTheme;
   onPrevMonth: () => void;
   onNextMonth: () => void;
+  onYearPress: () => void;
   canGoPrev: boolean;
   canGoNext: boolean;
 };
@@ -55,6 +56,7 @@ export const CalendarHeader = memo(function CalendarHeader({
   theme,
   onPrevMonth,
   onNextMonth,
+  onYearPress,
   canGoPrev,
   canGoNext,
 }: CalendarHeaderProps) {
@@ -80,7 +82,16 @@ export const CalendarHeader = memo(function CalendarHeader({
         <Text style={[styles.navText, { color: theme.colors.text }]}>‹</Text>
       </Pressable>
 
-      <Text style={[styles.title, { color: theme.colors.text }]}>{title}</Text>
+      <Pressable
+        style={styles.titleButton}
+        onPress={onYearPress}
+        accessibilityRole="button"
+        accessibilityLabel={`Select year, ${title}`}
+      >
+        <Text style={[styles.title, { color: theme.colors.text }]}>
+          {title}
+        </Text>
+      </Pressable>
 
       <Pressable
         style={[styles.navButton, !canGoNext && styles.navButtonDisabled]}
@@ -106,9 +117,14 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: '600',
-    flex: 1,
     textAlign: 'center',
   },
+  titleButton: {
+    flex: 1,
+    minHeight: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   navButton: {
     width: 40,
     height: 40,

package/src/components/NepaliCalendar/NepaliCalendar.tsx

@@ -1,19 +1,18 @@
 import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
-import type { BSDateValue } from '../../core/types';
+import { View, Text, Pressable, ScrollView, StyleSheet } from 'react-native';
 import {
   getBSMonthLength,
   todayBS,
-  compareBS,
   isBSDateInSupportedRange,
   getSafeCalendarMonth,
   getDefaultSupportedBSDate,
+  getSupportedBSRange,
 } from '../../core';
 import { getCalendarMonthGrid } from '../../calendar';
 import { EN_LOCALE, NE_LOCALE } from '../../core/locale';
 import type { LocaleCode, CalendarLocale } from '../../core/locale';
 import { useCalendarTheme } from '../../theme';
-import { warnOutOfRangeInDev, warnMinMaxInDev, createDateAccessibilityLabel } from '../../utils';
+import { warnMinMaxInDev } from '../../utils';
 import type { NepaliCalendarProps } from './types';
 import { CalendarHeader } from './CalendarHeader';
 import { CalendarWeekdays } from './CalendarWeekdays';
@@ -46,9 +45,6 @@ function resolveLocale(
 }
 
 export function NepaliCalendar({
-  value,
-  defaultValue,
-  onChange,
   year,
   month,
   defaultYear,
@@ -62,23 +58,15 @@ export function NepaliCalendar({
   theme,
   colorScheme = 'system',
   disabledDates,
+  onDayPress,
   onMonthChange,
+  onYearChange,
   renderDay,
-  rangeValue,
   testID,
 }: NepaliCalendarProps) {
   const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
   const calendarTheme = useCalendarTheme({ colorScheme, theme });
 
-  useEffect(() => {
-    if (value && !isBSDateInSupportedRange(value)) {
-      warnOutOfRangeInDev(value, { min: 2000, max: 2090 });
-    }
-    if (defaultValue && !isBSDateInSupportedRange(defaultValue)) {
-      warnOutOfRangeInDev(defaultValue, { min: 2000, max: 2090 });
-    }
-  }, [value, defaultValue]);
-
   useEffect(() => {
     warnMinMaxInDev(minDate, maxDate);
   }, [minDate, maxDate]);
@@ -86,14 +74,6 @@ export function NepaliCalendar({
   const safeDisplay = useMemo(() => {
     const fallback = getDefaultSupportedBSDate();
 
-    if (value && isBSDateInSupportedRange(value)) {
-      return { year: value.year, month: value.month };
-    }
-
-    if (defaultValue && isBSDateInSupportedRange(defaultValue)) {
-      return { year: defaultValue.year, month: defaultValue.month };
-    }
-
     if (year != null && month != null) {
       const safe = getSafeCalendarMonth({ year, month });
       return safe;
@@ -113,10 +93,11 @@ export function NepaliCalendar({
     }
 
     return { year: fallback.year, month: fallback.month };
-  }, [value, defaultValue, year, month, defaultYear, defaultMonth]);
+  }, [year, month, defaultYear, defaultMonth]);
 
   const [internalYear, setInternalYear] = useState(safeDisplay.year);
   const [internalMonth, setInternalMonth] = useState(safeDisplay.month);
+  const [isYearPickerOpen, setIsYearPickerOpen] = useState(false);
 
   const wasControlledRef = useRef(year !== undefined && month !== undefined);
 
@@ -132,36 +113,72 @@ export function NepaliCalendar({
       const safe = getSafeCalendarMonth({
         year: defaultYear,
         month: defaultMonth,
-        value,
-        defaultValue,
       });
       setInternalYear(safe.year);
       setInternalMonth(safe.month);
     }
-  }, [year, month, defaultYear, defaultMonth, value, defaultValue]);
+  }, [year, month, defaultYear, defaultMonth]);
 
-  const controlledYear = year !== undefined ? getSafeCalendarMonth({ year, month: month ?? 1 }).year : internalYear;
-  const controlledMonth = year !== undefined ? getSafeCalendarMonth({ year, month: month ?? 1 }).month : internalMonth;
+  const isControlled = year !== undefined && month !== undefined;
+  const controlledDisplay = isControlled
+    ? getSafeCalendarMonth({ year, month })
+    : { year: internalYear, month: internalMonth };
+  const controlledYear = controlledDisplay.year;
+  const controlledMonth = controlledDisplay.month;
 
   const handlePrevMonth = useCallback(() => {
     const prev = getPreviousBSMonth(controlledYear, controlledMonth);
-    if (year === undefined) {
+    if (!isControlled) {
       const safe = getSafeCalendarMonth({ year: prev.year, month: prev.month });
       setInternalYear(safe.year);
       setInternalMonth(safe.month);
     }
     onMonthChange?.(prev);
-  }, [controlledYear, controlledMonth, year, onMonthChange]);
+    setIsYearPickerOpen(false);
+  }, [controlledYear, controlledMonth, isControlled, onMonthChange]);
 
   const handleNextMonth = useCallback(() => {
     const next = getNextBSMonth(controlledYear, controlledMonth);
-    if (year === undefined) {
+    if (!isControlled) {
       const safe = getSafeCalendarMonth({ year: next.year, month: next.month });
       setInternalYear(safe.year);
       setInternalMonth(safe.month);
     }
     onMonthChange?.(next);
-  }, [controlledYear, controlledMonth, year, onMonthChange]);
+    setIsYearPickerOpen(false);
+  }, [controlledYear, controlledMonth, isControlled, onMonthChange]);
+
+  const handleYearPress = useCallback(() => {
+    setIsYearPickerOpen((current) => !current);
+  }, []);
+
+  const supportedYears = useMemo(() => {
+    const range = getSupportedBSRange();
+    const years: number[] = [];
+    for (let supportedYear = range.start; supportedYear <= range.end; supportedYear += 1) {
+      years.push(supportedYear);
+    }
+    return years;
+  }, []);
+
+  const handleYearSelect = useCallback(
+    (selectedYear: number) => {
+      const safe = getSafeCalendarMonth({
+        year: selectedYear,
+        month: controlledMonth,
+      });
+
+      if (!isControlled) {
+        setInternalYear(safe.year);
+        setInternalMonth(safe.month);
+      }
+
+      setIsYearPickerOpen(false);
+      onYearChange?.(safe);
+      onMonthChange?.(safe);
+    },
+    [controlledMonth, isControlled, onYearChange, onMonthChange]
+  );
 
   const today = useMemo(() => {
     try {
@@ -211,28 +228,10 @@ export function NepaliCalendar({
     }
   }, [controlledYear, controlledMonth]);
 
-  const resolvedValue = value && isBSDateInSupportedRange(value) ? value : null;
-
-  const handleDayPress = useCallback(
-    (date: BSDateValue) => {
-      onChange?.(date);
-    },
-    [onChange]
-  );
-
-  const accessibilityLabel = useMemo(() => {
-    if (!resolvedValue) return undefined;
-    return createDateAccessibilityLabel(resolvedValue, resolvedLocale, {
-      selected: true,
-      today: today !== null && compareBS(resolvedValue, today) === 0,
-    });
-  }, [resolvedValue, resolvedLocale, today]);
-
   return (
     <View
       style={[styles.container, { backgroundColor: calendarTheme.colors.background }]}
       testID={testID}
-      accessibilityLabel={accessibilityLabel}
     >
       <CalendarHeader
         year={controlledYear}
@@ -242,10 +241,62 @@ export function NepaliCalendar({
         theme={calendarTheme}
         onPrevMonth={handlePrevMonth}
         onNextMonth={handleNextMonth}
+        onYearPress={handleYearPress}
         canGoPrev={canGoPrev}
         canGoNext={canGoNext}
       />
 
+      {isYearPickerOpen && (
+        <ScrollView
+          style={styles.yearPicker}
+          contentContainerStyle={styles.yearPickerContent}
+          nestedScrollEnabled
+        >
+          {supportedYears.map((supportedYear) => {
+            const active = supportedYear === controlledYear;
+            const yearLabel =
+              numerals === 'devanagari'
+                ? String(supportedYear).replace(/[0-9]/g, (digit) =>
+                    '०१२३४५६७८९'[Number(digit)]
+                  )
+                : String(supportedYear);
+
+            return (
+              <Pressable
+                key={supportedYear}
+                style={[
+                  styles.yearButton,
+                  {
+                    borderColor: active
+                      ? calendarTheme.colors.primary
+                      : calendarTheme.colors.border,
+                    backgroundColor: active
+                      ? calendarTheme.colors.primary
+                      : calendarTheme.colors.surface,
+                  },
+                ]}
+                onPress={() => handleYearSelect(supportedYear)}
+                accessibilityRole="button"
+                accessibilityLabel={`Select ${supportedYear}`}
+              >
+                <Text
+                  style={[
+                    styles.yearButtonText,
+                    {
+                      color: active
+                        ? calendarTheme.colors.primaryText
+                        : calendarTheme.colors.text,
+                    },
+                  ]}
+                >
+                  {yearLabel}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      )}
+
       <CalendarWeekdays
         locale={resolvedLocale}
         weekStartsOn={weekStartsOn}
@@ -254,7 +305,6 @@ export function NepaliCalendar({
 
       <CalendarGrid
         grid={grid}
-        value={resolvedValue}
         today={today}
         minDate={minDate}
         maxDate={maxDate}
@@ -262,9 +312,8 @@ export function NepaliCalendar({
         theme={calendarTheme}
         markedDates={markedDates}
         disabledDates={disabledDates}
-        onChange={handleDayPress}
+        onDayPress={onDayPress}
         renderDay={renderDay}
-        rangeValue={rangeValue}
         locale={resolvedLocale}
       />
     </View>
@@ -276,4 +325,27 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     overflow: 'hidden',
   },
+  yearPicker: {
+    maxHeight: 220,
+  },
+  yearPickerContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 12,
+    paddingBottom: 12,
+    gap: 8,
+  },
+  yearButton: {
+    minWidth: 68,
+    minHeight: 36,
+    borderWidth: 1,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  yearButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
 });

package/src/components/NepaliCalendar/types.ts

@@ -2,7 +2,6 @@ import type { ReactNode } from 'react';
 import type { BSDateValue } from '../../core/types';
 import type { LocaleCode, CalendarLocale, NumeralSystem } from '../../core/locale';
 import type { CalendarTheme } from '../../theme/types';
-import type { DateRangeValue } from '../NepaliRangePicker/types';
 
 export type CalendarMarkedDate = {
   type?: 'dot' | 'holiday' | 'event' | 'disabled';
@@ -16,22 +15,14 @@ export type CalendarDayRenderProps = {
   date: BSDateValue;
   dateKey: string;
   day: number;
-  selected: boolean;
   today: boolean;
   disabled: boolean;
   inCurrentMonth: boolean;
   marked?: CalendarMarkedDate;
-  onPress: () => void;
-  rangeStart?: boolean;
-  rangeEnd?: boolean;
-  inRange?: boolean;
+  onPress?: () => void;
 };
 
 export type NepaliCalendarProps = {
-  value?: BSDateValue | null;
-  defaultValue?: BSDateValue;
-  onChange?: (date: BSDateValue) => void;
-
   year?: number;
   month?: number;
   defaultYear?: number;
@@ -52,11 +43,11 @@ export type NepaliCalendarProps = {
 
   disabledDates?: string[] | ((date: BSDateValue) => boolean);
 
+  onDayPress?: (date: BSDateValue) => void;
   onMonthChange?: (value: { year: number; month: number }) => void;
+  onYearChange?: (value: { year: number; month: number }) => void;
 
   renderDay?: (props: CalendarDayRenderProps) => ReactNode;
 
-  rangeValue?: DateRangeValue;
-
   testID?: string;
 };

package/src/index.ts

@@ -1,8 +1,6 @@
 export * from './core';
 export * from './calendar';
 export * from './components/NepaliCalendar';
-export * from './components/NepaliDatePicker';
-export * from './components/NepaliRangePicker';
 export * from './theme';
 export * from './accessibility';
 export * from './utils';

package/src/theme/default-theme.ts

@@ -29,16 +29,6 @@ export const LIGHT_THEME: CalendarTheme = {
     outsideMonthText: '#d1d5db',
     border: '#e5e7eb',
     marker: '#2563eb',
-    overlay: 'rgba(0, 0, 0, 0.5)',
-    modalBackground: '#ffffff',
-    fieldBackground: '#ffffff',
-    fieldBorder: '#e5e7eb',
-    placeholderText: '#9ca3af',
-    rangeBackground: '#dbeafe',
-    rangeText: '#1e40af',
-    rangeStartBackground: '#2563eb',
-    rangeEndBackground: '#2563eb',
-    danger: '#ef4444',
   },
   radius: {
     day: 20,
@@ -70,16 +60,6 @@ export const DARK_THEME: CalendarTheme = {
     outsideMonthText: '#4b5563',
     border: '#374151',
     marker: '#3b82f6',
-    overlay: 'rgba(0, 0, 0, 0.6)',
-    modalBackground: '#1f2937',
-    fieldBackground: '#1f2937',
-    fieldBorder: '#374151',
-    placeholderText: '#6b7280',
-    rangeBackground: '#1e3a5f',
-    rangeText: '#93c5fd',
-    rangeStartBackground: '#3b82f6',
-    rangeEndBackground: '#3b82f6',
-    danger: '#f87171',
   },
   radius: {
     day: 20,

package/src/theme/types.ts

@@ -13,16 +13,6 @@ export type CalendarTheme = {
     outsideMonthText: string;
     border: string;
     marker: string;
-    overlay: string;
-    modalBackground: string;
-    fieldBackground: string;
-    fieldBorder: string;
-    placeholderText: string;
-    rangeBackground: string;
-    rangeText: string;
-    rangeStartBackground: string;
-    rangeEndBackground: string;
-    danger: string;
   };
   radius: {
     day: number;

package/src/utils/date-helpers.ts

@@ -70,24 +70,16 @@ export function createDateAccessibilityLabel(
   date: BSDateValue,
   locale: CalendarLocale,
   options: {
-    selected?: boolean;
     today?: boolean;
     disabled?: boolean;
     outsideMonth?: boolean;
-    rangeStart?: boolean;
-    rangeEnd?: boolean;
-    inRange?: boolean;
     markedLabel?: string;
   }
 ): string {
   const {
-    selected,
     today,
     disabled,
     outsideMonth,
-    rangeStart,
-    rangeEnd,
-    inRange,
     markedLabel,
   } = options;
 
@@ -99,10 +91,6 @@ export function createDateAccessibilityLabel(
     parts.push(`${date.year}/${date.month}/${date.day}`);
   }
 
-  if (rangeStart) parts.push('range start');
-  if (rangeEnd) parts.push('range end');
-  if (inRange && !rangeStart && !rangeEnd) parts.push('in selected range');
-  if (selected && !inRange) parts.push('selected');
   if (today) parts.push('today');
   if (disabled) parts.push('disabled');
   if (outsideMonth) parts.push('outside month');

package/lib/commonjs/components/NepaliDatePicker/DatePickerModal.js

@@ -1,185 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerModal = DatePickerModal;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _theme = require("../../theme");
-var _utils = require("../../utils");
-var _NepaliCalendar = require("../NepaliCalendar");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function DatePickerModal({
-  visible,
-  value,
-  defaultValue,
-  onChange,
-  onConfirm,
-  onCancel,
-  onClose,
-  locale,
-  numerals,
-  minDate,
-  maxDate,
-  markedDates,
-  disabledDates,
-  weekStartsOn,
-  theme,
-  colorScheme,
-  title = 'Select Date',
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-  testID
-}) {
-  const calendarTheme = (0, _theme.useCalendarTheme)({
-    colorScheme,
-    theme
-  });
-  const [tempDate, setTempDate] = (0, _react.useState)(() => (0, _utils.getSafeInitialBSDate)(value, defaultValue));
-  (0, _react.useEffect)(() => {
-    if (visible) {
-      setTempDate((0, _utils.getSafeInitialBSDate)(value, defaultValue));
-    }
-  }, [visible, value, defaultValue]);
-  const handleConfirm = (0, _react.useCallback)(() => {
-    onConfirm?.(tempDate);
-    onChange?.(tempDate);
-    onClose?.();
-  }, [tempDate, onConfirm, onChange, onClose]);
-  const handleCancel = (0, _react.useCallback)(() => {
-    onCancel?.();
-    onClose?.();
-  }, [onCancel, onClose]);
-  const handleBackdropPress = (0, _react.useCallback)(() => {
-    onCancel?.();
-    onClose?.();
-  }, [onCancel, onClose]);
-  const modalContent = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.modalContent, {
-      backgroundColor: calendarTheme.colors.modalBackground
-    }],
-    testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.title, {
-        color: calendarTheme.colors.text,
-        borderBottomColor: calendarTheme.colors.border
-      }],
-      children: title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.calendarWrapper,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NepaliCalendar.NepaliCalendar, {
-        value: tempDate,
-        onChange: setTempDate,
-        locale: locale,
-        numerals: numerals,
-        minDate: minDate,
-        maxDate: maxDate,
-        markedDates: markedDates,
-        disabledDates: disabledDates,
-        weekStartsOn: weekStartsOn,
-        theme: theme,
-        colorScheme: colorScheme
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.buttonRow, {
-        borderTopColor: calendarTheme.colors.border
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: [styles.button, styles.cancelButton],
-        onPress: handleCancel,
-        accessibilityRole: "button",
-        accessibilityLabel: cancelText,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.cancelText, {
-            color: calendarTheme.colors.mutedText
-          }],
-          children: cancelText
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: [styles.button, {
-          backgroundColor: calendarTheme.colors.primary
-        }],
-        onPress: handleConfirm,
-        accessibilityRole: "button",
-        accessibilityLabel: "Confirm selected date",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.confirmText, {
-            color: calendarTheme.colors.primaryText
-          }],
-          children: confirmText
-        })
-      })]
-    })]
-  }), [tempDate, title, locale, numerals, minDate, maxDate, markedDates, disabledDates, weekStartsOn, theme, colorScheme, testID, cancelText, confirmText, calendarTheme, handleCancel, handleConfirm]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: visible,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: handleCancel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-      onPress: handleBackdropPress,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.backdrop, {
-          backgroundColor: calendarTheme.colors.overlay
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-          children: modalContent
-        })
-      })
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20
-  },
-  modalContent: {
-    borderRadius: 16,
-    overflow: 'hidden',
-    width: '100%',
-    maxWidth: 400
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    textAlign: 'center',
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
-  },
-  calendarWrapper: {
-    padding: 8
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    gap: 12,
-    borderTopWidth: _reactNative.StyleSheet.hairlineWidth
-  },
-  button: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 8,
-    minWidth: 80,
-    alignItems: 'center'
-  },
-  cancelButton: {
-    backgroundColor: 'transparent'
-  },
-  cancelText: {
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  confirmText: {
-    fontSize: 16,
-    fontWeight: '600'
-  }
-});
-//# sourceMappingURL=DatePickerModal.js.map