diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 73b9faa48..8c1a72cea 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -424,6 +424,7 @@ class Calendar extends PureComponent {
this.setState({ drag: { status: false, range: {} } })} + onTouchEnd={() => this.setState({ drag: { status: false, range: {} } })} onMouseLeave={() => { this.setState({ drag: { status: false, range: {} } }); }}> @@ -493,7 +494,7 @@ class Calendar extends PureComponent { isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal )}> {new Array(this.props.months).fill(null).map((_, i) => { - let monthStep = addMonths(this.state.focusedDate, i);; + let monthStep = addMonths(this.state.focusedDate, i); if (this.props.calendarFocus === 'backwards') { monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i); } diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 26f12539e..ff612356c 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -11,6 +11,7 @@ class DayCell extends Component { this.state = { hover: false, active: false, + touchOverDay: props.day.toISOString(), }; } @@ -21,6 +22,59 @@ class DayCell extends Component { else onMouseUp(day); } }; + + handleTouchEvent = event => { + const { day, disabled, onMouseDown, onMouseUp, onMouseEnter, onPreviewChange } = this.props; + const stateChanges = {}; + if (disabled) { + onPreviewChange(); + return; + } + + const findButtonElem = elems => { + return elems.find(elem => elem.nodeName === 'BUTTON'); + }; + + const isNewDay = targetElements => { + const buttonElem = findButtonElem(targetElements); + if (targetElements && buttonElem && buttonElem.classList.contains('rdrDay')) { + const newDay = buttonElem.getAttribute('data-day'); + if (newDay && newDay !== this.state.touchOverDay) { + return newDay; + } + } + return null; + }; + + switch (event.type) { + case 'touchmove': + { + const targetElements = document.elementsFromPoint( + event.touches[0].clientX, + event.touches[0].clientY + ); + if (targetElements.length === 0) return; + const newDay = isNewDay(targetElements); + if (newDay) { + onMouseEnter(new Date(newDay)); + onPreviewChange(new Date(newDay)); + this.setState({ touchOverDay: newDay }); + } + } + break; + case 'touchend': + { + const endDate = new Date(this.state.touchOverDay); + onMouseUp(endDate); + this.setState({ touchOverDay: null }); + } + break; + case 'touchstart': + stateChanges.active = true; + onMouseDown(day); + break; + } + }; handleMouseEvent = event => { const { day, disabled, onPreviewChange, onMouseEnter, onMouseDown, onMouseUp } = this.props; const stateChanges = {}; @@ -155,8 +209,12 @@ class DayCell extends Component { return ( );