Fix hypeserver#627 and eslint suggestions

Author: umakantp

src/accessibility/index.js

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 
 export const ariaLabelsShape = PropTypes.shape({
-  dateInput: PropTypes.objectOf(
-    PropTypes.shape({ startDate: PropTypes.string, endDate: PropTypes.string })
-  ),
+  dateInput: PropTypes.objectOf(PropTypes.shape({ startDate: PropTypes.string, endDate: PropTypes.string })),
   monthPicker: PropTypes.string,
   yearPicker: PropTypes.string,
   prevButton: PropTypes.string,

src/components/Calendar/index.js

@@ -1,26 +1,30 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { rangeShape } from '../DayCell';
-import Month from '../Month';
-import DateInput from '../DateInput';
-import { calcFocusDate, generateStyles, getMonthDisplayRange } from '../../utils';
 import classnames from 'classnames';
-import ReactList from 'react-list';
-import { shallowEqualObjects } from 'shallow-equal';
 import * as dateFns from 'date-fns';
 import { enUS as defaultLocale } from 'date-fns/locale/en-US';
-import coreStyles from '../../styles';
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import ReactList from 'react-list';
+import { shallowEqualObjects } from 'shallow-equal';
 import { ariaLabelsShape } from '../../accessibility';
+import coreStyles from '../../styles';
+import { calcFocusDate, generateStyles, getMonthDisplayRange, restrictMinMaxDate } from '../../utils';
+import DateInput from '../DateInput';
+import { rangeShape } from '../DayCell';
+import Month from '../Month';
 
 class Calendar extends PureComponent {
   constructor(props, context) {
     super(props, context);
     this.dateOptions = { locale: props.locale };
-    if (props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = props.weekStartsOn;
+    if (props.weekStartsOn !== undefined) {
+      this.dateOptions.weekStartsOn = props.weekStartsOn;
+    }
     this.styles = generateStyles([coreStyles, props.classNames]);
     this.listSizeCache = {};
     this.isFirstRender = true;
+    const ranges = restrictMinMaxDate(props.ranges, props.minDate, props.maxDate);
     this.state = {
+      ranges,
       monthNames: this.getMonthNames(),
       focusedDate: calcFocusDate(null, props),
       drag: {
@@ -70,11 +74,7 @@ class Calendar extends PureComponent {
       this.setState({ focusedDate: date });
       return;
     }
-    const targetMonthIndex = dateFns.differenceInCalendarMonths(
-      date,
-      props.minDate,
-      this.dateOptions
-    );
+    const targetMonthIndex = dateFns.differenceInCalendarMonths(date, props.minDate, this.dateOptions);
     const visibleMonths = this.list.getVisibleRange();
     if (preventUnnecessary && visibleMonths.includes(targetMonthIndex)) return;
     this.isFirstRender = true;
@@ -120,13 +120,9 @@ class Calendar extends PureComponent {
       this.updateShownDate(this.props);
     }
 
-    if (
-      prevProps.locale !== this.props.locale ||
-      prevProps.weekStartsOn !== this.props.weekStartsOn
-    ) {
+    if (prevProps.locale !== this.props.locale || prevProps.weekStartsOn !== this.props.weekStartsOn) {
       this.dateOptions = { locale: this.props.locale };
-      if (this.props.weekStartsOn !== undefined)
-        this.dateOptions.weekStartsOn = this.props.weekStartsOn;
+      if (this.props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = this.props.weekStartsOn;
       this.setState({
         monthNames: this.getMonthNames(),
       });
@@ -182,7 +178,8 @@ class Calendar extends PureComponent {
             type="button"
             className={classnames(styles.nextPrevButton, styles.prevButton)}
             onClick={() => changeShownDate(-1, 'monthOffset')}
-            aria-label={ariaLabels.prevButton}>
+            aria-label={ariaLabels.prevButton}
+          >
             <i />
           </button>
         ) : null}
@@ -192,7 +189,8 @@ class Calendar extends PureComponent {
               <select
                 value={focusedDate.getMonth()}
                 onChange={e => changeShownDate(e.target.value, 'setMonth')}
-                aria-label={ariaLabels.monthPicker}>
+                aria-label={ariaLabels.monthPicker}
+              >
                 {this.state.monthNames.map((monthName, i) => (
                   <option key={i} value={i}>
                     {monthName}
@@ -205,17 +203,16 @@ class Calendar extends PureComponent {
               <select
                 value={focusedDate.getFullYear()}
                 onChange={e => changeShownDate(e.target.value, 'setYear')}
-                aria-label={ariaLabels.yearPicker}>
-                {new Array(upperYearLimit - lowerYearLimit + 1)
-                  .fill(upperYearLimit)
-                  .map((val, i) => {
-                    const year = val - i;
-                    return (
-                      <option key={year} value={year}>
-                        {year}
-                      </option>
-                    );
-                  })}
+                aria-label={ariaLabels.yearPicker}
+              >
+                {new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map((val, i) => {
+                  const year = val - i;
+                  return (
+                    <option key={year} value={year}>
+                      {year}
+                    </option>
+                  );
+                })}
               </select>
             </span>
           </span>
@@ -229,7 +226,8 @@ class Calendar extends PureComponent {
             type="button"
             className={classnames(styles.nextPrevButton, styles.nextButton)}
             onClick={() => changeShownDate(+1, 'monthOffset')}
-            aria-label={ariaLabels.nextButton}>
+            aria-label={ariaLabels.nextButton}
+          >
             <i />
           </button>
         ) : null}
@@ -257,28 +255,24 @@ class Calendar extends PureComponent {
     const {
       focusedRange,
       color,
-      ranges,
       rangeColors,
       dateDisplayFormat,
       editableDateInputs,
       startDatePlaceholder,
       endDatePlaceholder,
       ariaLabels,
     } = this.props;
+    const { ranges } = this.state;
 
     const defaultColor = rangeColors[focusedRange[0]] || color;
     const styles = this.styles;
 
     return (
       <div className={styles.dateDisplayWrapper}>
         {ranges.map((range, i) => {
-          if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay))
-            return null;
+          if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay)) return null;
           return (
-            <div
-              className={styles.dateDisplay}
-              key={i}
-              style={{ color: range.color || defaultColor }}>
+            <div className={styles.dateDisplay} key={i} style={{ color: range.color || defaultColor }}>
               <DateInput
                 className={classnames(styles.dateDisplayItem, {
                   [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 0,
@@ -403,7 +397,7 @@ class Calendar extends PureComponent {
     const isVertical = direction === 'vertical';
     const monthAndYearRenderer = navigatorRenderer || this.renderMonthAndYear;
 
-    const ranges = this.props.ranges.map((range, i) => ({
+    const ranges = this.state.ranges.map((range, i) => ({
       ...range,
       color: range.color || rangeColors[i] || color,
     }));
@@ -413,7 +407,8 @@ class Calendar extends PureComponent {
         onMouseUp={() => this.setState({ drag: { status: false, range: {} } })}
         onMouseLeave={() => {
           this.setState({ drag: { status: false, range: {} } });
-        }}>
+        }}
+      >
         {showDateDisplay && this.renderDateDisplay()}
         {monthAndYearRenderer(focusedDate, this.changeShownDate, this.props)}
         {scroll.enabled ? (
@@ -429,7 +424,8 @@ class Calendar extends PureComponent {
                 width: scrollArea.calendarWidth + 11,
                 height: scrollArea.calendarHeight + 11,
               }}
-              onScroll={this.handleScroll}>
+              onScroll={this.handleScroll}
+            >
               <ReactList
                 length={dateFns.differenceInCalendarMonths(
                   dateFns.endOfMonth(maxDate),
@@ -478,7 +474,8 @@ class Calendar extends PureComponent {
             className={classnames(
               this.styles.months,
               isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
-            )}>
+            )}
+          >
             {new Array(this.props.months).fill(null).map((_, i) => {
               let monthStep = dateFns.addMonths(this.state.focusedDate, i);
               if (this.props.calendarFocus === 'backwards') {

src/components/DateRange/index.js

@@ -1,30 +1,28 @@
-import React, { Component } from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import coreStyles from '../../styles';
+import { calcNewSelection, findNextRangeIndex, generateStyles, restrictMinMaxDate } from '../../utils';
 import Calendar from '../Calendar';
 import { rangeShape } from '../DayCell';
-import { calcNewSelection, findNextRangeIndex, generateStyles } from '../../utils';
-import classnames from 'classnames';
-import coreStyles from '../../styles';
 
 class DateRange extends Component {
   constructor(props, context) {
     super(props, context);
+    const ranges = restrictMinMaxDate(props.ranges, props.minDate, props.maxDate);
     this.state = {
-      focusedRange: props.initialFocusedRange || [findNextRangeIndex(props.ranges), 0],
+      ranges,
+      focusedRange: props.initialFocusedRange || [findNextRangeIndex(ranges), 0],
       preview: null,
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
   calcNewSelection = (value, isSingleValue = true) => {
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
-    const {
-      ranges,
-      onChange,
-      maxDate,
-      moveRangeOnFirstSelection,
-      retainEndDateOnFirstSelection,
-      disabledDates,
-    } = this.props;
+    const { onChange, maxDate, moveRangeOnFirstSelection, retainEndDateOnFirstSelection, disabledDates } =
+      this.props;
+    const { ranges } = this.state;
+
     return calcNewSelection(
       value,
       isSingleValue,
@@ -38,6 +36,7 @@ class DateRange extends Component {
     );
   };
   setSelection = (value, isSingleValue) => {
+    console.log('uma setSelection', value);
     const { onChange, ranges, onRangeFocusChange } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const focusedRangeIndex = focusedRange[0];

src/components/DateRangePicker/README.md

@@ -16,7 +16,6 @@ const [state, setState] = useState([
 
 <DateRangePicker
   onChange={item => setState([item.selection])}
-  showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
   months={2}
   ranges={state}
@@ -40,7 +39,6 @@ const [state, setState] = useState([
 
 <DateRangePicker
   onChange={item => setState([item.selection])}
-  showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
   months={2}
   ranges={state}
@@ -132,7 +130,6 @@ const [state, setState] = useState({
 
 <DateRangePicker
   onChange={item => setState({ ...state, ...item })}
-  showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
   months={2}
   ranges={[state.selection1, state.selection2]}
@@ -197,7 +194,6 @@ function customDayContent(day) {
 
 <DateRangePicker
   onChange={item => setState({ ...state, ...item })}
-  showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
   months={2}
   ranges={[state.selection1, state.selection2]}

src/components/DateRangePicker/index.js

@@ -1,16 +1,18 @@
-import React, { Component } from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import coreStyles from '../../styles';
+import { findNextRangeIndex, generateStyles, restrictMinMaxDate } from '../../utils';
 import DateRange from '../DateRange';
 import DefinedRange from '../DefinedRange';
-import { findNextRangeIndex, generateStyles } from '../../utils';
-import classnames from 'classnames';
-import coreStyles from '../../styles';
 
 class DateRangePicker extends Component {
   constructor(props) {
     super(props);
+    const ranges = restrictMinMaxDate(props.ranges, props.minDate, props.maxDate);
     this.state = {
-      focusedRange: [findNextRangeIndex(props.ranges), 0],
+      ranges,
+      focusedRange: [findNextRangeIndex(ranges), 0],
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
@@ -33,6 +35,7 @@ class DateRangePicker extends Component {
           onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
           focusedRange={focusedRange}
           {...this.props}
+          ranges={this.state.ranges}
           ref={t => (this.dateRange = t)}
           className={undefined}
         />

src/components/DayCell/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-fallthrough */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as dateFns from 'date-fns';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 class DayCell extends Component {
   constructor(props, context) {
@@ -88,8 +88,7 @@ class DayCell extends Component {
     const startDate = preview.startDate ? dateFns.endOfDay(preview.startDate) : null;
     const endDate = preview.endDate ? dateFns.startOfDay(preview.endDate) : null;
     const isInRange =
-      (!startDate || dateFns.isAfter(day, startDate)) &&
-      (!endDate || dateFns.isBefore(day, endDate));
+      (!startDate || dateFns.isAfter(day, startDate)) && (!endDate || dateFns.isBefore(day, endDate));
     const isStartEdge = !isInRange && dateFns.isSameDay(day, startDate);
     const isEndEdge = !isInRange && dateFns.isSameDay(day, endDate);
     return (
@@ -107,9 +106,7 @@ class DayCell extends Component {
     const { styles, ranges, day } = this.props;
     if (this.props.displayMode === 'date') {
       let isSelected = dateFns.isSameDay(this.props.day, this.props.date);
-      return isSelected ? (
-        <span className={styles.selected} style={{ color: this.props.color }} />
-      ) : null;
+      return isSelected ? <span className={styles.selected} style={{ color: this.props.color }} /> : null;
     }
 
     const inRanges = ranges.reduce((result, range) => {
@@ -121,8 +118,7 @@ class DayCell extends Component {
       startDate = startDate ? dateFns.endOfDay(startDate) : null;
       endDate = endDate ? dateFns.startOfDay(endDate) : null;
       const isInRange =
-        (!startDate || dateFns.isAfter(day, startDate)) &&
-        (!endDate || dateFns.isBefore(day, endDate));
+        (!startDate || dateFns.isAfter(day, startDate)) && (!endDate || dateFns.isBefore(day, endDate));
       const isStartEdge = !isInRange && dateFns.isSameDay(day, startDate);
       const isEndEdge = !isInRange && dateFns.isSameDay(day, endDate);
       if (isInRange || isStartEdge || isEndEdge) {
@@ -168,7 +164,8 @@ class DayCell extends Component {
         onKeyUp={this.handleKeyEvent}
         className={this.getClassNames(this.props.styles)}
         {...(this.props.disabled || this.props.isPassive ? { tabIndex: -1 } : {})}
-        style={{ color: this.props.color }}>
+        style={{ color: this.props.color }}
+      >
         {this.renderSelectionPlaceholders()}
         {this.renderPreviewPlaceholder()}
         <span className={this.props.styles.dayNumber}>