Mark active predefined range when active

Author: burakcan

lib/DateRange.js

@@ -188,6 +188,7 @@ var DateRange = (function (_Component) {
         ranges && _react2['default'].createElement(_PredefinedRangesJs2['default'], {
           format: format,
           ranges: ranges,
+          range: range,
           theme: styles,
           onSelect: this.handleSelect.bind(this),
           onlyClasses: onlyClasses,

lib/PredefinedRanges.js

@@ -48,7 +48,6 @@ var PredefinedRanges = (function (_Component) {
 
       var range = this.props.ranges[name];
 
-      // BECAUSE FUCK MOMENT
       this.props.onSelect({
         startDate: (0, _utilsParseInputJs2['default'])(range['startDate']),
         endDate: (0, _utilsParseInputJs2['default'])(range['endDate'])
@@ -59,36 +58,46 @@ var PredefinedRanges = (function (_Component) {
     value: function renderRangeList(classes) {
       var _this = this;
 
-      var ranges = this.props.ranges;
+      var _props = this.props;
+      var ranges = _props.ranges;
+      var range = _props.range;
       var styles = this.styles;
 
       return Object.keys(ranges).map((function (name) {
+        var active = (0, _utilsParseInputJs2['default'])(ranges[name].startDate).isSame(range.startDate) && (0, _utilsParseInputJs2['default'])(ranges[name].endDate).isSame(range.endDate);
+
+        var style = _extends({}, styles['PredefinedRangesItem'], active ? styles['PredefinedRangesItemActive'] : {});
+
         return _react2['default'].createElement(
           'a',
           {
             href: '#',
             key: 'range-' + name,
-            className: classes.predefinedRangeItem,
-            style: styles['PredefinedRangeItem'],
-            onClick: _this.handleSelect.bind(_this, name) },
+            className: classes.predefinedRangesItem + (active ? ' active' : ''),
+            style: style,
+            onClick: _this.handleSelect.bind(_this, name)
+          },
           name
         );
       }).bind(this));
     }
   }, {
     key: 'render',
     value: function render() {
-      var _props = this.props;
-      var style = _props.style;
-      var onlyClasses = _props.onlyClasses;
-      var classNames = _props.classNames;
+      var _props2 = this.props;
+      var style = _props2.style;
+      var onlyClasses = _props2.onlyClasses;
+      var classNames = _props2.classNames;
       var styles = this.styles;
 
       var classes = _extends({}, _stylesJs.defaultClasses, classNames);
 
       return _react2['default'].createElement(
         'div',
-        { style: onlyClasses ? undefined : _extends({}, styles['PredefinedRanges'], style), className: classes.predefinedRanges },
+        {
+          style: onlyClasses ? undefined : _extends({}, styles['PredefinedRanges'], style),
+          className: classes.predefinedRanges
+        },
         this.renderRangeList(classes)
       );
     }

lib/styles.js

@@ -10,7 +10,7 @@ var defaultClasses = {
   calendar: 'rdr-Calendar',
   dateRange: 'rdr-DateRange',
   predefinedRanges: 'rdr-PredefinedRanges',
-  predefinedRangesItem: 'rdr-PredefinedRangeItem',
+  predefinedRangesItem: 'rdr-PredefinedRangesItem',
   monthAndYear: 'rdr-MonthAndYear',
   weekDays: 'rdr-WeekDays',
   weekDay: 'rdr-WeekDay',
@@ -19,9 +19,6 @@ var defaultClasses = {
   dayActive: 'is-selected',
   dayPassive: 'is-passive',
   dayInRange: 'is-inRange',
-  dayStartEdge : 'is-startEdge',
-  dayEndEdge : 'is-endEdge',
-  dayToday : 'is-today',
   monthAndYearWrapper: 'rdr-MonthAndYear-innerWrapper',
   prevButton: 'rdr-MonthAndYear-button prev',
   nextButton: 'rdr-MonthAndYear-button next',
@@ -152,7 +149,7 @@ var defaultTheme = {
     verticalAlign: 'top'
   },
 
-  PredefinedRangeItem: {
+  PredefinedRangesItem: {
     display: 'block',
     fontSize: 12,
     color: '#2c3e50',
@@ -161,6 +158,10 @@ var defaultTheme = {
     background: '#ecf0f1',
     textDecoration: 'none',
     marginBottom: 6
+  },
+
+  PredefinedRangesItemActive: {
+    color: '#E74C3C'
   }
 };
 
@@ -225,6 +226,8 @@ exports['default'] = function () {
 
     PredefinedRanges: _extends({}, defaultTheme.PredefinedRanges, customTheme.PredefinedRanges),
 
-    PredefinedRangeItem: _extends({}, defaultTheme.PredefinedRangeItem, customTheme.PredefinedRangeItem)
+    PredefinedRangesItem: _extends({}, defaultTheme.PredefinedRangesItem, customTheme.PredefinedRangesItem),
+
+    PredefinedRangesItemActive: _extends({}, defaultTheme.PredefinedRangesItemActive, customTheme.PredefinedRangesItemActive)
   };
-};
+};

src/DateRange.js

@@ -120,6 +120,7 @@ class DateRange extends Component {
           <PredefinedRanges
             format={ format }
             ranges={ ranges }
+            range={ range }
             theme={ styles }
             onSelect={this.handleSelect.bind(this)}
             onlyClasses={ onlyClasses }

src/PredefinedRanges.js

@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react';
 import moment from 'moment';
-
 import parseInput from './utils/parseInput.js';
 import { defaultClasses } from './styles.js';
 
@@ -17,25 +16,35 @@ class PredefinedRanges extends Component {
 
     const range = this.props.ranges[name];
 
-    // BECAUSE FUCK MOMENT
     this.props.onSelect({
       startDate : parseInput(range['startDate']),
       endDate   : parseInput(range['endDate']),
     });
   }
 
   renderRangeList(classes) {
-    const { ranges } = this.props;
+    const { ranges, range } = this.props;
     const { styles } = this;
 
     return Object.keys(ranges).map(name => {
+      const active = (
+        parseInput(ranges[name].startDate).isSame(range.startDate) &&
+        parseInput(ranges[name].endDate).isSame(range.endDate)
+      );
+
+      const style = {
+        ...styles['PredefinedRangesItem'],
+        ...(active ? styles['PredefinedRangesItemActive'] : {}),
+      };
+
       return (
         <a
           href='#'
           key={'range-' + name}
-          className={classes.predefinedRangeItem}
-          style={styles['PredefinedRangeItem']}
-          onClick={this.handleSelect.bind(this, name)}>
+          className={classes.predefinedRangesItem + (active ? ' active' : '')}
+          style={ style }
+          onClick={this.handleSelect.bind(this, name)}
+        >
           {name}
         </a>
       );
@@ -49,8 +58,11 @@ class PredefinedRanges extends Component {
     const classes = { ...defaultClasses, ...classNames };
 
     return (
-      <div style={onlyClasses ? undefined : { ...styles['PredefinedRanges'], ...style }} className={classes.predefinedRanges}>
-        {this.renderRangeList(classes)}
+      <div
+        style={onlyClasses ? undefined : { ...styles['PredefinedRanges'], ...style }}
+        className={ classes.predefinedRanges }
+      >
+        { this.renderRangeList(classes) }
       </div>
     );
   }

src/styles.js

@@ -2,7 +2,7 @@ export const defaultClasses = {
   calendar             : 'rdr-Calendar',
   dateRange            : 'rdr-DateRange',
   predefinedRanges     : 'rdr-PredefinedRanges',
-  predefinedRangesItem : 'rdr-PredefinedRangeItem',
+  predefinedRangesItem : 'rdr-PredefinedRangesItem',
   monthAndYear         : 'rdr-MonthAndYear',
   weekDays             : 'rdr-WeekDays',
   weekDay              : 'rdr-WeekDay',
@@ -143,7 +143,7 @@ const defaultTheme = {
     verticalAlign : 'top',
   },
 
-  PredefinedRangeItem : {
+  PredefinedRangesItem : {
     display       : 'block',
     fontSize      : 12,
     color         : '#2c3e50',
@@ -152,8 +152,12 @@ const defaultTheme = {
     background    : '#ecf0f1',
     textDecoration: 'none',
     marginBottom  : 6,
-  }
-}
+  },
+
+  PredefinedRangesItemActive : {
+    color         : '#E74C3C',
+  },
+};
 
 export default (customTheme = {}) => {
 
@@ -219,6 +223,8 @@ export default (customTheme = {}) => {
 
     PredefinedRanges : { ...defaultTheme.PredefinedRanges, ...customTheme.PredefinedRanges },
 
-    PredefinedRangeItem : { ...defaultTheme.PredefinedRangeItem, ...customTheme.PredefinedRangeItem }
+    PredefinedRangesItem : { ...defaultTheme.PredefinedRangesItem, ...customTheme.PredefinedRangesItem },
+
+    PredefinedRangesItemActive : { ...defaultTheme.PredefinedRangesItemActive, ...customTheme.PredefinedRangesItemActive }
   }
 }