From fc1f75cfac6422bad47350ef8513ce8f547a7883 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 3 Jun 2018 14:02:39 +0800 Subject: [PATCH] implement date filter --- .../react-bootstrap-table2-filter/index.js | 6 + .../src/components/date.js | 204 ++++++++++++++++++ .../src/const.js | 3 +- .../src/filter.js | 99 +++++++++ .../style/react-bootstrap-table2-filter.scss | 12 +- 5 files changed, 319 insertions(+), 5 deletions(-) create mode 100644 packages/react-bootstrap-table2-filter/src/components/date.js diff --git a/packages/react-bootstrap-table2-filter/index.js b/packages/react-bootstrap-table2-filter/index.js index a2bc666..0f17bd3 100644 --- a/packages/react-bootstrap-table2-filter/index.js +++ b/packages/react-bootstrap-table2-filter/index.js @@ -1,6 +1,7 @@ import TextFilter from './src/components/text'; import SelectFilter from './src/components/select'; import NumberFilter from './src/components/number'; +import DateFilter from './src/components/date'; import wrapperFactory from './src/wrapper'; import * as Comparison from './src/comparison'; @@ -25,3 +26,8 @@ export const numberFilter = (props = {}) => ({ Filter: NumberFilter, props }); + +export const dateFilter = (props = {}) => ({ + Filter: DateFilter, + props +}); diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js new file mode 100644 index 0000000..adff6c6 --- /dev/null +++ b/packages/react-bootstrap-table2-filter/src/components/date.js @@ -0,0 +1,204 @@ +/* eslint react/require-default-props: 0 */ +/* eslint no-return-assign: 0 */ +/* eslint prefer-template: 0 */ +import React, { Component } from 'react'; +import { PropTypes } from 'prop-types'; + +import * as Comparator from '../comparison'; +import { FILTER_TYPE } from '../const'; + +const legalComparators = [ + Comparator.EQ, + Comparator.NE, + Comparator.GT, + Comparator.GE, + Comparator.LT, + Comparator.LE +]; + +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.timeout = null; + this.comparators = props.comparators || legalComparators; + this.applyFilter = this.applyFilter.bind(this); + this.onChangeDate = this.onChangeDate.bind(this); + this.onChangeComparator = this.onChangeComparator.bind(this); + } + + componentDidMount() { + const { getFilter } = this.props; + const comparator = this.dateFilterComparator.value; + const date = this.inputDate.value; + if (comparator && date) { + this.applyFilter(date, comparator); + } + + // export onFilter function to allow users to access + if (getFilter) { + getFilter((filterVal) => { + this.dateFilterComparator.value = filterVal.comparator; + this.inputDate.value = dateParser(filterVal.date); + + this.applyFilter(filterVal.date, filterVal.comparator); + }); + } + } + + componentWillUnmount() { + if (this.timeout) clearTimeout(this.timeout); + } + + onChangeDate(e) { + const comparator = this.dateFilterComparator.value; + const filterValue = e.target.value; + this.applyFilter(filterValue, comparator); + } + + onChangeComparator(e) { + const value = this.inputDate.value; + const comparator = e.target.value; + this.applyFilter(value, comparator); + } + + getComparatorOptions() { + const optionTags = []; + const { withoutEmptyComparatorOption } = this.props; + if (!withoutEmptyComparatorOption) { + optionTags.push( + ); + } + return optionTags; + } + + getDefaultDate() { + 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; + } + + applyFilter(value, comparator) { + if (!comparator || !value) { + return; + } + const { column, onFilter, delay } = this.props; + const execute = () => { + const date = typeof value !== 'object' ? new Date(value) : value; + onFilter(column, FILTER_TYPE.DATE)({ date, comparator }); + }; + if (delay) { + this.timeout = setTimeout(() => { execute(); }, delay); + } else { + execute(); + } + } + + render() { + const { + placeholder, + column: { text }, + style, + comparatorStyle, + dateStyle, + className, + comparatorClassName, + dateClassName, + defaultValue + } = this.props; + + return ( +
+ + this.inputDate = n } + className={ `filter date-filter-input form-control ${dateClassName}` } + style={ dateStyle } + type="date" + onChange={ this.onChangeDate } + placeholder={ placeholder || `Enter ${text}...` } + defaultValue={ this.getDefaultDate() } + /> +
+ ); + } +} + +DateFilter.propTypes = { + onFilter: PropTypes.func.isRequired, + column: PropTypes.object.isRequired, + delay: PropTypes.number, + defaultValue: PropTypes.shape({ + date: PropTypes.oneOfType([PropTypes.object]), + comparator: PropTypes.oneOf([...legalComparators, '']) + }), + /* eslint consistent-return: 0 */ + comparators: (props, propName) => { + if (!props[propName]) { + return; + } + for (let i = 0; i < props[propName].length; i += 1) { + let comparatorIsValid = false; + for (let j = 0; j < legalComparators.length; j += 1) { + if (legalComparators[j] === props[propName][i] || props[propName][i] === '') { + comparatorIsValid = true; + break; + } + } + if (!comparatorIsValid) { + return new Error(`Date comparator provided is not supported. + Use only ${legalComparators}`); + } + } + }, + placeholder: PropTypes.string, + withoutEmptyComparatorOption: PropTypes.bool, + style: PropTypes.object, + comparatorStyle: PropTypes.object, + dateStyle: PropTypes.object, + className: PropTypes.string, + comparatorClassName: PropTypes.string, + dateClassName: PropTypes.string, + getFilter: PropTypes.func +}; + +DateFilter.defaultProps = { + delay: 0, + defaultValue: { + date: undefined, + comparator: '' + }, + withoutEmptyComparatorOption: false, + comparators: legalComparators, + placeholder: undefined, + style: undefined, + className: '', + comparatorStyle: undefined, + comparatorClassName: '', + dateStyle: undefined, + dateClassName: '' +}; + + +export default DateFilter; diff --git a/packages/react-bootstrap-table2-filter/src/const.js b/packages/react-bootstrap-table2-filter/src/const.js index a459270..ccb4d78 100644 --- a/packages/react-bootstrap-table2-filter/src/const.js +++ b/packages/react-bootstrap-table2-filter/src/const.js @@ -1,7 +1,8 @@ export const FILTER_TYPE = { TEXT: 'TEXT', SELECT: 'SELECT', - NUMBER: 'NUMBER' + NUMBER: 'NUMBER', + DATE: 'DATE' }; export const FILTER_DELAY = 500; diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js index 9f7812c..a65d52a 100644 --- a/packages/react-bootstrap-table2-filter/src/filter.js +++ b/packages/react-bootstrap-table2-filter/src/filter.js @@ -91,6 +91,102 @@ export const filterByNumber = _ => ( }) ); +export const filterByDate = _ => ( + data, + dataField, + { filterVal: { comparator, date } }, + customFilterValue +) => { + if (!date || !comparator) return data; + const filterDate = date.getDate(); + const filterMonth = date.getMonth(); + const filterYear = date.getFullYear(); + + return data.filter((row) => { + let valid = true; + let cell = _.get(row, dataField); + + if (customFilterValue) { + cell = customFilterValue(cell, row); + } + + if (typeof cell !== 'object') { + cell = new Date(cell); + } + + const targetDate = cell.getDate(); + const targetMonth = cell.getMonth(); + const targetYear = cell.getFullYear(); + + + switch (comparator) { + case EQ: { + if ( + filterDate !== targetDate || + filterMonth !== targetMonth || + filterYear !== targetYear + ) { + valid = false; + } + break; + } + case GT: { + if (cell <= date) { + valid = false; + } + break; + } + case GE: { + if (targetYear < filterYear) { + valid = false; + } else if (targetYear === filterYear && + targetMonth < filterMonth) { + valid = false; + } else if (targetYear === filterYear && + targetMonth === filterMonth && + targetDate < filterDate) { + valid = false; + } + break; + } + case LT: { + if (cell >= date) { + valid = false; + } + break; + } + case LE: { + if (targetYear > filterYear) { + valid = false; + } else if (targetYear === filterYear && + targetMonth > filterMonth) { + valid = false; + } else if (targetYear === filterYear && + targetMonth === filterMonth && + targetDate > filterDate) { + valid = false; + } + break; + } + case NE: { + if ( + filterDate === targetDate && + filterMonth === targetMonth && + filterYear === targetYear + ) { + valid = false; + } + break; + } + default: { + console.error('Date comparator provided is not supported'); + break; + } + } + return valid; + }); +}; + export const filterFactory = _ => (filterType) => { let filterFn; switch (filterType) { @@ -101,6 +197,9 @@ export const filterFactory = _ => (filterType) => { case FILTER_TYPE.NUMBER: filterFn = filterByNumber(_); break; + case FILTER_TYPE.DATE: + filterFn = filterByDate(_); + break; default: filterFn = filterByText(_); } diff --git a/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss b/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss index 70d4a03..e2304b6 100644 --- a/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss +++ b/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss @@ -5,7 +5,8 @@ .react-bootstrap-table > table > thead > tr > th .select-filter option[value=''], .react-bootstrap-table > table > thead > tr > th .select-filter.placeholder-selected, .react-bootstrap-table > table > thead > tr > th .filter::-webkit-input-placeholder, -.react-bootstrap-table > table > thead > tr > th .number-filter-input::-webkit-input-placeholder { +.react-bootstrap-table > table > thead > tr > th .number-filter-input::-webkit-input-placeholder, +.react-bootstrap-table > table > thead > tr > th .date-filter-input::-webkit-input-placeholder { color: lightgrey; font-style: italic; } @@ -15,17 +16,20 @@ font-style: initial; } -.react-bootstrap-table > table > thead > tr > th .number-filter { +.react-bootstrap-table > table > thead > tr > th .number-filter, +.react-bootstrap-table > table > thead > tr > th .date-filter { display: flex; } -.react-bootstrap-table > table > thead > tr > th .number-filter-input { +.react-bootstrap-table > table > thead > tr > th .number-filter-input, +.react-bootstrap-table > table > thead > tr > th .date-filter-input { margin-left: 5px; float: left; width: calc(100% - 67px - 5px); } -.react-bootstrap-table > table > thead > tr > th .number-filter-comparator { +.react-bootstrap-table > table > thead > tr > th .number-filter-comparator, +.react-bootstrap-table > table > thead > tr > th .date-filter-comparator { width: 67px; float: left; } \ No newline at end of file