fix(DatesRangeInput): error when allowed range doesn't contain today (#140)

* install prop-types types

* upgrade typescript

* import * instead of default from prop-types and react

* fix(DatesRangeInput): error when allowed range doesn't contain today

Author: arfedulov

example/calendar.tsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 // import 'moment/locale/ru';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import {
   Checkbox,
   Form,

package.json

@@ -53,6 +53,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@types/lodash": "^4.14.119",
+    "@types/prop-types": "^15.7.1",
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
     "babel-loader": "^8.0.4",

src/inputs/DateInput.tsx

@@ -2,8 +2,8 @@ import isBoolean from 'lodash/isBoolean';
 import isNil from 'lodash/isNil';
 import invoke from 'lodash/invoke';
 import moment, { Moment } from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 import CustomPropTypes from '../lib/CustomPropTypes';
 import {

src/inputs/DateTimeInput.tsx

@@ -3,8 +3,8 @@ import isNil from 'lodash/isNil';
 import invoke from 'lodash/invoke';
 
 import moment, { Moment } from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 import CustomPropTypes from '../lib/CustomPropTypes';
 import {

src/inputs/DatesRangeInput.tsx

@@ -1,6 +1,6 @@
 import invoke from 'lodash/invoke';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 import CustomPropTypes from '../lib/CustomPropTypes';
 import InputView from '../views/InputView';
@@ -157,7 +157,18 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
       start,
       end,
     } = parseDatesRange(value, dateFormat);
+
     const markedParsed = parseArrayOrValue(marked, dateFormat, localization);
+    const minDateParsed = parseValue(minDate, dateFormat, localization);
+    const maxDateParsed = parseValue(maxDate, dateFormat, localization);
+    
+    let initializeWith;
+    
+    if (!initialDate && minDateParsed || maxDateParsed) {
+      initializeWith = minDateParsed || maxDateParsed;
+    } else {
+      initializeWith = buildValue(start, initialDate, localization, dateFormat);
+    }
 
     return (
       <DatesRangePicker
@@ -168,7 +179,7 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
         closePopup={this.closePopup}
         onChange={this.handleSelect}
         dateFormat={dateFormat}
-        initializeWith={buildValue(start, initialDate, localization, dateFormat)}
+        initializeWith={initializeWith}
         start={start}
         end={end}
         marked={markedParsed}

src/inputs/MonthInput.tsx

@@ -1,7 +1,7 @@
 import invoke from 'lodash/invoke';
 import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 import CustomPropTypes from '../lib/CustomPropTypes';
 import MonthPicker, {

src/inputs/MonthRangeInput.tsx

@@ -1,6 +1,6 @@
 import invoke from 'lodash/invoke';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 import BaseInput, {BaseInputProps, BaseInputState, DateRelatedProps, MinMaxValueProps} from './BaseInput';
 
 import CustomPropTypes from '../lib/CustomPropTypes';

src/inputs/TimeInput.tsx

@@ -2,8 +2,8 @@ import isNil from 'lodash/isNil';
 import invoke from 'lodash/invoke';
 
 import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 import { tick } from '../lib';
 import {

src/inputs/YearInput.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 import CustomPropTypes from '../lib/CustomPropTypes';
 import YearPicker, {

src/lib/findHTMLElement.ts

@@ -1,5 +1,5 @@
 import { ReactInstance } from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 export default function findHTMLElement(e: ReactInstance): HTMLElement | undefined {
   const el = ReactDOM.findDOMNode(e);

src/pickers/BasePicker.tsx

@@ -3,7 +3,7 @@ import isNumber from 'lodash/isNumber';
 import isNil from 'lodash/isNil';
 import includes from 'lodash/includes';
 import { Moment } from 'moment';
-import React from 'react';
+import * as React from 'react';
 
 import {
   RangeIndexes,

src/pickers/YearPicker.tsx

@@ -9,7 +9,7 @@ import last from 'lodash/last';
 import first from 'lodash/first';
 import some from 'lodash/some';
 
-import React from 'react';
+import * as React from 'react';
 
 import YearView from '../views/YearView';
 import {

src/pickers/dayPicker/DatesRangePicker.tsx

@@ -5,7 +5,7 @@ import last from 'lodash/last';
 import isNil from 'lodash/isNil';
 import moment from 'moment';
 import { Moment } from 'moment';
-import React from 'react';
+import * as React from 'react';
 
 import { RangeIndexes } from '../../views/BaseCalendarView';
 import DatesRangeView from '../../views/DatesRangeView';

src/pickers/dayPicker/DayPicker.tsx

@@ -4,7 +4,7 @@ import includes from 'lodash/includes';
 import isArray from 'lodash/isArray';
 import some from 'lodash/some';
 
-import React from 'react';
+import * as React from 'react';
 
 import DayView from '../../views/DayView';
 import { WEEKS_TO_DISPLAY } from '../../views/DayView';

src/pickers/monthPicker/MonthPicker.tsx

@@ -3,7 +3,7 @@ import range from 'lodash/range';
 import includes from 'lodash/includes';
 import isNil from 'lodash/isNil';
 
-import React from 'react';
+import * as React from 'react';
 
 import MonthView from '../../views/MonthView';
 import {

src/pickers/monthPicker/MonthRangePicker.tsx

@@ -5,7 +5,7 @@ import isNil from 'lodash/isNil';
 
 import {Moment} from 'moment';
 import moment from 'moment';
-import React from 'react';
+import * as React from 'react';
 
 import {RangeIndexes} from '../../views/BaseCalendarView';
 import MonthRangeView from '../../views/MonthRangeView';

src/pickers/timePicker/HourPicker.tsx

@@ -6,7 +6,7 @@ import concat from 'lodash/concat';
 import uniq from 'lodash/uniq';
 import sortBy from 'lodash/sortBy';
 
-import React from 'react';
+import * as React from 'react';
 
 import HourView from '../../views/HourView';
 import {

src/pickers/timePicker/MinutePicker.tsx

@@ -4,7 +4,7 @@ import concat from 'lodash/concat';
 import uniq from 'lodash/uniq';
 import sortBy from 'lodash/sortBy';
 
-import React from 'react';
+import * as React from 'react';
 
 import MinuteView from '../../views/MinuteView';
 import {

src/views/BaseCalendarView.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SemanticCOLORS } from 'semantic-ui-react';
 
 export interface BaseCalendarViewProps {

src/views/Calendar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Table } from 'semantic-ui-react';
 
 // interface PickerStyle {

src/views/CalendarBody/Body.tsx

@@ -1,7 +1,7 @@
 import isNil from 'lodash/isNil';
 import isArray from 'lodash/isArray';
 
-import React from 'react';
+import * as React from 'react';
 import { Table } from 'semantic-ui-react';
 
 import { OnValueClickData } from '../BaseCalendarView';

src/views/CalendarBody/Cell.tsx

@@ -1,6 +1,6 @@
 import invoke from 'lodash/invoke';
 
-import React from 'react';
+import * as React from 'react';
 import { Table, Label } from 'semantic-ui-react';
 
 import { OnValueClickData } from '../BaseCalendarView';

src/views/CalendarHeader/Header.tsx

@@ -1,6 +1,6 @@
 import isNil from 'lodash/isNil';
 
-import React from 'react';
+import * as React from 'react';
 import {
   Icon,
   Table,

src/views/CalendarHeader/HeaderRange.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Table } from 'semantic-ui-react';
 
 const cellStyle = {

src/views/CalendarHeader/HeaderWeeks.tsx

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import React from 'react';
+import * as React from 'react';
 import { Table } from 'semantic-ui-react';
 
 /** Return array of week day names.

src/views/DatesRangeView.tsx

@@ -1,7 +1,7 @@
 import range from 'lodash/range';
 import isNil from 'lodash/isNil';
 
-import React from 'react';
+import * as React from 'react';
 
 import BaseCalendarView, {
   BaseCalendarViewProps,

src/views/DayView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import BaseCalendarView, {
   BaseCalendarViewProps,

src/views/HourView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import BaseCalendarView, {
   BaseCalendarViewProps,

src/views/InputView.tsx

@@ -1,7 +1,7 @@
 import isString from 'lodash/isString';
 import invoke from 'lodash/invoke';
 
-import React from 'react';
+import * as React from 'react';
 import {
   Form,
   FormInputProps,

src/views/MinuteView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import BaseCalendarView, {
   BaseCalendarViewProps,

src/views/MonthRangeView.tsx

@@ -1,7 +1,7 @@
 import range from 'lodash/range';
 import isNil from 'lodash/isNil';
 
-import React from 'react';
+import * as React from 'react';
 import {findHTMLElement} from '../lib';
 
 import BaseCalendarView, {

src/views/MonthView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import BaseCalendarView, {
   BaseCalendarViewProps,

src/views/YearView.tsx

@@ -1,7 +1,7 @@
 import last from 'lodash/last';
 import first from 'lodash/first';
 
-import React from 'react';
+import * as React from 'react';
 
 import BaseCalendarView, {
   BaseCalendarViewProps,

tsconfig.json

@@ -12,12 +12,7 @@
       "es2015",
       "dom"
     ],
-    "module": "commonjs",
-    "paths": {
-      "react": [
-        "node_modules/@types/react"
-      ]
-    }
+    "module": "commonjs"
   },
   "include": [
       "./src/**/*"

yarn.lock

@@ -858,6 +858,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.0.tgz#4c48fed958d6dcf9487195a0ef6456d5f6e0163a"
   integrity sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg==
 
+"@types/prop-types@^15.7.1":
+  version "15.7.1"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
+  integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
+
 "@types/react-dom@^16.0.11":
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.3.tgz#6131b7b6158bc7ed1925a3374b88b7c00481f0cb"
@@ -6188,9 +6193,9 @@ typedarray@^0.0.6:
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
 typescript@^3.2.2:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.1.tgz#b6691be11a881ffa9a05765a205cb7383f3b63c6"
-  integrity sha512-3NSMb2VzDQm8oBTLH6Nj55VVtUEpe/rgkIzMir0qVoLyjDZlnMBva0U6vDiV3IH+sl/Yu6oP5QwsAQtHPmDd2Q==
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99"
+  integrity sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"