Add touchDragEnabled property to support disabling touch drag. (herna…

…nsartorio#57) * Add touchDragEnabled property to support disabling touch drag. * Adjust location of property check. Add to DateRangePicker and DateRangePickerCalendar as well.
ChromaPDX · Mar 8, 2021 · 3fe7930 · 3fe7930
1 parent b61f0c7
commit 3fe7930
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 26 deletions.
diff --git a/src/Calendar.js b/src/Calendar.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { func, instanceOf, object, objectOf, string } from 'prop-types'
+import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
 import { startOfMonth } from 'date-fns'
 import { isSelectable, mergeModifiers } from './utils'
 import useControllableState from './useControllableState'
@@ -17,7 +17,8 @@ export default function Calendar({
   onMonthChange,
   onDayHover,
   onDayClick,
-  weekdayFormat
+  weekdayFormat,
+  touchDragEnabled
 }) {
   const [month, setMonth] = useControllableState(receivedMonth, onMonthChange, startOfMonth(new Date()))
 
@@ -46,6 +47,7 @@ export default function Calendar({
         onMonthChange={setMonth}
         onDayHover={onDayHover}
         onDayClick={onDayClick}
+        touchDragEnabled={touchDragEnabled}
       />
     </div>
   )
@@ -61,5 +63,6 @@ Calendar.propTypes = {
   onMonthChange: func,
   onDayHover: func,
   onDayClick: func,
-  weekdayFormat: string
+  weekdayFormat: string,
+  touchDragEnabled: bool
 }
diff --git a/src/CalendarGrid.js b/src/CalendarGrid.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { instanceOf, func, number, object, objectOf, string } from 'prop-types'
+import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
 import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
 import classNames from 'classnames'
 import useGrid from './useGrid'
@@ -24,9 +24,10 @@ export default function CalendarGrid({
   onMonthChange,
   onDayHover,
   onDayClick,
-  transitionDuration
+  transitionDuration,
+  touchDragEnabled
 }) {
-  const grid = useGrid({ locale, month: startOfMonth(month), onMonthChange, transitionDuration })
+  const grid = useGrid({ locale, month: startOfMonth(month), onMonthChange, transitionDuration, touchDragEnabled })
   const { startDate, endDate, cellHeight, containerElementRef, isWide, offset, origin, transition } = grid
 
   const days = eachDayOfInterval({
@@ -80,10 +81,12 @@ CalendarGrid.propTypes = {
   onMonthChange: func.isRequired,
   onDayHover: func,
   onDayClick: func,
-  transitionDuration: number.isRequired
+  transitionDuration: number.isRequired,
+  touchDragEnabled: bool
 }
 
 CalendarGrid.defaultProps = {
   modifiers: {},
-  transitionDuration: 500
+  transitionDuration: 500,
+  touchDragEnabled: true
 }
diff --git a/src/DatePicker.js b/src/DatePicker.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { func, instanceOf, object, objectOf, string } from 'prop-types'
+import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
 import useDateInput from './useDateInput'
 import useDetectTouch from './useDetectTouch'
 import useOutsideClickHandler from './useOutsideClickHandler'
@@ -16,7 +16,8 @@ export default function DatePicker({
   maximumDate,
   modifiers,
   modifiersClassNames,
-  weekdayFormat
+  weekdayFormat,
+  touchDragEnabled
 }) {
   const [month, setMonth] = useState(date || new Date())
   const [focused, setFocused] = useState(false)
@@ -76,6 +77,7 @@ export default function DatePicker({
           modifiers={modifiers}
           modifiersClassNames={modifiersClassNames}
           weekdayFormat={weekdayFormat}
+          touchDragEnabled={touchDragEnabled}
         />
       </Popover>
     </div>
@@ -92,7 +94,8 @@ DatePicker.propTypes = {
   maximumDate: instanceOf(Date),
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
-  weekdayFormat: string
+  weekdayFormat: string,
+  touchDragEnabled: bool,
 }
 
 DatePicker.defaultProps = {

diff --git a/src/DatePickerCalendar.js b/src/DatePickerCalendar.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { instanceOf, func, object, objectOf, string } from 'prop-types'
+import { bool, instanceOf, func, object, objectOf, string } from 'prop-types'
 import { isSameDay, startOfMonth } from 'date-fns'
 import { isSelectable, mergeModifiers, setTime } from './utils'
 import useControllableState from './useControllableState'
@@ -15,7 +15,8 @@ export default function DatePickerCalendar({
   maximumDate,
   modifiers: receivedModifiers,
   modifiersClassNames,
-  weekdayFormat
+  weekdayFormat,
+  touchDragEnabled
 }) {
   const isSelected = date => isSameDay(date, selectedDate) && isSelectable(date, { minimumDate, maximumDate })
   const modifiers = mergeModifiers({ selected: isSelected, disabled: isSelected }, receivedModifiers)
@@ -36,6 +37,7 @@ export default function DatePickerCalendar({
       modifiers={modifiers}
       modifiersClassNames={modifiersClassNames}
       weekdayFormat={weekdayFormat}
+      touchDragEnabled={touchDragEnabled}
     />
   )
 }
@@ -50,5 +52,6 @@ DatePickerCalendar.propTypes = {
   maximumDate: instanceOf(Date),
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
-  weekdayFormat: string
+  weekdayFormat: string,
+  touchDragEnabled: bool
 }
diff --git a/src/DateRangePicker.js b/src/DateRangePicker.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { func, instanceOf, number, object, objectOf, string } from 'prop-types'
+import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
 import { isRangeLengthValid } from './utils'
 import { START_DATE, END_DATE } from './constants'
 import useDateInput from './useDateInput'
@@ -22,7 +22,8 @@ export default function DateRangePicker({
   maximumLength,
   modifiers,
   modifiersClassNames,
-  weekdayFormat
+  weekdayFormat,
+  touchDragEnabled
 }) {
   const [focus, setFocus] = useState()
   const [month, setMonth] = useState(startDate || endDate || new Date())
@@ -108,6 +109,7 @@ export default function DateRangePicker({
           modifiers={modifiers}
           modifiersClassNames={modifiersClassNames}
           weekdayFormat={weekdayFormat}
+          touchDragEnabled={touchDragEnabled}
         />
       </Popover>
     </div>
@@ -128,7 +130,8 @@ DateRangePicker.propTypes = {
   maximumLength: number,
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
-  weekdayFormat: string
+  weekdayFormat: string,
+  touchDragEnabled: bool
 }
 
 DateRangePicker.defaultProps = {

diff --git a/src/DateRangePickerCalendar.js b/src/DateRangePickerCalendar.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { func, instanceOf, number, object, objectOf, oneOf, string } from 'prop-types'
+import { bool, func, instanceOf, number, object, objectOf, oneOf, string } from 'prop-types'
 import { differenceInDays, isSameDay, isAfter, isBefore, startOfMonth, startOfDay } from 'date-fns'
 import { isRangeLengthValid, isSelectable, mergeModifiers, setTime } from './utils'
 import { START_DATE, END_DATE } from './constants'
@@ -22,7 +22,8 @@ export default function DateRangePickerCalendar({
   maximumLength,
   modifiers: receivedModifiers,
   modifiersClassNames,
-  weekdayFormat
+  weekdayFormat,
+  touchDragEnabled
 }) {
   const [hoveredDate, setHoveredDate] = useState()
   const [month, setMonth] = useControllableState(
@@ -106,6 +107,7 @@ export default function DateRangePickerCalendar({
       modifiers={modifiers}
       modifiersClassNames={modifiersClassNames}
       weekdayFormat={weekdayFormat}
+      touchDragEnabled={touchDragEnabled}
     />
   )
 }
@@ -126,7 +128,8 @@ DateRangePickerCalendar.propTypes = {
   maximumLength: number,
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
-  weekdayFormat: string
+  weekdayFormat: string,
+  touchDragEnabled: bool
 }
 
 DateRangePickerCalendar.defaultProps = {

diff --git a/src/useGrid.js b/src/useGrid.js
@@ -92,7 +92,7 @@ const reducer = (state, action) => {
   }
 }
 
-export default function useGrid({ locale, month: currentMonth, onMonthChange, transitionDuration }) {
+export default function useGrid({ locale, month: currentMonth, onMonthChange, transitionDuration, touchDragEnabled }) {
   const timeoutRef = useRef()
   const containerElementRef = useRef()
   const initialDragPositionRef = useRef(0)
@@ -120,6 +120,10 @@ export default function useGrid({ locale, month: currentMonth, onMonthChange, tr
   }, [currentMonth]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useLayoutEffect(() => {
+    if (!touchDragEnabled) {
+      return
+    }
+
     const containerElement = containerElementRef.current
     const gridHeight = cellHeight * 6
     const halfGridHeight = gridHeight / 2

diff --git a/website/index.js b/website/index.js
@@ -233,7 +233,8 @@ minimumDate: instanceOf(Date), // See Calendar props
 maximumDate: instanceOf(Date), // See Calendar props
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
-weekdayFormat: string // See Calendar props`}
+weekdayFormat: string, // See Calendar props
+touchDragEnabled: bool // See Calendar props `}
       />
 
       <p>
@@ -271,7 +272,8 @@ minimumLength: number, // See DateRangePickerCalendar props
 maximumLength: number, // See DateRangePickerCalendar props
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
-weekdayFormat: string // See Calendar props`}
+weekdayFormat: string, // See Calendar props
+touchDragEnabled: bool // See Calendar props `}
       />
 
       <p>
@@ -306,7 +308,8 @@ minimumDate: instanceOf(Date), // See Calendar props
 maximumDate: instanceOf(Date), // See Calendar props
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
-weekdayFormat: string // See Calendar props`}
+weekdayFormat: string, // See Calendar props
+touchDragEnabled: bool // See Calendar props`}
       />
 
       <h3>
@@ -330,7 +333,8 @@ minimumLength: number, // Minimum range selection length, defaults to 0
 maximumLength: number, // Maximum range selection length, defaults to null
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
-weekdayFormat: string // See Calendar props`}
+weekdayFormat: string, // See Calendar props
+touchDragEnabled: bool // See Calendar props `}
       />
 
       <h3>
@@ -348,7 +352,8 @@ month: instanceOf(Date), // Optional: Turns current month into a controlled prop
 onMonthChange: func, // Optional: Turns current month into a controlled prop
 onDayHover: func,
 onDayClick: func,
-weekdayFormat: string // Optional: allows weekday to be dynamically formatted (ex. "EEEEE")`}
+weekdayFormat: string, // Optional: allows weekday to be dynamically formatted (ex. "EEEEE")
+touchDragEnabled: bool // Default: true`}
       />
 
       <h3>