Merge pull request #204 from trabian/allow-disabling-of-drag-selection

Allow disabling of drag-based selection

Author: mkg0

README.md

@@ -125,6 +125,7 @@ focusedRange(DateRange)              | Object    |                  | It defines
 onRangeFocusChange(DateRange)        | Object    |                  | Callback function for focus changes
 preview(DateRange)                   | Object    |              | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }`
 showPreview(DateRange)               | bool      | true             | visibility of preview
+dragSelectionEnabled(Calendar)       | bool      | true             | whether dates can be selected via drag n drop
 onPreviewChange(DateRange)           | Object    |                  | Callback function for preview changes
 dateDisplayFormat(DateRange)         | String    | `MMM D, YYYY`    | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
 staticRanges(`DefinedRange`, `DateRangePicker`) | Array   | [default preDefined ranges](https://github.com/Adphorus/react-date-range/blob/master/src/defaultRanges.js)             | -

src/components/Calendar.js

@@ -280,16 +280,26 @@ class Calendar extends PureComponent {
     );
   }
   onDragSelectionStart(date) {
-    this.setState({
-      drag: {
-        status: true,
-        range: { startDate: date, endDate: date },
-        disablePreview: true,
-      },
-    });
+    const { onChange, dragSelectionEnabled } = this.props;
+
+    if (dragSelectionEnabled) {
+      this.setState({
+        drag: {
+          status: true,
+          range: { startDate: date, endDate: date },
+          disablePreview: true,
+        },
+      });
+    } else {
+      onChange && onChange(date);
+    }
   }
+
   onDragSelectionEnd(date) {
-    const { updateRange, displayMode, onChange } = this.props;
+    const { updateRange, displayMode, onChange, dragSelectionEnabled } = this.props;
+
+    if (!dragSelectionEnabled) return;
+
     if (displayMode === 'date' || !this.state.drag.status) {
       onChange && onChange(date);
       return;
@@ -308,7 +318,7 @@ class Calendar extends PureComponent {
   }
   onDragSelectionMove(date) {
     const { drag } = this.state;
-    if (!drag.status) return;
+    if (!drag.status || !this.props.dragSelectionEnabled) return;
     this.setState({
       drag: {
         status: drag.status,
@@ -474,6 +484,7 @@ Calendar.defaultProps = {
   maxDate: addYears(new Date(), 20),
   minDate: addYears(new Date(), -100),
   rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+  dragSelectionEnabled: true,
 };
 
 Calendar.propTypes = {
@@ -517,6 +528,7 @@ Calendar.propTypes = {
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
   navigatorRenderer: PropTypes.func,
   rangeColors: PropTypes.arrayOf(PropTypes.string),
+  dragSelectionEnabled: PropTypes.bool,
 };
 
 export default Calendar;