fix: doesn't work with React 15

arfedulov · Jun 30, 2018 · 40dd5df · 40dd5df
1 parent 9cc79c0
commit 40dd5df
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 115 deletions.
diff --git a/src/components/TimePickerComponent.js b/src/components/TimePickerComponent.js
@@ -2,51 +2,64 @@ 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,
     activeMinute,
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />
     );
   }