Commit 783dfe36 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

Use react-datepicker instead of pickadate

parent 7e000621
Pipeline #16469 passed with stage
in 2 minutes and 25 seconds
......@@ -18,12 +18,16 @@ class SearchComponent extends React.Component {
this.searchForm = null;
this.lowAmountInput = null;
this.highAmountInput = null;
this.lowDatePicker = null;
this.highDatePicker = null;
}
handleClearSearch(close, event) {
this.searchForm.reset();
this.lowAmountInput.clear();
this.highAmountInput.clear();
this.lowDatePicker.clear();
this.highDatePicker.clear();
this.props.resetAll(!close);
event.preventDefault();
}
......@@ -103,6 +107,12 @@ class SearchComponent extends React.Component {
let refHighAmountInput = node => {
this.highAmountInput = node;
};
let refLowDatePicker = node => {
this.lowDatePicker = node;
};
let refHighDatePicker = node => {
this.highDatePicker = node;
};
details = (
<form
......@@ -215,6 +225,7 @@ class SearchComponent extends React.Component {
<DatePicker
id="date-low"
key="date-low"
ref={ refLowDatePicker }
onSelect={ handleDateLow }
defaultValue={ this.props.searchFields.dateLow }
maxDate={ this.props.searchFields.dateHigh }
......@@ -231,6 +242,7 @@ class SearchComponent extends React.Component {
<DatePicker
id="date-high"
key="date-high"
ref={ refHighDatePicker }
onSelect={ handleDateHigh }
defaultValue={ this.props.searchFields.dateHigh }
minDate={ this.props.searchFields.dateLow }
......
import React from 'react';
import PropTypes from 'prop-types';
import { maybeHas, translate as $t } from '../../helpers';
import DatePicker from 'react-datepicker';
import moment from 'moment';
class DatePicker extends React.Component {
import { translate as $t } from '../../helpers';
class DatePickerWrapper extends React.Component {
constructor(props) {
super(props);
this.pickadateInput = null;
this.pickadate = null;
}
componentDidMount() {
let pickerOptions = this.generateLocalizationObject();
pickerOptions = this.setMaxOrMin(pickerOptions, this.props);
this.pickadate = $(this.pickadateInput).pickadate(pickerOptions).pickadate('picker');
this.pickadate.on('set', value => {
if (maybeHas(value, 'clear') && this.props.onSelect) {
this.props.onSelect(null);
} else if (maybeHas(value, 'select')) {
let actualDate = new Date(value.select);
// pickadate returns UTC time, fix the timezone offset.
actualDate.setMinutes(actualDate.getMinutes() - actualDate.getTimezoneOffset());
if (this.props.onSelect)
this.props.onSelect(+actualDate);
}
});
}
componentWillUnmount() {
if (this.pickadate)
this.pickadate.stop();
}
setMaxOrMin(pickerOptions, props) {
// Maybe a minimum or maximum value is set
pickerOptions.max = props.maxDate ? new Date(props.maxDate) : false;
pickerOptions.min = props.minDate ? new Date(props.minDate) : false;
return pickerOptions;
}
this.state = {
defaultDate: this.props.defaultValue ? moment(this.props.defaultValue) : null
};
componentWillReceiveProps(newProps) {
let pickerOptions = this.setMaxOrMin({}, newProps);
this.pickadate.set(pickerOptions);
this.handleChange = this.handleChange.bind(this);
}
localizationTable(prefix, tableToLocalize) {
return tableToLocalize.map(element => $t(`client.datepicker.${prefix}.${element}`));
}
handleChange(date) {
this.setState({
defaultDate: date
});
generateLocalizationObject() {
let monthTable = [
'january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december'
];
let weekdaysTable = [
'sunday',
'monday',
'tuesday',
'wednesday',
'thursday',
'friday',
'saturday'
];
return {
monthsFull: this.localizationTable('monthsFull', monthTable),
monthsShort: this.localizationTable('monthsShort', monthTable),
weekdaysFull: this.localizationTable('weekdaysFull', weekdaysTable),
weekdaysShort: this.localizationTable('weekdaysShort', weekdaysTable),
today: $t('client.datepicker.today'),
clear: $t('client.datepicker.clear'),
close: $t('client.datepicker.close'),
firstDay: $t('client.datepicker.firstDay'),
format: $t('client.datepicker.format'),
formatSubmit: $t('client.datepicker.formatSubmit'),
labelMonthNext: $t('client.datepicker.labelMonthNext'),
labelMonthSelect: $t('client.datepicker.labelMonthSelect'),
labelYearSelect: $t('client.datepicker.labelYearSelect')
};
if (date) {
let actualDate = new Date(date.valueOf());
actualDate.setMinutes(actualDate.getMinutes() - actualDate.getTimezoneOffset());
this.props.onSelect(+actualDate);
} else {
this.props.onSelect(null);
}
}
clear() {
this.pickadate.clear();
this.setState({
defaultDate: null
});
}
render() {
let defaultDate = '';
if (this.props.defaultValue) {
let defaultValue = new Date(this.props.defaultValue);
let defaultMonth = `${defaultValue.getMonth() + 1}`;
if (defaultMonth.length < 2)
defaultMonth = `0${defaultMonth}`;
let defaultDay = `${defaultValue.getDate()}`;
if (defaultDay.length < 2)
defaultDay = `0${defaultDay}`;
defaultDate = `${defaultValue.getFullYear()}/${defaultMonth}/${defaultDay}`;
let todayButton = $t('client.datepicker.today');
let now = Date.now();
let minDate;
if (this.props.minDate) {
minDate = moment(this.props.minDate);
if (this.props.minDate > now) {
todayButton = null;
}
}
let refInput = input => {
this.pickadateInput = input;
};
let maxDate;
if (this.props.maxDate) {
maxDate = moment(this.props.maxDate);
if (this.props.maxDate < now) {
todayButton = null;
}
}
return (
<input
<DatePicker
dateFormat={ $t('client.datepicker.format') }
selected={ this.state.defaultDate }
minDate={ minDate }
maxDate={ maxDate }
className="form-control"
type="text"
ref={ refInput }
data-value={ defaultDate }
onChange={ this.handleChange }
isClearable={ true }
todayButton={ todayButton }
/>
);
}
}
DatePicker.propTypes = {
DatePickerWrapper.propTypes = {
// Callback getting the new date, whenever it changes.
onSelect: PropTypes.func.isRequired,
......@@ -144,4 +90,4 @@ DatePicker.propTypes = {
maxDate: PropTypes.number
};
export default DatePicker;
export default DatePickerWrapper;
......@@ -32,13 +32,16 @@
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/opensans/OpenSans-Bold.woff') format('woff');
}
html {
font-size: 13px !important;
}
html, body, #app {
min-height: 100%;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
color: #717171;
background: #f1f2f7;
}
......@@ -1011,8 +1014,17 @@ ul.bullet li {
margin-right: 5px;
}
/* Forces the datepicker to be displayed outside a parent with an hidden overflow */
.picker--opened .picker__holder {
position: fixed;
overflow: visible;
.react-datepicker__input-container {
display: block !important;
}
.react-datepicker {
font-size: 1rem !important;
}
/* Fix */
.react-datepicker__close-icon {
position: absolute;
top: 50%;
right: 0;
}
......@@ -6,8 +6,6 @@ cat ./node_modules/normalize.css/normalize.css \
./client/css/*.css \
./node_modules/dygraphs/dist/dygraph.css \
./node_modules/c3/c3.css \
./node_modules/pickadate/lib/themes/classic.css \
./node_modules/pickadate/lib/themes/classic.date.css \
./node_modules/pickadate/lib/themes/classic.time.css \
./node_modules/react-datepicker/dist/react-datepicker.css \
./node_modules/jquery-minicolors/jquery.minicolors.css \
./build/client/css/sprite.css > ./build/client/css/main.css
......@@ -2,8 +2,5 @@
cat ./node_modules/jquery/dist/jquery.js \
./node_modules/jquery.cookie/jquery.cookie.js \
./node_modules/jquery-minicolors/jquery.minicolors.js \
./node_modules/pickadate/lib/picker.js \
./node_modules/pickadate/lib/picker.date.js \
./node_modules/pickadate/lib/picker.time.js \
./client/vendor/*.js \
./node_modules/bootstrap-kresus/js/bootstrap.js > ./build/client/js/vendor.js
......@@ -360,62 +360,8 @@ module.exports = {
},
datepicker: {
monthsFull: {
january: 'January',
february: 'February',
march: 'March',
april: 'April',
may: 'May',
june: 'June',
july: 'July',
august: 'August',
september: 'September',
october: 'October',
november: 'November',
december: 'December'
},
monthsShort: {
january: 'Jan',
february: 'Feb',
march: 'Mar',
april: 'Apr',
may: 'May',
june: 'Jun',
july: 'Jul',
august: 'Aug',
september: 'Sep',
october: 'Oct',
november: 'Nov',
december: 'Dec'
},
weekdaysFull: {
sunday: 'Sunday',
monday: 'Monday',
tuesday: 'Tuesday',
wednesday: 'Wednesday',
thursday: 'Thursday',
friday: 'Friday',
saturday: 'Saturday'
},
weekdaysShort: {
sunday: 'Sun',
monday: 'Mon',
tuesday: 'Tue',
wednesday: 'Wed',
thursday: 'Thu',
friday: 'Fri',
saturday: 'Sat'
},
today: 'Today',
clear: 'Clear',
close: 'Close',
firstDay: '0',
format: 'dd mmmm yyyy',
formatSubmit: 'yyyy/mm/dd',
labelMonthNext:'Next month',
labelMonthPrev: 'Previous month',
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year'
format: 'MM/DD/YYYY'
},
spinner: {
......
......@@ -360,62 +360,8 @@ module.exports = {
},
datepicker: {
monthsFull: {
january: 'Janvier',
february: 'Février',
march: 'Mars',
april: 'Avril',
may: 'Mai',
june: 'Juin',
july: 'Juillet',
august: 'Août',
september: 'Septembre',
october: 'Octobre',
november: 'Novembre',
december: 'Décembre'
},
monthsShort: {
january: 'Jan',
february: 'Fev',
march: 'Mar',
april: 'Avr',
may: 'Mai',
june: 'Juin',
july: 'Juil',
august: 'Aou',
september: 'Sep',
october: 'Oct',
november: 'Nov',
december: 'Déc'
},
weekdaysFull: {
sunday: 'Dimanche',
monday: 'Lundi',
tuesday: 'Mardi',
wednesday: 'Mercredi',
thursday: 'Jeudi',
friday: 'Vendredi',
saturday: 'Samedi'
},
weekdaysShort: {
sunday: 'Dim',
monday: 'Lun',
tuesday: 'Mar',
wednesday: 'Mer',
thursday: 'Jeu',
friday: 'Ven',
saturday: 'Sam'
},
today: "Aujourd'hui",
clear: 'Effacer',
close: 'Fermer',
firstDay: '1',
format: 'dd mmmm yyyy',
formatSubmit: 'yyyy/mm/dd',
labelMonthNext: 'Mois suivant',
labelMonthPrev: 'Mois précédent',
labelMonthSelect: 'Sélectionner un mois',
labelYearSelect: 'Sélectionner une année'
format: 'DD/MM/YYYY'
},
spinner: {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment