feature/touchscreen-friendly

src/components/Calendar/index.js

@@ -424,6 +424,7 @@ class Calendar extends PureComponent {
       <div
         className={classnames(this.styles.calendarWrapper, className)}
         onMouseUp={() => 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);
               }

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 (
       <button
         type="button"
+        data-day={this.props.day.toISOString()}
         onMouseEnter={this.handleMouseEvent}
         onMouseLeave={this.handleMouseEvent}
+        onTouchStart={this.handleTouchEvent}
+        onTouchMove={this.handleTouchEvent}
+        onTouchEnd={this.handleTouchEvent}
         onFocus={this.handleMouseEvent}
         onMouseDown={this.handleMouseEvent}
         onMouseUp={this.handleMouseEvent}
@@ -170,10 +228,9 @@ class DayCell extends Component {
         {this.renderSelectionPlaceholders()}
         {this.renderPreviewPlaceholder()}
         <span className={this.props.styles.dayNumber}>
-          {
-            dayContentRenderer?.(this.props.day) ||
+          {dayContentRenderer?.(this.props.day) || (
             <span>{format(this.props.day, this.props.dayDisplayFormat)}</span>
-          }
+          )}
         </span>
       </button>
     );