@datability/8ui 0.1.69 → 1.1.0

package/src/components/input/input-date/index.tsx

@@ -0,0 +1,354 @@
+/* eslint-disable react-refresh/only-export-components */
+// Lib
+import React, { useEffect, useState } from "react"
+import { Controller, useFormContext } from "react-hook-form"
+
+// Images
+import expandArrowSVG from "../../assets/expand-arrow.svg"
+import closedSVG from "../../assets/closed.svg"
+
+// Include in project
+import "./index.scss"
+import InputBase from "../input-base"
+import type { PropsInputDate } from "./index.type"
+import Menu from "../../menu"
+import Modal from "../../modal"
+import { createPortal } from "react-dom"
+
+// 2025-09-01
+const InputDate: React.FC<PropsInputDate> = ({
+  name,
+  label,
+  placeholder,
+  disabled = false,
+  require = false,
+  fullWidth = false,
+  isHideClearIcon = true,
+  minYear,
+  maxYear,
+}) => {
+  const { control } = useFormContext()
+
+  const [showDay, setShowDay] = useState(getDateNow())
+  const [isOpenModal, setIsOpenModal] = useState(false)
+
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+    return () => setMounted(false)
+  }, [])
+
+  const yearOption = generateYearOptions(minYear, maxYear)
+  const monthOption = generateMonthOptions()
+
+  const portalRoot =
+    (document.getElementById("root") as HTMLElement) ||
+    (document.getElementById("__next") as HTMLElement) ||
+    document.body
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) => {
+        const value: string = field.value || ""
+        const { onChange } = field
+        const { invalid, error } = fieldState
+
+        // sync showDay เมื่อเปิด modal หรือค่าเปลี่ยน
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+          if (!isOpenModal) return
+          setShowDay(value || getDateNow())
+        }, [isOpenModal])
+
+        function CalendarRow({ year, month }: { year: number; month: string }) {
+          const days = getDaysInMonthWithWeekday(year, month)
+
+          const mapToThaiWeek = (dayIndex: number) => dayIndex % 7
+          const firstDayThaiIndex = mapToThaiWeek(new Date(`${year}-${month}-01`).getDay())
+          const emptyStartDays = Array(firstDayThaiIndex).fill(null)
+
+          const allDays = [...emptyStartDays, ...days.map((d) => d.date.split("-")[2])]
+
+          while (allDays.length < 42) allDays.push(null)
+
+          const weeks: Array<Array<string | null>> = []
+          for (let i = 0; i < allDays.length; i += 7) weeks.push(allDays.slice(i, i + 7))
+
+          return (
+            <>
+              {weeks.map((week, rowIndex) => (
+                <div key={rowIndex} className="DBui-inputDateRowDay">
+                  {week.map((day, i) => (
+                    <p
+                      key={i}
+                      className="DBui-inputDateDay"
+                      onClick={() => {
+                        if (!day) return
+                        const next = `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
+                        onChange(next)
+                        setIsOpenModal(false)
+                      }}
+                      data-checked={
+                        `${getYearInDateString(value || showDay)}-${getMonthInDateString(value || showDay)}-${getDayInDateString(
+                          value || showDay,
+                        )}` === `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
+                      }
+                      data-hidden-hover={!day}
+                    >
+                      {day || ""}
+                    </p>
+                  ))}
+                </div>
+              ))}
+            </>
+          )
+        }
+
+        const handleClear = (e: React.MouseEvent<HTMLImageElement>) => {
+          e.stopPropagation()
+          onChange("")
+        }
+
+        return (
+          <InputBase
+            name={name}
+            label={label}
+            require={require}
+            fullWidth={fullWidth}
+            isInvalid={invalid}
+            errorMessage={error?.message}
+          >
+            <>
+              <div
+                className="DBui-inputDate"
+                onClick={() => (disabled ? null : setIsOpenModal(true))}
+                data-invalid={invalid}
+                data-disabled={disabled}
+              >
+                <p>{value ? value : placeholder}</p>
+
+                <img
+                  src={closedSVG}
+                  className="DBui-clearIconInputDate"
+                  onClick={handleClear}
+                  data-hidden={value === "" || disabled || isHideClearIcon}
+                />
+              </div>
+
+              {mounted &&
+                createPortal(
+                  <Modal id="modalInputDate" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
+                    <div className="DBui-inputDateWrapperCalendar">
+                      <div className="DBui-inputDateRowMonthYear">
+                        <img
+                          src={expandArrowSVG}
+                          className="DBui-inputDateRowMonthYearSelected"
+                          style={{ transform: "rotate(90deg)" }}
+                          onClick={() => {
+                            setShowDay(
+                              updateMonthInDateString(
+                                showDay,
+                                String(Number(showDay.split("-")[1]) - 1).padStart(2, "0"),
+                              ),
+                            )
+                          }}
+                        />
+
+                        <Menu
+                          isInModal
+                          trigger={() => <h4 className="DBui-inputDateRowMonthYearSelected">{showDay.slice(0, 4)}</h4>}
+                        >
+                          {({ close }) =>
+                            yearOption.map((y, index) => (
+                              <p
+                                key={index}
+                                className="DBui-inputDateRowMonthYearOption"
+                                onClick={() => {
+                                  setShowDay(updateYearInDateString(showDay, y.value))
+                                  close()
+                                }}
+                                data-checked={getYearInDateString(showDay) === y.value}
+                              >
+                                {y.label}
+                              </p>
+                            ))
+                          }
+                        </Menu>
+
+                        <Menu
+                          isInModal
+                          trigger={() => (
+                            <h4 className="DBui-inputDateRowMonthYearSelected" style={{ width: "7rem" }}>
+                              {monthOption.find((e) => e.value === showDay.slice(5, 7))?.label}
+                            </h4>
+                          )}
+                        >
+                          {({ close }) =>
+                            monthOption.map((m, index) => (
+                              <p
+                                key={index}
+                                className="DBui-inputDateRowMonthYearOption"
+                                onClick={() => {
+                                  setShowDay(updateMonthInDateString(showDay, m.value))
+                                  close()
+                                }}
+                                data-checked={getMonthInDateString(showDay) === m.value}
+                              >
+                                {m.label}
+                              </p>
+                            ))
+                          }
+                        </Menu>
+
+                        <img
+                          src={expandArrowSVG}
+                          className="DBui-inputDateRowMonthYearSelected"
+                          style={{ transform: "rotate(-90deg)" }}
+                          onClick={() => {
+                            setShowDay(
+                              updateMonthInDateString(
+                                showDay,
+                                String(Number(showDay.split("-")[1]) + 1).padStart(2, "0"),
+                              ),
+                            )
+                          }}
+                        />
+                      </div>
+
+                      <div>
+                        <div className="DBui-inputDateRowHeaderDay">
+                          <p className="DBui-inputDateHeader">Sun</p>
+                          <p className="DBui-inputDateHeader">Mon</p>
+                          <p className="DBui-inputDateHeader">Tue</p>
+                          <p className="DBui-inputDateHeader">Wed</p>
+                          <p className="DBui-inputDateHeader">Thu</p>
+                          <p className="DBui-inputDateHeader">Fri</p>
+                          <p className="DBui-inputDateHeader">Sat</p>
+                        </div>
+
+                        <CalendarRow year={getYearInDateString(showDay)} month={getMonthInDateString(showDay)} />
+                      </div>
+                    </div>
+                  </Modal>,
+                  portalRoot,
+                )}
+              {!mounted && (
+                <Modal id="modalInputDate" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
+                  <div className="DBui-inputDateWrapperCalendar"></div>
+                </Modal>
+              )}
+            </>
+          </InputBase>
+        )
+      }}
+    />
+  )
+}
+
+export default InputDate
+
+export function generateYearOptions(minYear?: number, maxYear?: number): { label: string; value: number }[] {
+  const currentYear = new Date().getFullYear()
+
+  // Default values ถ้าไม่ส่งมา
+  const finalMax = maxYear ?? currentYear
+  const finalMin = minYear ?? currentYear - 100
+
+  const years = []
+
+  // ไล่ปีแบบมาก -> น้อย
+  for (let year = finalMax; year >= finalMin; year--) {
+    years.push({ label: String(year), value: year })
+  }
+
+  return years
+}
+
+export function generateMonthOptions(): { label: string; value: string }[] {
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ]
+
+  return monthNames.map((name, index) => ({
+    label: name,
+    value: String(index + 1).padStart(2, "0"),
+  }))
+}
+
+export function updateYearInDateString(dateStr: string, newYear: number): string {
+  const newDateStr = dateStr ? dateStr : new Date().toISOString().split("T")[0]
+  const [, month, day] = newDateStr.split("-")
+
+  return `${newYear}-${month}-${day}`
+}
+
+export function updateMonthInDateString(dateStr: string, newMonth: string): string {
+  const newDateStr = dateStr || new Date().toISOString().split("T")[0]
+  const [yearStr, , dayStr] = newDateStr.split("-")
+
+  let year = parseInt(yearStr, 10)
+  let month = parseInt(newMonth, 10)
+
+  // Handle overflow/underflow
+  year += Math.floor((month - 1) / 12)
+  month = ((((month - 1) % 12) + 12) % 12) + 1 // Wrap to 1–12
+
+  const monthStr = String(month).padStart(2, "0")
+  return `${year}-${monthStr}-${dayStr}`
+}
+
+export function getYearInDateString(dateStr: string): number {
+  const [year] = dateStr.split("-")
+  return Number(year)
+}
+
+export function getMonthInDateString(dateStr: string): string {
+  const [, month] = dateStr.split("-")
+  return month
+}
+
+export function getDayInDateString(dateStr: string): string {
+  const [, , day] = dateStr.split("-")
+  return day
+}
+
+export function getDaysInMonthWithWeekday(year: number, month: string): { date: string; weekday: string }[] {
+  const days: { date: string; weekday: string }[] = []
+  const monthIndex = parseInt(month, 10) - 1 // JavaScript months are 0-based
+
+  const date = new Date(year, monthIndex, 1)
+  const weekdayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+
+  while (date.getMonth() === monthIndex) {
+    const day = String(date.getDate()).padStart(2, "0")
+    const weekday = weekdayNames[date.getDay()]
+    const formattedDate = `${year}-${month}-${day}`
+
+    days.push({ date: formattedDate, weekday })
+    date.setDate(date.getDate() + 1)
+  }
+
+  return days
+}
+
+export function getDateNow(): string {
+  const dateNow = new Date()
+
+  const year = dateNow.getFullYear()
+  const month = `${dateNow.getMonth() + 1}`.padStart(2, "0")
+  const date = `${dateNow.getDate()}`.padStart(2, "0")
+  return `${year}-${month}-${date}`
+}

