From bf5b4d2358ba43646f721ddcd352446e977df7a9 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Fri, 8 Apr 2016 20:57:46 +0800 Subject: [PATCH] fix #377 --- css/react-bootstrap-table.css | 9 ++-- src/filters/Date.js | 82 +++++++++++++++++++++++++++++++---- src/store/TableDataStore.js | 66 +++++++++++++++++++++++++--- 3 files changed, 138 insertions(+), 19 deletions(-) diff --git a/css/react-bootstrap-table.css b/css/react-bootstrap-table.css index 5d7bda57d..0fea93d56 100644 --- a/css/react-bootstrap-table.css +++ b/css/react-bootstrap-table.css @@ -108,17 +108,20 @@ font-style: initial; } -.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter { +.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter, +.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter { display: flex; } -.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input { +.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input, +.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-input { margin-left: 5px; float: left; width: calc(100% - 67px - 5px); } -.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator { +.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator, +.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-comparator { width: 67px; float: left; } diff --git a/src/filters/Date.js b/src/filters/Date.js index 1b21b79dd..38ae9b67b 100644 --- a/src/filters/Date.js +++ b/src/filters/Date.js @@ -3,52 +3,116 @@ import React, { Component, PropTypes } from 'react'; import Const from '../Const'; +const legalComparators = [ '=', '>', '>=', '<', '<=', '!=' ]; + +function dateParser(d) { + 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 = ''; - if (this.props.defaultValue) { - // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD" - const defaultValue = new Date(this.props.defaultValue); - defaultDate = `${defaultValue.getFullYear()}-${("0" + (defaultValue.getMonth() + 1)).slice(-2)}-${("0" + defaultValue.getDate()).slice(-2)}`; + 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; } + onChangeComparator(event) { + let date = this.refs.inputDate.value; + const comparator = event.target.value; + if (date === '') { + return; + } + date = new Date(date); + this.props.filterHandler({ date, comparator }, Const.FILTER_TYPE.DATE); + } + + getComparatorOptions() { + const optionTags = []; + optionTags.push(); + for (let i = 0; i < this.dateComparators.length; i++) { + optionTags.push( + + ); + } + return optionTags; + } + filter(event) { + const comparator = this.refs.dateFilterComparator.value; const dateValue = event.target.value; if (dateValue) { - this.props.filterHandler(new Date(dateValue), 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); } } componentDidMount() { + const comparator = this.refs.dateFilterComparator.value; const dateValue = this.refs.inputDate.defaultValue; - if (dateValue) { - this.props.filterHandler(new Date(dateValue), Const.FILTER_TYPE.DATE); + if (comparator && dateValue) { + this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE); } } render() { + const { defaultValue } = this.props; return ( +
+ +
); } } DateFilter.propTypes = { filterHandler: PropTypes.func.isRequired, - defaultValue: PropTypes.object, + defaultValue: PropTypes.shape({ + date: PropTypes.object, + comparator: PropTypes.oneOf(legalComparators) + }), + /* eslint consistent-return: 0 */ + dateComparators: function(props, propName) { + if (!props[propName]) { + return; + } + for (let i = 0; i < props[propName].length; i++) { + let comparatorIsValid = false; + for (let j = 0; j < legalComparators.length; j++) { + if (legalComparators[j] === props[propName][i]) { + comparatorIsValid = true; + break; + } + } + if (!comparatorIsValid) { + return new Error(`Date comparator provided is not supported. + Use only ${legalComparators}`); + } + } + }, columnName: PropTypes.string }; diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js index c00354499..2a211f96c 100644 --- a/src/store/TableDataStore.js +++ b/src/store/TableDataStore.js @@ -222,6 +222,10 @@ export class TableDataStore { filterObj[key].value; break; } + case Const.FILTER_TYPE.DATE: { + filterVal = filterObj[key].value.date; + break; + } case Const.FILTER_TYPE.REGEX: { filterVal = filterObj[key].value; break; @@ -251,7 +255,7 @@ export class TableDataStore { break; } case Const.FILTER_TYPE.DATE: { - valid = this.filterDate(targetVal, filterVal); + valid = this.filterDate(targetVal, filterVal, filterObj[key].value.comparator); break; } case Const.FILTER_TYPE.REGEX: { @@ -324,13 +328,61 @@ export class TableDataStore { return valid; } - filterDate(targetVal, filterVal) { - if (!targetVal) { - return false; + filterDate(targetVal, filterVal, comparator) { + // if (!targetVal) { + // return false; + // } + // return (targetVal.getDate() === filterVal.getDate() && + // targetVal.getMonth() === filterVal.getMonth() && + // targetVal.getFullYear() === filterVal.getFullYear()); + + let valid = true; + switch (comparator) { + case '=': { + if (targetVal != filterVal) { + valid = false; + } + break; + } + case '>': { + if (targetVal <= filterVal) { + valid = false; + } + break; + } + case '>=': { + // console.log(targetVal); + // console.log(filterVal); + // console.log(filterVal.getDate()); + if (targetVal < filterVal) { + valid = false; + } + break; } - return (targetVal.getDate() === filterVal.getDate() && - targetVal.getMonth() === filterVal.getMonth() && - targetVal.getFullYear() === filterVal.getFullYear()); + case '<': { + if (targetVal >= filterVal) { + valid = false; + } + break; + } + case '<=': { + if (targetVal > filterVal) { + valid = false; + } + break; + } + case '!=': { + if (targetVal == filterVal) { + valid = false; + } + break; + } + default: { + console.error('Date comparator provided is not supported'); + break; + } + } + return valid; } filterRegex(targetVal, filterVal) {