daliry-mobile-date-picker 1.0.0 → 1.0.2

package/src/MobileDatePicker.tsx

@@ -1,13 +1,14 @@
-import { useState, useRef, useEffect } from "react";
-import moment, { Moment } from "moment-jalaali";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { RefObject, UIEvent } from "react";
+import moment from "moment-jalaali";
+import type { Moment } from "moment";
 import "./mobileDatePicker.css";
-// export * from '.';
 
 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;
@@ -16,108 +17,159 @@ export interface IDate {
 interface IMobileDatePicker {
     onDateChange: (date: IDate) => void;
     isBirthdate?: boolean;
+    isGregorian?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    selectedColor?: string;
 }
 
-const jalaliMonths = [
-    "", "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور",
-    "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", ""
-];
-
-const years = Array.from({ length: 1308 }, (_, i) => 1308 + i);
-const days = Array.from({ length: 33 }, (_, i) => i);
-
-const MobileDatePicker = ({ onDateChange, isBirthdate = false }: IMobileDatePicker) => {
-    const today = moment();
-    const [selectedYear, setSelectedYear] = useState(isBirthdate ? 1388 : today.jYear() - 1);
-    const [selectedMonth, setSelectedMonth] = useState(isBirthdate ? 6 : today.jMonth());
-    const [selectedDay, setSelectedDay] = useState(isBirthdate ? 2 : today.jDate() - 1);
-
-    const listRef = useRef<HTMLDivElement>(null);
-    const listRefMonths = useRef<HTMLDivElement>(null);
-    const listRefDays = useRef<HTMLDivElement>(null);
-
-    const selectDateFunction = () => {
-        const gDate = moment(`${selectedYear}-${selectedMonth}-${selectedDay}`, "jYYYY-jMM-jDD").format("YYYY-MM-DD");
-        onDateChange({
-            jYear: selectedYear,
-            jMonth: selectedMonth,
-            jDay: selectedDay,
-            jDate: `${selectedYear}-${selectedMonth}-${selectedDay}`,
-            date: gDate,
-            gDate,
-            moment: moment(`${selectedYear}-${selectedMonth}-${selectedDay}`, "jYYYY-jMM-jDD"),
-        });
-    };
+const JALALI_MONTHS = ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"];
+const GREGORIAN_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
-    useEffect(() => {
-        if (isBirthdate) selectDateFunction();
-    }, [selectedYear, selectedMonth, selectedDay]);
+const ITEM_HEIGHT = 45;
+
+const DaliryMobileDatePicker = ({
+                              onDateChange,
+                              isBirthdate = false,
+                              isGregorian = false,
+                              backgroundColor = "#f5f5f5",
+                              textColor = "#bbb",
+                              selectedColor = "#333",
+                          }: IMobileDatePicker) => {
+    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<number>(initialYear);
+    const [selectedMonth, setSelectedMonth] = useState<number>(initialMonth);
+    const [selectedDay, setSelectedDay] = useState<number>(initialDay);
+
+    const yearRef = useRef<HTMLDivElement | null>(null);
+    const monthRef = useRef<HTMLDivElement | null>(null);
+    const dayRef = useRef<HTMLDivElement | null>(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(() => {
-        listRef.current?.scrollTo({ top: years.indexOf(selectedYear) * 45, behavior: "smooth" });
-        listRefMonths.current?.scrollTo({ top: selectedMonth * 45, behavior: "smooth" });
-        listRefDays.current?.scrollTo({ top: selectedDay * 45, behavior: "smooth" });
-    }, []);
-
-    const handleScroll = () => {
-        const index = Math.round((listRef.current?.scrollTop || 0) / 45);
-        setSelectedYear(years[index + 1]);
+        if (selectedDay > daysInMonth) {
+            setSelectedDay(daysInMonth);
+        }
+    }, [selectedDay, daysInMonth]);
+
+    const buildDateObject = (year: number, month: number, day: number): IDate => {
+        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,
+        };
     };
 
-    const handleScrollMonths = () => {
-        const index = Math.round((listRefMonths.current?.scrollTop || 0) / 45);
-        setSelectedMonth(index + 1);
-    };
+    // پیاده‌سازی Debounce برای ارسال تاریخ
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onDateChange(buildDateObject(selectedYear, selectedMonth, selectedDay));
+        }, 500); // ۵۰۰ میلی‌ثانیه صبر بعد از آخرین تغییر
 