package/src/components/input/input-date/index.type.tsx

@@ -0,0 +1,11 @@
+export type PropsInputDate = {
+  name: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  require?: boolean
+  fullWidth?: boolean
+  isHideClearIcon?: boolean
+  minYear?: number
+  maxYear?: number
+}

package/src/components/input/input-date-range/index.tsx

@@ -0,0 +1,284 @@
+// Lib
+import React, { useEffect, useState } from "react"
+import { Controller, useFormContext } from "react-hook-form"
+
+// Images
+import expandArrowSVG from "../../assets/expand-arrow.svg"
+import closedSVG from "../../assets/closed.svg"
+
+// Include in project
+import "./index.scss"
+import InputBase from "../input-base"
+import type { PropsInputDateRange } from "./index.type"
+import Menu from "../../menu"
+import Modal from "../../modal"
+import { createPortal } from "react-dom"
+import {
+  generateMonthOptions,
+  generateYearOptions,
+  getDateNow,
+  getDaysInMonthWithWeekday,
+  getMonthInDateString,
+  getYearInDateString,
+  updateMonthInDateString,
+  updateYearInDateString,
+} from "../input-date"
+
+const InputDateRange: React.FC<PropsInputDateRange> = ({
+  name,
+  label,
+  placeholder,
+  disabled = false,
+  require = false,
+  fullWidth = false,
+  isHideClearIcon = true,
+  maxYear,
+  minYear,
+}) => {
+  const { control } = useFormContext()
+
+  const [showDay, setShowDay] = useState<string>(getDateNow())
+  const [isOpenModal, setIsOpenModal] = useState(false)
+
+  const yearOption = generateYearOptions(minYear, maxYear)
+  const monthOption = generateMonthOptions()
+
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+    return () => setMounted(false)
+  }, [])
+
+  const portalRoot =
+    (document.getElementById("root") as HTMLElement) ||
+    (document.getElementById("__next") as HTMLElement) ||
+    document.body
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) => {
+        const value: [string, string] = field.value ?? ["", ""]
+        const [startDate, endDate] = value
+        const { onChange } = field
+        const { invalid, error } = fieldState
+
+        // sync เดือนที่โชว์ตอนเปิด modal
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+          if (isOpenModal) {
+            setShowDay(startDate || getDateNow())
+          }
+        }, [isOpenModal])
+
+        function CalendarRow({ year, month }: { year: number; month: string }) {
+          const days = getDaysInMonthWithWeekday(year, month)
+
+          const mapToThaiWeek = (dayIndex: number) => dayIndex % 7
+          const firstDayThaiIndex = mapToThaiWeek(new Date(`${year}-${month}-01`).getDay())
+          const emptyStartDays = Array(firstDayThaiIndex).fill(null)
+
+          const allDays = [...emptyStartDays, ...days.map((d) => d.date.split("-")[2])]
+          while (allDays.length < 42) allDays.push(null)
+
+          const weeks: Array<Array<string | null>> = []
+          for (let i = 0; i < allDays.length; i += 7) weeks.push(allDays.slice(i, i + 7))
+
+          return (
+            <>
+              {weeks.map((week, rowIndex) => (
+                <div key={rowIndex} className="DBui-inputDateRangeRowDay">
+                  {week.map((day, i) => {
+                    if (!day) {
+                      return (
+                        <p key={i} className="DBui-inputDateRangeDay" data-hidden-hover>
+                          {" "}
+                        </p>
+                      )
+                    }
+
+                    const targetDate = `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
+
+                    const isChecked =
+                      startDate && !endDate
+                        ? targetDate === startDate
+                        : startDate && endDate
+                          ? targetDate >= startDate && targetDate <= endDate
+                          : false
+
+                    return (
+                      <p
+                        key={i}
+                        className="DBui-inputDateRangeDay"
+                        data-checked={isChecked}
+                        onClick={() => {
+                          if (!startDate) {
+                            onChange([targetDate, ""])
+                          } else if (startDate && !endDate) {
+                            if (targetDate >= startDate) {
+                              onChange([startDate, targetDate])
+                              setIsOpenModal(false)
+                            } else {
+                              onChange([targetDate, ""])
+                            }
+                          } else {
+                            onChange([targetDate, ""])
+                          }
+                        }}
+                      >
+                        {day}
+                      </p>
+                    )
+                  })}
+                </div>
+              ))}
+            </>
+          )
+        }
+
+        const handleClear = (e: React.MouseEvent<HTMLImageElement>) => {
+          e.stopPropagation()
+          onChange(["", ""])
+        }
+
+        return (
+          <InputBase
+            name={name}
+            label={label}
+            require={require}
+            fullWidth={fullWidth}
+            isInvalid={invalid}
+            errorMessage={error?.message}
+          >
+            <>
+              <div
+                className="DBui-inputDateRange"
+                onClick={() => (disabled ? null : setIsOpenModal(true))}
+                data-invalid={invalid}
+                data-disabled={disabled}
+              >
+                <p>{startDate ? `${startDate}${endDate ? ` to ${endDate}` : ""}` : placeholder}</p>
+
+                <img
+                  src={closedSVG}
+                  className="DBui-clearIconInputDateRange"
+                  onClick={handleClear}
+                  data-hidden={(startDate === "" && endDate === "") || disabled || isHideClearIcon}
+                />
+              </div>
+
+              {mounted &&
+                createPortal(
+                  <Modal id="modalInputDateRange" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
+                    <div className="DBui-inputDateRangeWrapperCalendar">
+                      <div className="DBui-inputDateRangeRowMonthYear">
+                        <img
+                          src={expandArrowSVG}
+                          className="DBui-inputDateRangeRowMonthYearSelected"
+                          style={{ transform: "rotate(90deg)" }}
+                          onClick={() => {
+                            setShowDay(
+                              updateMonthInDateString(
+                                showDay,
+                                String(Number(showDay.split("-")[1]) - 1).padStart(2, "0"),
+                              ),
+                            )
+                          }}
+                        />
+
+                        <Menu
+                          isInModal
+                          trigger={() => (
+                            <h4 className="DBui-inputDateRangeRowMonthYearSelected">{showDay.slice(0, 4)}</h4>
+                          )}
+                        >
+                          {({ close }) =>
+                            yearOption.map((y, index) => (
+                              <p
+                                key={index}
+                                className="DBui-inputDateRangeRowMonthYearOption"
+                                onClick={() => {
+                                  setShowDay(updateYearInDateString(showDay, y.value))
+                                  close()
+                                }}
+                                data-checked={getYearInDateString(showDay) === y.value}
+                              >
+                                {y.label}
+                              </p>
+                            ))
+                          }
+                        </Menu>
+
+                        <Menu
+                          isInModal
+                          trigger={() => (
+                            <h4 className="DBui-inputDateRangeRowMonthYearSelected" style={{ width: "7rem" }}>
+                              {monthOption.find((m) => m.value === showDay.slice(5, 7))?.label}
+                            </h4>
+                          )}
+                        >
+                          {({ close }) =>
+                            monthOption.map((m, index) => (
+                              <p
+                                key={index}
+                                className="DBui-inputDateRangeRowMonthYearOption"
+                                onClick={() => {
+                                  setShowDay(updateMonthInDateString(showDay, m.value))
+                                  close()
+                                }}
+                                data-checked={getMonthInDateString(showDay) === m.value}
+                              >
+                                {m.label}
+                              </p>
+                            ))
+                          }
+                        </Menu>
+
+                        <img
+                          src={expandArrowSVG}
+                          className="DBui-inputDateRangeRowMonthYearSelected"
+                          style={{ transform: "rotate(-90deg)" }}
+                          onClick={() => {
+                            setShowDay(
+                              updateMonthInDateString(
+                                showDay,
+                                String(Number(showDay.split("-")[1]) + 1).padStart(2, "0"),
+                              ),
+                            )
+                          }}
+                        />
+                      </div>
+
+                      <div>
+                        <div className="DBui-inputDateRangeRowHeaderDay">
+                          <p className="DBui-inputDateRangeHeader">Sun</p>
+                          <p className="DBui-inputDateRangeHeader">Mon</p>
+                          <p className="DBui-inputDateRangeHeader">Tue</p>
+                          <p className="DBui-inputDateRangeHeader">Wed</p>
+                          <p className="DBui-inputDateRangeHeader">Thu</p>
+                          <p className="DBui-inputDateRangeHeader">Fri</p>
+                          <p className="DBui-inputDateRangeHeader">Sat</p>
+                        </div>
+
+                        <CalendarRow year={getYearInDateString(showDay)} month={getMonthInDateString(showDay)} />
+                      </div>
+                    </div>
+                  </Modal>,
+                  portalRoot,
+                )}
+
+              {!mounted && (
+                <Modal id="modalInputDateRange" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
+                  <div className="DBui-inputDateRangeWrapperCalendar" />
+                </Modal>
+              )}
+            </>
+          </InputBase>
+        )
+      }}
+    />
+  )
+}
+
+export default InputDateRange

package/src/components/input/input-date-range/index.type.tsx

@@ -0,0 +1,11 @@
+export type PropsInputDateRange = {
+  name: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  require?: boolean
+  fullWidth?: boolean
+  isHideClearIcon?: boolean
+  minYear?: number
+  maxYear?: number
+}