daliry-mobile-date-picker 1.0.0 → 1.0.2

package/.editorconfig

@@ -1,10 +1,10 @@
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-[*.{js,json,yml}]
-charset = utf-8
-indent_style = space
-indent_size = 2
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

package/.gitattributes

@@ -1,4 +1,4 @@
-/.yarn/**            linguist-vendored
-/.yarn/releases/*    binary
-/.yarn/plugins/**/*  binary
-/.pnp.*              binary linguist-generated
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

package/.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: "node-modules"
+nodeLinker: "node-modules"

package/README.md

@@ -1,26 +1,138 @@
-# 📅 Mobile Date Picker
-
-A mobile-first, customizable **Jalali (Shamsi) + Gregorian** date picker for React.  
-Easily select and receive dates in both Persian and Gregorian formats — with detailed breakdowns.
-
----
-
-## ✨ Features
-
-- 📆 **Dual calendar**: Jalali (Shamsi) + Gregorian
-- 🎯 Designed for **mobile usage**
-- ⚙️ Simple API with a reusable React component
-- 📤 Returns multiple formats for selected date:
-    - Jalali year/month/day
-    - Formatted Jalali string
-    - Formatted Gregorian string
-    - Moment.js-compatible UTC string
-
----
-
-## 📦 Installation
-
-Install using npm or yarn:
-
-```bash
-npm install mobile-date-picker
+# 📅 Daliry Mobile Date Picker – React 19 Mobile Date Picker with Jalali & Gregorian Support
+
+**Daliry Mobile Date Picker** is a mobile-friendly and fully customizable date picker component for **React 19** that supports both **Jalali (Shamsi)** and **Gregorian** calendars.  
+Perfect for **mobile apps**, **birthdate pickers**, and any React project that needs a clean, touch-optimized date selection experience.
+
+![Daliry Mobile Date Picker Screenshot](https://github.com/daliryapp/mobile-date-picker/blob/master/src/assets/images/daliry-mobile-date-picker102.PNG?raw=true)
+
+---
+
+## 💖 Support
+
+If you were thinking about donating, the best way to support me for now is to **follow me on GitHub** and **star this project**.  
+It really helps me keep building and improving open-source components.
+
+👉 [Follow me on GitHub](https://github.com/daliryapp)
+
+---
+## 🧠 Why Daliry?
+
+If you're searching for a **mobile date picker for React** with **Jalali (Shamsi)** support, **Daliry Mobile Date Picker** is built exactly for that:
+
+- Supports **React 19**
+- Dual calendar: **Jalali (Persian)** and **Gregorian**
+- Ideal for **mobile UX**
+- Easy to plug into any **React project**
+- Returns both formatted and raw date values
+- Compatible with **Moment.js** for easy integration
+- Uses **debounced** `onDateChange` calls for smoother performance
+- No need for an extra **Apply** button
+
+---
+
+## ✨ Key Features
+
+- 📆 Dual calendar support: Jalali (Shamsi) and Gregorian
+- ⚛️ Built for **React 19**
+- 📱 Touch-optimized for mobile and tablet
+- ♻️ Reusable, lightweight React component
+- 🔧 Minimal setup, easy customization
+- ⚡ Debounced date change callback after user stops scrolling
+- 🎂 Smart birthdate mode with default value set to **18 years ago**
+- 📤 Output includes full date breakdown in multiple formats
+
+---
+
+## 📦 Installation
+
+Install the date picker via npm or yarn:
+```bash
+npm install daliry-mobile-date-picker
+
+or
+
+bash
+yarn add daliry-mobile-date-picker
+
+---
+
+## ✨ Usage
+
+tsx
+import MobileDatePicker from "daliry-mobile-date-picker";
+import "daliry-mobile-date-picker/dist/index.css";
+
+<MobileDatePicker
+  onDateChange={(value) => {
+console.log(value);
+  }}
+  isBirthdate={true}
+  isGregorian={false}
+/>
+
+---
+
+## 🛠 Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onDateChange` | `(date: IDate) => void` | Yes | - | Called after the user finishes changing the date |
+| `isBirthdate` | `boolean` | No | `false` | If true, default date is set to 18 years ago |
+| `isGregorian` | `boolean` | No | `false` | Switches calendar mode to Gregorian |
+| `backgroundColor` | `string` | No | `#f5f5f5` | Background color of picker |
+| `textColor` | `string` | No | `#bbb` | Color of non-selected items |
+| `selectedColor` | `string` | No | `#333` | Color of selected item |
+
+---
+
+## ⚡ Debounced Date Change
+
+This component no longer needs an "Apply" button.
+
+When the user scrolls and changes the date, `onDateChange` is called automatically with a small **debounce delay** after scrolling stops. This helps prevent multiple unnecessary callback executions during fast scrolling and improves mobile performance.
+
+---
+
+## 📤 Output Format
+
+ts
+{
+  year: 1403,
+  month: 3,
+  day: 21,
+  formatted: "1403/03/21",
+  date: "2024-06-10",
+  gDate: "2024-06-10",
+  moment: Moment
+}
+
+---
+
+## 📘 Output Fields
+
+- `year`: selected year
+- `month`: selected month
+- `day`: selected day
+- `formatted`: formatted date based on selected calendar
+- `date`: Gregorian date in `YYYY-MM-DD`
+- `gDate`: Gregorian date in `YYYY-MM-DD`
+- `moment`: Moment object for advanced usage
+
+---
+
+## ✅ Notes
+
+- Supports both **Jalali** and **Gregorian** calendars
+- CSS file should also be included:
+  
+tsx
+import "daliry-mobile-date-picker/dist/index.css";
+
+- Designed for a smooth mobile scrolling experience
+- Optimized selected-item animation behavior for better visual stability
+
+---
+
+## 📜 License
+
+MIT

