src/generic-components/dateRange/DateRange.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  *
  21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23 import React, {Component} from 'react';
  24 import {connect} from 'react-redux';
  25 import DatePicker from 'react-datepicker';
  26 import Moment from 'moment-timezone';
  27 import i18n from 'utils/i18n/i18n';
  28 import {
  29   LABEL_START_DATE,
  30   LABEL_END_DATE,
  31   DATE_PICKER_PLACEHOLDER
  32 } from 'generic-components/dateRange/DateRangeConstants';
  33 import DateRangeActions from 'generic-components/dateRange/DateRangeActions';
  34
  35 let mapStateToProps = ({dataIntegrity: {dateRangeData}}) => {
  36   let {dateRangeStart, dateRangeEnd, dateRangeError} = dateRangeData;
  37
  38   return {
  39     dateRangeStart,
  40     dateRangeEnd,
  41     dateRangeError
  42   };
  43 };
  44
  45 let mapActionToProps = (dispatch) => {
  46   return {
  47     startDateChange: (startDate, endDate) => {
  48       dispatch(DateRangeActions.onStartDateChange(startDate, endDate));
  49     },
  50     endDateChange: (endDate, startDate) => {
  51       dispatch(DateRangeActions.onEndDateChange(startDate, endDate));
  52     }
  53   };
  54 };
  55
  56 export class DateRange extends Component {
  57   static propTypes = {
  58     dateRangeStart: React.PropTypes.instanceOf(Moment),
  59     dateRangeEnd: React.PropTypes.instanceOf(Moment),
  60     dateRangeError: React.PropTypes.string
  61   };
  62
  63   render() {
  64     let {startDateChange, endDateChange,
  65           dateRangeStart, dateRangeEnd} = this.props;
  66
  67     return (
  68       <div className='date-range'>
  69     <span className='date-input'>
  70      <label>{i18n(LABEL_START_DATE) }: </label>
  71      <DatePicker
  72        className='start-date-picker'
  73        selected={dateRangeStart}
  74        onChange={(dateValue) => startDateChange(dateValue, dateRangeEnd) }
  75        placeholderText={i18n(DATE_PICKER_PLACEHOLDER) }
  76        showYearDropdown/>
  77     </span>
  78     <span className='date-input'>
  79      <label>{i18n(LABEL_END_DATE) }: </label>
  80      <DatePicker
  81        className='end-date-picker'
  82        selected={dateRangeEnd}
  83        onChange={(dateValue) => endDateChange(dateValue, dateRangeStart) }
  84        placeholderText={i18n(DATE_PICKER_PLACEHOLDER) }
  85        showYearDropdown/>
  86     </span>
  87       </div>
  88     );
  89   }
  90 }
  91 export default connect(mapStateToProps, mapActionToProps)(DateRange);