expose initialFocusedRange, focusedRange, onRangeFocusChange

expose preview, showPreview, onPreviewChange
rename showSelectionPreview to showPreview

Author: mkg0

CHANGELOG.md

@@ -111,6 +111,7 @@ 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.
+- `specialDays` prop removed.
 
 ### Added
 - `DefinedRanges` component: It's a set of date presets. Receives `inputRanges`, `staticRanges` for setting date ranges.
@@ -123,4 +124,16 @@ Momentjs: `moment(dateString).toDate()`
   <DateRangePicker scroll={horizontalScroll} />
   <DateRangePicker scroll={verticalScroll} months={2} />
 ```
-
+- `showPreview` prop added to control visibility of preview. Default value is `true`.
+- `preview` prop added: It displays a preview range and overwrite DateRange's default preview. You can set a controlled preview with below shape of object.
+```js
+{
+  startDate: [Date Object] || null,
+  endDate: [Date Object] || null,
+  color: '#fed14c',
+}
+```
+- `onPreviewChange(date)` prop added: Callback function for preview changes. You can set controlled custom previews with `preview` prop.
+- `focusedRange` prop added: It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second value is which step on date range(startDate or endDate).
+- `initialFocusedRange` prop added: Initial value for focused range. See `focusedRange` for usage.
+- `onRangeFocusChange` prop added: Callback function for focus changes by user.

README.md

@@ -108,7 +108,7 @@ shownDate                            | Date      |                  | initial fo
 minDate                              | Date      |                  | defines minimum date. Disabled earlier dates
 maxDate                              | Date      |                  | defines maximum date. Disabled later dates
 direction                            | String    | 'vertical'       | direction of calendar months. can be `vertical` or `horizontal`
-scroll                       				 | Object    | { enabled: false }| infinite scroll behaviour configuration. Checkout [Infinite Scroll](#infinite-scrolled-mode) section 
+scroll                       				 | Object    | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section 
 showMonthArrow                       | Boolean   | true             | show/hide month arrow button
 navigatorRenderer                    | Func      |                  | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
 ranges                               | *Object[] | []               | Defines ranges. array of range object
@@ -118,7 +118,13 @@ onChange(DateRange)                  | Func      |                  | callback f
 color(Calendar)                      | String    | `#3d91ff`        | defines color for selected date in Calendar
 date(Calendar)                       | Date      |                  | date value for Calendar
 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)
