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

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import DatePicker from 'react-datepicker';
  19 import moment from 'moment';
  20 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  21
  22 class CustomInput extends React.Component {
  23     static propTypes = {
  24         placeHolderText: PropTypes.string,
  25         onChange: PropTypes.func,
  26         onClick: PropTypes.func,
  27         value: PropTypes.string
  28     };
  29
  30     render() {
  31         const {
  32             placeholderText,
  33             onClick,
  34             onClear,
  35             inputRef,
  36             value: date
  37         } = this.props;
  38         const text = date ? date : placeholderText;
  39         const textStyle = date ? '' : 'placeholder';
  40         return (
  41             <div
  42                 onClick={onClick}
  43                 ref={inputRef}
  44                 className="datepicker-custom-input">
  45                 <div className={`datepicker-text ${textStyle}`}>{text}</div>
  46                 {date && (
  47                     <SVGIcon
  48                         onClick={e => {
  49                             e.stopPropagation();
  50                             onClear();
  51                         }}
  52                         name="close"
  53                         className="clear-input"
  54                     />
  55                 )}
  56                 <SVGIcon name="calendar" />
  57             </div>
  58         );
  59     }
  60 }
  61
  62 const parseDate = (date, format) => {
  63     return typeof date === 'number' ? moment.unix(date) : moment(date, format);
  64 };
  65
  66 class Datepicker extends React.Component {
  67     static propTypes = {
  68         date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  69         format: PropTypes.string,
  70         onChange: PropTypes.func,
  71         selectsStart: PropTypes.bool,
  72         selectsEnd: PropTypes.bool,
  73         startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  74         endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  75         disabled: PropTypes.bool,
  76         label: PropTypes.string,
  77         isRequired: PropTypes.bool
  78     };
  79     render() {
  80         let {
  81             date,
  82             format,
  83             onChange,
  84             selectsStart = false,
  85             startDate = null,
  86             endDate = null,
  87             selectsEnd = false,
  88             disabled = false,
  89             inputRef
  90         } = this.props;
  91         const placeholderText = 'Enter a date';
  92         const props = {
  93             format,
  94             onChange,
  95             disabled,
  96             selected: date ? parseDate(date, format) : date,
  97             selectsStart,
  98             selectsEnd,
  99             placeholderText,
 100             startDate: startDate ? parseDate(startDate, format) : startDate,
 101             endDate: endDate ? parseDate(endDate, format) : endDate
 102         };
 103
 104         return (
 105             <div className="customized-date-picker">
 106                 <DatePicker
 107                     calendarClassName="customized-date-picker-calendar"
 108                     customInput={
 109                         <CustomInput
 110                             inputRef={inputRef}
 111                             onClear={() => onChange(undefined)}
 112                             placeholderText={placeholderText}
 113                         />
 114                     }
 115                     minDate={
 116                         selectsEnd && props.startDate
 117                             ? props.startDate
 118                             : undefined
 119                     }
 120                     maxDate={
 121                         selectsStart && props.endDate
 122                             ? props.endDate
 123                             : undefined
 124                     }
 125                     popperModifiers={{
 126                         preventOverflow: {
 127                             boundariesElement: 'scrollParent'
 128                         }
 129                     }}
 130                     {...props}
 131                 />
 132             </div>
 133         );
 134     }
 135 }
 136
 137 export default Datepicker;