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

Improved date pickers in create URL form

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-21 19:27:00 +02:00
parent 0ac6d81fed
commit b6c82da250
2 changed files with 37 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,23 @@
import React from 'react'; import calendarIcon from '@fortawesome/fontawesome-free-solid/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 DatePicker from 'react-datepicker';
import { Collapse } from 'reactstrap';
import ReactTags from 'react-tag-autocomplete';
import { assoc, replace } from 'ramda'; import { assoc, replace } from 'ramda';
import React from 'react';
import DatePicker from 'react-datepicker';
import ReactTags from 'react-tag-autocomplete';
import { Collapse } from 'reactstrap';
import '../../node_modules/react-datepicker/dist/react-datepicker.css';
import './CreateShortUrl.scss'; import './CreateShortUrl.scss';
import '../../node_modules/react-datepicker/dist/react-datepicker.css'
export default class CreateShortUrl extends React.Component { export default class CreateShortUrl extends React.Component {
state = { state = {
longUrl: '', longUrl: '',
tags: [], tags: [],
customSlug: null, customSlug: undefined,
validSince: null, validSince: undefined,
validUntil: null, validUntil: undefined,
maxVisits: null, maxVisits: undefined,
moreOptionsVisible: false moreOptionsVisible: false
}; };
@ -38,11 +39,15 @@ export default class CreateShortUrl extends React.Component {
onChange={e => this.setState({ [id]: e.target.value })} onChange={e => this.setState({ [id]: e.target.value })}
{...props} {...props}
/>; />;
const createDateInput = (id, placeholder) => const createDateInput = (id, placeholder, props = {}) =>
<DatePicker <DatePicker
selected={this.state[id]} selected={this.state[id]}
className="form-control" className="form-control create-short-url__date-input"
placeholderText={placeholder} placeholderText={placeholder}
onChange={date => this.setState({ [id]: date })}
dateFormat="YYYY-MM-DD"
readOnly
{...props}
/>; />;
return ( return (
@ -63,7 +68,6 @@ export default class CreateShortUrl extends React.Component {
<div className="form-group"> <div className="form-group">
<ReactTags <ReactTags
tags={this.state.tags} tags={this.state.tags}
classNames={{}}
handleAddition={addTag} handleAddition={addTag}
handleDelete={removeTag} handleDelete={removeTag}
allowNew={true} allowNew={true}
@ -81,11 +85,13 @@ export default class CreateShortUrl extends React.Component {
</div> </div>
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="form-group"> <div className="form-group create-short-url__date-container">
{createDateInput('validSince', 'Enabled since...')} {createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
<FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
</div> </div>
<div className="form-group"> <div className="form-group create-short-url__date-container">
{createDateInput('validUntil', 'Enabled until...')} {createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
<FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
</div> </div>
</div> </div>
</div> </div>

15
src/short-urls/CreateShortUrl.scss
View file

@ -1,11 +1,26 @@
@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;