-    const handleScrollDays = () => {
-        const index = Math.round((listRefDays.current?.scrollTop || 0) / 45);
-        setSelectedDay(index + 1);
-    };
+        return () => clearTimeout(timer);
+    }, [selectedYear, selectedMonth, selectedDay, isGregorian]);
 
-    return (
-        <div className="datepicker-container">
-            <div className="scroll-lists">
-                <div className="scroll-list" onScroll={handleScrollDays} ref={listRefDays}>
-                    {days.map((day, i) => (
-                        <div
-                            key={i}
-                            className={`scroll-item ${day === selectedDay ? "selected" : ""}`}
-                        >
-                            {day}
-                        </div>
-                    ))}
-                </div>
+    const scrollToIndex = (ref: RefObject<HTMLDivElement | null>, index: number) => {
+        if (ref.current) {
+            ref.current.scrollTop = index * ITEM_HEIGHT;
+        }
+    };
 
-                <div className="scroll-list" onScroll={handleScrollMonths} ref={listRefMonths}>
-                    {jalaliMonths.map((month, i) => (
-                        <div
-                            key={i}
-                            className={`scroll-item ${i === selectedMonth ? "selected" : ""}`}
-                        >
-                            {month}
-                        </div>
-                    ))}
-                </div>
+    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: UIEvent<HTMLDivElement>, type: "day" | "month" | "year") => {
+        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);
+        }
+    };
 
-                <div className="scroll-list" onScroll={handleScroll} ref={listRef}>
-                    {years.map((year) => (
+    const renderList = (items: Array<string | number>, selectedValue: string | number, ref: RefObject<HTMLDivElement | null>, type: "day" | "month" | "year") => {
+        return (
+            <div className="scroll-list" onScroll={(e) => handleScroll(e, type)} ref={ref}>
+                <div style={{ height: ITEM_HEIGHT }} />
+                {items.map((item, index) => {
+                    const isSelected = type === "month" ? (index + 1) === selectedMonth : item === selectedValue;
+                    return (
                         <div
-                            key={year}
-                            className={`scroll-item ${year === selectedYear ? "selected" : ""}`}
+                            key={`${type}-${item}`}
+                            className={`scroll-item ${isSelected ? "selected" : ""}`}
+                            style={{ color: isSelected ? selectedColor : textColor }}
                         >
-                            {year}
+                            {item}
                         </div>
-                    ))}
-                </div>
+                    );
+                })}
+                <div style={{ height: ITEM_HEIGHT }} />
             </div>
+        );
+    };
 
-            {!isBirthdate && (
-                <button className="apply-button" onClick={selectDateFunction}>
-                    اعمال تاریخ
-                </button>
-            )}
+    return (
+        <div className="datepicker-container">
+            <div className="scroll-lists" style={{ backgroundColor }}>
+                {renderList(days, selectedDay, dayRef, "day")}
+                {renderList(months, months[selectedMonth - 1], monthRef, "month")}
+                {renderList(years, selectedYear, yearRef, "year")}
+                <div className="selection-highlight" style={{ top: ITEM_HEIGHT, height: ITEM_HEIGHT }} />
+            </div>
         </div>
     );
 };
 
-export default MobileDatePicker;
+export default DaliryMobileDatePicker;

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/mobileDatePicker.css

@@ -2,26 +2,30 @@
     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; /* 45px * 3 */
     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 {
@@ -33,27 +37,44 @@
     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/tsconfig.json

@@ -1,18 +1,18 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "baseUrl": "./src",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>