package/build.js

@@ -1,15 +1,15 @@
-const esbuild = require("esbuild");
-
-esbuild
-  .build({
-    entryPoints: ["src/MobileDatePicker.tsx"],
-    outfile: "dist/index.js",
-    bundle: true,
-    minify: false,
-    sourcemap: false,
-    format: "esm",  // یا "cjs" برای CommonJS
-    target: ["esnext"],
-    // REMOVE this line
-    external: ["react", "react-dom"],  // این خط را حذف کن
-  })
-  .catch(() => process.exit(1));
+const esbuild = require("esbuild");
+
+esbuild
+  .build({
+    entryPoints: ["src/MobileDatePicker.tsx"],
+    outfile: "dist/index.js",
+    bundle: true,
+    minify: false,
+    sourcemap: false,
+    format: "esm",  // یا "cjs" برای CommonJS
+    target: ["esnext"],
+    // REMOVE this line
+    external: ["react", "react-dom"],  // این خط را حذف کن
+  })
+  .catch(() => process.exit(1));

package/dist/MobileDatePicker.d.ts

@@ -1,10 +1,10 @@
-import { Moment } from "moment-jalaali";
+import type { Moment } from "moment";
 import "./mobileDatePicker.css";
 export interface IDate {
-    jYear: number;
-    jMonth: number;
-    jDay: number;
-    jDate: string;
+    year: number;
+    month: number;
+    day: number;
+    formatted: string;
     date: string;
     gDate: string;
     moment: Moment;
@@ -12,6 +12,10 @@ export interface IDate {
 interface IMobileDatePicker {
     onDateChange: (date: IDate) => void;
     isBirthdate?: boolean;
+    isGregorian?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    selectedColor?: string;
 }
-declare const MobileDatePicker: ({ onDateChange, isBirthdate }: IMobileDatePicker) => import("react/jsx-runtime").JSX.Element;
-export default MobileDatePicker;
+declare const DaliryMobileDatePicker: ({ onDateChange, isBirthdate, isGregorian, backgroundColor, textColor, selectedColor, }: IMobileDatePicker) => import("react/jsx-runtime").JSX.Element;
+export default DaliryMobileDatePicker;

package/dist/MobileDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileDatePicker.d.ts","sourceRoot":"","sources":["../src/MobileDatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAOD,QAAA,MAAM,sBAAsB,GAAI,wFAOH,iBAAiB,4CAuI7C,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/MobileDatePicker.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import moment from "moment-jalaali";
+import "./mobileDatePicker.css";
+const JALALI_MONTHS = ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"];
+const GREGORIAN_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const ITEM_HEIGHT = 45;
+const DaliryMobileDatePicker = ({ onDateChange, isBirthdate = false, isGregorian = false, backgroundColor = "#f5f5f5", textColor = "#bbb", selectedColor = "#333", }) => {
+    const now = moment();
+    const initialYear = useMemo(() => {
+        const currentYear = isGregorian ? now.year() : now.jYear();
+        return isBirthdate ? currentYear - 18 : currentYear;
+    }, [isGregorian, isBirthdate]);
+    const initialMonth = isGregorian ? now.month() + 1 : now.jMonth() + 1;
+    const initialDay = isGregorian ? now.date() : now.jDate();
+    const [selectedYear, setSelectedYear] = useState(initialYear);
+    const [selectedMonth, setSelectedMonth] = useState(initialMonth);
+    const [selectedDay, setSelectedDay] = useState(initialDay);
+    const yearRef = useRef(null);
+    const monthRef = useRef(null);
+    const dayRef = useRef(null);
+    const months = isGregorian ? GREGORIAN_MONTHS : JALALI_MONTHS;
+    const years = useMemo(() => {
+        const start = isGregorian ? 1930 : 1300;
+        const end = (isGregorian ? now.year() : now.jYear()) + 20;
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }, [isGregorian, now]);
+    const daysInMonth = useMemo(() => {
+        if (isGregorian) {
+            return moment(`${selectedYear}-${selectedMonth}-01`, "YYYY-M-DD").daysInMonth();
+        }
+        return moment.jDaysInMonth(selectedYear, selectedMonth - 1);
+    }, [isGregorian, selectedYear, selectedMonth]);
+    const days = useMemo(() => {
+        return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+    }, [daysInMonth]);
+    useEffect(() => {
+        if (selectedDay > daysInMonth) {
+            setSelectedDay(daysInMonth);
+        }
+    }, [selectedDay, daysInMonth]);
+    const buildDateObject = (year, month, day) => {
+        const m = isGregorian
+            ? moment(`${year}-${month}-${day}`, "YYYY-M-D")
+            : moment(`${year}-${month}-${day}`, "jYYYY-jM-jD");
+        return {
+            year,
+            month,
+            day,
+            formatted: isGregorian ? m.format("YYYY/MM/DD") : m.format("jYYYY/jMM/jDD"),
+            date: m.format("YYYY-MM-DD"),
+            gDate: m.format("YYYY-MM-DD"),
+            moment: m,
+        };
+    };
+    // پیاده‌سازی Debounce برای ارسال تاریخ
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onDateChange(buildDateObject(selectedYear, selectedMonth, selectedDay));
+        }, 500); // ۵۰۰ میلی‌ثانیه صبر بعد از آخرین تغییر
+        return () => clearTimeout(timer);
+    }, [selectedYear, selectedMonth, selectedDay, isGregorian]);
+    const scrollToIndex = (ref, index) => {
+        if (ref.current) {
+            ref.current.scrollTop = index * ITEM_HEIGHT;
+        }
+    };
+    useEffect(() => {
+        const monthIndex = Math.max(0, selectedMonth - 1);
+        const dayIndex = Math.max(0, selectedDay - 1);
+        const yearIndex = Math.max(0, years.indexOf(selectedYear));
+        const timer = window.setTimeout(() => {
+            scrollToIndex(dayRef, dayIndex);
+            scrollToIndex(monthRef, monthIndex);
+            scrollToIndex(yearRef, yearIndex);
+        }, 0);
+        return () => window.clearTimeout(timer);
+    }, [years]); // فقط وقتی لیست سال‌ها (تقویم) عوض شد ری‌اسکرول کن
+    const handleScroll = (e, type) => {
+        const index = Math.round(e.currentTarget.scrollTop / ITEM_HEIGHT);
+        if (type === "day") {
+            const nextDay = days[index];
+            if (nextDay && nextDay !== selectedDay)
+                setSelectedDay(nextDay);
+        }
+        else if (type === "month") {
+            const nextMonth = index + 1;
+            if (nextMonth >= 1 && nextMonth <= 12 && nextMonth !== selectedMonth)
+                setSelectedMonth(nextMonth);
+        }
+        else {
+            const nextYear = years[index];
+            if (nextYear && nextYear !== selectedYear)
+                setSelectedYear(nextYear);
+        }
+    };
+    const renderList = (items, selectedValue, ref, type) => {
+        return (_jsxs("div", { className: "scroll-list", onScroll: (e) => handleScroll(e, type), ref: ref, children: [_jsx("div", { style: { height: ITEM_HEIGHT } }), items.map((item, index) => {
+                    const isSelected = type === "month" ? (index + 1) === selectedMonth : item === selectedValue;
+                    return (_jsx("div", { className: `scroll-item ${isSelected ? "selected" : ""}`, style: { color: isSelected ? selectedColor : textColor }, children: item }, `${type}-${item}`));
+                }), _jsx("div", { style: { height: ITEM_HEIGHT } })] }));
+    };
+    return (_jsx("div", { className: "datepicker-container", children: _jsxs("div", { className: "scroll-lists", style: { backgroundColor }, children: [renderList(days, selectedDay, dayRef, "day"), renderList(months, months[selectedMonth - 1], monthRef, "month"), renderList(years, selectedYear, yearRef, "year"), _jsx("div", { className: "selection-highlight", style: { top: ITEM_HEIGHT, height: ITEM_HEIGHT } })] }) }));
+};
+export default DaliryMobileDatePicker;

