Added datepickers in create short URL form

This commit is contained in:
Alejandro Celaya 2018-07-21 19:07:16 +02:00
parent 4522443789
commit 0ac6d81fed
4 changed files with 38 additions and 4 deletions

View file

@ -43,6 +43,7 @@
"ramda": "^0.25.0", "ramda": "^0.25.0",
"react": "^16.3.2", "react": "^16.3.2",
"react-copy-to-clipboard": "^5.0.1", "react-copy-to-clipboard": "^5.0.1",
"react-datepicker": "^1.5.0",
"react-dev-utils": "^5.0.1", "react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2", "react-dom": "^16.3.2",
"react-moment": "^0.7.6", "react-moment": "^0.7.6",

View file

@ -1,11 +1,13 @@
import React from 'react'; import React from 'react';
import './CreateShortUrl.scss';
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 { Collapse } from 'reactstrap';
import ReactTags from 'react-tag-autocomplete'; import ReactTags from 'react-tag-autocomplete';
import { assoc, replace } from 'ramda'; import { assoc, replace } from 'ramda';
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 = {
@ -36,6 +38,12 @@ 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) =>
<DatePicker
selected={this.state[id]}
className="form-control"
placeholderText={placeholder}
/>;
return ( return (
<div className="short-urls-container"> <div className="short-urls-container">
@ -74,10 +82,10 @@ export default class CreateShortUrl extends React.Component {
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="form-group"> <div className="form-group">
{renderOptionalInput('validSince', 'Enabled since...', 'date')} {createDateInput('validSince', 'Enabled since...')}
</div> </div>
<div className="form-group"> <div className="form-group">
{renderOptionalInput('validUntil', 'Enabled until...', 'date')} {createDateInput('validUntil', 'Enabled until...')}
</div> </div>
</div> </div>
</div> </div>

View file

@ -17,3 +17,8 @@
outline: 0; outline: 0;
@include box-shadow(0 0 0 0.2rem rgba(0,123,255,.25)); @include box-shadow(0 0 0 0.2rem rgba(0,123,255,.25));
} }
.react-datepicker__input-container,
.react-datepicker-wrapper {
display: block !important;
}

View file

@ -1509,7 +1509,7 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classnames@^2.2.3: classnames@^2.2.3, classnames@^2.2.5:
version "2.2.6" version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@ -6071,6 +6071,15 @@ react-copy-to-clipboard@^5.0.1:
copy-to-clipboard "^3" copy-to-clipboard "^3"
prop-types "^15.5.8" prop-types "^15.5.8"
react-datepicker@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-1.5.0.tgz#7eacd9609313189c84a21bb7421486054939a4b2"
dependencies:
classnames "^2.2.5"
prop-types "^15.6.0"
react-onclickoutside "^6.7.1"
react-popper "^0.9.1"
react-dev-utils@^5.0.1: react-dev-utils@^5.0.1:
version "5.0.1" version "5.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@ -6115,6 +6124,10 @@ react-moment@^0.7.6:
version "0.7.6" version "0.7.6"
resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.7.6.tgz#d94e63fe47d07fb794a7fa96a89711e834496c4a" resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.7.6.tgz#d94e63fe47d07fb794a7fa96a89711e834496c4a"
react-onclickoutside@^6.7.1:
version "6.7.1"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
react-popper@^0.10.4: react-popper@^0.10.4:
version "0.10.4" version "0.10.4"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
@ -6122,6 +6135,13 @@ react-popper@^0.10.4:
popper.js "^1.14.1" popper.js "^1.14.1"
prop-types "^15.6.1" prop-types "^15.6.1"
react-popper@^0.9.1:
version "0.9.5"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.9.5.tgz#02a24ef3eec33af9e54e8358ab70eb0e331edd05"
dependencies:
popper.js "^1.14.1"
prop-types "^15.6.1"
react-reconciler@^0.7.0: react-reconciler@^0.7.0:
version "0.7.0" version "0.7.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"