From 40dd5df41396c38f2edeb1493ff6c25748835f7e Mon Sep 17 00:00:00 2001
From: Artem Fedulov <arfedulov@gmail.com>
Date: Sat, 30 Jun 2018 21:52:06 +0300
Subject: [PATCH] fix: doesn't work with React 15

---
 src/components/TimePickerComponent.js         | 50 ++++++++++++-------
 .../pickerContent/DateTimePickerContent.js    | 29 +++++------
 .../pickerContent/DatesRangePickerContent.js  |  8 ++-
 src/components/pickerModes/DayMode.js         |  8 ++-
 src/components/pickerModes/MonthMode.js       |  8 ++-
 src/components/pickerModes/YearMode.js        |  8 ++-
 src/containers/inputs/DateInput.js            | 36 ++++++-------
 src/containers/inputs/DateTimeInput.js        | 49 ++++++++----------
 src/containers/inputs/DatesRangeInput.js      | 19 +++----
 src/containers/inputs/TimeInput.js            | 17 +++----
 10 files changed, 117 insertions(+), 115 deletions(-)

diff --git a/src/components/TimePickerComponent.js b/src/components/TimePickerComponent.js
index e19ba2d5..285f6074 100644
--- a/src/components/TimePickerComponent.js
+++ b/src/components/TimePickerComponent.js
@@ -2,12 +2,15 @@ import React from 'react';
 import { HourPicker, MinutePicker, PickerHeader } from '.';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { Table } from 'semantic-ui-react';
 
 function TimePickerComponent(props) {
   const {
-    selectedDate,
-    onNextDayBtnClick,
-    onPrevDayBtnClick,
+    activeDate,
+    showDate,
+    handleHeaderTimeClick,
+    showNextDay,
+    showPrevDay,
     onHourClick,
     onMinuteClick,
     activeHour,
@@ -15,38 +18,48 @@ function TimePickerComponent(props) {
     mode
   } = props;
 
+  const headerWidth = mode === 'minute'? '3' : mode === 'hour'? '4' : '7';
+
   if (mode === 'minute') {
     return (
-      <React.Fragment>
-        { selectedDate && (
+      <Table
+        unstackable
+        celled
+        textAlign="center">
+        { showDate && (
           <PickerHeader
-            width="3"
+            onDateClick={handleHeaderTimeClick}
+            onNextBtnClick={showNextDay}
+            onPrevBtnClick={showPrevDay}
+            activeDate={activeDate}
             includeDay
-            activeDate={selectedDate}
-            onNextBtnClick={onNextDayBtnClick}
-            onPrevBtnClick={onPrevDayBtnClick} />
+            width={headerWidth} />
         ) }
         <MinutePicker
           hour={activeHour}
           activeMinute={activeMinute}
           onMinuteClick={onMinuteClick} />
-      </React.Fragment>
+      </Table>
     );
   } else {
     return (
-      <React.Fragment>
-        { selectedDate && (
+      <Table
+        unstackable
+        celled
+        textAlign="center">
+        { showDate && (
           <PickerHeader
-            width="4"
+            onDateClick={handleHeaderTimeClick}
+            onNextBtnClick={showNextDay}
+            onPrevBtnClick={showPrevDay}
+            activeDate={activeDate}
             includeDay
-            activeDate={selectedDate}
-            onNextBtnClick={onNextDayBtnClick}
-            onPrevBtnClick={onPrevDayBtnClick} />
+            width={headerWidth} />
         ) }
         <HourPicker
           activeHour={activeHour}
           onHourClick={onHourClick} />
-      </React.Fragment>
+      </Table>
     );
   }
 }
@@ -56,8 +69,7 @@ TimePickerComponent.propTypes = {
   onHourClick: PropTypes.func.isRequired,
   /** (event, data) => {} */
   onMinuteClick: PropTypes.func.isRequired,
-  /** Show date in header if given */
-  selectedDate: PropTypes.instanceOf(moment),
+  showDate: PropTypes.bool,
   activeHour: PropTypes.string,
   activeMinute: PropTypes.string,
   onNextDayBtnClick: PropTypes.func,
diff --git a/src/components/pickerContent/DateTimePickerContent.js b/src/components/pickerContent/DateTimePickerContent.js
index 0907b0cd..14132fb0 100644
--- a/src/components/pickerContent/DateTimePickerContent.js
+++ b/src/components/pickerContent/DateTimePickerContent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { PickerHeader, TimePickerComponent } from '..';
+import { TimePickerComponent } from '..';
 import { DatePickerContent } from './DatePickerContent';
 import { CustomPropTypes } from '../../lib/customPropTypes';
 
@@ -29,7 +29,6 @@ function DateTimePickerContent(props) {
     onPrevBtnClick,
     onNextBtnClick
   } = props;
-  const headerWidth = mode === 'minute'? '3' : mode === 'hour'? '4' : '7';
   if (mode !== 'hour' && mode !== 'minute') {
     return (
       <DatePickerContent
@@ -50,21 +49,17 @@ function DateTimePickerContent(props) {
     );
   }
   return (
-    <React.Fragment>
-      <PickerHeader
-        onDateClick={handleHeaderTimeClick}
-        onNextBtnClick={showNextDay}
-        onPrevBtnClick={showPrevDay}
-        activeDate={activeDate}
-        includeDay
-        width={headerWidth} />
-      <TimePickerComponent
-        mode={mode}
-        activeHour={activeHour}
-        activeMinute={activeMinute}
-        onHourClick={onHourClick}
-        onMinuteClick={onMinuteClick} />
-    </React.Fragment>
+    <TimePickerComponent
+      mode={mode}
+      showDate
+      activeHour={activeHour}
+      activeMinute={activeMinute}
+      onHourClick={onHourClick}
+      onMinuteClick={onMinuteClick}
+      handleHeaderTimeClick={handleHeaderTimeClick}
+      activeDate={activeDate}
+      showNextDay={showNextDay}
+      showPrevDay={showPrevDay} />
   );
 }
 
diff --git a/src/components/pickerContent/DatesRangePickerContent.js b/src/components/pickerContent/DatesRangePickerContent.js
index 1d2ad665..b51ffe24 100644
--- a/src/components/pickerContent/DatesRangePickerContent.js
+++ b/src/components/pickerContent/DatesRangePickerContent.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
 
 import { PickerHeader, DatePickerComponent } from '..';
 import { CustomPropTypes } from '../../lib/customPropTypes';
@@ -14,7 +15,10 @@ function DatesRangePickerContent(props) {
     setDatesRange
   } = props;
   return (
-    <React.Fragment>
+    <Table
+      unstackable
+      celled
+      textAlign="center">
       <PickerHeader
         onDateClick={handleHeaderDateClick}
         onNextBtnClick={showNextMonth}
@@ -27,7 +31,7 @@ function DatesRangePickerContent(props) {
         datesRange={datesRange}
         onDateClick={setDatesRange}
         showedMonth={dateToShow} />
-    </React.Fragment>
+    </Table>
   );
 }
 
diff --git a/src/components/pickerModes/DayMode.js b/src/components/pickerModes/DayMode.js
index 7c20d8a9..92048398 100644
--- a/src/components/pickerModes/DayMode.js
+++ b/src/components/pickerModes/DayMode.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
 
 import { PickerHeader, DatePickerComponent } from '..';
 import { CustomPropTypes } from '../../lib/customPropTypes';
@@ -14,7 +15,10 @@ function DayMode(props) {
     activeDate
   } = props;
   return (
-    <React.Fragment>
+    <Table
+      unstackable
+      celled
+      textAlign="center">
       <PickerHeader
         onDateClick={handleHeaderDateClick}
         onNextBtnClick={showNextMonth}
@@ -26,7 +30,7 @@ function DayMode(props) {
         onDateClick={onDateClick}
         activeDate={activeDate}
         showedMonth={dateToShow} />
-    </React.Fragment>
+    </Table>
   );
 }
 
diff --git a/src/components/pickerModes/MonthMode.js b/src/components/pickerModes/MonthMode.js
index 39cb7994..457b4256 100644
--- a/src/components/pickerModes/MonthMode.js
+++ b/src/components/pickerModes/MonthMode.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
 
 import { PickerHeader, MonthPickerComponent } from '..';
 import { CustomPropTypes } from '../../lib/customPropTypes';
@@ -13,7 +14,10 @@ function MonthMode(props) {
     onMonthChange
   } = props;
   return (
-    <React.Fragment>
+    <Table
+      unstackable
+      celled
+      textAlign="center">
       <PickerHeader
         onDateClick={handleHeaderDateClick}
         onNextBtnClick={showNextYear}
@@ -23,7 +27,7 @@ function MonthMode(props) {
       <MonthPickerComponent
         activeMonth={dateToShow.format('MMM')}
         onMonthClick={onMonthChange} />
-    </React.Fragment>
+    </Table>
   );
 }
 
diff --git a/src/components/pickerModes/YearMode.js b/src/components/pickerModes/YearMode.js
index d097920a..f87a1465 100644
--- a/src/components/pickerModes/YearMode.js
+++ b/src/components/pickerModes/YearMode.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
 
 import { PickerHeader, YearPickerComponent } from '..';
 import { CustomPropTypes } from '../../lib/customPropTypes';
@@ -14,7 +15,10 @@ function YearMode(props) {
     value
   } = props;
   return (
-    <React.Fragment>
+    <Table
+      unstackable
+      celled
+      textAlign="center">
       <PickerHeader
         width="3"
         onDateClick={onHeaderDateClick}
@@ -25,7 +29,7 @@ function YearMode(props) {
         onYearClick={onYearClick}
         activeYear={value}
         yearsStart={yearsRange.start} />
-    </React.Fragment>
+    </Table>
   );
 }
 
diff --git a/src/containers/inputs/DateInput.js b/src/containers/inputs/DateInput.js
index 0a0df9ff..2e1a3d41 100644
--- a/src/containers/inputs/DateInput.js
+++ b/src/containers/inputs/DateInput.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Table } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 import {
@@ -45,26 +44,21 @@ class DateInput extends YearPickerMixin {
       activeDate
     } = this.props.wrapperState;
     return (
-      <Table
-        unstackable
-        celled
-        textAlign="center">
-        <DatePickerContent
-          mode={mode}
-          handleHeaderDateClick={handleHeaderDateClick}
-          onYearChange={onYearChange}
-          showNextYear={showNextYear}
-          showPrevYear={showPrevYear}
-          dateToShow={dateToShow}
-          onMonthChange={onMonthChange}
-          showNextMonth={showNextMonth}
-          showPrevMonth={showPrevMonth}
-          onDateClick={onDateClick}
-          activeDate={activeDate}
-          yearsRange={this.getYearsRange()}
-          onPrevBtnClick={this.onPrevBtnClick}
-          onNextBtnClick={this.onNextBtnClick} />
-      </Table>
+      <DatePickerContent
+        mode={mode}
+        handleHeaderDateClick={handleHeaderDateClick}
+        onYearChange={onYearChange}
+        showNextYear={showNextYear}
+        showPrevYear={showPrevYear}
+        dateToShow={dateToShow}
+        onMonthChange={onMonthChange}
+        showNextMonth={showNextMonth}
+        showPrevMonth={showPrevMonth}
+        onDateClick={onDateClick}
+        activeDate={activeDate}
+        yearsRange={this.getYearsRange()}
+        onPrevBtnClick={this.onPrevBtnClick}
+        onNextBtnClick={this.onNextBtnClick} />
     );
   }
 
diff --git a/src/containers/inputs/DateTimeInput.js b/src/containers/inputs/DateTimeInput.js
index a2aac02b..555fd92f 100644
--- a/src/containers/inputs/DateTimeInput.js
+++ b/src/containers/inputs/DateTimeInput.js
@@ -52,33 +52,28 @@ class DateTimeInput extends YearPickerMixin {
       onMinuteClick
     } = this.props.wrapperState;
     return (
-      <Table
-        unstackable
-        celled
-        textAlign="center">
-        <DateTimePickerContent
-          activeDate={dateToShow}
-          activeHour={activeHour}
-          activeMinute={activeMinute}
-          mode={mode}
-          handleHeaderDateClick={handleHeaderDateClick}
-          handleHeaderTimeClick={handleHeaderTimeClick}
-          onYearChange={onYearChange}
-          showNextMonth={showNextMonth}
-          showPrevMonth={showPrevMonth}
-          showNextYear={showNextYear}
-          showPrevYear={showPrevYear}
-          showNextDay={showNextDay}
-          showPrevDay={showPrevDay}
-          dateToShow={dateToShow}
-          onMonthChange={onMonthChange}
-          onDateClick={onDateClick}
-          onHourClick={onHourClick}
-          onMinuteClick={onMinuteClick}
-          yearsRange={this.getYearsRange()}
-          onPrevBtnClick={this.onPrevBtnClick}
-          onNextBtnClick={this.onNextBtnClick} />
-      </Table>
+      <DateTimePickerContent
+        activeDate={dateToShow}
+        activeHour={activeHour}
+        activeMinute={activeMinute}
+        mode={mode}
+        handleHeaderDateClick={handleHeaderDateClick}
+        handleHeaderTimeClick={handleHeaderTimeClick}
+        onYearChange={onYearChange}
+        showNextMonth={showNextMonth}
+        showPrevMonth={showPrevMonth}
+        showNextYear={showNextYear}
+        showPrevYear={showPrevYear}
+        showNextDay={showNextDay}
+        showPrevDay={showPrevDay}
+        dateToShow={dateToShow}
+        onMonthChange={onMonthChange}
+        onDateClick={onDateClick}
+        onHourClick={onHourClick}
+        onMinuteClick={onMinuteClick}
+        yearsRange={this.getYearsRange()}
+        onPrevBtnClick={this.onPrevBtnClick}
+        onNextBtnClick={this.onNextBtnClick} />
     );
   }
 
diff --git a/src/containers/inputs/DatesRangeInput.js b/src/containers/inputs/DatesRangeInput.js
index f2bb5b24..6e8e50e6 100644
--- a/src/containers/inputs/DatesRangeInput.js
+++ b/src/containers/inputs/DatesRangeInput.js
@@ -29,18 +29,13 @@ class DatesRangeInput extends React.Component {
       setDatesRange
     } = this.props.wrapperState;
     return (
-      <Table
-        unstackable
-        celled
-        textAlign="center">
-        <DatesRangePickerContent
-          handleHeaderDateClick={handleHeaderDateClick}
-          showNextMonth={showNextMonth}
-          showPrevMonth={showPrevMonth}
-          dateToShow={dateToShow}
-          datesRange={datesRange}
-          setDatesRange={setDatesRange} />
-      </Table>
+      <DatesRangePickerContent
+        handleHeaderDateClick={handleHeaderDateClick}
+        showNextMonth={showNextMonth}
+        showPrevMonth={showPrevMonth}
+        dateToShow={dateToShow}
+        datesRange={datesRange}
+        setDatesRange={setDatesRange} />
     );
   }
 
diff --git a/src/containers/inputs/TimeInput.js b/src/containers/inputs/TimeInput.js
index 1e428d1c..1c7a64c5 100644
--- a/src/containers/inputs/TimeInput.js
+++ b/src/containers/inputs/TimeInput.js
@@ -73,17 +73,12 @@ class TimeInput extends React.Component {
   getPicker() {
     const [activeHour, activeMinute] = [parseTime(this.props.value, 'HH'), parseTime(this.props.value, 'mm')];
     return (
-      <Table
-        unstackable
-        celled
-        textAlign="center">
-        <TimePickerComponent
-          mode={this.state.mode}
-          activeHour={activeHour}
-          activeMinute={activeMinute}
-          onHourClick={this.onHourClick}
-          onMinuteClick={this.onMinuteClick} />
-      </Table>
+      <TimePickerComponent
+        mode={this.state.mode}
+        activeHour={activeHour}
+        activeMinute={activeMinute}
+        onHourClick={this.onHourClick}
+        onMinuteClick={this.onMinuteClick} />
     );
   }