Skip to content
This repository was archived by the owner on Jan 15, 2022. It is now read-only.

Improve filterby #228

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve filterby #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,4 +131,3 @@ module.exports = function(grunt) {
grunt.registerTask('build', ['babel:common', 'buildBrowser']);
grunt.registerTask('default', ['build', 'watch:build']);
};

265 changes: 177 additions & 88 deletions build/reactable.js
View file
Open in desktop

Large diffs are not rendered by default.

2,359 changes: 23 additions & 2,336 deletions build/tests/reactable_test.js
View file
Open in desktop

Large diffs are not rendered by default.

125 changes: 74 additions & 51 deletions lib/reactable/filterer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use strict';

Object.defineProperty(exports, '__esModule', {
value: true
value: true
});

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Expand All @@ -23,68 +23,91 @@ var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);

var FiltererInput = (function (_React$Component) {
_inherits(FiltererInput, _React$Component);

function FiltererInput() {
_classCallCheck(this, FiltererInput);

_get(Object.getPrototypeOf(FiltererInput.prototype), 'constructor', this).apply(this, arguments);
_inherits(FiltererInput, _React$Component);

function FiltererInput() {
_classCallCheck(this, FiltererInput);

_get(Object.getPrototypeOf(FiltererInput.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(FiltererInput, [{
key: 'onChange',
value: function onChange(e) {
if (e && e.keyCode && e.keyCode == 13) {
this.props.onFilter(_reactDom2['default'].findDOMNode(this).value, true);
} else {
this.props.onFilter(_reactDom2['default'].findDOMNode(this).value, false);
}
}

_createClass(FiltererInput, [{
key: 'onChange',
value: function onChange() {
this.props.onFilter(_reactDom2['default'].findDOMNode(this).value);
}, {
key: 'render',
value: function render() {
var value = '';
if (typeof this.props.value != 'string') {
var should_slice = false;
for (var key in this.props.value) {
if (key && this.props.value[key]) {
should_slice = true;
value += ' ' + key + ': ' + this.props.value[key] + ',';
} else {
value += key + ': ';
}
}
}, {
key: 'render',
value: function render() {
return _react2['default'].createElement('input', { type: 'text',
className: 'reactable-filter-input',
placeholder: this.props.placeholder,
value: this.props.value,
onKeyUp: this.onChange.bind(this),
onChange: this.onChange.bind(this) });
if (value.slice(-1) == ',') {
value = value.slice(0, -1);
}
}]);
value = value.trimLeft();
} else {
value = this.props.value;
}

return _react2['default'].createElement('input', { type: 'text',
className: 'reactable-filter-input',
placeholder: this.props.placeholder,
value: value,
onKeyUp: this.onChange.bind(this),
onChange: this.onChange.bind(this) });
}
}]);

return FiltererInput;
return FiltererInput;
})(_react2['default'].Component);

exports.FiltererInput = FiltererInput;
;

var Filterer = (function (_React$Component2) {
_inherits(Filterer, _React$Component2);

function Filterer() {
_classCallCheck(this, Filterer);

_get(Object.getPrototypeOf(Filterer.prototype), 'constructor', this).apply(this, arguments);
_inherits(Filterer, _React$Component2);

function Filterer() {
_classCallCheck(this, Filterer);

_get(Object.getPrototypeOf(Filterer.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Filterer, [{
key: 'render',
value: function render() {
if (typeof this.props.colSpan === 'undefined') {
throw new TypeError('Must pass a colSpan argument to Filterer');
}

return _react2['default'].createElement(
'tr',
{ className: 'reactable-filterer' },
_react2['default'].createElement(
'td',
{ colSpan: this.props.colSpan },
_react2['default'].createElement(FiltererInput, { onFilter: this.props.onFilter,
value: this.props.value,
placeholder: this.props.placeholder })
)
);
}
}]);

_createClass(Filterer, [{
key: 'render',
value: function render() {
if (typeof this.props.colSpan === 'undefined') {
throw new TypeError('Must pass a colSpan argument to Filterer');
}

return _react2['default'].createElement(
'tr',
{ className: 'reactable-filterer' },
_react2['default'].createElement(
'td',
{ colSpan: this.props.colSpan },
_react2['default'].createElement(FiltererInput, { onFilter: this.props.onFilter,
value: this.props.value,
placeholder: this.props.placeholder })
)
);
}
}]);

return Filterer;
return Filterer;
})(_react2['default'].Component);

exports.Filterer = Filterer;
Expand Down
100 changes: 83 additions & 17 deletions lib/reactable/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,24 +257,92 @@ var Table = (function (_React$Component) {
}, {
key: 'applyFilter',
value: function applyFilter(filter, children) {
// Helper function to apply filter text to a list of table rows
filter = filter.toLowerCase();
var matchedChildren = [];
if (typeof filter === 'string') {
// Helper function to apply filter text to a list of table rows
filter = filter.toLowerCase();
var matchedChildren = [];

for (var i = 0; i < children.length; i++) {
var data = children[i].props.data;
for (var i = 0; i < children.length; i++) {
var data = children[i].props.data;

for (var j = 0; j < this.props.filterable.length; j++) {
var filterColumn = this.props.filterable[j];
for (var j = 0; j < this.props.filterable.length; j++) {
var filterColumn = this.props.filterable[j];

if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
matchedChildren.push(children[i]);
break;
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
matchedChildren.push(children[i]);
break;
}
}
}

return matchedChildren;
} else {
var _ret = (function () {

var filterCount = Object.keys(filter).length;
var matchedChildren = [];

for (var filterColumn in filter) {
var val = filter[filterColumn].toLowerCase();
for (var i = 0; i < children.length; i++) {
var data = children[i].props.data;
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(val) > -1) {
matchedChildren.push(children[i]);
}
}
}

if (filterCount > 1) {
var result = [];
return {
v: matchedChildren.map(function (children) {
var occurrences = matchedChildren.filter(function (value) {
return value.key === children.key;
}).length;
if (occurrences == filterCount) {
return children;
}
})
};
} else {
return {
v: matchedChildren
};
}
})();

if (typeof _ret === 'object') return _ret.v;
}
}
}, {
key: 'onFilter',
value: function onFilter(filters, enterKey) {
var _this = this;

return matchedChildren;
var input = undefined;
var filterObj = {};
if (typeof filters === 'string' && filters.indexOf(':') != -1 && enterKey) {
(function () {
input = filters.trim();
var col = undefined,
val = undefined;
var splitFilters = input.split(',');
splitFilters.forEach(function (f) {
var filter = f.split(':');

if (filter[0]) {
col = filter[0].trim();
}
if (filter[1]) {
val = filter[1].trim();
}
filterObj[col] = val;
});
_this.setState({ filter: filterObj });
})();
} else {
this.setState({ filter: filters });
}
}
}, {
key: 'sortByCurrentSort',
Expand Down Expand Up @@ -337,14 +405,14 @@ var Table = (function (_React$Component) {
this.setState({ currentSort: currentSort });
this.sortByCurrentSort();

if (this.props.onSort) {
if (typeof this.props.onSort === 'function') {
this.props.onSort(currentSort);
}
}
}, {
key: 'render',
value: function render() {
var _this = this;
var _this2 = this;

var children = [];
var columns = undefined;
Expand Down Expand Up @@ -463,9 +531,7 @@ var Table = (function (_React$Component) {
props,
columns && columns.length > 0 ? _react2['default'].createElement(_thead.Thead, { columns: columns,
filtering: filtering,
onFilter: function (filter) {
_this.setState({ filter: filter });
},
onFilter: this.onFilter.bind(this),
filterPlaceholder: this.props.filterPlaceholder,
currentFilter: this.state.filter,
sort: this.state.currentSort,
Expand All @@ -482,7 +548,7 @@ var Table = (function (_React$Component) {
numPages: numPages,
currentPage: currentPage,
onPageChange: function (page) {
_this.setState({ currentPage: page });
_this2.setState({ currentPage: page });
},
key: 'paginator' }) : null,
this.tfoot
Expand Down
31 changes: 27 additions & 4 deletions src/reactable/filterer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,40 @@ import React from 'react';
import ReactDOM from 'react-dom';

export class FiltererInput extends React.Component {
onChange() {
this.props.onFilter(ReactDOM.findDOMNode(this).value);

onChange(e) {
if ( e && e.keyCode && e.keyCode == 13 ) {
this.props.onFilter(ReactDOM.findDOMNode(this).value, true)
} else{
this.props.onFilter(ReactDOM.findDOMNode(this).value, false)
}
}

render() {
let value = ''
if (typeof(this.props.value) != 'string') {
let should_slice = false
for(let key in this.props.value) {
if(key && this.props.value[key]) {
should_slice = true
value += ' ' + key + ': ' + this.props.value[key] + ','
} else {
value += key + ': '
}
}
if (value.slice(-1) == ',') {
value = value.slice(0, -1)
}
value = value.trimLeft()
} else {
value = this.props.value
}

return (
<input type="text"
className="reactable-filter-input"
placeholder={this.props.placeholder}
value={this.props.value}
value={value}
onKeyUp={this.onChange.bind(this)}
onChange={this.onChange.bind(this)} />
);
Expand All @@ -35,4 +59,3 @@ export class Filterer extends React.Component {
);
}
};

Loading