mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-03 23:07:26 +03:00
Updated DateInput to be clearable
This commit is contained in:
parent
6f38538dea
commit
3821735a89
4 changed files with 23 additions and 3 deletions
|
@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
|||
import React from 'react';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import './DateInput.scss';
|
||||
import { isNil } from 'ramda';
|
||||
|
||||
export default class DateInput extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -11,6 +12,9 @@ export default class DateInput extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { isClearable, selected } = this.props;
|
||||
const showCalendarIcon = !isClearable || isNil(selected);
|
||||
|
||||
return (
|
||||
<div className="date-input-container">
|
||||
<DatePicker
|
||||
|
@ -20,11 +24,11 @@ export default class DateInput extends React.Component {
|
|||
readOnly
|
||||
ref={this.inputRef}
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
{showCalendarIcon && <FontAwesomeIcon
|
||||
icon={calendarIcon}
|
||||
className="date-input-container__icon"
|
||||
onClick={() => this.inputRef.current.input.focus()}
|
||||
/>
|
||||
/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '../utils/mixins/vertical-align';
|
||||
@import '../utils/base';
|
||||
|
||||
.date-input-container {
|
||||
position: relative;
|
||||
|
@ -11,6 +12,18 @@
|
|||
|
||||
.date-input-container__icon {
|
||||
@include vertical-align();
|
||||
right: 15px;
|
||||
right: .75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-datepicker__close-icon.react-datepicker__close-icon {
|
||||
@include vertical-align();
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.react-datepicker__close-icon.react-datepicker__close-icon::after {
|
||||
right: .75rem;
|
||||
line-height: 11px;
|
||||
background-color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
@ -48,6 +48,7 @@ export class CreateShortUrl extends React.Component {
|
|||
selected={this.state[id]}
|
||||
placeholderText={placeholder}
|
||||
onChange={date => this.setState({ [id]: date })}
|
||||
isClearable
|
||||
{...props}
|
||||
/>;
|
||||
const formatDate = date => isNil(date) ? date : date.format();
|
||||
|
|
|
@ -150,6 +150,7 @@ export class ShortUrlsVisits extends React.Component {
|
|||
<DateInput
|
||||
selected={this.state.startDate}
|
||||
placeholderText="Since"
|
||||
isClearable
|
||||
onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
|
||||
/>
|
||||
</div>
|
||||
|
@ -157,6 +158,7 @@ export class ShortUrlsVisits extends React.Component {
|
|||
<DateInput
|
||||
selected={this.state.endDate}
|
||||
placeholderText="Until"
|
||||
isClearable
|
||||
onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
|
||||
className="short-url-visits__date-input"
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue