chore: fix ci

kufu · Jan 29, 2025 · 8a18400 · 8a18400
1 parent 46cea3f
commit 8a18400
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/packages/smarthr-ui/src/components/Calendar/Calendar.tsx b/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
@@ -60,7 +60,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
       }
     }, [className])
 
-    const froms = useMemo(() => {
+    const formattedFrom = useMemo(() => {
       const day = dayjs(getFromDate(from))
 
       return {
@@ -69,7 +69,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
         year: day.year(),
       }
     }, [from])
-    const tos = useMemo(() => {
+    const formattedTo = useMemo(() => {
       const day = dayjs(getToDate(to))
 
       return {
@@ -80,8 +80,8 @@ export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
     }, [to])
 
     const isValidValue = useMemo(
-      () => value && isBetween(value, froms.date, tos.date),
-      [value, froms.date, tos.date],
+      () => value && isBetween(value, formattedFrom.date, formattedTo.date),
+      [value, formattedFrom.date, formattedTo.date],
     )
 
     const [currentMonth, setCurrentMonth] = useState(
@@ -92,7 +92,11 @@ export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
 
         const today = dayjs()
 
-        return tos.day.isBefore(today) ? tos.day : froms.day.isAfter(today) ? froms.day : today
+        return formattedTo.day.isBefore(today)
+          ? formattedTo.day
+          : formattedFrom.day.isAfter(today)
+            ? formattedFrom.day
+            : today
       })(),
     )
     const [isSelectingYear, setIsSelectingYear] = useState(false)
@@ -142,25 +146,25 @@ export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
           <MonthDirectionCluster
             isSelectingYear={isSelectingYear}
             directionMonth={calculatedCurrentMonth}
-            from={froms.day}
-            to={tos.day}
+            from={formattedFrom.day}
+            to={formattedTo.day}
             setCurrentMonth={setCurrentMonth}
             className={styles.monthButtons}
           />
         </header>
         <div className={styles.tableLayout}>
           <YearPicker
-            fromYear={froms.year}
-            toYear={tos.year}
+            fromYear={formattedFrom.year}
+            toYear={formattedTo.year}
             selectedYear={value?.getFullYear()}
             onSelectYear={onSelectYear}
             isDisplayed={isSelectingYear}
             id={yearPickerId}
           />
           <CalendarTable
             current={calculatedCurrentMonth.date}
-            from={froms.date}
-            to={tos.date}
+            from={formattedFrom.date}
+            to={formattedTo.date}
             onSelectDate={onSelectDate}
             selected={isValidValue ? value : null}
           />

diff --git a/packages/smarthr-ui/src/components/Calendar/CalendarTable.tsx b/packages/smarthr-ui/src/components/Calendar/CalendarTable.tsx
@@ -83,7 +83,7 @@ export const CalendarTable: FC<Props & ElementProps> = ({
                 }
 
                 return (
-                  <SelectButtonTd
+                  <SelectTdButton
                     key={dateIndex}
                     date={date}
                     currentDay={currentDay}
@@ -118,7 +118,7 @@ const MemoizedThead = React.memo<{ thStyle: string }>(({ thStyle }) => (
 
 const NullTd = React.memo<{ className: string }>(({ className }) => <td className={className} />)
 
-const SelectButtonTd = React.memo<{
+const SelectTdButton = React.memo<{
   date: number
   currentDay: DayJsType
   selectedDayStr: string
@@ -131,7 +131,7 @@ const SelectButtonTd = React.memo<{
     cellButton: string
     dateCell: string
   }
-}>(({ date, currentDay, selectedDayStr, fromDate, toDate, nowDateStr, styles }) => {
+}>(({ date, currentDay, selectedDayStr, fromDate, toDate, nowDateStr, onClick, styles }) => {
   const target = useMemo(() => {
     const day = currentDay.date(date)
 

diff --git a/packages/smarthr-ui/src/components/Calendar/YearPicker.tsx b/packages/smarthr-ui/src/components/Calendar/YearPicker.tsx
@@ -1,17 +1,9 @@
-import React, {
-  ComponentProps,
-  FC,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react'
+import React, { ComponentProps, FC, RefObject, useEffect, useMemo, useRef } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { UnstyledButton } from '../Button'
 
-type Props = {
+type AbstractProps = {
   /** 選択された年 */
   selectedYear?: number
   /** 選択可能な開始年 */
@@ -25,12 +17,13 @@ type Props = {
   /** HTMLのid属性 */
   id: string
 }
-type ElementProps = Omit<ComponentProps<'div'>, keyof Props>
+type ElementProps = Omit<ComponentProps<'div'>, keyof AbstractProps>
+type Props = AbstractProps & ElementProps
+type ActualProps = Omit<Props, 'isDisplayed'>
 
 const yearPicker = tv({
   slots: {
-    overlay:
-      'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white [[data-displayed="true"]>&]:shr-hidden',
+    overlay: 'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white',
     container:
       'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-overflow-y-auto shr-px-0.25 shr-py-0.5',
     yearButton:
@@ -43,12 +36,14 @@ const yearPicker = tv({
   },
 })
 
-export const YearPicker: FC<Props & ElementProps> = ({
+export const YearPicker: FC<Props & ElementProps> = ({ isDisplayed, ...rest }) =>
+  isDisplayed ? <ActualYearPicker {...rest} /> : null
+
+const ActualYearPicker: FC<ActualProps> = ({
   selectedYear,
   fromYear,
   toYear,
   onSelectYear,
-  isDisplayed,
   id,
   ...props
 }) => {
@@ -67,7 +62,7 @@ export const YearPicker: FC<Props & ElementProps> = ({
   const thisYear = useMemo(() => new Date().getFullYear(), [])
   const yearArray = useMemo(() => {
     const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)
-    let result: number[] = []
+    const result: number[] = []
 
     for (let i = 0; i < length; i++) {
       result[i] = fromYear + i
@@ -77,19 +72,20 @@ export const YearPicker: FC<Props & ElementProps> = ({
   }, [toYear, fromYear])
 
   useEffect(() => {
-    if (focusingRef.current && isDisplayed) {
+    if (focusingRef.current) {
       // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする
       // focusを当てたままでは違和感があるため、blurで解除している
       focusingRef.current.focus()
       focusingRef.current.blur()
     }
-  }, [isDisplayed])
+  }, [])
 
   return (
-    <div {...props} id={id} data-displayed={isDisplayed} className={styles.overlay}>
+    <div {...props} id={id} className={styles.overlay}>
       <div className={styles.container}>
         {yearArray.map((year) => (
           <YearButton
+            key={year}
             year={year}
             thisYear={thisYear}
             selected={selectedYear === year}