Created reusable DateInput component

This commit is contained in:
Alejandro Celaya 2018-07-31 21:24:34 +02:00
parent 1abcb2e1d7
commit a7bd66827a
4 changed files with 51 additions and 25 deletions

View file

@ -0,0 +1,16 @@
@import "../utils/mixins/vertical-align";
.date-input-container {
position: relative;
}
.date-input-container__input {
padding-right: 35px !important;
background-color: #fff !important;
}
.date-input-container__icon {
@include vertical-align();
right: 15px;
cursor: pointer;
}

31
src/common/DateInput.js Normal file
View file

@ -0,0 +1,31 @@
import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react';
import DatePicker from 'react-datepicker';
import './DateContainer.scss';
export default class DateInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return (
<div className="date-input-container">
<DatePicker
{...this.props}
className="date-input-container__input form-control"
dateFormat="YYYY-MM-DD"
readOnly
ref={this.inputRef}
/>
<FontAwesomeIcon
icon={calendarIcon}
className="date-input-container__icon"
onClick={() => this.inputRef.current.input.focus()}
/>
</div>
);
}
}

View file

@ -1,14 +1,13 @@
import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown'; import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp'; import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda'; import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda';
import React from 'react'; import React from 'react';
import DatePicker from 'react-datepicker';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ReactTags from 'react-tag-autocomplete'; import ReactTags from 'react-tag-autocomplete';
import { Collapse } from 'reactstrap'; import { Collapse } from 'reactstrap';
import '../../node_modules/react-datepicker/dist/react-datepicker.css'; import '../../node_modules/react-datepicker/dist/react-datepicker.css';
import DateInput from '../common/DateInput';
import './CreateShortUrl.scss'; import './CreateShortUrl.scss';
import CreateShortUrlResult from './helpers/CreateShortUrlResult'; import CreateShortUrlResult from './helpers/CreateShortUrlResult';
import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult'; import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
@ -45,13 +44,10 @@ export class CreateShortUrl extends React.Component {
{...props} {...props}
/>; />;
const createDateInput = (id, placeholder, props = {}) => const createDateInput = (id, placeholder, props = {}) =>
<DatePicker <DateInput
selected={this.state[id]} selected={this.state[id]}
className="form-control create-short-url__date-input"
placeholderText={placeholder} placeholderText={placeholder}
onChange={date => this.setState({ [id]: date })} onChange={date => this.setState({ [id]: date })}
dateFormat="YYYY-MM-DD"
readOnly
{...props} {...props}
/>; />;
const formatDate = date => isNil(date) ? date : date.format(); const formatDate = date => isNil(date) ? date : date.format();
@ -100,13 +96,11 @@ export class CreateShortUrl extends React.Component {
</div> </div>
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="form-group create-short-url__date-container"> <div className="form-group">
{createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })} {createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
<FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
</div> </div>
<div className="form-group create-short-url__date-container"> <div className="form-group">
{createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })} {createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
<FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,26 +1,11 @@
@import "../../node_modules/react-tag-autocomplete/example/styles.css"; @import "../../node_modules/react-tag-autocomplete/example/styles.css";
@import "../utils/mixins/box-shadow"; @import "../utils/mixins/box-shadow";
@import "../utils/mixins/border-radius"; @import "../utils/mixins/border-radius";
@import "../utils/mixins/vertical-align";
.create-short-url__btn:not(:first-child) { .create-short-url__btn:not(:first-child) {
margin-left: 5px; margin-left: 5px;
} }
.create-short-url__date-container {
position: relative;
}
.create-short-url__date-input {
padding-right: 35px !important;
background-color: #fff !important;
}
.create-short-url__date-icon {
@include vertical-align();
right: 15px;
}
.react-tags { .react-tags {
@include border-radius(.25rem); @include border-radius(.25rem);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;