diff options
author | Einav Weiss Keidar <einavw@amdocs.com> | 2018-03-20 14:45:40 +0200 |
---|---|---|
committer | Avi Gaffa <avi.gaffa@amdocs.com> | 2018-03-20 13:52:31 +0000 |
commit | 7fdf733a64670fceefc3ded35cfa581e1c458179 (patch) | |
tree | b3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx | |
parent | c7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff) |
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx')
-rw-r--r-- | openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx | 151 |
1 files changed, 92 insertions, 59 deletions
diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx index 25e7e7e02d..b4bc8be9ec 100644 --- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx +++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx @@ -5,72 +5,105 @@ import moment from 'moment'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; class CustomInput extends React.Component { + static propTypes = { + placeHolderText: PropTypes.string, + onChange: PropTypes.func, + onClick: PropTypes.func, + value: PropTypes.string + }; - static propTypes = { - placeHolderText: PropTypes.string, - onChange: PropTypes.func, - onClick: PropTypes.func, - value: PropTypes.string - }; - - render() { - const {placeholderText, onClick, onClear, inputRef, value: date} = this.props; - const text = date ? date : placeholderText; - const textStyle = date ? '' : 'placeholder'; - return ( - <div onClick={onClick} ref={inputRef} className='datepicker-custom-input'> - <div className={`datepicker-text ${textStyle}`}>{text}</div> - {date && <SVGIcon onClick={e => {e.stopPropagation(); onClear();}} name='close' className='clear-input'/>} - <SVGIcon name='calendar'/> - </div> - ); - } -}; + render() { + const { + placeholderText, + onClick, + onClear, + inputRef, + value: date + } = this.props; + const text = date ? date : placeholderText; + const textStyle = date ? '' : 'placeholder'; + return ( + <div + onClick={onClick} + ref={inputRef} + className="datepicker-custom-input"> + <div className={`datepicker-text ${textStyle}`}>{text}</div> + {date && ( + <SVGIcon + onClick={e => { + e.stopPropagation(); + onClear(); + }} + name="close" + className="clear-input" + /> + )} + <SVGIcon name="calendar" /> + </div> + ); + } +} const parseDate = (date, format) => { - return typeof date === 'number' ? moment.unix(date) : moment(date, format); + return typeof date === 'number' ? moment.unix(date) : moment(date, format); }; class Datepicker extends React.Component { - static propTypes = { - date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - format: PropTypes.string, - onChange: PropTypes.func, - selectsStart: PropTypes.bool, - selectsEnd: PropTypes.bool, - startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - disabled: PropTypes.bool, - label: PropTypes.string, - isRequired: PropTypes.bool - } - render() { - let {date, format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false, - disabled = false, inputRef} = this.props; - const placeholderText = 'Enter a date'; - const props = { - format, - onChange, - disabled, - selected: date ? parseDate(date, format) : date, - selectsStart, - selectsEnd, - placeholderText, - startDate: startDate ? parseDate(startDate, format) : startDate, - endDate: endDate ? parseDate(endDate, format) : endDate - }; + static propTypes = { + date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + format: PropTypes.string, + onChange: PropTypes.func, + selectsStart: PropTypes.bool, + selectsEnd: PropTypes.bool, + startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + disabled: PropTypes.bool, + label: PropTypes.string, + isRequired: PropTypes.bool + }; + render() { + let { + date, + format, + onChange, + selectsStart = false, + startDate = null, + endDate = null, + selectsEnd = false, + disabled = false, + inputRef + } = this.props; + const placeholderText = 'Enter a date'; + const props = { + format, + onChange, + disabled, + selected: date ? parseDate(date, format) : date, + selectsStart, + selectsEnd, + placeholderText, + startDate: startDate ? parseDate(startDate, format) : startDate, + endDate: endDate ? parseDate(endDate, format) : endDate + }; - return ( - <div className='customized-date-picker'> - <DatePicker - calendarClassName='customized-date-picker-calendar' - customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>} - minDate={selectsEnd && props.startDate} - maxDate={selectsStart && props.endDate} - {...props}/> - </div> - ); - } + return ( + <div className="customized-date-picker"> + <DatePicker + calendarClassName="customized-date-picker-calendar" + customInput={ + <CustomInput + inputRef={inputRef} + onClear={() => onChange(undefined)} + placeholderText={placeholderText} + /> + } + minDate={selectsEnd && props.startDate} + maxDate={selectsStart && props.endDate} + {...props} + /> + </div> + ); + } } export default Datepicker; |