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

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