refactor DefinedRange

Author: mkg0

demo/src/styles/main.css

@@ -73,4 +73,8 @@
 
 .PreviewArea{
   box-shadow: 1px 1px 81px rgba(41, 60, 74, 0.18);
-}
+}
+
+.centered{
+  margin: 0 auto;
+}

src/components/DateRange.js

@@ -23,8 +23,8 @@ class DateRange extends Component {
   calcNewSelection(value, isSingleValue = true) {
     const { focusedRange } = this.state;
     const { ranges, onChange, maxDate, moveRangeOnFirstSelection } = this.props;
-    const selectedRangeIndex = focusedRange[0];
-    const selectedRange = ranges[selectedRangeIndex];
+    const focusedRangeIndex = focusedRange[0];
+    const selectedRange = ranges[focusedRangeIndex];
     if (!selectedRange || !onChange) return {};
 
     let { startDate, endDate } = selectedRange;
@@ -60,12 +60,15 @@ class DateRange extends Component {
   setSelection(value, isSingleValue) {
     const { onChange, ranges } = this.props;
     const { focusedRange } = this.state;
-    const selectedRangeIndex = focusedRange[0];
-    const selectedRange = ranges[selectedRangeIndex];
+    const focusedRangeIndex = focusedRange[0];
+    const selectedRange = ranges[focusedRangeIndex];
     if (!selectedRange) return;
     const newSelection = this.calcNewSelection(value, isSingleValue);
     onChange({
-      [selectedRange.key || `range${selectedRangeIndex + 1}`]: newSelection.range,
+      [selectedRange.key || `range${focusedRangeIndex + 1}`]: {
+        ...selectedRange,
+        ...newSelection.range,
+      },
     });
     this.setState({
       focusedRange: newSelection.nextFocusRange,

src/components/DateRangePicker.js

@@ -1,38 +1,26 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DateRange from './DateRange';
-import DefinedRanges from './DefinedRanges';
+import DefinedRange from './DefinedRange';
 import { findNextRangeIndex, generateStyles } from '../utils.js';
 import classnames from 'classnames';
 import coreStyles from '../styles';
 
 class DateRangePicker extends Component {
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
     this.state = {
       focusedRange: [findNextRangeIndex(props.ranges), 0],
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
-  handleChange(range) {
-    const { focusedRange } = this.state;
-    const { ranges, onChange } = this.props;
-    const selectedRangeIndex = focusedRange[0];
-    const selectedRange = ranges[selectedRangeIndex];
-    if (!selectedRange || !onChange) return;
-    onChange({
-      [selectedRange.key || `range${selectedRangeIndex + 1}`]: range,
-    });
-  }
   render() {
     const focusedRangeIndex = this.state.focusedRange[0];
     return (
       <div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
-        <DefinedRanges
+        <DefinedRange
           {...this.props}
           range={this.props.ranges[focusedRangeIndex] || {}}
-          onChange={this.handleChange}
           onPreviewChange={value => {
             this.dateRange.updatePreview(value);
           }}
@@ -56,7 +44,7 @@ DateRangePicker.defaultProps = {};
 
 DateRangePicker.propTypes = {
   ...DateRange.propTypes,
-  ...DefinedRanges.propTypes,
+  ...DefinedRange.propTypes,
   className: PropTypes.string,
 };
 

src/components/DefinedRanges.js renamed to src/components/DefinedRange.js

@@ -15,39 +15,55 @@ class DefinedRanges extends Component {
     this.handleRangeChange = this.handleRangeChange.bind(this);
   }
   handleRangeChange(range) {
-    const { onChange } = this.props;
-    onChange && onChange(range);
+    const { onChange, ranges, focusedRangeIndex } = this.props;
+    const selectedRange = ranges[focusedRangeIndex];
+    if (!onChange || !selectedRange) return;
+    onChange({
+      [selectedRange.key || `range${focusedRangeIndex + 1}`]: { ...selectedRange, ...range },
+    });
   }
-  checkIsSelected(definedRange, ranges) {
-    return ranges.some(range => definedRange.isSelected && definedRange.isSelected(range));
+  getSelectedRange(ranges, staticRange) {
+    const focusedRangeIndex = ranges.findIndex(range => {
+      if (!range.startDate || !range.endDate || range.disabled) return false;
+      return staticRange.isSelected(range);
+    });
+    const selectedRange = ranges[focusedRangeIndex];
+    return { selectedRange, focusedRangeIndex };
   }
   render() {
-    const { onPreviewChange } = this.props;
-    const validRanges = this.props.ranges.filter(
-      item => item.startDate && item.endDate && !item.disabled
-    );
+    const { onPreviewChange, ranges, rangeColors, className } = this.props;
     return (
       <div
-        className={styles.definedRangesWrapper}
+        className={cx(styles.definedRangesWrapper, className)}
         onMouseLeave={() => {
           this.props.onPreviewChange && this.props.onPreviewChange();
         }}>
         {this.props.headerContent}
         <div className={styles.staticRanges}>
-          {this.props.staticRanges.map((rangeOption, i) => (
-            <button
-              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))}
-              onMouseOver={() => onPreviewChange && onPreviewChange(rangeOption.range(this.props))}>
-              <span tabIndex={-1} className={styles.staticRangeLabel}>
-                {rangeOption.label}
-              </span>
-            </button>
-          ))}
+          {this.props.staticRanges.map((staticRange, i) => {
+            const { selectedRange, focusedRangeIndex } = this.getSelectedRange(ranges, staticRange);
+            return (
+              <button
+                className={cx(styles.staticRange, {
+                  [styles.staticRangeSelected]: Boolean(selectedRange),
+                })}
+                style={{
+                  color: selectedRange
+                    ? selectedRange.color || rangeColors[focusedRangeIndex]
+                    : null,
+                }}
+                key={i}
+                onClick={() => this.handleRangeChange(staticRange.range(this.props))}
+                onFocus={() => onPreviewChange && onPreviewChange(staticRange.range(this.props))}
+                onMouseOver={() =>
+                  onPreviewChange && onPreviewChange(staticRange.range(this.props))
+                }>
+                <span tabIndex={-1} className={styles.staticRangeLabel}>
+                  {staticRange.label}
+                </span>
+              </button>
+            );
+          })}
         </div>
         <div className={styles.inputRanges}>
           {this.props.inputRanges.map((rangeOption, i) => (
@@ -65,9 +81,7 @@ class DefinedRanges extends Component {
                 max={99999}
                 value={
                   rangeOption.getCurrentValue
-                    ? rangeOption.getCurrentValue(
-                        this.props.ranges[this.props.focusedRangeIndex] || {}
-                      )
+                    ? rangeOption.getCurrentValue(ranges[this.props.focusedRangeIndex] || {})
                     : '-'
                 }
               />
@@ -90,11 +104,16 @@ DefinedRanges.propTypes = {
   onChange: PropTypes.func,
   footerContent: PropTypes.any,
   headerContent: PropTypes.any,
+  rangeColors: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
 };
 
 DefinedRanges.defaultProps = {
   inputRanges: defaultInputRanges,
   staticRanges: defaultStaticRanges,
+  ranges: [],
+  rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+  focusedRangeIndex: 0,
 };
 
 export default DefinedRanges;

src/components/definedRanges.scss renamed to src/components/definedRange.scss

@@ -1,5 +1,5 @@
 export { default as DateRange } from './components/DateRange';
 export { default as Calendar } from './components/Calendar';
 export { default as DateRangePicker } from './components/DateRangePicker';
-export { default as DefinedRanges } from './components/DefinedRanges';
+export { default as DefinedRange } from './components/DefinedRange';
 export { inputRanges, staticRanges, createStaticRanges } from './defaultRanges';

src/index.js

@@ -2,4 +2,4 @@
 @import 'components/dateRange.scss';
 @import 'components/dayCell.scss';
 @import 'components/dateRangePicker.scss';
-@import 'components/definedRanges.scss';
+@import 'components/definedRange.scss';

src/styles.scss

@@ -300,7 +300,7 @@
   border-right: solid 1px #eff2f7;
   background: #fff;
   .rdrStaticRangeSelected{
-    color: #3d91ff;
+    color: currentColor;
     font-weight: 600;
   }
 }