mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Converted DateInput into functional component
This commit is contained in:
parent
cccf57a35a
commit
70ebb0362a
2 changed files with 33 additions and 33 deletions
|
@ -3,35 +3,40 @@ import { isNil } from 'ramda';
|
|||
import DatePicker from 'react-datepicker';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import './DateInput.scss';
|
||||
|
||||
export default class DateInput extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.inputRef = props.ref || React.createRef();
|
||||
}
|
||||
const propTypes = {
|
||||
className: PropTypes.string,
|
||||
isClearable: PropTypes.bool,
|
||||
selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
|
||||
ref: PropTypes.object,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { className, isClearable, selected } = this.props;
|
||||
const showCalendarIcon = !isClearable || isNil(selected);
|
||||
const DateInput = (props) => {
|
||||
const { className, isClearable, selected, ref = React.createRef() } = props;
|
||||
const showCalendarIcon = !isClearable || isNil(selected);
|
||||
|
||||
return (
|
||||
<div className="date-input-container">
|
||||
<DatePicker
|
||||
{...this.props}
|
||||
className={`date-input-container__input form-control ${className || ''}`}
|
||||
dateFormat="YYYY-MM-DD"
|
||||
readOnly
|
||||
ref={this.inputRef}
|
||||
return (
|
||||
<div className="date-input-container">
|
||||
<DatePicker
|
||||
{...props}
|
||||
className={`date-input-container__input form-control ${className || ''}`}
|
||||
dateFormat="YYYY-MM-DD"
|
||||
readOnly
|
||||
ref={ref}
|
||||
/>
|
||||
{showCalendarIcon && (
|
||||
<FontAwesomeIcon
|
||||
icon={calendarIcon}
|
||||
className="date-input-container__icon"
|
||||
onClick={() => ref.current.input.focus()}
|
||||
/>
|
||||
{showCalendarIcon && (
|
||||
<FontAwesomeIcon
|
||||
icon={calendarIcon}
|
||||
className="date-input-container__icon"
|
||||
onClick={() => this.inputRef.current.input.focus()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
DateInput.propTypes = propTypes;
|
||||
|
||||
export default DateInput;
|
||||
|
|
|
@ -13,12 +13,7 @@ describe('<DateInput />', () => {
|
|||
return wrapped;
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
if (wrapped !== undefined) {
|
||||
wrapped.unmount();
|
||||
wrapped = undefined;
|
||||
}
|
||||
});
|
||||
afterEach(() => wrapped && wrapped.unmount());
|
||||
|
||||
it('wrapps a DatePicker', () => {
|
||||
wrapped = createComponent();
|
||||
|
|
Loading…
Reference in a new issue