wini-web-components 2.8.5 → 2.8.6

package/src/component/date-time-picker/date-time-picker.tsx

@@ -1,663 +0,0 @@
-import styles from "./date-time-picker.module.css"
-import { CSSProperties, forwardRef, ReactNode, useEffect, useMemo, useRef, useState } from "react"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import { differenceInCalendarDays } from "date-fns"
-import { closePopup, Popup, showPopup } from "../popup/popup"
-import { Text } from "../text/text"
-import { Winicon } from "../wini-icon/winicon"
-import { TextField } from "../text-field/text-field"
-import { Calendar } from "../calendar/calendar"
-import { Button } from "../button/button"
-import { Checkbox } from "../checkbox/checkbox"
-
-const today = new Date()
-const startDate = new Date(
-    today.getFullYear() - 100,
-    today.getMonth(),
-    today.getDate()
-)
-const endDate = new Date(
-    today.getFullYear() + 100,
-    today.getMonth(),
-    today.getDate()
-)
-
-const dateToString = (x: Date, y: string = "dd/mm/yyyy") => {
-    let splitDateTime: Array<string> = y.split(" ");
-    let dateFormat = splitDateTime[0]
-    let timeFormat = splitDateTime[1]
-    if (dateFormat.includes('hh')) {
-        dateFormat = splitDateTime[1]
-        timeFormat = splitDateTime[0]
-    }
-    let dateConvert: string = dateFormat.split(y.includes("/") ? "/" : "-").map(type => {
-        switch (type.toLowerCase()) {
-            case "dd":
-                return x.getDate() < 10 ? `0${x.getDate()}` : `${x.getDate()}`;
-            case "mm":
-                return (x.getMonth() + 1) < 10 ? `0${(x.getMonth() + 1)}` : `${(x.getMonth() + 1)}`;
-            case "yyyy":
-                return `${x.getFullYear()}`;
-            default:
-                return ''
-        }
-    }).join(y.includes("/") ? "/" : "-");
-    if (timeFormat) {
-        let timeConvert = timeFormat.split(":").map(type => {
-            switch (type) {
-                case "hh":
-                    return x.getHours() < 10 ? `0${x.getHours()}` : `${x.getHours()}`;
-                case "mm":
-                    return x.getMinutes() < 10 ? `0${x.getMinutes()}` : `${x.getMinutes()}`;
-                case "ss":
-                    return x.getSeconds() < 10 ? `0${x.getSeconds()}` : `${x.getSeconds()}`;
-                default:
-                    return ''
-            }
-        }).join(":")
-        return dateConvert + " " + timeConvert;
-    }
-    return dateConvert;
-}
-
-const stringToDate = (_date: string, _format: string = "dd/mm/yyyy", _delimiter: string = "/") => {
-    let dayformat: string = _format;
-    let hourformat: string = '';
-    let day: string = _date;
-    let hours: string = '';
-    let isHour: boolean = false;
-    if (_format.trim().indexOf(" ") > -1) {
-        dayformat = _format.trim().split(" ")[0];
-        hourformat = _format.trim().split(" ")[1];
-        day = _date.trim().split(" ")[0];
-        hours = _date.trim().split(" ")[1] ?? '00:00:00';
-        isHour = true;
-    }
-    let formatLowerCase: string = dayformat.toLowerCase();
-    let formatItems: Array<string> = formatLowerCase.split(_delimiter);
-    let dateItems: Array<string> = day.split(_delimiter);
-    let monthIndex: number = formatItems.indexOf("mm");
-    let dayIndex: number = formatItems.indexOf("dd");
-    let yearIndex: number = formatItems.indexOf("yyyy");
-    let hour: number = 0;
-    let min: number = 0;
-    let sec: number = 0;
-    if (isHour) {
-        let tmpHour: Array<string> = hourformat.split(":");
-        let hourindex: number = tmpHour.indexOf("HH");
-        if (hourindex < 0) {
-            hourindex = tmpHour.indexOf("hh");
-        }
-        let mmindex: number = tmpHour.indexOf("mm");
-        let ssindex: number = tmpHour.indexOf("ss");
-        let time: Array<string> = hours.split(":");
-        hour = parseInt(time[hourindex] ?? '0'); min = parseInt(time[mmindex] ?? '0'); sec = parseInt(time[ssindex] ?? '0');
-    }
-    let month: number = parseInt(dateItems[monthIndex]);
-    month -= 1;
-    var formatedDate = new Date(parseInt(dateItems[yearIndex]), month, parseInt(dateItems[dayIndex] ?? '0'), hour, min, sec);
-    return formatedDate;
-}
-const inRangeTime = (date: Date, startDate: Date, endDate: Date) => (differenceInCalendarDays(date, startDate) > -1 && differenceInCalendarDays(endDate, date) > -1)
-
-interface ValueProps {
-    start?: Date,
-    end?: Date,
-    /** type: 1: daily, 2: weekly, 3: monthly */
-    repeatData?: { type: 1 | 2 | 3, value: Array<string | number> }
-}
-
-interface DateTimePickerProps {
-    id?: string,
-    value?: Date,
-    endValue?: Date,
-    min?: Date,
-    max?: Date,
-    pickOnly?: boolean,
-    helperText?: string,
-    helperTextColor?: string,
-    placeholder?: string,
-    className?: string,
-    style?: CSSProperties,
-    disabled?: boolean,
-    pickerType?: "auto" | "date" | "datetime" | "daterange" | "datetimerange",
-    enableRepeat?: boolean,
-    /** type: 1: daily, 2: weekly, 3: monthly */
-    repeatValue?: { type: 1 | 2 | 3, value: Array<"everyday" | "last" | number> },
-    prefix?: ReactNode,
-    onChange?: (ev?: Date | ValueProps) => void,
-}
-
-export function DateTimePicker(props: DateTimePickerProps) {
-    const popupRef = useRef<any>(null)
-    const inputRef = useRef<HTMLInputElement>(null)
-    const [value, setValue] = useState<Date | ValueProps>()
-    const txtValue = useMemo(() => {
-        if (!value) return <Text className={styles["value"]} style={{ color: "var(--neutral-text-subtitle-color)" }}>{props.placeholder ?? ""}</Text>
-        if (value instanceof Date) return <Text className={styles["value"]}>{dateToString(value, `dd/mm/yyyy${props.pickerType?.includes("time") ? " hh:mm" : ""}`)}</Text>
-        else return <>
-            <Text className={styles["value"]} style={{ flex: "none", width: "fit-content" }}>{dateToString(value.start ?? new Date(), `dd/mm/yyyy${(props.pickerType?.includes("time") || props.pickerType === "auto") ? " hh:mm" : ""}`)} - {dateToString(value.end ?? new Date(), `dd/mm/yyyy${(props.pickerType?.includes("time") || props.pickerType === "auto") ? " hh:mm" : ""}`)}</Text>
-            {value.repeatData && <Winicon src="outline/arrows/loop-2" size={"1.2rem"} />}
-        </>
-    }, [value])
-
-    useEffect(() => {
-        if (inputRef.current) {
-            if (value && value instanceof Date) inputRef.current.value = dateToString(value, `dd/mm/yyyy`)
-            else inputRef.current.value = ""
-        }
-    }, [value, inputRef.current])
-
-    useEffect(() => {
-        switch (props.pickerType) {
-            case "date":
-            case "datetime":
-                setValue(props.value)
-                break;
-            default:
-                setValue((!props.value || !props.endValue) ? undefined : { start: props.value, end: props.endValue, repeatData: props.pickerType === "auto" ? props.repeatValue : undefined })
-                break;
-        }
-    }, [props.value, props.endValue, props.repeatValue, props.pickerType])
-
-    const showCalendar = (rect: any) => {
-        showPopup({
-            ref: popupRef,
-            clickOverlayClosePopup: true,
-            content: <PopupDateTimePicker
-                ref={popupRef}
-                max={props.max}
-                min={props.min}
-                value={value instanceof Date ? value : value?.start}
-                endValue={value instanceof Date ? undefined : value?.end}
-                pickerType={props.pickerType}
-                enableRepeat={props.enableRepeat}
-                style={{ top: rect.bottom + 2, left: rect.left + 16 }}
-                onApply={(ev) => {
-                    setValue(ev)
-                    closePopup(popupRef)
-                    if (props.onChange) props.onChange(ev)
-                    if (inputRef.current) inputRef.current.focus()
-                }}
-            />
-        })
-    }
-
-    const returnUI = () => {
-        switch (props.pickerType) {
-            case "date":
-                return <div
-                    id={props.id}
-                    className={`row ${styles["date-time-picker"]} ${props.className ?? "body-3"} ${props.helperText?.length ? styles['helper-text'] : ""}`}
-                    helper-text={props.helperText}
-                    style={props.style ? { ...({ '--helper-text-color': props.helperTextColor ?? '#e14337' } as CSSProperties), ...props.style } : ({ '--helper-text-color': props.helperTextColor ?? '#e14337' } as CSSProperties)}
-                    onClick={(ev: any) => {
-                        const rect = ev.target.closest("div").getBoundingClientRect()
-                        showCalendar(rect)
-                    }}>
-                    {props.prefix ?? <Winicon className={styles["prefix-icon"]} src="outline/user interface/calendar-date" size={"1.2rem"} />}
-                    <input
-                        className={styles["value"]}
-                        ref={inputRef}
-                        autoComplete='off'
-                        disabled={props.disabled}
-                        placeholder={props.placeholder}
-                        readOnly={props.pickOnly}
-                        onKeyDown={(ev: any) => {
-                            switch (ev.key.toLowerCase()) {
-                                case "enter":
-                                    ev.target.blur()
-                                    break;
-                                default:
-                                    break;
-                            }
-                        }}
-                        onBlur={props.pickOnly ? undefined : (ev) => {
-                            const inputValue = ev.target.value.trim()
-                            let dateValue: Date | undefined = undefined
-                            if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
-                                dateValue = stringToDate(inputValue, 'dd/MM/yyyy', '/')
-                                if (inRangeTime(dateValue, props.min ?? startDate, props.min ?? endDate)) {
-                                } else if (differenceInCalendarDays(props.min ?? startDate, dateValue) > -1) {
-                                    dateValue = props.min ?? startDate
-                                } else if (differenceInCalendarDays(dateValue, props.min ?? endDate) > -1) {
-                                    dateValue = props.max ?? endDate
-                                } else {
-                                    dateValue = undefined
-                                }
-                            }
-                            setValue(dateValue)
-                            if (props.onChange) props.onChange(dateValue)
-                        }}
-                    />
-                </div>
-            default:
-                return <button id={props.id} type="button" disabled={props.disabled} className={`row ${styles["date-time-picker"]} ${props.className ?? "body-3"}`} style={props.style} onClick={(ev: any) => {
-                    const rect = ev.target.closest("button").getBoundingClientRect()
-                    showCalendar(rect)
-                }}>
-                    {props.prefix ?? <Winicon className={styles["prefix-icon"]} src="outline/user interface/calendar-date" size={"1.2rem"} />}
-                    {txtValue}
-                </button>
-        }
-    }
-
-    return <>
-        <Popup ref={popupRef} />
-        {returnUI()}
-    </>
-
-}
-
-interface PopupPickerProps {
-    value?: Date,
-    endValue?: Date,
-    min?: Date,
-    style?: CSSProperties,
-    max?: Date,
-    pickerType?: "auto" | "date" | "datetime" | "daterange" | "datetimerange",
-    repeatValue?: { type: 1 | 2 | 3, value: Array<"everyday" | "last" | number> },
-    onApply?: (ev: Date | ValueProps) => void,
-    enableRepeat?: boolean,
-}
-
-const PopupDateTimePicker = forwardRef(function PopupDateTimePicker({ value, style, endValue, repeatValue, onApply, pickerType = "auto", enableRepeat = false, min, max }: PopupPickerProps, ref: any) {
-    const methods = useForm({ shouldFocusError: false })
-    const [selectTime, setSelectTime] = useState(false)
-    const [isRepeat, setIsRepeat] = useState(false)
-    const today = new Date()
-    const [repeatData, setRepeatData] = useState<{ type: 1 | 2 | 3, value: Array<string | number> }>({ type: 1, value: ["everyday"] }) // 1: daily, 2: weekly, 3: monthly
-    const popupRef = useRef<any>(null)
-    const inputStartRef = useRef<TextField>(null)
-    const inputEndRef = useRef<TextField>(null)
-    const { t } = useTranslation()
-    const regexDate = /[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g
-    const regexTime = /^(?:[01]\d|2[0-3]):[0-5]\d(?:[:][0-5]\d)?$/g
-
-    useEffect(() => {
-        if (repeatValue && enableRepeat) {
-            setIsRepeat(true)
-            setRepeatData(repeatValue)
-        } else setIsRepeat(false)
-    }, [repeatValue])
-
-    useEffect(() => {
-        if (selectTime && pickerType !== "auto" && !pickerType.includes("time")) {
-            setSelectTime(false)
-            methods.setValue('time-start', null)
-            methods.setValue('time-end', null)
-        } else if (!selectTime && pickerType.includes("time")) {
-            setSelectTime(true)
-        }
-    }, [pickerType])
-
-    const initStartValue = () => {
-        if (value) {
-            const initStart = new Date(value)
-            methods.setValue('date-start', initStart)
-            inputStartRef.current!.getInput()!.value = dateToString(initStart)
-            if (pickerType.includes("time") || initStart.getSeconds() === 1) {
-                setSelectTime(true)
-                methods.setValue('time-start', `${initStart.getHours() < 9 ? `0${initStart.getHours()}` : initStart.getHours()}:${initStart.getMinutes() < 9 ? `0${initStart.getMinutes()}` : initStart.getMinutes()}`)
-            }
-        } else inputStartRef.current!.getInput()!.value = ""
-    }
-
-    const initEndValue = () => {
-        if ((pickerType?.includes("range") || pickerType === "auto") && inputEndRef.current) {
-            if (endValue) {
-                const initEnd = new Date(endValue)
-                methods.setValue('date-end', initEnd)
-                inputEndRef.current.getInput()!.value = dateToString(initEnd)
-                if (pickerType.includes("time") || initEnd.getSeconds() === 59) methods.setValue('time-end', `${initEnd.getHours() < 9 ? `0${initEnd.getHours()}` : initEnd.getHours()}:${initEnd.getMinutes() < 9 ? `0${initEnd.getMinutes()}` : initEnd.getMinutes()}`)
-            } else inputEndRef.current.getInput()!.value = ""
-        }
-    }
-
-    useEffect(() => {
-        if (value && inputStartRef.current) initStartValue()
-    }, [value, inputStartRef])
-
-    useEffect(() => {
-        initEndValue()
-    }, [endValue, inputEndRef, pickerType])
-
-    return <div className="col" style={{ width: "31.2rem", ...style }}>
-        <Popup ref={popupRef} />
-        <Calendar
-            min={min}
-            max={max}
-            range={pickerType.includes("range") || pickerType === "auto"}
-            value={pickerType === "date" || pickerType === "datetime" ? methods.watch('date-start') : (methods.watch('date-start') && methods.watch('date-end') ? { sTime: methods.watch('date-start'), eTime: methods.watch('date-end') } : undefined)}
-            header={pickerType !== "date" && <div className='row' style={{ flexWrap: "wrap", gap: "0.8rem 1.2rem", padding: "1.6rem", borderBottom: "var(--neutral-main-border)" }}>
-                <TextField
-                    ref={inputStartRef}
-                    autoComplete="off"
-                    className='col12 body-3'
-                    style={{ "--gutter": "1.2rem", padding: "0.4rem 1.2rem" } as any}
-                    placeholder={pickerType.includes("range") || pickerType === "auto" ? t("start-date") : "dd/mm/yyyy"}
-                    onComplete={(ev: any) => ev.target.blur()}
-                    onBlur={(ev) => {
-                        const inputValue = ev.target.value
-                        if (regexDate.test(inputValue)) {
-                            const dateValue = stringToDate(inputValue, 'dd/mm/yyyy', '/')
-                            if ((pickerType.includes("range") || pickerType === "auto") && differenceInCalendarDays(methods.getValues('date-end'), dateValue) < 0) {
-                                methods.setValue('date-end', dateValue)
-                                inputEndRef.current!.getInput()!.value = dateToString(dateValue)
-                            }
-                            methods.setValue('date-start', dateValue)
-                        } else ev.target.value = methods.getValues('date-start') ? dateToString(methods.getValues('date-start')) : ""
-                    }}
-                />
-                {(pickerType.includes("range") || pickerType === "auto") &&
-                    <TextField
-                        ref={inputEndRef}
-                        autoComplete="off"
-                        className='col12 body-3'
-                        style={{ "--gutter": "1.2rem", padding: "0.4rem 1.2rem" } as any}
-                        placeholder={t("end-date")}
-                        onComplete={(ev: any) => ev.target.blur()}
-                        onBlur={(ev) => {
-                            const inputValue = ev.target.value
-                            if (regexDate.test(inputValue)) {
-                                const dateValue = stringToDate(inputValue, 'dd/mm/yyyy', '/')
-                                if (differenceInCalendarDays(dateValue, methods.getValues('date-start')) < 0) {
-                                    methods.setValue('date-start', dateValue)
-                                    inputStartRef.current!.getInput()!.value = dateToString(dateValue)
-                                }
-                                methods.setValue('date-end', dateValue)
-                            } else ev.target.value = methods.getValues('date-end') ? dateToString(methods.getValues('date-end')) : ""
-                        }}
-                    />}
-                {selectTime && <>
-                    <TextField
-                        autoComplete="off"
-                        name='time-start'
-                        style={{ "--gutter": "1.2rem", padding: "0.4rem 1.2rem" } as any}
-                        onComplete={(ev: any) => { ev.target.blur() }}
-                        register={methods.register("time-start", {
-                            onChange: (ev) => ev.target.value = ev.target.value.trim(),
-                            onBlur: (ev) => {
-                                if (regexTime.test(ev.target.value)) {
-                                    methods.setValue('time-start', ev.target.value)
-                                } else ev.target.value = ""
-                            }
-                        }) as any}
-                        className='col12 body-3'
-                        placeholder={"hh:mm"}
-                        onFocus={(ev) => {
-                            const rect = ev.target.closest("div")!.getBoundingClientRect()
-                            showPopup({
-                                ref: popupRef,
-                                clickOverlayClosePopup: true,
-                                content: <div className={`col ${styles['popup-actions']}`} style={{ maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width, overflow: "hidden auto", border: "var(--neutral-main-border)" }}>
-                                    {Array.from({ length: 48 }).map((_, i) => {
-                                        if (i % 2 === 0) var timeValue = `${(i / 2) < 9 ? `0${i / 2}` : (i / 2)}:00`
-                                        else timeValue = `${((i - 1) / 2) < 9 ? `0${(i - 1) / 2}` : ((i - 1) / 2)}:30`
-                                        return <button key={"time-" + i} type="button" className="row" onClick={() => {
-                                            methods.setValue("time-start", timeValue)
-                                            closePopup(popupRef)
-                                        }}>
-                                            <Text className="body-3">{timeValue}</Text>
-                                        </button>
-                                    })}
-                                </div>
-                            })
-                        }}
-                    />
-                    {(pickerType.includes("range") || pickerType === "auto") &&
-                        <TextField
-                            autoComplete="off"
-                            name='time-end'
-                            style={{ "--gutter": "1.2rem", padding: "0.4rem 1.2rem" } as any}
-                            onComplete={(ev: any) => { ev.target.blur() }}
-                            register={methods.register("time-end", {
-                                onChange: (ev) => ev.target.value = ev.target.value.trim(),
-                                onBlur: (ev) => {
-                                    if (regexTime.test(ev.target.value)) {
-                                        methods.setValue('time-end', ev.target.value)
-                                    } else ev.target.value = ""
-                                }
-                            }) as any}
-                            className='col12 body-3'
-                            placeholder={"hh:mm"}
-                            onFocus={(ev) => {
-                                const rect = ev.target.closest("div")!.getBoundingClientRect()
-                                showPopup({
-                                    ref: popupRef,
-                                    clickOverlayClosePopup: true,
-                                    content: <div className={`col ${styles['popup-actions']}`} style={{ maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width, overflow: "hidden auto", border: "var(--neutral-main-border)" }}>
-                                        {Array.from({ length: 48 }).map((_, i) => {
-                                            if (i % 2 === 0) var timeValue = `${(i / 2) < 9 ? `0${i / 2}` : (i / 2)}:00`
-                                            else timeValue = `${((i - 1) / 2) < 9 ? `0${(i - 1) / 2}` : ((i - 1) / 2)}:30`
-                                            return <button key={"time-" + i} type="button" className="row" onClick={() => {
-                                                methods.setValue("time-end", timeValue)
-                                                closePopup(popupRef)
-                                            }}>
-                                                <Text className="body-3">{timeValue}</Text>
-                                            </button>
-                                        })}
-                                    </div>
-                                })
-                            }}
-                        />}
-                </>}
-            </div>}
-            footer={pickerType !== "date" && <>
-                {isRepeat && <div className='col' style={{ borderTop: "var(--neutral-main-border)" }}>
-                    <div className='row' style={{ gap: 4, padding: "1.2rem 1.6rem" }}>
-                        <Text className='heading-8' style={{ flex: 1 }}>Lặp lại</Text>
-                        <Button
-                            style={{ padding: 0 }}
-                            label={(() => {
-                                switch (repeatData.type) {
-                                    case 1:
-                                        return t("daily")
-                                    case 2:
-                                        return t("weekly")
-                                    case 3:
-                                        return t("monthly")
-                                    default:
-                                        return ""
-                                }
-                            })()}
-                            suffix={<Winicon src='outline/arrows/down-arrow' size={"1.4rem"} style={{ padding: "0.2rem" }} />}
-                            onClick={(ev: any) => {
-                                const rect = ev.target.closest("button").getBoundingClientRect()
-                                showPopup({
-                                    ref: popupRef,
-                                    clickOverlayClosePopup: true,
-                                    style: { position: "absolute", top: rect.bottom + 2, left: rect.x + 8 },
-                                    body: <div className="col popup-actions">
-                                        {Array.from({ length: 3 }).map((_, num) => {
-                                            let label = ""
-                                            switch (num) {
-                                                case 0:
-                                                    label = t("daily")
-                                                    break;
-                                                case 1:
-                                                    label = t("weekly")
-                                                    break;
-                                                case 2:
-                                                    label = t("monthly")
-                                                    break;
-                                                default:
-                                                    break;
-                                            }
-                                            return <button key={"tStatus-" + num} type="button" className="row" onClick={() => {
-                                                let newValue: any = ["everyday"]
-                                                switch (num) {
-                                                    case 0:
-                                                        newValue = ["everyday"]
-                                                        break;
-                                                    case 1:
-                                                        newValue = today.getDay()
-                                                        break;
-                                                    case 2:
-                                                        newValue = today.getDate()
-                                                        break;
-                                                    default:
-                                                        break;
-                                                }
-                                                setRepeatData({ type: (num + 1) as any, value: [newValue] })
-                                                closePopup(popupRef)
-                                            }}>
-                                                <Text className="button-text-3">{label}</Text>
-                                            </button>
-                                        })}
-                                    </div>
-                                })
-                            }}
-                        />
-                    </div>
-                    {(() => {
-                        switch (repeatData.type) {
-                            case 2:
-                                return <>
-                                    <Text className='heading-8' style={{ padding: "0 1.6rem" }}>{t("on") + " " + t("date").toLowerCase()}</Text>
-                                    <div className='row' style={{ justifyContent: "space-between", padding: "0.4rem 1.6rem" }}>
-                                        {Array.from({ length: 7 }).map((_, i) => {
-                                            switch (i) {
-                                                case 0:
-                                                    var weekdayTitle = t("su")
-                                                    break
-                                                case 1:
-                                                    weekdayTitle = t("mo")
-                                                    break
-                                                case 2:
-                                                    weekdayTitle = t("tu")
-                                                    break
-                                                case 3:
-                                                    weekdayTitle = t("we")
-                                                    break
-                                                case 4:
-                                                    weekdayTitle = t("th")
-                                                    break
-                                                case 5:
-                                                    weekdayTitle = t("fr")
-                                                    break
-                                                case 6:
-                                                    weekdayTitle = t("sa")
-                                                    break
-                                                default:
-                                                    weekdayTitle = ''
-                                                    break
-                                            }
-                                            return <div key={"weekday-" + i} className='col' style={{ gap: 4, alignItems: "center" }}>
-                                                <Checkbox size={"1.8rem"} value={repeatData.value.includes(i)} disabled={repeatData.value.includes(i) && repeatData.value.length === 1} onChange={(v) => {
-                                                    if (v) setRepeatData({ type: 2, value: [...repeatData.value, i] })
-                                                    else setRepeatData({ type: 2, value: repeatData.value.filter(id => id !== i) })
-                                                }} />
-                                                <Text className='placeholder-2'>{weekdayTitle}</Text>
-                                            </div>
-                                        })}
-                                    </div>
-                                </>
-                            case 3:
-                                return <div className='row' style={{ justifyContent: "space-between", padding: "0.4rem 1.6rem", gap: "1.2rem" }}>
-                                    <Text className='heading-8' style={{ flex: 1 }}>{t("on") + " " + t("date").toLowerCase()}</Text>
-                                    <Button
-                                        style={{ padding: 0 }}
-                                        label={repeatData.value[0] === "last" ? t("Last") : `${repeatData.value[0]}`}
-                                        suffix={<Winicon src='outline/arrows/down-arrow' size={"1.4rem"} style={{ padding: "0.2rem" }} />}
-                                        onClick={(ev: any) => {
-                                            const rect = ev.target.closest("button").getBoundingClientRect()
-                                            showPopup({
-                                                ref: popupRef,
-                                                clickOverlayClosePopup: true,
-                                                style: { top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, maxHeight: "30.4rem" },
-                                                body: <div className="col popup-actions" style={{ flex: 1, overflow: "hidden auto" }}>
-                                                    {Array.from({ length: 29 }).map((_, num) => {
-                                                        switch (num) {
-                                                            case 28:
-                                                                var label = t("Last")
-                                                                break;
-                                                            default:
-                                                                label = `${num + 1}`
-                                                                break;
-                                                        }
-                                                        return <button key={"date-" + num} type="button" className="row" onClick={() => {
-                                                            setRepeatData({ type: 3, value: [num === 28 ? "last" : (num + 1)] })
-                                                            closePopup(popupRef)
-                                                        }}>
-                                                            <Text className="button-text-3">{label}</Text>
-                                                        </button>
-                                                    })}
-                                                </div>
-                                            })
-                                        }}
-                                    />
-                                </div>
-                            default:
-                                return null
-                        }
-                    })()}
-                </div>}
-                {onApply && <div className='row' style={{ gap: "0.8rem", padding: "1.2rem 1.6rem", borderTop: "var(--neutral-main-border)" }}>
-                    {pickerType === "auto" && <div className='row' style={{ gap: 4 }}>
-                        <Winicon
-                            src='outline/user interface/time-alarm'
-                            size={"1.6rem"}
-                            style={{ padding: "0.7rem", borderRadius: "50%", backgroundColor: selectTime ? "var(--neutral-disable-background-color)" : undefined }}
-                            onClick={() => { setSelectTime(!selectTime) }}
-                        />
-                        {(enableRepeat || pickerType === "auto") && <Winicon
-                            src='outline/arrows/loop-2'
-                            size={"1.6rem"}
-                            style={{ padding: "0.7rem", borderRadius: "50%", backgroundColor: isRepeat ? "var(--neutral-disable-background-color)" : undefined }}
-                            onClick={() => { setIsRepeat(!isRepeat) }}
-                        />}
-                    </div>}
-                    <div style={{ flex: 1 }} />
-                    <Button
-                        label={t("reset")}
-                        onClick={() => {
-                            methods.setValue("date-start", null)
-                            methods.setValue("date-end", null)
-                            methods.setValue("time-start", null)
-                            methods.setValue("time-end", null)
-                            initStartValue()
-                            initEndValue()
-                        }}
-                    />
-                    <Button
-                        label={t("apply")}
-                        disabled={!methods.watch("date-start") || (!methods.watch("date-end") && (pickerType.includes("range") || pickerType === "auto"))}
-                        className={`button-text-3 button-primary`}
-                        onClick={() => {
-                            let dateStartValue = methods.getValues("date-start")
-                            let timeStartValue = selectTime ? (methods.getValues("time-start")?.length ? methods.getValues("time-start") : "00:00") : "00:00"
-                            dateStartValue.setHours(parseInt(timeStartValue.split(':')[0]), parseInt(timeStartValue.split(':')[1]), selectTime ? 1 : 0, 0)
-                            if (pickerType.includes("range") || pickerType === "auto") {
-                                var dateEndValue = methods.getValues("date-end")
-                                let timeEndValue = selectTime ? (methods.getValues("time-end")?.length ? methods.getValues("time-end") : "23:59") : "23:59"
-                                dateEndValue.setHours(parseInt(timeEndValue.split(':')[0]), parseInt(timeEndValue.split(':')[1]), selectTime ? 59 : 0, 0)
-                            }
-                            onApply(!pickerType.includes("range") && pickerType !== "auto" ? dateStartValue : { start: dateStartValue, end: dateEndValue, repeatData: isRepeat ? repeatData : undefined })
-                            closePopup(ref)
-                        }}
-                    />
-                </div>}
-            </>}
-            onSelect={(ev: any) => {
-                if (pickerType !== "date") {
-                    if (ev instanceof Date) {
-                        methods.setValue('date-start', ev)
-                        if (inputStartRef.current) inputStartRef.current.getInput()!.value = dateToString(ev)
-                    } else {
-                        methods.setValue('date-start', ev.sTime)
-                        if (inputStartRef.current) inputStartRef.current.getInput()!.value = dateToString(ev.sTime)
-                        if (pickerType.includes("range") || pickerType === "auto") {
-                            methods.setValue('date-end', ev.eTime)
-                            if (inputEndRef.current) inputEndRef.current.getInput()!.value = dateToString(ev.eTime)
-                        }
-                    }
-                } else if (onApply) {
-                    onApply(ev)
-                    closePopup(ref)
-                }
-            }}
-        />
-    </div>
-})