import React , { useContext } from 'react' ; import getWeeksInMonth from 'date-fns/getWeeksInMonth' ; import eachWeekOfInterval from 'date-fns/eachWeekOfInterval' ; import add from 'date-fns/add' ; import endOfMonth from 'date-fns/endOfMonth' ; import startOfMonth from 'date-fns/startOfMonth' ; import { DatePickerContext } from '../../context/DatePickerContext' ; import { Head } from '../head' ; import { MonthNavigation } from '../monthNavigation' ; import { WeekRow } from '../weekRow' ; import styles from '../datePicker/DatePicker.module.scss' ; export type MonthTableProps = { month : Date ; } ; const getCalendarWeeks = ( month , locale ) : Date [ ] => { const start = startOfMonth ( month ) ; const end = endOfMonth ( month ) ; const monthCalendarWeeks = getWeeksInMonth ( month , { weekStartsOn : 1 } ) ; const maxAmountOfCalendarWeeks = 6 ; const weeksEnd = monthCalendarWeeks === maxAmountOfCalendarWeeks ? end : add ( end , { weeks : maxAmountOfCalendarWeeks - monthCalendarWeeks } ) ; const weeksInterval = { start , end : weeksEnd } ; return eachWeekOfInterval ( weeksInterval , { locale } ) ; } ; export const MonthTable = ( props ) => { const { locale } = useContext ( DatePickerContext ) ; const { month } = props ; const weeks = getCalendarWeeks ( month , locale ) ; return ( < div > < MonthNavigation month = { month } / > < table className = { styles [ 'hds-datepicker__month-table' ] } > < Head locale = { locale } /> < tbody > { weeks . map ( ( week ) => ( < WeekRow key = { week . toString ( ) } week = { week } / > ) ) } < /tbody> < /table> < /div>); } ;