package/dist/index.css

@@ -3,24 +3,28 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
   width: 100%;
+  min-width: 350px;
+  user-select: none;
+  padding: 10px;
 }
 .scroll-lists {
   display: flex;
   justify-content: space-between;
-  background-color: #f5f5f5;
   border-radius: 12px;
-  height: 152px;
+  height: 135px;
   width: 100%;
+  position: relative;
+  overflow: hidden;
 }
 .scroll-list {
-  width: 110px;
-  height: 152px;
+  flex: 1;
+  height: 135px;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  z-index: 2;
 }
 .scroll-list::-webkit-scrollbar {
   display: none;
@@ -30,25 +34,40 @@
   line-height: 45px;
   text-align: center;
   scroll-snap-align: center;
-  color: #bbb;
-  font-size: 16px;
-  opacity: 0.5;
-  filter: blur(4px);
-  font-weight: normal;
+  font-size: 19px;
+  opacity: 0.4;
+  filter: blur(2px);
+  transform: scale(0.8);
 }
 .scroll-item.selected {
-  color: #333;
-  font-size: 20px;
   font-weight: bold;
   opacity: 1;
   filter: none;
+  transform: scale(1);
+  transition: all 0.1s ease;
+}
+.selection-highlight {
+  position: absolute;
+  top: 45px;
+  left: 10px;
+  right: 10px;
+  height: 45px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+  z-index: 1;
 }
 .apply-button {
-  padding: 10px 20px;
-  background-color: #1976d2;
-  color: white;
+  width: 100%;
+  margin-top: 16px;
+  padding: 12px;
   border: none;
   border-radius: 8px;
   font-size: 16px;
+  font-weight: bold;
   cursor: pointer;
+  transition: opacity 0.2s;
+}
+.apply-button:active {
+  opacity: 0.8;
 }

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare const NegarAuth: React.FC;
-export default NegarAuth;
+import * as React from "react";
+declare const NegarAuth: React.FC;
+export default NegarAuth;