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 (
);