@datability/8ui 1.0.0 → 1.1.0

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
+}

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

@@ -0,0 +1,179 @@
+@import '../extend.scss';
+
+.DBui-inputDateTime {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDateTime {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateTimeWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  padding: 3em 1em;
+  gap: 0.8em;
+
+  @media (max-width: 425px) {
+    padding: 2.5em 0;
+    width: 99vw;
+  }
+
+  .DBui-inputDateTimeWrapperYearMonthDayTime {
+    display: flex;
+    flex-direction: row;
+    gap: 0.3em;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 425px) {
+      gap: 0.2em;
+    }
+
+    .DBui-inputDateTimeWrapperYearMonthDay {
+      display: flex;
+      flex-direction: column;
+      gap: 0.3em;
+      justify-content: center;
+      align-items: center;
+      border-right: 1px solid gray;
+      padding-right: 0.5em;
+
+
+      .DBui-inputDateTimeRowMonthYear,
+      .DBui-inputDateTimeRowHeaderDay,
+      .DBui-inputDateTimeRowDay {
+        display: flex;
+        flex-direction: row;
+        gap: 0.8em;
+
+        @media (max-width: 425px) {
+          gap: 0.2em;
+        }
+      }
+
+      .DBui-inputDateTimeRowMonthYear {
+        gap: 0.5em;
+        margin-left: 0.5em;
+        align-items: center;
+      }
+
+      .DBui-inputDateTimeRowHeaderDay,
+      .DBui-inputDateTimeRowDay {
+
+        .DBui-inputDateTimeHeader,
+        .DBui-inputDateTimeDay {
+          width: 30px;
+          height: 30px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .DBui-inputDateTimeDay {
+
+          cursor: not-allowed;
+
+          &[data-hidden-hover='false'] {
+            cursor: pointer;
+
+            &:hover {
+              background-color: #03287E;
+              border-radius: 100%;
+              color: #FFFFFF;
+            }
+          }
+
+          &[data-checked='true'] {
+            background-color: #03287E;
+            color: #FFFFFF;
+            border-radius: 100%;
+          }
+        }
+      }
+    }
+
+    .DBui-inputDateTimeWrapperHourMin {
+      padding: 0 0.3em;
+      align-self: flex-end;
+      flex-direction: column;
+      display: flex;
+
+      @media (max-width: 425px) {
+        padding: 0 0.2em;
+      }
+
+      .DBui-inputDateTimeWrapperHourMinOptions {
+        max-height: 200px;
+        overflow-y: scroll;
+        -ms-overflow-style: none;
+        /* IE and Edge */
+        scrollbar-width: none;
+        /* Firefox */
+
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        p {
+          padding: 0.5em;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #03287E;
+            color: #FFFFFF;
+          }
+
+          &[data-checked='true'] {
+            background-color: #03287E;
+            color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+
+  .DBui-inputDateTimeWrapperButton {
+    display: flex;
+    gap: 0.5em;
+    justify-content: flex-end;
+  }
+}
+
+.DBui-inputDateTimeRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateTimeRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}