- highlight selected ranges

- add footerContent & headerContent to DefinedRanges

Author: mkg0

src/DateRange.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Calendar from './Calendar.js';
+import { rangeShape } from './DayCell';
 import { findNextRangeIndex, generateStyles } from './utils.js';
 import { isBefore, differenceInCalendarDays, addDays, min } from 'date-fns';
 import classnames from 'classnames';
@@ -113,7 +114,7 @@ DateRange.propTypes = {
   onChange: PropTypes.func,
   onRangeFocusChange: PropTypes.func,
   className: PropTypes.string,
-  ranges: Calendar.propTypes.ranges,
+  ranges: PropTypes.arrayOf(rangeShape),
   moveRangeOnFirstSelection: PropTypes.bool,
 };
 

src/DateRangePicker.js

@@ -36,6 +36,7 @@ class DateRangePicker extends Component {
           onPreviewChange={value => {
             this.dateRange.updatePreview(value);
           }}
+          focusedRangeIndex={focusedRangeIndex}
           className={undefined}
         />
         <DateRange

src/DefinedRanges.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styles from './styles';
 import { defaultInputRanges, defaultStaticRanges } from './defaultRanges';
 import { rangeShape } from './DayCell';
+import cx from 'classnames';
 
 class DefinedRanges extends Component {
   constructor(props) {
@@ -12,23 +13,34 @@ class DefinedRanges extends Component {
       focusedInput: -1,
     };
     this.handleRangeChange = this.handleRangeChange.bind(this);
+    this.checkIsSelected = this.checkIsSelected.bind(this);
   }
   handleRangeChange(range) {
     const { onChange } = this.props;
     onChange && onChange(range);
   }
+  checkIsSelected(definedRange, ranges) {
+    if (!definedRange.isSelected) return false;
+    return ranges.some(range => definedRange.isSelected(range));
+  }
   render() {
     const { onPreviewChange } = this.props;
+    const validRanges = this.props.ranges.filter(
+      item => item.startDate && item.endDate && !item.disabled
+    );
     return (
       <div
         className={styles.definedRangesWrapper}
         onMouseLeave={() => {
           this.props.onPreviewChange && this.props.onPreviewChange();
         }}>
+        {this.props.headerContent}
         <div className={styles.staticRanges}>
           {this.props.staticRanges.map((rangeOption, i) => (
             <button
-              className={styles.staticRange}
+              className={cx(styles.staticRange, {
+                [styles.staticRangeSelected]: this.checkIsSelected(rangeOption, validRanges),
+              })}
               key={i}
               onClick={() => this.handleRangeChange(rangeOption.range(this.props))}
               onFocus={() => onPreviewChange && onPreviewChange(rangeOption.range(this.props))}
@@ -49,17 +61,23 @@ class DefinedRanges extends Component {
                 onChange={e => {
                   let value = parseInt(e.target.value, 10);
                   value = isNaN(value) ? 0 : Math.max(Math.min(99999, value), 0);
-                  this.setState({ rangeOffset: value });
                   this.handleRangeChange(rangeOption.range(value, this.props));
                 }}
                 min={0}
                 max={99999}
-                value={this.state.focusedInput === i ? this.state.rangeOffset : 0}
-              />{' '}
+                value={
+                  rangeOption.getCurrentValue
+                    ? rangeOption.getCurrentValue(
+                        this.props.ranges[this.props.focusedRangeIndex] || {}
+                      )
+                    : '-'
+                }
+              />
               <span className={styles.inputRangeLabel}>{rangeOption.label}</span>
             </div>
           ))}
         </div>
+        {this.props.footerContent}
       </div>
     );
   }
@@ -68,9 +86,12 @@ class DefinedRanges extends Component {
 DefinedRanges.propTypes = {
   inputRanges: PropTypes.array,
   staticRanges: PropTypes.array,
-  range: rangeShape,
+  ranges: PropTypes.arrayOf(rangeShape),
+  focusedRangeIndex: PropTypes.number,
   onPreviewChange: PropTypes.func,
   onChange: PropTypes.func,
+  footerContent: PropTypes.any,
+  headerContent: PropTypes.any,
 };
 
 DefinedRanges.defaultProps = {

src/defaultRanges.js

@@ -7,88 +7,115 @@ import {
   addMonths,
   startOfWeek,
   endOfWeek,
+  isSameDay,
+  differenceInCalendarDays,
 } from 'date-fns';
 
+const defineds = {
+  startOfWeek: startOfWeek(new Date()),
+  endOfWeek: endOfWeek(new Date()),
+  startOfLastWeek: startOfWeek(addDays(new Date(), -7)),
+  endOfLastWeek: endOfWeek(addDays(new Date(), -7)),
+  startOfToday: startOfDay(new Date()),
+  endOfToday: endOfDay(new Date()),
+  startOfYesterday: startOfDay(addDays(new Date(), -1)),
+  endOfYesterday: endOfDay(addDays(new Date(), -1)),
+  startOfMonth: startOfMonth(new Date()),
+  endOfMonth: endOfMonth(new Date()),
+  startOfLastMonth: startOfMonth(addMonths(new Date(), -1)),
+  endOfLastMonth: endOfMonth(addMonths(new Date(), -1)),
+};
+
 export const defaultStaticRanges = [
   {
     label: 'Today',
-    range() {
-      return {
-        startDate: startOfDay(new Date()),
-        endDate: endOfDay(new Date()),
-      };
-    },
+    range: () => ({
+      startDate: defineds.startOfToday,
+      endDate: defineds.endOfToday,
+    }),
+    isSelected: range =>
+      isSameDay(range.startDate, defineds.startOfToday) &&
+      isSameDay(range.endDate, defineds.endOfToday),
   },
   {
     label: 'Yesterday',
-    range() {
-      const yesterday = addDays(new Date(), -1);
-      return {
-        startDate: startOfDay(yesterday),
-        endDate: endOfDay(yesterday),
-      };
-    },
+    range: () => ({
+      startDate: defineds.startOfYesterday,
+      endDate: defineds.endOfYesterday,
+    }),
+    isSelected: range =>
+      isSameDay(range.startDate, defineds.startOfYesterday) &&
+      isSameDay(range.endDate, defineds.endOfYesterday),
   },
 
   {
     label: 'This Week',
-    range() {
-      return {
-        startDate: startOfWeek(new Date()),
-        endDate: endOfWeek(new Date()),
-      };
-    },
+    range: () => ({
+      startDate: defineds.startOfWeek,
+      endDate: defineds.endOfWeek,
+    }),
+    isSelected: range =>
+      isSameDay(range.startDate, defineds.startOfWeek) &&
+      isSameDay(range.endDate, defineds.endOfWeek),
   },
   {
     label: 'Last Week',
-    range() {
-      const lastWeek = addDays(new Date(), -7);
-      return {
-        startDate: startOfWeek(lastWeek),
-        endDate: endOfWeek(lastWeek),
-      };
-    },
+    range: () => ({
+      startDate: defineds.startOfLastWeek,
+      endDate: defineds.endOfLastWeek,
+    }),
+    isSelected: range =>
+      isSameDay(range.startDate, defineds.startOfLastWeek) &&
+      isSameDay(range.endDate, defineds.endOfLastWeek),
   },
   {
     label: 'This Month',
-    range() {
-      return {
-        startDate: startOfMonth(new Date()),
-        endDate: endOfMonth(new Date()),
-      };
-    },
+    range: () => ({
+      startDate: defineds.startOfMonth,
+      endDate: defineds.endOfMonth,
+    }),
+    isSelected: range =>
+      isSameDay(range.startDate, defineds.startOfMonth) &&
+      isSameDay(range.endDate, defineds.endOfMonth),
   },
   {
     label: 'Last Month',
-    range() {
-      const lastMonth = addMonths(new Date(), -1);
-      return {
-        startDate: startOfMonth(lastMonth),
-        endDate: endOfMonth(lastMonth),
-      };
-    },
+    range: () => ({
+      startDate: defineds.startOfLastMonth,
+      endDate: defineds.endOfLastMonth,
+    }),
+    isSelected: range =>
+      isSameDay(range.startDate, defineds.startOfLastMonth) &&
+      isSameDay(range.endDate, defineds.endOfLastMonth),
   },
 ];
 
 export const defaultInputRanges = [
   {
-    label: 'days up today',
+    label: 'days up to today',
     range(value) {
-      const today = new Date();
       return {
-        startDate: addDays(today, Number(value) * -1),
-        endDate: today,
+        startDate: addDays(defineds.startOfToday, Number(value) * -1),
+        endDate: defineds.endOfToday,
       };
     },
+    getCurrentValue(range) {
+      if (!isSameDay(range.endDate, defineds.endOfToday)) return '-';
+      return differenceInCalendarDays(defineds.endOfToday, range.startDate);
+    },
   },
   {
-    label: 'days up yesterday',
+    label: 'days up to yesterday',
     range(value) {
       const today = new Date();
       return {
         startDate: today,
         endDate: addDays(today, Number(value)),
       };
     },
+    getCurrentValue(range) {
+      if (!isSameDay(range.startDate, defineds.startOfToday)) return '-';
+      return differenceInCalendarDays(range.endDate, defineds.startOfToday);
+    },
   },
 ];