add drag and drop

Author: mkg0

CHANGELOG.md

@@ -109,9 +109,9 @@ Date-fns: `fns.parse(dateString)`
 Momentjs: `moment(dateString).toDate()`
 
 - `disableDaysBeforeToday` prop removed. use `minDate={new Date()}` instead.
-
 - `firstDayOfWeek` prop removed. It is auto detecting from locale prop.
-
 - `init` prop removed.
 
+### Added
 
+- Date range selection by drag n drop.

README.md

@@ -8,7 +8,15 @@
 ⚠️ Warning: the current branch represents v2 pre-release version. See [v1 branch](https://github.com/Adphorus/react-date-range/tree/v1).
 
 A library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations.
-Stateless date operations, highly configurable, multiple range selection support, based on js dates.
+
+### Why should you use `react-date-range`?
+
+- Stateless date operations
+- Highly configurable
+- Multiple range selection
+- Based on native js dates
+- Drag n Drop selection
+- Keyboard friendly
 
 **Live Demo :** [http://adphorus.github.io/react-date-range](http://adphorus.github.io/react-date-range)
 
@@ -85,7 +93,7 @@ class MyComponent extends Component {
 ### Options (DateRange, Calendar)
 Property                             | type      | Default Value    | Desctiption
 -------------------------------------|-----------|------------------|-----------------------------------------------------------------
-locale                               | object    | enUS from locale | you can view full list from [here](https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages).
+locale                               | Object    | enUS from locale | you can view full list from [here](https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages).
 className                            | String    |                  | wrapper classname
 months                               | Number    | 1                | rendered month count
 showSelectionPreview                 | Boolean   | true             | show preview on focused/hovered dates
@@ -95,14 +103,15 @@ specialDays                          | Date[]    | []               | defines sp
 onPreviewChange                      | Func      |                  | callback for preview changes. fn()
 minDate                              | Date      |                  | defines minimum date. Disabled earlier dates
 maxDate                              | Date      |                  | defines maximum date. Disabled later dates
-showMonthArrow                       | Boolean   | true             |
-ranges(Calendar)                     | *Object[] | []               |
+showMonthArrow                       | Boolean   | true             | show/hide month arrow button
 onChange(Calendar)                   | Func      |                  | callback function for date changes. fn(date: Date)
 color(Calendar)                      | String    | `#3d91ff`        | defines color for selected date in Calendar
 date(Calendar)                       | Date      |                  | date value for Calendar
 onChange(DateRange)                  | Func      |                  | callback function for range changes. fn(changes). changes contains `startDate` and `endDate` under an object key of changed range
 moveRangeOnFirstSelection(DateRange) | Boolean   | false            | move range on startDate selection. Otherwise endDate will replace with startDate.
-dateDisplayFormat(DateRange)         | String    | `MMM D,YYYY`     | selected range preview formatter. checkout [format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
+ranges(Calendar)                     | *Object[] | []               | Defines ranges. array of range object
+showDateDisplay(DateRange)      | Boolean   | true             | show/hide selection display row. Uses `dateDisplayFormat` for formatter
+dateDisplayFormat(DateRange)         | String    | `MMM D,YYYY`     | selected range preview formatter. checkout [date-fns's format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
 > *shape of range:
 > ```js
 >	{
@@ -112,12 +121,12 @@ dateDisplayFormat(DateRange)         | String    | `MMM D,YYYY`     | selected r
 >		key: PropTypes.string,
 >		autoFocus: PropTypes.bool,
 >		disabled: PropTypes.bool,
+>		show: PropTypes.bool,
+>		showDateDisplay: PropTypes.bool,
 >	}
 >```
 
 TODOs
 
 - make mobile friendly (integrate tap and swipe actions)
 - add complex booking customization example with exposed renderer props
-- drag and drop date selection
-

src/Calendar.js

@@ -28,8 +28,15 @@ class Calendar extends PureComponent {
     this.renderDays = this.renderDays.bind(this);
     this.handleRangeFocusChange = this.handleRangeFocusChange.bind(this);
     this.renderDateDisplay = this.renderDateDisplay.bind(this);
+    this.onSelectionStart = this.onSelectionStart.bind(this);
+    this.onSelectionEnd = this.onSelectionEnd.bind(this);
     this.state = {
       focusedDate: calcFocusDate(null, props),
+      drag: {
+        status: false,
+        range: { startDate: null, endDate: null },
+        disablePreview: false,
+      },
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
@@ -166,16 +173,59 @@ class Calendar extends PureComponent {
       </div>
     );
   }
+  onSelectionStart(date) {
+    this.setState({
+      drag: {
+        status: true,
+        range: { startDate: date, endDate: date },
+        disablePreview: false,
+      },
+    });
+  }
+  onSelectionEnd(date) {
+    const { updateRange, displayMode, onChange } = this.props;
+    if (displayMode === 'date' || !this.state.drag.status) {
+      onChange && onChange(date);
+      return;
+    }
+    const newRange = {
+      startDate: this.state.drag.range.startDate,
+      endDate: date,
+    };
+    if (displayMode !== 'dateRange' || isSameDay(newRange.startDate, date)) {
+      this.setState({ drag: { status: false, range: {} } }, () => onChange && onChange(date));
+    } else {
+      this.setState({ drag: { status: false, range: {} } }, () => {
+        updateRange && updateRange(newRange);
+      });
+    }
+  }
   renderDays(dateOptions, focusedDate) {
     const now = new Date();
-    const { specialDays } = this.props;
+    const { specialDays, displayMode, focusedRange } = this.props;
+    const { drag } = this.state;
     const minDate = this.props.minDate && startOfDay(this.props.minDate);
     const maxDate = this.props.maxDate && endOfDay(this.props.maxDate);
     const startDateOfMonth = startOfMonth(focusedDate, dateOptions);
     const endDateOfMonth = endOfMonth(focusedDate, dateOptions);
     const startDateOfCalendar = startOfWeek(startDateOfMonth, dateOptions);
     const endDateOfCalendar = endOfWeek(endDateOfMonth, dateOptions);
-
+    let ranges = this.props.ranges;
+    if (displayMode === 'dateRange' && drag.status) {
+      let { startDate, endDate } = drag.range;
+      if (isBefore(endDate, startDate)) {
+        [startDate, endDate] = [endDate, startDate];
+      }
+      ranges = ranges.map((range, i) => {
+        if (i !== focusedRange[0]) return range;
+        return {
+          ...range,
+          startDate,
+          endDate,
+        };
+      });
+    }
+    const showPreview = this.props.showSelectionPreview && !drag.disablePreview;
     return eachDayOfInterval({ start: startDateOfCalendar, end: endDateOfCalendar }).map(
       (day, index) => {
         const isStartOfMonth = isSameDay(day, startDateOfMonth);
@@ -187,9 +237,9 @@ class Calendar extends PureComponent {
         return (
           <DayCell
             {...this.props}
+            ranges={ranges}
             day={day}
-            preview={this.props.showSelectionPreview && this.props.preview}
-            onSelect={this.props.onChange}
+            preview={showPreview ? this.props.preview : null}
             isSunday={isSunday(day)}
             isSpecialDay={isSpecialDay}
             isToday={isSameDay(day, now)}
@@ -201,6 +251,20 @@ class Calendar extends PureComponent {
             disabled={isOutsideMinMax}
             isPassive={!isWithinInterval(day, { start: startDateOfMonth, end: endDateOfMonth })}
             styles={this.styles}
+            onMouseDown={this.onSelectionStart}
+            onMouseUp={this.onSelectionEnd}
+            onMouseEnter={date => {
+              if (!drag.status) return;
+              this.setState({
+                drag: {
+                  status: drag.status,
+                  range: { startDate: drag.range.startDate, endDate: date },
+                  disablePreview: true,
+                },
+              });
+            }}
+            dragRange={drag.range}
+            drag={drag.status}
           />
         );
       }
@@ -212,17 +276,20 @@ class Calendar extends PureComponent {
     return format(date, this.props.dateDisplayFormat, dateOptions);
   }
   render() {
-    const { showDateDisplay } = this.props;
+    const { showDateDisplay, onPreviewChange } = this.props;
     const dateOptions = { locale: this.props.locale };
     return (
-      <div className={classnames(this.styles.calendarWrapper, this.props.className)}>
+      <div
+        className={classnames(this.styles.calendarWrapper, this.props.className)}
+        onMouseUp={() => this.setState({ drag: { status: false, range: {} } })}
+        onMouseLeave={() => {
+          this.setState({ drag: { status: false, range: {} } });
+        }}>
         {showDateDisplay && this.renderDateDisplay(dateOptions)}
         {this.renderMonthAndYear(this.state.focusedDate)}
         <div
           className={this.styles.months}
-          onMouseLeave={() => {
-            this.props.onPreviewChange && this.props.onPreviewChange();
-          }}>
+          onMouseLeave={() => onPreviewChange && onPreviewChange()}>
           {new Array(this.props.months).fill(null).map((_, i) => (
             <div key={i} className={this.styles.month}>
               <div className={this.styles.weekDays}>{this.renderWeekdays(dateOptions)}</div>
@@ -278,6 +345,7 @@ Calendar.propTypes = {
   showSelectionPreview: PropTypes.bool,
   displayMode: PropTypes.oneOf(['dateRange', 'date']),
   color: PropTypes.string,
+  updateRange: PropTypes.func,
 };
 
 export default Calendar;

src/DateRange.js

@@ -19,7 +19,7 @@ class DateRange extends Component {
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
-  calcNewSelection(value) {
+  calcNewSelection(value, isSingleValue = true) {
     const { focusedRange } = this.state;
     const { ranges, onChange, maxDate, moveRangeOnFirstSelection } = this.props;
     const selectedRangeIndex = focusedRange[0];
@@ -29,7 +29,10 @@ class DateRange extends Component {
     let { startDate, endDate } = selectedRange;
     if (!endDate) endDate = new Date(startDate);
     let nextFocusRange;
-    if (focusedRange[1] === 0) {
+    if (!isSingleValue) {
+      startDate = value.startDate;
+      endDate = value.endDate;
+    } else if (focusedRange[1] === 0) {
       // startDate selection
       const dayOffset = differenceInCalendarDays(endDate, startDate);
       startDate = value;
@@ -38,10 +41,13 @@ class DateRange extends Component {
       nextFocusRange = [focusedRange[0], 1];
     } else {
       endDate = value;
-      // reverse dates if startDate before endDate
-      if (isBefore(value, startDate)) {
-        [startDate, endDate] = [endDate, startDate];
-      }
+    }
+    // reverse dates if startDate before endDate
+    if (isBefore(endDate, startDate)) {
+      [startDate, endDate] = [endDate, startDate];
+    }
+
+    if (!nextFocusRange) {
       const nextFocusRangeIndex = findNextRangeIndex(this.props.ranges, focusedRange[0]);
       nextFocusRange = [nextFocusRangeIndex, 0];
     }
@@ -50,13 +56,13 @@ class DateRange extends Component {
       nextFocusRange: nextFocusRange,
     };
   }
-  setSelection(value) {
+  setSelection(value, isSingleValue) {
     const { onChange, ranges } = this.props;
     const { focusedRange } = this.state;
     const selectedRangeIndex = focusedRange[0];
     const selectedRange = ranges[selectedRangeIndex];
-    const newSelection = this.calcNewSelection(value);
     if (!selectedRange) return;
+    const newSelection = this.calcNewSelection(value, isSingleValue);
     onChange({
       [selectedRange.key || `range${selectedRangeIndex + 1}`]: newSelection.range,
     });
@@ -84,6 +90,7 @@ class DateRange extends Component {
         onRangeFocusChange={this.handleRangeFocusChange}
         preview={this.state.preview}
         previewColor={selectedRange.color}
+        updateRange={val => this.setSelection(val, false)}
         onPreviewChange={value => {
           this.updatePreview(value ? this.calcNewSelection(value).range : null);
         }}