Skip to content

Commit

Permalink
fix #377
Browse files Browse the repository at this point in the history
  • Loading branch information
@AllenFang
AllenFang committed Apr 8, 2016
1 parent 2432ab3 commit bf5b4d2
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 19 deletions.
9 changes: 6 additions & 3 deletions css/react-bootstrap-table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
82 changes: 73 additions & 9 deletions src/filters/Date.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(<option key='-1'></option>);
for (let i = 0; i < this.dateComparators.length; i++) {
optionTags.push(
<option key={ i } value={ this.dateComparators[i] }>
{ this.dateComparators[i] }
</option>
);
}
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 (
<div className='filter date-filter'>
<select ref='dateFilterComparator'
className='date-filter-comparator form-control'
onChange={ this.onChangeComparator }
defaultValue={ (defaultValue) ? defaultValue.comparator : '' }>
{ this.getComparatorOptions() }
</select>
<input ref='inputDate'
className='filter date-filter form-control'
className='filter date-filter-input form-control'
type='date'
onChange={ this.filter }
defaultValue={ this.setDefaultDate() } />
</div>
);
}
}

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
};

Expand Down
66 changes: 59 additions & 7 deletions src/store/TableDataStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit bf5b4d2

Please sign in to comment.