designer request

2026-05-11 11:34:52 +03:30
parent 687f243b80
commit 327b74d7c0
8 changed files with 428 additions and 145 deletions
@@ -0,0 +1,116 @@
+import { useState, useEffect, useRef, type FC } from 'react';
+import DatePicker from 'react-multi-date-picker';
+import persian from 'react-date-object/calendars/persian';
+import persian_fa from 'react-date-object/locales/persian_fa';
+import DateObject from 'react-date-object';
+import { clx } from '../helpers/utils';
+import { Calendar } from 'iconsax-react';
+
+type Props = {
+    onChange: (date: string) => void;
+    defaulValue?: string;
+    error_text?: string;
+    placeholder: string;
+    reset?: boolean;
+    isDateTime?: boolean;
+    className?: string;
+    label?: string
+};
+
+const DatePickerComponent: FC<Props> = (props: Props) => {
+    const [value, setValue] = useState<DateObject | null>(null);
+    const isSettingDefaultValue = useRef(false);
+    const isInitialized = useRef(false);
+
+    useEffect(() => {
+        if (props.reset) {
+            setValue(null);
+        }
+    }, [props.reset]);
+
+    useEffect(() => {
+        // فقط وقتی کاربر تاریخ رو تغییر داده onChange رو صدا بزن
+        if (isSettingDefaultValue.current) {
+            isSettingDefaultValue.current = false;
+            return;
+        }
+
+        // اگر هنوز initialize نشده و value null هست، onChange رو صدا نزن
+        if (!isInitialized.current && !value) {
+            return;
+        }
+
+        isInitialized.current = true;
+
+        if (value) {
+            // تبدیل تاریخ شمسی به میلادی
+            const gregorianDate = value.toDate();
+            const year = gregorianDate.getFullYear();
+            const month = String(gregorianDate.getMonth() + 1).padStart(2, '0');
+            const day = String(gregorianDate.getDate()).padStart(2, '0');
+            const formattedDate = `${year}-${month}-${day}`;
+            props.onChange(formattedDate);
+        } else {
+            props.onChange('');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
+    useEffect(() => {
+        if (props.defaulValue) {
+            try {
+                const defaultDate = new DateObject({
+                    date: props.defaulValue,
+                    calendar: persian,
+                    locale: persian_fa,
+                });
+
+                const currentValueStr = value ? `${value.year}-${value.month.number}-${value.day}` : null;
+                const defaultValueStr = `${defaultDate.year}-${defaultDate.month.number}-${defaultDate.day}`;
+
+                if (currentValueStr !== defaultValueStr) {
+                    isSettingDefaultValue.current = true;
+                    setValue(defaultDate);
+                }
+            } catch (error) {
+                console.error('Error parsing date:', error);
+            }
+        } else if (!props.defaulValue && value) {
+            isSettingDefaultValue.current = true;
+            setValue(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.defaulValue]);
+
+    return (
+        <div className="w-full">
+            {props.label &&
+                <div className='text-sm'>
+                    {props.label}
+                </div>}
+            <div className={clx(
+                'relative ',
+                props.label && 'mt-1.5'
+            )}>
+                <DatePicker
+                    placeholder={props.placeholder}
+                    value={value}
+                    onChange={(date) => setValue(date as DateObject)}
+                    calendar={persian}
+                    locale={persian_fa}
+                    calendarPosition="bottom-right"
+                    className={`rmdp-mobile ${props.className}`}
+                />
+                {props.error_text && props.error_text !== '' && (
+                    <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
+                        {props.error_text}
+                    </div>
+                )}
+
+                <Calendar size={18} color='black' className='absolute top-0 bottom-0 my-auto left-2' />
+            </div>
+        </div>
+    );
+};
+
+export default DatePickerComponent;