src/generic-components/dateRange/DateRange.jsx

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