openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx

   1 import React from 'react';
   2 import DatePicker from 'react-datepicker';
   3 import moment from 'moment';
   4 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
   5
   6 class CustomInput extends React.Component {
   7
   8         static propTypes = {
   9                 placeHolderText: React.PropTypes.string,
  10                 onChange: React.PropTypes.func,
  11                 onClick: React.PropTypes.func,
  12                 value: React.PropTypes.string
  13         };
  14
  15         render() {
  16                 const {placeholderText, onClick, onClear, inputRef, value: date} = this.props;
  17                 const text = date ? date : placeholderText;
  18                 const textStyle = date ? '' : 'placeholder';
  19                 return (
  20                         <div ref={inputRef} className='datepicker-custom-input'>
  21                                 <div onClick={onClick} className={`datepicker-text ${textStyle}`}>{text}</div>
  22                                 <div onClick={onClear} className='clear-input'/>
  23                                 <SVGIcon onClick={onClick} name='calendar'/>
  24                         </div>
  25                 );
  26         }
  27 };
  28
  29 const parseDate = (date, format) => {
  30         return typeof date === 'number' ? moment.unix(date) : moment(date, format);
  31 };
  32
  33 class Datepicker extends React.Component {
  34         static propTypes = {
  35                 date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
  36                 format: React.PropTypes.string,
  37                 onChange: React.PropTypes.func,
  38                 selectsStart: React.PropTypes.bool,
  39                 selectsEnd: React.PropTypes.bool,
  40                 startDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
  41                 endDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
  42                 disabled: React.PropTypes.bool,
  43                 label: React.PropTypes.string,
  44                 isRequired: React.PropTypes.bool
  45         }
  46         render() {
  47                 let {date,  format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false,
  48                         disabled = false, inputRef} = this.props;
  49                 const placeholderText =  'Enter a date';
  50                 const props = {
  51                         format,
  52                         onChange,
  53                         disabled,
  54                         selected: date ? parseDate(date, format) : date,
  55                         selectsStart,
  56                         selectsEnd,
  57                         placeholderText,
  58                         startDate: startDate ? parseDate(startDate, format) : startDate,
  59                         endDate: endDate ? parseDate(endDate, format) : endDate
  60                 };
  61
  62                 return (
  63                         <div className='customized-date-picker'>
  64                                 <DatePicker
  65                                         calendarClassName='customized-date-picker-calendar'
  66                                         customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>}
  67                                         minDate={selectsEnd && props.startDate}
  68                                         maxDate={selectsStart && props.endDate}
  69                                         {...props}/>
  70                         </div>
  71                 );
  72         }
  73 }
  74
  75 export default Datepicker;