diff --git a/src/filters/Date.js b/src/filters/Date.js index e3b6a6105..60f949bda 100644 --- a/src/filters/Date.js +++ b/src/filters/Date.js @@ -1,28 +1,25 @@ -/* eslint quotes: 0 */ -/* eslint max-len: 0 */ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Const from '../Const'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import Const from "../Const"; -const legalComparators = [ '=', '>', '>=', '<', '<=', '!=' ]; +const legalComparators = ["=", ">", ">=", "<", "<=", "!="]; function dateParser(d) { - return `${d.getFullYear()}-${("0" + (d.getMonth() + 1)).slice(-2)}-${("0" + d.getDate()).slice(-2)}`; + return `${d.getFullYear()}-${("0" + (d.getMonth() + 1)).slice(-2)}-${( + "0" + d.getDate() + ).slice(-2)}`; } class DateFilter extends Component { constructor(props) { super(props); this.dateComparators = this.props.dateComparators || legalComparators; - this.filter = this.filter.bind(this); - this.onChangeComparator = this.onChangeComparator.bind(this); } setDefaultDate() { - let defaultDate = ''; + let defaultDate = ""; const { defaultValue } = this.props; if (defaultValue && defaultValue.date) { - // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD" defaultDate = dateParser(new Date(defaultValue.date)); } return defaultDate; @@ -31,7 +28,7 @@ class DateFilter extends Component { onChangeComparator(event) { let date = this.inputDate.value; const comparator = event.target.value; - if (date === '') { + if (date === "") { return; } date = new Date(date); @@ -39,70 +36,85 @@ class DateFilter extends Component { } getComparatorOptions() { - const optionTags = []; - optionTags.push(); - for (let i = 0; i < this.dateComparators.length; i++) { - optionTags.push( - , + ...this.dateComparators.map((comparator, index) => ( + - ); - } - return optionTags; + )), + ]; } - filter(event) { + filter = (event) => { const comparator = this.dateFilterComparator.value; const dateValue = event.target.value; if (dateValue) { - this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE); + this.props.filterHandler( + { date: new Date(dateValue), comparator }, + Const.FILTER_TYPE.DATE + ); } else { this.props.filterHandler(null, Const.FILTER_TYPE.DATE); } - } + }; - cleanFiltered() { + cleanFiltered = () => { const value = this.setDefaultDate(); - const comparator = (this.props.defaultValue) ? this.props.defaultValue.comparator : ''; - this.setState(() => { return { isPlaceholderSelected: (value === '') }; }); + const comparator = this.props.defaultValue + ? this.props.defaultValue.comparator + : ""; + this.setState(() => ({ isPlaceholderSelected: value === "" })); this.dateFilterComparator.value = comparator; this.inputDate.value = value; - this.props.filterHandler({ date: new Date(value), comparator }, Const.FILTER_TYPE.DATE); - } + this.props.filterHandler( + { date: new Date(value), comparator }, + Const.FILTER_TYPE.DATE + ); + }; applyFilter(filterDateObj) { const { date, comparator } = filterDateObj; - this.setState(() => { return { isPlaceholderSelected: (date === '') }; }); + this.setState(() => ({ isPlaceholderSelected: date === "" })); this.dateFilterComparator.value = comparator; this.inputDate.value = dateParser(date); this.props.filterHandler({ date, comparator }, Const.FILTER_TYPE.DATE); } componentDidMount() { - const comparator = this.dateFilterComparator.value; - const dateValue = this.inputDate.value; + const { dateFilterComparator, inputDate, props } = this; + const comparator = dateFilterComparator.value; + const dateValue = inputDate.value; if (comparator && dateValue) { - this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE); + props.filterHandler( + { date: new Date(dateValue), comparator }, + Const.FILTER_TYPE.DATE + ); } } render() { - const { defaultValue, style: { date, comparator } } = this.props; + const { defaultValue, style } = this.props; + const { date, comparator } = style; return ( -