daliry-mobile-date-picker 1.0.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "daliry-mobile-date-picker",
+  "version": "1.0.0",
+  "packageManager": "yarn@4.5.2",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/MobileDatePicker.d.ts",
+  "scripts": {
+    "build": "node build.js && tsc"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@alwatr/nano-build": "^5.5.0",
+    "moment-jalaali": "^0.10.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/moment-jalaali": "^0.7.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "esbuild": "^0.25.1"
+  },
+  "keywords": ["react", "datepicker", "jalali", "persian", "calendar"],
+  "author": "Mahdi Daliry",
+  "license": "MIT"
+}

package/src/MobileDatePicker.tsx

@@ -0,0 +1,123 @@
+import { useState, useRef, useEffect } from "react";
+import moment, { Moment } from "moment-jalaali";
+import "./mobileDatePicker.css";
+// export * from '.';
+
+export interface IDate {
+    jYear: number;
+    jMonth: number;
+    jDay: number;
+    jDate: string;
+    date: string;
+    gDate: string;
+    moment: Moment;
+}
+
+interface IMobileDatePicker {
+    onDateChange: (date: IDate) => void;
+    isBirthdate?: boolean;
+}
+
+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"),
+        });
+    };
+
+    useEffect(() => {
+        if (isBirthdate) selectDateFunction();
+    }, [selectedYear, selectedMonth, selectedDay]);
+
+    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]);
+    };
+
+    const handleScrollMonths = () => {
+        const index = Math.round((listRefMonths.current?.scrollTop || 0) / 45);
+        setSelectedMonth(index + 1);
+    };
+
+    const handleScrollDays = () => {
+        const index = Math.round((listRefDays.current?.scrollTop || 0) / 45);
+        setSelectedDay(index + 1);
+    };
+
+    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>
+
+                <div className="scroll-list" onScroll={handleScrollMonths} ref={listRefMonths}>
+                    {jalaliMonths.map((month, i) => (
+                        <div
+                            key={i}
+                            className={`scroll-item ${i === selectedMonth ? "selected" : ""}`}
+                        >
+                            {month}
+                        </div>
+                    ))}
+                </div>
+
+                <div className="scroll-list" onScroll={handleScroll} ref={listRef}>
+                    {years.map((year) => (
+                        <div
+                            key={year}
+                            className={`scroll-item ${year === selectedYear ? "selected" : ""}`}
+                        >
+                            {year}
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {!isBirthdate && (
+                <button className="apply-button" onClick={selectDateFunction}>
+                    اعمال تاریخ
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default MobileDatePicker;

package/src/index.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import {useEffect} from "react";
+
+
+const NegarAuth: React.FC = () => {
+    useEffect(() => {
+        console.log('test')
+    }, []);
+    return <div>Negar Auth Component</div>;
+};
+export default NegarAuth;
+

package/src/mobileDatePicker.css

@@ -0,0 +1,59 @@
+.datepicker-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+}
+
+.scroll-lists {
+    display: flex;
+    justify-content: space-between;
+    background-color: #f5f5f5;
+    border-radius: 12px;
+    height: 152px;
+    width: 100%;
+}
+
+.scroll-list {
+    width: 110px;
+    height: 152px;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.scroll-list::-webkit-scrollbar {
+    display: none;
+}
+
+.scroll-item {
+    height: 45px;
+    line-height: 45px;
+    text-align: center;
+    scroll-snap-align: center;
+    color: #bbb;
+    font-size: 16px;
+    opacity: 0.5;
+    filter: blur(4px);
+    font-weight: normal;
+}
+
+.scroll-item.selected {
+    color: #333;
+    font-size: 20px;
+    font-weight: bold;
+    opacity: 1;
+    filter: none;
+}
+
+.apply-button {
+    padding: 10px 20px;
+    background-color: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+}

package/tsconfig.json

@@ -0,0 +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"]
+}