chore: Calendarの内部処理を整理する

packages/smarthr-ui/src/components/Calendar/Calendar.tsx

@@ -4,7 +4,9 @@ import dayjs from 'dayjs'
 import React, {
   ComponentProps,
   MouseEvent,
+  PropsWithChildren,
   forwardRef,
+  useCallback,
   useEffect,
   useId,
   useMemo,
@@ -13,13 +15,12 @@ import React, {
 import { tv } from 'tailwind-variants'
 
 import { Button } from '../Button'
-import { FaCaretDownIcon, FaCaretUpIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'
+import { FaCaretDownIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'
 import { Cluster } from '../Layout'
-import { Section } from '../SectioningContent'
 
 import { CalendarTable } from './CalendarTable'
 import { YearPicker } from './YearPicker'
-import { getFromDate, getToDate, isBetween, minDate } from './calendarHelper'
+import { getFromDate, getMonthArray, getToDate, isBetween, minDate } from './calendarHelper'
 
 type Props = {
   /** 選択可能な開始日 */
@@ -31,7 +32,8 @@ type Props = {
   /** 選択された日付 */
   value?: Date
 }
-type ElementProps = Omit<ComponentProps<'section'>, keyof Props>
+type ElementProps = Omit<ComponentProps<'div'>, keyof Props>
+type DayJsType = ReturnType<typeof dayjs>
 
 const calendar = tv({
   slots: {
@@ -41,108 +43,195 @@ const calendar = tv({
     yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',
     monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',
     tableLayout: 'shr-relative',
+    yearSelectButton:
+      'smarthr-ui-Calendar-selectingYear [&[aria-expanded="true"]_.smarthr-ui-Icon]:shr-rotate-180',
   },
 })
 
 export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
   ({ from = minDate, to, onSelectDate, value, className, ...props }, ref) => {
-    const { containerStyle, yearMonthStyle, headerStyle, monthButtonsStyle, tableLayoutStyle } =
-      useMemo(() => {
-        const { container, yearMonth, header, monthButtons, tableLayout } = calendar()
-        return {
-          containerStyle: container({ className }),
-          headerStyle: header(),
-          yearMonthStyle: yearMonth(),
-          monthButtonsStyle: monthButtons(),
-          tableLayoutStyle: tableLayout(),
+    const classNames = useMemo(() => {
+      const { container, yearMonth, header, monthButtons, tableLayout, yearSelectButton } =
+        calendar()
+
+      return {
+        container: container({ className }),
+        header: header(),
+        yearMonth: yearMonth(),
+        monthButtons: monthButtons(),
+        tableLayout: tableLayout(),
+        yearSelectButton: yearSelectButton(),
+      }
+    }, [className])
+
+    const formattedFrom = useMemo(() => {
+      const date = getFromDate(from)
+      const day = dayjs(date)
+
+      return {
+        day,
+        date,
+        year: day.year(),
+      }
+    }, [from])
+    const formattedTo = useMemo(() => {
+      const date = getToDate(to)
+      const day = dayjs(date)
+
+      return {
+        day,
+        date,
+        year: day.year(),
+      }
+    }, [to])
+
+    const isValidValue = useMemo(
+      () => value && isBetween(value, formattedFrom.date, formattedTo.date),
+      [value, formattedFrom.date, formattedTo.date],
+    )
+
+    const [currentMonth, setCurrentMonth] = useState(
+      (() => {
+        if (isValidValue) {
+          return dayjs(value)
         }
-      }, [className])
-    const fromDate = dayjs(getFromDate(from))
-    const toDate = dayjs(getToDate(to))
-    const today = dayjs()
-    const currentDay = toDate.isBefore(today) ? toDate : fromDate.isAfter(today) ? fromDate : today
-    const isValidValue = value && isBetween(value, fromDate.toDate(), toDate.toDate())
-
-    const [currentMonth, setCurrentMonth] = useState(isValidValue ? dayjs(value) : currentDay)
+
+        const today = dayjs()
+
+        return formattedTo.day.isBefore(today)
+          ? formattedTo.day
+          : formattedFrom.day.isAfter(today)
+            ? formattedFrom.day
+            : today
+      })(),
+    )
     const [isSelectingYear, setIsSelectingYear] = useState(false)
 
     const yearPickerId = useId()
 
     useEffect(() => {
-      if (value && isValidValue) {
+      if (isValidValue) {
         setCurrentMonth(dayjs(value))
       }
     }, [value, isValidValue])
 
-    const prevMonth = currentMonth.subtract(1, 'month')
-    const nextMonth = currentMonth.add(1, 'month')
+    const calculatedCurrentMonth = useMemo(
+      () => ({
+        prev: currentMonth.subtract(1, 'month'),
+        next: currentMonth.add(1, 'month'),
+        day: currentMonth,
+        months: getMonthArray(currentMonth.toDate()),
+        yearMonthStr: `${currentMonth.year()}年${currentMonth.month() + 1}月`,
+        selectedStr: currentMonth.toString(),
+      }),
+      [currentMonth],
+    )
+
+    const onSelectYear = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        setCurrentMonth(currentMonth.year(parseInt(e.currentTarget.value, 10)))
+        setIsSelectingYear(false)
+      },
+      [currentMonth],
+    )
+
+    const onClickSelectYear = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      setIsSelectingYear((current) => !current)
+    }, [])
 
     return (
-      // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-      <Section {...props} ref={ref} className={containerStyle}>
-        <header className={headerStyle}>
-          <div className={yearMonthStyle}>
-            {currentMonth.year()}年{currentMonth.month() + 1}月
-          </div>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation()
-              setIsSelectingYear(!isSelectingYear)
-            }}
-            size="s"
-            square
+      <div {...props} ref={ref} className={classNames.container}>
+        <header className={classNames.header}>
+          <YearMonthRender className={classNames.yearMonth}>
+            {calculatedCurrentMonth.yearMonthStr}
+          </YearMonthRender>
+          <YearSelectButton
             aria-expanded={isSelectingYear}
             aria-controls={yearPickerId}
-            className="smarthr-ui-Calendar-selectingYear"
-          >
-            {isSelectingYear ? (
-              <FaCaretUpIcon alt="年を選択する" />
-            ) : (
-              <FaCaretDownIcon alt="年を選択する" />
-            )}
-          </Button>
-          <Cluster gap={0.5} className={monthButtonsStyle}>
-            <Button
-              disabled={isSelectingYear || prevMonth.isBefore(fromDate, 'month')}
-              onClick={() => setCurrentMonth(prevMonth)}
-              size="s"
-              square
-              className="smarthr-ui-Calendar-monthButtonPrev"
-            >
-              <FaChevronLeftIcon alt="前の月へ" />
-            </Button>
-            <Button
-              disabled={isSelectingYear || nextMonth.isAfter(toDate, 'month')}
-              onClick={() => setCurrentMonth(nextMonth)}
-              size="s"
-              square
-              className="smarthr-ui-Calendar-monthButtonNext"
-            >
-              <FaChevronRightIcon alt="次の月へ" />
-            </Button>
-          </Cluster>
+            onClick={onClickSelectYear}
+            className={classNames.yearSelectButton}
+          />
+          <MonthDirectionCluster
+            isSelectingYear={isSelectingYear}
+            directionMonth={calculatedCurrentMonth}
+            from={formattedFrom.day}
+            to={formattedTo.day}
+            setCurrentMonth={setCurrentMonth}
+            className={classNames.monthButtons}
+          />
         </header>
-        <div className={tableLayoutStyle}>
+        <div className={classNames.tableLayout}>
           <YearPicker
-            fromYear={fromDate.year()}
-            toYear={toDate.year()}
+            fromYear={formattedFrom.year}
+            toYear={formattedTo.year}
             selectedYear={value?.getFullYear()}
-            onSelectYear={(year) => {
-              setCurrentMonth(currentMonth.year(year))
-              setIsSelectingYear(false)
-            }}
+            onSelectYear={onSelectYear}
             isDisplayed={isSelectingYear}
             id={yearPickerId}
           />
           <CalendarTable
-            current={currentMonth.toDate()}
-            from={fromDate.toDate()}
-            to={toDate.toDate()}
+            current={calculatedCurrentMonth}
+            from={formattedFrom.date}
+            to={formattedTo.date}
             onSelectDate={onSelectDate}
-            selected={isValidValue ? value : null}
+            selectedDayStr={isValidValue ? calculatedCurrentMonth.selectedStr : ''}
           />
         </div>
-      </Section>
+      </div>
     )
   },
 )
+
+const YearMonthRender = React.memo<PropsWithChildren<{ className: string }>>(
+  ({ children, className }) => <div className={className}>{children}</div>,
+)
+
+const YearSelectButton = React.memo<{
+  'aria-expanded': boolean
+  'aria-controls': string
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+  className: string
+}>((rest) => (
+  <Button {...rest} size="s" square>
+    <FaCaretDownIcon alt="年を選択する" />
+  </Button>
+))
+
+const MonthDirectionCluster = React.memo<{
+  isSelectingYear: boolean
+  directionMonth: {
+    prev: DayJsType
+    next: DayJsType
+  }
+  from: DayJsType
+  to: DayJsType
+  setCurrentMonth: (day: DayJsType) => void
+  className: string
+}>(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {
+  const onClickMonthPrev = useCallback(() => setCurrentMonth(prev), [prev, setCurrentMonth])
+  const onClickMonthNext = useCallback(() => setCurrentMonth(next), [next, setCurrentMonth])
+
+  return (
+    <Cluster gap={0.5} className={className}>
+      <Button
+        disabled={isSelectingYear || prev.isBefore(from, 'month')}
+        onClick={onClickMonthPrev}
+        size="s"
+        square
+        className="smarthr-ui-Calendar-monthButtonPrev"
+      >
+        <FaChevronLeftIcon alt="前の月へ" />
+      </Button>
+      <Button
+        disabled={isSelectingYear || next.isAfter(to, 'month')}
+        onClick={onClickMonthNext}
+        size="s"
+        square
+        className="smarthr-ui-Calendar-monthButtonNext"
+      >
+        <FaChevronRightIcon alt="次の月へ" />
+      </Button>
+    </Cluster>
+  )
+})