hernansartorio · nicolasmartinez0510 · Dec 7, 2021
diff --git a/src/Calendar.js b/src/Calendar.js
@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
 import { startOfMonth } from 'date-fns'
 import { isSelectable, mergeModifiers } from './utils'
 import useControllableState from './useControllableState'
 import CalendarNavigation from './CalendarNavigation'
 import CalendarWeekHeader from './CalendarWeekHeader'
 import CalendarGrid from './CalendarGrid'
+import Popover from './Popover'
+import MonthPicker from './MonthPicker'
 
 export default function Calendar({
   locale,
@@ -18,15 +20,20 @@ export default function Calendar({
   onDayHover,
   onDayClick,
   weekdayFormat,
-  touchDragEnabled
+  touchDragEnabled,
+  monthModifiers,
+  monthModifiersClassNames
 }) {
   const [month, setMonth] = useControllableState(receivedMonth, onMonthChange, startOfMonth(new Date()))
+  const [show, setShow] = useState(true)
 
   const modifiers = mergeModifiers(
     { disabled: date => !isSelectable(date, { minimumDate, maximumDate }) },
     receivedModifiers
   )
 
+  const handleToggle = useCallback(() => setShow(state => !state), [])
+
   return (
     <div>
       <CalendarNavigation
@@ -35,10 +42,26 @@ export default function Calendar({
         maximumDate={maximumDate}
         month={month}
         onMonthChange={setMonth}
+        showMonthPicker={handleToggle}
+        show={show}
       />
 
-      <CalendarWeekHeader locale={locale} weekdayFormat={weekdayFormat}/>
+      <Popover open={!show}>
+        <MonthPicker
+          locale={locale}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+          modifiers={monthModifiers}
+          modifiersClassNames={monthModifiersClassNames}
+          actualDate={month}
+          onClick={onMonthChange}
+          touchDragEnabled={touchDragEnabled}
+          onDayHover={onDayHover}
+          showGrid={handleToggle}
+        />
+      </Popover>
 
+      <CalendarWeekHeader locale={locale} weekdayFormat={weekdayFormat} />
       <CalendarGrid
         locale={locale}
         modifiers={modifiers}
@@ -64,5 +87,7 @@ Calendar.propTypes = {
   onDayHover: func,
   onDayClick: func,
   weekdayFormat: string,
-  touchDragEnabled: bool
+  touchDragEnabled: bool,
+  monthModifiers: objectOf(func),
+  monthModifiersClassNames: objectOf(string)
 }
diff --git a/src/CalendarDay.js b/src/CalendarDay.js
@@ -74,6 +74,7 @@ CalendarDay.propTypes = {
 
 CalendarDay.defaultProps = {
   modifiers: {},
+  monthModifiers: {},
   onHover: () => {},
   onClick: () => {}
 }
diff --git a/src/CalendarMonth.js b/src/CalendarMonth.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
+import { getMonth, format, getYear } from 'date-fns'
+import classNames from 'classnames'
+
+const defaultModifiersClassNames = {
+  today: '-today',
+  outside: '-outside',
+  wide: '-wide',
+  disabled: '-disabled',
+  selected: '-selected',
+  selectedStart: '-selected-start',
+  selectedMiddle: '-selected-middle',
+  selectedEnd: '-selected-end'
+}
+
+const isSameMonth = (date, actualDate) => {
+  return (getMonth(date) === getMonth(actualDate) && getYear(date) === getYear(actualDate))
+}
+
+export default function CalendarMonth({
+  date,
+  height,
+  locale,
+  modifiers: receivedModifiers,
+  modifiersClassNames: receivedModifiersClassNames,
+  onClick,
+  onHover,
+  showGrid,
+  actualDate
+}) {
+  const monthClassNames = {}
+  const modifiers = { today: isSameMonth(date, actualDate), ...receivedModifiers }
+  const modifiersClassNames = { ...defaultModifiersClassNames, ...receivedModifiersClassNames }
+
+  Object.keys(modifiers).forEach(name => {
+    monthClassNames[modifiersClassNames[name]] = modifiers[name]
+  })
+
+  const handleClick = event => {
+    onClick(date)
+    showGrid()
+    event.preventDefault()
+  }
+
+  const handleMouseEnter = () => {
+    onHover(date)
+  }
+
+  const handleMouseLeave = () => {
+    onHover(null)
+  }
+
+  return (
+    <span
+      className={classNames('nice-dates-month', monthClassNames)}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onTouchEnd={handleClick}
+      style={{ height }}
+    >
+      <span>{format(date, 'LLLL', { locale })}</span>
+    </span>
+  )
+}
+
+CalendarMonth.propTypes = {
+  date: instanceOf(Date).isRequired,
+  height: number.isRequired,
+  locale: object.isRequired,
+  modifiers: objectOf(bool),
+  modifiersClassNames: objectOf(string),
+  onHover: func,
+  onClick: func,
+  showGrid: func,
+  actualDate: instanceOf(Date)
+}
+
+CalendarMonth.defaultProps = {
+  modifiers: {},
+  onHover: () => { },
+  onClick: () => { }
+}
diff --git a/src/CalendarNavigation.js b/src/CalendarNavigation.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { func, instanceOf, object } from 'prop-types'
+import { bool, func, instanceOf, object } from 'prop-types'
 import classNames from 'classnames'
-import { addMonths, getYear, startOfMonth, subMonths, format, isSameMonth } from 'date-fns'
+import { startOfMonth, format, isSameMonth, subMonths, addMonths } from 'date-fns'
 
-export default function CalendarNavigation({ locale, month, minimumDate, maximumDate, onMonthChange }) {
+export default function CalendarNavigation({ locale, month, minimumDate, maximumDate, onMonthChange, showMonthPicker, show }) {
   const handlePrevious = event => {
     onMonthChange(startOfMonth(subMonths(month, 1)))
     event.preventDefault()
@@ -18,19 +18,22 @@ export default function CalendarNavigation({ locale, month, minimumDate, maximum
     <div className='nice-dates-navigation'>
       <a
         className={classNames('nice-dates-navigation_previous', {
-          '-disabled': isSameMonth(month, minimumDate)
+          '-disabled': isSameMonth(month, minimumDate) || !show
         })}
         onClick={handlePrevious}
         onTouchEnd={handlePrevious}
       />
 
-      <span className='nice-dates-navigation_current'>
-        {format(month, getYear(month) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy', { locale })}
+      <span className='nice-dates-navigation_current' onClick={ showMonthPicker }>
+        {show
+          ? format(month, 'LLLL yyyy', { locale })
+          : format(month, 'yyyy', { locale })
+        }
       </span>
 
       <a
         className={classNames('nice-dates-navigation_next', {
-          '-disabled': isSameMonth(month, maximumDate)
+          '-disabled': isSameMonth(month, maximumDate) || !show
         })}
         onClick={handleNext}
         onTouchEnd={handleNext}
@@ -44,5 +47,7 @@ CalendarNavigation.propTypes = {
   month: instanceOf(Date).isRequired,
   minimumDate: instanceOf(Date),
   maximumDate: instanceOf(Date),
-  onMonthChange: func.isRequired
+  onMonthChange: func.isRequired,
+  showMonthPicker: func,
+  show: bool
 }
diff --git a/src/DatePicker.js b/src/DatePicker.js
@@ -17,7 +17,9 @@ export default function DatePicker({
   modifiers,
   modifiersClassNames,
   weekdayFormat,
-  touchDragEnabled
+  touchDragEnabled,
+  monthModifiers,
+  monthModifiersClassNames
 }) {
   const [month, setMonth] = useState(date || new Date())
   const [focused, setFocused] = useState(false)
@@ -76,6 +78,8 @@ export default function DatePicker({
           maximumDate={maximumDate}
           modifiers={modifiers}
           modifiersClassNames={modifiersClassNames}
+          monthModifiers={monthModifiers}
+          monthModifiersClassNames={monthModifiersClassNames}
           weekdayFormat={weekdayFormat}
           touchDragEnabled={touchDragEnabled}
         />
@@ -95,7 +99,9 @@ DatePicker.propTypes = {
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
   weekdayFormat: string,
-  touchDragEnabled: bool
+  touchDragEnabled: bool,
+  monthModifiers: objectOf(func),
+  monthModifiersClassNames: objectOf(string)
 }
 
 DatePicker.defaultProps = {

diff --git a/src/DatePickerCalendar.js b/src/DatePickerCalendar.js
@@ -16,7 +16,9 @@ export default function DatePickerCalendar({
   modifiers: receivedModifiers,
   modifiersClassNames,
   weekdayFormat,
-  touchDragEnabled
+  touchDragEnabled,
+  monthModifiers,
+  monthModifiersClassNames
 }) {
   const isSelected = date => isSameDay(date, selectedDate) && isSelectable(date, { minimumDate, maximumDate })
   const modifiers = mergeModifiers({ selected: isSelected, disabled: isSelected }, receivedModifiers)
@@ -38,6 +40,8 @@ export default function DatePickerCalendar({
       modifiersClassNames={modifiersClassNames}
       weekdayFormat={weekdayFormat}
       touchDragEnabled={touchDragEnabled}
+      monthModifiers={monthModifiers}
+      monthModifiersClassNames={monthModifiersClassNames}
     />
   )
 }
@@ -53,5 +57,7 @@ DatePickerCalendar.propTypes = {
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
   weekdayFormat: string,
-  touchDragEnabled: bool
+  touchDragEnabled: bool,
+  monthModifiers: objectOf(func),
+  monthModifiersClassNames: objectOf(string)
 }
diff --git a/src/MonthPicker.js b/src/MonthPicker.js
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react'
+import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
+import { lightFormat, eachMonthOfInterval, getYear } from 'date-fns'
+import CalendarMonth from './CalendarMonth'
+import useGrid from './useGrid'
+import getMonth from 'date-fns/getMonth'
+import classNames from 'classnames'
+import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
+
+const computeModifiers = (modifiers, date) => {
+  const computedModifiers = {}
+
+  Object.keys(modifiers).map(key => {
+    computedModifiers[key] = modifiers[key](date)
+  })
+
+  return computedModifiers
+}
+
+export default function MonthPicker({
+  locale,
+  modifiers,
+  actualDate,
+  modifiersClassNames,
+  onDayHover,
+  onClick,
+  transitionDuration,
+  touchDragEnabled,
+  showGrid
+}) {
+  const grid = useGrid({ locale, month: getMonth(actualDate), onMonthChange: onClick, transitionDuration, touchDragEnabled })
+  const { cellHeight, offset, containerElementRef, isWide, origin, transition } = grid
+  const [months, setMonths] = useState([])
+
+  useEffect(() => {
+    const allMonths = eachMonthOfInterval({
+      start: new Date(getYear(actualDate), 0, 1),
+      end: new Date(getYear(actualDate), 11, 1)
+    }).map(date => {
+      return (
+        <CalendarMonth
+          date={date}
+          actualDate={actualDate}
+          height={cellHeight}
+          key={lightFormat(date, 'yyyy-MM-dd')}
+          locale={locale}
+          modifiers={{
+            ...computeModifiers(modifiers, date),
+            wide: isWide
+          }}
+          modifiersClassNames={modifiersClassNames}
+          onHover={onDayHover}
+          onClick={onClick}
+          showGrid={showGrid}
+        />
+      )
+    })
+
+    setMonths(allMonths)
+  }, [actualDate, cellHeight, locale, modifiers, modifiersClassNames, onClick, onDayHover, showGrid, isWide])
+
+  return (
+    <>
+      <div className='nice-dates-grid' style={{ height: cellHeight * 6 }}>
+        <div
+          className={classNames('nice-dates-grid_container', {
+            '-moving': offset,
+            '-origin-bottom': origin === ORIGIN_BOTTOM,
+            '-origin-top': origin === ORIGIN_TOP,
+            '-transition': transition
+          })}
+          ref={containerElementRef}
+          style={{
+            transform: `translate3d(0, ${offset}px, 0)`,
+            transitionDuration: `${transitionDuration}ms`
+          }}
+        >
+          {months}
+        </div>
+      </div>
+    </>
+  )
+}
+
+MonthPicker.propTypes = {
+  locale: object.isRequired,
+  actualDate: instanceOf(Date).isRequired,
+  modifiers: objectOf(func),
+  modifiersClassNames: objectOf(string),
+  onDayHover: func,
+  transitionDuration: number.isRequired,
+  touchDragEnabled: bool,
+  onClick: func,
+  showGrid: func
+}
+
+MonthPicker.defaultProps = {
+  modifiers: {},
+  transitionDuration: 800,
+  touchDragEnabled: true
+}