mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Updated DateInput to be clearable

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-09 20:13:46 +02:00
parent 6f38538dea
commit 3821735a89
4 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common/DateInput.js
View file

@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react'; import React from 'react';
import DatePicker from 'react-datepicker'; import DatePicker from 'react-datepicker';
import './DateInput.scss'; import './DateInput.scss';
import { isNil } from 'ramda';
export default class DateInput extends React.Component { export default class DateInput extends React.Component {
constructor(props) { constructor(props) {
@ -11,6 +12,9 @@ export default class DateInput extends React.Component {
} }
render() { render() {
const { isClearable, selected } = this.props;
const showCalendarIcon = !isClearable || isNil(selected);
return ( return (
<div className="date-input-container"> <div className="date-input-container">
<DatePicker <DatePicker
@ -20,11 +24,11 @@ export default class DateInput extends React.Component {
readOnly readOnly
ref={this.inputRef} ref={this.inputRef}
/> />
<FontAwesomeIcon {showCalendarIcon && <FontAwesomeIcon
icon={calendarIcon} icon={calendarIcon}
className="date-input-container__icon" className="date-input-container__icon"
onClick={() => this.inputRef.current.input.focus()} onClick={() => this.inputRef.current.input.focus()}
/> />}
</div> </div>
); );
} }

15
src/common/DateInput.scss
View file

@ -1,4 +1,5 @@
@import '../utils/mixins/vertical-align'; @import '../utils/mixins/vertical-align';
@import '../utils/base';
.date-input-container { .date-input-container {
position: relative; position: relative;
@ -11,6 +12,18 @@
.date-input-container__icon { .date-input-container__icon {
@include vertical-align(); @include vertical-align();
right: 15px; right: .75rem;
cursor: pointer; 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;
}

1
src/short-urls/CreateShortUrl.js
View file

@ -48,6 +48,7 @@ export class CreateShortUrl extends React.Component {
selected={this.state[id]} selected={this.state[id]}
placeholderText={placeholder} placeholderText={placeholder}
onChange={date => this.setState({ [id]: date })} onChange={date => this.setState({ [id]: date })}
isClearable
{...props} {...props}
/>; />;
const formatDate = date => isNil(date) ? date : date.format(); const formatDate = date => isNil(date) ? date : date.format();

2
src/short-urls/ShortUrlVisits.js
View file

@ -150,6 +150,7 @@ export class ShortUrlsVisits extends React.Component {
<DateInput <DateInput
selected={this.state.startDate} selected={this.state.startDate}
placeholderText="Since" placeholderText="Since"
isClearable
onChange={date => this.setState({ startDate: date }, () => this.loadVisits())} onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
/> />
</div> </div>
@ -157,6 +158,7 @@ export class ShortUrlsVisits extends React.Component {
<DateInput <DateInput
selected={this.state.endDate} selected={this.state.endDate}
placeholderText="Until" placeholderText="Until"
isClearable
onChange={date => this.setState({ endDate: date }, () => this.loadVisits())} onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
className="short-url-visits__date-input" className="short-url-visits__date-input"
/> />