+initialFocusedRange(DateRange)       | Object    |                  | Initial value for focused range. See `focusedRange` for usage.
+focusedRange(DateRange)              | Object    |                  | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate).
+onRangeFocusChange(DateRange)        | Object    |                  | Callback function for focus changes by user
+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
+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)             | -
 inputRanges(`DefinedRange`, `DateRangePicker`) | Array   | [default input ranges](https://github.com/Adphorus/react-date-range/blob/master/src/defaultRanges.js)             | -
 
@@ -138,8 +144,8 @@ inputRanges(`DefinedRange`, `DateRangePicker`) | Array   | [default input ranges
 
 #### Infinite Scrolled Mode
 
-	To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.
-	If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/withs with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop.
+To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.
+If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/withs with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop.
 
 ```js
 	// shape of scroll prop

src/components/Calendar.js

@@ -448,7 +448,7 @@ Calendar.defaultProps = {
   dateDisplayFormat: 'MMM D, YYYY',
   monthDisplayFormat: 'MMM YYYY',
   showDateDisplay: true,
-  showSelectionPreview: true,
+  showPreview: true,
   displayMode: 'date',
   months: 1,
   color: '#3d91ff',
@@ -477,15 +477,16 @@ Calendar.propTypes = {
   preview: PropTypes.shape({
     startDate: PropTypes.object,
     endDate: PropTypes.object,
+    color: PropTypes.string,
   }),
-  previewColor: PropTypes.string,
   dateDisplayFormat: PropTypes.string,
   monthDisplayFormat: PropTypes.string,
   focusedRange: PropTypes.arrayOf(PropTypes.number),
+  initialFocusedRange: PropTypes.arrayOf(PropTypes.number),
   months: PropTypes.number,
   className: PropTypes.string,
   showDateDisplay: PropTypes.bool,
-  showSelectionPreview: PropTypes.bool,
+  showPreview: PropTypes.bool,
   displayMode: PropTypes.oneOf(['dateRange', 'date']),
   color: PropTypes.string,
   updateRange: PropTypes.func,

src/components/DateRange.js

@@ -15,13 +15,13 @@ class DateRange extends Component {
     this.updatePreview = this.updatePreview.bind(this);
     this.calcNewSelection = this.calcNewSelection.bind(this);
     this.state = {
-      focusedRange: [findNextRangeIndex(props.ranges), 0],
+      focusedRange: props.initialFocusedRange || [findNextRangeIndex(props.ranges), 0],
       preview: null,
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
   calcNewSelection(value, isSingleValue = true) {
-    const { focusedRange } = this.state;
+    const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const { ranges, onChange, maxDate, moveRangeOnFirstSelection } = this.props;
     const focusedRangeIndex = focusedRange[0];
     const selectedRange = ranges[focusedRangeIndex];
@@ -58,8 +58,8 @@ class DateRange extends Component {
     };
   }
   setSelection(value, isSingleValue) {
-    const { onChange, ranges } = this.props;
-    const { focusedRange } = this.state;
+    const { onChange, ranges, onRangeFocusChange } = this.props;
+    const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const focusedRangeIndex = focusedRange[0];
     const selectedRange = ranges[focusedRangeIndex];
     if (!selectedRange) return;
@@ -74,6 +74,7 @@ class DateRange extends Component {
       focusedRange: newSelection.nextFocusRange,
       preview: null,
     });
+    onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange);
   }
   handleRangeFocusChange(focusedRange) {
     this.setState({ focusedRange });
@@ -85,24 +86,24 @@ class DateRange extends Component {
       return;
     }
     const { rangeColors, ranges } = this.props;
-    const { focusedRange } = this.state;
+    const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
     this.setState({ preview: { ...val, color } });
   }
   render() {
     return (
       <Calendar
-        {...this.props}
-        displayMode="dateRange"
-        className={classnames(this.styles.dateRangeWrapper, this.props.className)}
-        onChange={this.setSelection}
         focusedRange={this.state.focusedRange}
         onRangeFocusChange={this.handleRangeFocusChange}
         preview={this.state.preview}
-        updateRange={val => this.setSelection(val, false)}
         onPreviewChange={value => {
           this.updatePreview(value ? this.calcNewSelection(value).range : null);
         }}
+        {...this.props}
+        displayMode="dateRange"
+        className={classnames(this.styles.dateRangeWrapper, this.props.className)}
+        onChange={this.setSelection}
+        updateRange={val => this.setSelection(val, false)}
         ref={target => {
           this.calendar = target;
         }}

src/components/DateRangePicker.js

@@ -15,24 +15,21 @@ class DateRangePicker extends Component {
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
   render() {
-    const focusedRangeIndex = this.state.focusedRange[0];
+    const { focusedRange } = this.state;
     return (
       <div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
         <DefinedRange
+          focusedRange={focusedRange}
+          onPreviewChange={value => this.dateRange.updatePreview(value)}
           {...this.props}
-          range={this.props.ranges[focusedRangeIndex] || {}}
-          onPreviewChange={value => {
-            this.dateRange.updatePreview(value);
-          }}
-          focusedRangeIndex={focusedRangeIndex}
+          range={this.props.ranges[focusedRange[0]]}
           className={undefined}
         />
         <DateRange
-          {...this.props}
-          ref={t => {
-            this.dateRange = t;
-          }}
           onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
+          focusedRange={focusedRange}
+          {...this.props}
+          ref={t => (this.dateRange = t)}
           className={undefined}
         />
       </div>

src/components/DefinedRange.js

@@ -15,11 +15,11 @@ class DefinedRanges extends Component {
     this.handleRangeChange = this.handleRangeChange.bind(this);
   }
   handleRangeChange(range) {
-    const { onChange, ranges, focusedRangeIndex } = this.props;
-    const selectedRange = ranges[focusedRangeIndex];
+    const { onChange, ranges, focusedRange } = this.props;
+    const selectedRange = ranges[focusedRange[0]];
     if (!onChange || !selectedRange) return;
     onChange({
-      [selectedRange.key || `range${focusedRangeIndex + 1}`]: { ...selectedRange, ...range },
+      [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range },
     });
   }
   getSelectedRange(ranges, staticRange) {
@@ -81,7 +81,7 @@ class DefinedRanges extends Component {
                 max={99999}
                 value={
                   rangeOption.getCurrentValue
-                    ? rangeOption.getCurrentValue(ranges[this.props.focusedRangeIndex] || {})
+                    ? rangeOption.getCurrentValue(ranges[this.props.focusedRange[0]] || {})
                     : '-'
                 }
               />
@@ -99,7 +99,7 @@ DefinedRanges.propTypes = {
   inputRanges: PropTypes.array,
   staticRanges: PropTypes.array,
   ranges: PropTypes.arrayOf(rangeShape),
-  focusedRangeIndex: PropTypes.number,
+  focusedRange: PropTypes.arrayOf(PropTypes.number),
   onPreviewChange: PropTypes.func,
   onChange: PropTypes.func,
   footerContent: PropTypes.any,
@@ -113,7 +113,7 @@ DefinedRanges.defaultProps = {
   staticRanges: defaultStaticRanges,
   ranges: [],
   rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
-  focusedRangeIndex: 0,
+  focusedRange: [0, 0],
 };
 
 export default DefinedRanges;

src/components/Month.js

@@ -52,7 +52,7 @@ class Month extends PureComponent {
         };
       });
     }
-    const showPreview = this.props.showSelectionPreview && !drag.disablePreview;
+    const showPreview = this.props.showPreview && !drag.disablePreview;
     return (
       <div className={styles.month} style={this.props.style}>
         {this.props.showMonthName ? (
@@ -116,7 +116,7 @@ Month.propTypes = {
     startDate: PropTypes.object,
     endDate: PropTypes.object,
   }),
-  showSelectionPreview: PropTypes.bool,
+  showPreview: PropTypes.bool,
   displayMode: PropTypes.oneOf(['dateRange', 'date']),
   minDate: PropTypes.object,
   maxDate: PropTypes.object,