@datability/8ui 1.1.0 → 1.1.2

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

@@ -1,11 +0,0 @@
-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

@@ -1,284 +0,0 @@
-// 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

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

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

@@ -1,367 +0,0 @@
-// Lib
-import React, { useEffect, useRef, 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 { PropsInputDateTime } from "./index.type"
-import Menu from "../../menu"
-import Modal from "../../modal"
-import Button from "../../button"
-import { createPortal } from "react-dom"
-import {
-  generateMonthOptions,
-  generateYearOptions,
-  getDateNow,
-  getDayInDateString,
-  getDaysInMonthWithWeekday,
-  getMonthInDateString,
-  getYearInDateString,
-  updateMonthInDateString,
-  updateYearInDateString,
-} from "../input-date"
-
-const InputDateTime: React.FC<PropsInputDateTime> = ({
-  name,
-  label,
-  placeholder,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-  isHideClearIcon = true,
-  maxYear,
-  minYear,
-}) => {
-  const { control } = useFormContext()
-
-  const hourWrapperRef = useRef<HTMLDivElement>(null)
-  const minWrapperRef = useRef<HTMLDivElement>(null)
-
-  const [isOpenModal, setIsOpenModal] = useState(false)
-
-  const [showDay, setShowDay] = useState(getDateNow())
-  const [selectedDay, setSelectedDay] = useState(getDateNow())
-  const [selectedHour, setSelectedHour] = useState("00")
-  const [selectedMin, setSelectedMin] = useState("00")
-
-  const yearOption = generateYearOptions(minYear, maxYear)
-  const monthOption = generateMonthOptions()
-  const hourOption = generateHourOptions()
-  const minOption = generateMinuteOptions()
-
-  useEffect(() => {
-    function scrollToChecked(wrapper: HTMLDivElement | null) {
-      if (!wrapper) return
-      const checkedEl = wrapper.querySelector('[data-checked="true"]') as HTMLElement
-      checkedEl?.scrollIntoView({ behavior: "smooth", block: "center" })
-    }
-    scrollToChecked(hourWrapperRef.current)
-    scrollToChecked(minWrapperRef.current)
-  }, [selectedHour, selectedMin])
-
-  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-inputDateTimeRowDay">
-            {week.map((day, i) => (
-              <p
-                key={i}
-                className="DBui-inputDateTimeDay"
-                onClick={() => {
-                  if (day) {
-                    setSelectedDay(`${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`)
-                  }
-                }}
-                data-checked={
-                  `${getYearInDateString(selectedDay)}-${getMonthInDateString(selectedDay)}-${
-                    getDayInDateString(selectedDay).split("T")[0]
-                  }` === `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
-                }
-                data-hidden-hover={!day}
-              >
-                {day || ""}
-              </p>
-            ))}
-          </div>
-        ))}
-      </>
-    )
-  }
-
-  const readingValue = (dateString: string) => {
-    const [date, time] = dateString.split("T")
-    return `${date} ${time}`
-  }
-
-  const portalRoot =
-    (document.getElementById("root") as HTMLElement) ||
-    (document.getElementById("__next") as HTMLElement) ||
-    document.body
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState }) => {
-        const realValue: string = field.value || ""
-        const isInvalid = fieldState.invalid
-        const errorMessage = fieldState.error?.message
-        const setValue = field.onChange
-
-        // ✅ sync RHF value -> local state (เหมือน useEffect [realValue] ของ Formik)
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-          if (!realValue) {
-            const now = getDateNow()
-            setShowDay(now)
-            setSelectedDay(now)
-            setSelectedHour("00")
-            setSelectedMin("00")
-            return
-          }
-
-          const [d, t] = realValue.split("T")
-          const [h, m] = t.split(":")
-
-          setShowDay(d)
-          setSelectedDay(d)
-          setSelectedHour(h || "00")
-          setSelectedMin(m || "00")
-        }, [realValue])
-
-        const handleClearState = (e: React.MouseEvent<HTMLImageElement>) => {
-          e.stopPropagation()
-          setValue("")
-        }
-
-        return (
-          <InputBase
-            name={name}
-            label={label}
-            require={require}
-            fullWidth={fullWidth}
-            isInvalid={isInvalid}
-            errorMessage={errorMessage}
-          >
-            <>
-              <div
-                className="DBui-inputDateTime"
-                onClick={() => (disabled ? null : setIsOpenModal(true))}
-                data-invalid={isInvalid}
-                data-disabled={disabled}
-              >
-                <p>{realValue ? readingValue(realValue) : placeholder}</p>
-                <img
-                  src={closedSVG}
-                  className="DBui-clearIconInputDateTime"
-                  onClick={handleClearState}
-                  data-hidden={realValue === "" || disabled || isHideClearIcon}
-                />
-              </div>
-
-              {createPortal(
-                <Modal id="modalInputDateTime" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
-                  <div className="DBui-inputDateTimeWrapperCalendar">
-                    <div className="DBui-inputDateTimeWrapperYearMonthDayTime">
-                      <div className="DBui-inputDateTimeWrapperYearMonthDay">
-                        <div className="DBui-inputDateTimeRowMonthYear">
-                          <img
-                            src={expandArrowSVG}
-                            className="DBui-inputDateTimeRowMonthYearSelected"
-                            style={{ transform: "rotate(90deg)" }}
-                            onClick={() => {
-                              setShowDay(
-                                updateMonthInDateString(
-                                  showDay,
-                                  String(Number(showDay.split("-")[1]) - 1).padStart(2, "0"),
-                                ),
-                              )
-                            }}
-                          />
-
-                          <Menu
-                            isInModal
-                            trigger={() => (
-                              <h4 className="DBui-inputDateTimeRowMonthYearSelected">{showDay.slice(0, 4)}</h4>
-                            )}
-                          >
-                            {({ close }) =>
-                              yearOption.map((data, index) => (
-                                <p
-                                  key={index}
-                                  className="DBui-inputDateTimeRowMonthYearOption"
-                                  onClick={() => {
-                                    setShowDay(updateYearInDateString(showDay, data.value))
-                                    close()
-                                  }}
-                                  data-checked={getYearInDateString(showDay) === data.value}
-                                >
-                                  {data.label}
-                                </p>
-                              ))
-                            }
-                          </Menu>
-
-                          <Menu
-                            isInModal
-                            trigger={() => (
-                              <h4 className="DBui-inputDateTimeRowMonthYearSelected" style={{ width: "7rem" }}>
-                                {monthOption.find((e) => e.value === showDay.slice(5, 7))?.label}
-                              </h4>
-                            )}
-                          >
-                            {({ close }) =>
-                              monthOption.map((data, index) => (
-                                <p
-                                  key={index}
-                                  className="DBui-inputDateTimeRowMonthYearOption"
-                                  onClick={() => {
-                                    setShowDay(updateMonthInDateString(showDay, data.value))
-                                    close()
-                                  }}
-                                  data-checked={getMonthInDateString(showDay) === data.value}
-                                >
-                                  {data.label}
-                                </p>
-                              ))
-                            }
-                          </Menu>
-
-                          <img
-                            src={expandArrowSVG}
-                            className="DBui-inputDateTimeRowMonthYearSelected"
-                            style={{ transform: "rotate(-90deg)" }}
-                            onClick={() => {
-                              setShowDay(
-                                updateMonthInDateString(
-                                  showDay,
-                                  String(Number(showDay.split("-")[1]) + 1).padStart(2, "0"),
-                                ),
-                              )
-                            }}
-                          />
-                        </div>
-
-                        <div>
-                          <div className="DBui-inputDateTimeRowHeaderDay">
-                            <p className="DBui-inputDateTimeHeader">Sun</p>
-                            <p className="DBui-inputDateTimeHeader">Mon</p>
-                            <p className="DBui-inputDateTimeHeader">Tue</p>
-                            <p className="DBui-inputDateTimeHeader">Wed</p>
-                            <p className="DBui-inputDateTimeHeader">Thu</p>
-                            <p className="DBui-inputDateTimeHeader">Fri</p>
-                            <p className="DBui-inputDateTimeHeader">Sat</p>
-                          </div>
-
-                          <CalendarRow year={getYearInDateString(showDay)} month={getMonthInDateString(showDay)} />
-                        </div>
-                      </div>
-
-                      <div className="DBui-inputDateTimeWrapperHourMin">
-                        <p style={{ textAlign: "center" }}>Hr</p>
-                        <div className="DBui-inputDateTimeWrapperHourMinOptions" ref={hourWrapperRef}>
-                          {hourOption.map((hour) => (
-                            <p
-                              key={hour.value}
-                              data-checked={selectedHour === hour.value}
-                              onClick={() => setSelectedHour(hour.value)}
-                            >
-                              {hour.value}
-                            </p>
-                          ))}
-                        </div>
-                      </div>
-
-                      <div className="DBui-inputDateTimeWrapperHourMin">
-                        <p style={{ textAlign: "center" }}>Min</p>
-                        <div className="DBui-inputDateTimeWrapperHourMinOptions" ref={minWrapperRef}>
-                          {minOption.map((min) => (
-                            <p
-                              key={min.value}
-                              data-checked={selectedMin === min.value}
-                              onClick={() => setSelectedMin(min.value)}
-                            >
-                              {min.value}
-                            </p>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="DBui-inputDateTimeWrapperButton">
-                      <Button
-                        type="button"
-                        onClick={() => {
-                          let hour = getHourNow()
-                          let min = getMinNow()
-                          if (selectedHour) hour = selectedHour
-                          if (selectedMin) min = selectedMin
-
-                          setValue(`${selectedDay}T${hour}:${min}`)
-                          setIsOpenModal(false)
-                        }}
-                        name="Save"
-                        className="DBui-inputDateTimeButtonSave"
-                      />
-                      <Button
-                        type="button"
-                        onClick={() => setIsOpenModal(false)}
-                        name="Cancle"
-                        className="DBui-inputDateTimeButtonCancle"
-                      />
-                    </div>
-                  </div>
-                </Modal>,
-                portalRoot,
-              )}
-            </>
-          </InputBase>
-        )
-      }}
-    />
-  )
-}
-
-export default InputDateTime
-
-function generateHourOptions(): { label: string; value: string }[] {
-  return Array.from({ length: 24 }, (_, i) => {
-    const value = String(i).padStart(2, "0")
-    return { label: value, value }
-  })
-}
-
-function generateMinuteOptions(): { label: string; value: string }[] {
-  return Array.from({ length: 60 }, (_, i) => {
-    const value = String(i).padStart(2, "0")
-    return { label: value, value }
-  })
-}
-
-function getHourNow(): string {
-  const dateNow = new Date()
-  return `${dateNow.getHours()}`.padStart(2, "0")
-}
-
-function getMinNow(): string {
-  const dateNow = new Date()
-  return `${dateNow.getMinutes()}`.padStart(2, "0")
-}

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

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