import React , { useEffect } from 'react' ; import { isSameDay } from 'date-fns' ; import { ButtonProps } from 'components/Button' ; import { useDayPicker } from 'contexts/DayPicker' ; import { useFocusContext } from 'contexts/Focus' ; import { useActiveModifiers } from 'hooks/useActiveModifiers' ; import { DayEventHandlers , useDayEventHandlers } from 'hooks/useDayEventHandlers' ; import { SelectedDays , useSelectedDays } from 'hooks/useSelectedDays' ; import { ActiveModifiers } from 'types/Modifiers' ; import { StyledComponent } from 'types/Styles' ; import { getDayClassNames } from './utils/getDayClassNames' ; import { getDayStyle } from './utils/getDayStyle' ; export type DayRender = { /** Whether the day should be rendered a `button` instead of a `div` */ isButton : boolean ; /** Whether the day should be hidden. */ isHidden : boolean ; /** The modifiers active for the given day. */ activeModifiers : ActiveModifiers ; /** The props to apply to the button element (when `isButton` is true). */ buttonProps : StyledComponent & Pick < ButtonProps , 'disabled' | 'aria-pressed' | 'tabIndex' > & DayEventHandlers ; /** The props to apply to the div element (when `isButton` is false). */ divProps : StyledComponent ; selectedDays : SelectedDays ; } ; param day param displayMonth param buttonRef export function useDayRender ( day , displayMonth , buttonRef ) { const dayPicker = useDayPicker ( ) ; const focusContext = useFocusContext ( ) ; const activeModifiers = useActiveModifiers ( day , displayMonth ) ; const eventHandlers = useDayEventHandlers ( day , activeModifiers ) ; const selectedDays = useSelectedDays ( ) ; const isButton = Boolean ( dayPicker . mode || dayPicker . onDayClick ) ; useEffect ( ( ) => { if ( ! focusContext . focusedDay ) return ; if ( ! isButton ) return ; if ( isSameDay ( focusContext . focusedDay , day ) ) { buttonRef . current ?. focus ( ) ; } } , [ focusContext . focusedDay , day , buttonRef , isButton ] ) ; const className = getDayClassNames ( dayPicker , activeModifiers ) . join ( ' ' ) ; const style = getDayStyle ( dayPicker , activeModifiers ) ; const isHidden = Boolean ( ( activeModifiers . outside && ! dayPicker . showOutsideDays ) || activeModifiers . hidden ) ; const children = ( < dayPicker . components . DayContent date = { day } displayMonth = { displayMonth } activeModifiers = { activeModifiers } / > ) ; const divProps = { style , className , children } ; const isFocusTarget = Boolean ( focusContext . focusTarget && isSameDay ( focusContext . focusTarget , day ) ) ; const buttonProps = { ... divProps , disabled : activeModifiers . disabled , [ 'aria-pressed' ] : activeModifiers . selected , tabIndex : isFocusTarget ? 0 : - 1 , ... eventHandlers } ; const dayRender = { isButton , isHidden , activeModifiers : activeModifiers , selectedDays , buttonProps , divProps } ; return dayRender ; }