mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Created reusable DateInput component
This commit is contained in:
parent
1abcb2e1d7
commit
a7bd66827a
4 changed files with 51 additions and 25 deletions
16
src/common/DateContainer.scss
Normal file
16
src/common/DateContainer.scss
Normal 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
31
src/common/DateInput.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,14 +1,13 @@
|
|||
import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
|
||||
import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
|
||||
import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda';
|
||||
import React from 'react';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import { connect } from 'react-redux';
|
||||
import ReactTags from 'react-tag-autocomplete';
|
||||
import { Collapse } from 'reactstrap';
|
||||
import '../../node_modules/react-datepicker/dist/react-datepicker.css';
|
||||
import DateInput from '../common/DateInput';
|
||||
import './CreateShortUrl.scss';
|
||||
import CreateShortUrlResult from './helpers/CreateShortUrlResult';
|
||||
import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
|
||||
|
@ -45,13 +44,10 @@ export class CreateShortUrl extends React.Component {
|
|||
{...props}
|
||||
/>;
|
||||
const createDateInput = (id, placeholder, props = {}) =>
|
||||
<DatePicker
|
||||
<DateInput
|
||||
selected={this.state[id]}
|
||||
className="form-control create-short-url__date-input"
|
||||
placeholderText={placeholder}
|
||||
onChange={date => this.setState({ [id]: date })}
|
||||
dateFormat="YYYY-MM-DD"
|
||||
readOnly
|
||||
{...props}
|
||||
/>;
|
||||
const formatDate = date => isNil(date) ? date : date.format();
|
||||
|
@ -100,13 +96,11 @@ export class CreateShortUrl extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<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 })}
|
||||
<FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
|
||||
</div>
|
||||
<div className="form-group create-short-url__date-container">
|
||||
<div className="form-group">
|
||||
{createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
|
||||
<FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,26 +1,11 @@
|
|||
@import "../../node_modules/react-tag-autocomplete/example/styles.css";
|
||||
@import "../utils/mixins/box-shadow";
|
||||
@import "../utils/mixins/border-radius";
|
||||
@import "../utils/mixins/vertical-align";
|
||||
|
||||
.create-short-url__btn:not(:first-child) {
|
||||
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 {
|
||||
@include border-radius(.25rem);
|
||||
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
|
||||
|
|
Loading…
Reference in a new issue