create schedule

2025-11-16 10:06:19 +03:30
parent 2a3b9a7d6a
commit 3c14645fb5
10 changed files with 291 additions and 7 deletions
@@ -0,0 +1,97 @@
+import { useState, useEffect, useRef, type FC } from 'react';
+import { clx } from '../helpers/utils';
+import { Clock } from 'iconsax-react';
+import Error from './Error';
+
+type Props = {
+    onChange: (time: string) => void;
+    defaultValue?: string;
+    error_text?: string;
+    placeholder?: string;
+    className?: string;
+    label?: string;
+};
+
+const TimePickerComponent: FC<Props> = (props: Props) => {
+    const [inputValue, setInputValue] = useState<string>('');
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (props.defaultValue) {
+            // تبدیل فرمت HH.mm به HH:mm برای input type="time"
+            const timeStr = props.defaultValue.replace('.', ':');
+            setInputValue(timeStr);
+        }
+    }, [props.defaultValue]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const timeValue = e.target.value; // فرمت: HH:mm
+        setInputValue(timeValue);
+
+        if (timeValue) {
+            // تبدیل فرمت HH:mm به HH.mm برای ارسال به سرور
+            const formattedTime = timeValue.replace(':', '.');
+            props.onChange(formattedTime);
+        } else {
+            props.onChange('');
+        }
+    };
+
+    const handleWrapperClick = () => {
+        inputRef.current?.showPicker?.();
+        inputRef.current?.focus();
+        inputRef.current?.click();
+    };
+
+    return (
+        <div className="w-full">
+            {props.label && (
+                <div className='text-sm'>
+                    {props.label}
+                </div>
+            )}
+            <div className={clx(
+                'relative',
+                props.label && 'mt-1.5'
+            )}>
+                <div
+                    onClick={handleWrapperClick}
+                    className={clx(
+                        'w-full bg-white h-10 text-black flex items-center px-4 pl-10 pr-4 text-xs rounded-xl border border-border cursor-pointer relative',
+                        'hover:border-primary transition-colors',
+                        props.className
+                    )}
+                >
+                    <input
+                        ref={inputRef}
+                        type="time"
+                        value={inputValue}
+                        onChange={handleChange}
+                        className="w-full h-full bg-transparent border-0 outline-none cursor-pointer text-right time-picker-input"
+                        style={{
+                            color: inputValue ? '#000' : 'transparent',
+                            caretColor: 'transparent'
+                        }}
+                    />
+                    {!inputValue && (
+                        <span className="absolute right-4 text-description pointer-events-none">
+                            {props.placeholder || 'انتخاب زمان'}
+                        </span>
+                    )}
+                    {inputValue && (
+                        <span className="absolute right-4 pointer-events-none text-black">
+                            {inputValue.replace(':', '.')}
+                        </span>
+                    )}
+                    <Clock size={20} color="#8C90A3" className='absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none z-10' />
+                </div>
+                {props.error_text && props.error_text !== '' && (
+                    <Error errorText={props.error_text} />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default TimePickerComponent;
+