Skip to content

Adding customFilterContainer ability to be passed customOptions. #474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Adding customFilterContainer ability to be passed customOptions. #474

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
19 changes: 15 additions & 4 deletions build/Griddle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -815,7 +815,7 @@ return /******/ (function(modules) { // webpackBootstrap
};
},
getFilter: function getFilter() {
return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { customFilterComponentOptions: this.props.customFilterComponentOptions, changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
},
getSettings: function getSettings() {
return this.props.showSettings ? React.createElement('button', { type: 'button', className: this.props.settingsToggleClassName, onClick: this.toggleColumnChooser,
Expand Down Expand Up @@ -8010,14 +8010,25 @@ return /******/ (function(modules) { // webpackBootstrap
*/
"use strict";

var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}return target;
};

var React = __webpack_require__(2);

var CustomFilterContainer = React.createClass({
displayName: "CustomFilterContainer",

getDefaultProps: function getDefaultProps() {
return {
"placeholderText": ""
"placeholderText": "",
"customFilterComponentOptions": {}
};
},
render: function render() {
Expand All @@ -8028,11 +8039,11 @@ return /******/ (function(modules) { // webpackBootstrap
return React.createElement("div", null);
}

return React.createElement(that.props.customFilterComponent, {
return React.createElement(that.props.customFilterComponent, _extends({}, this.props.customFilterComponentOptions, {
changeFilter: this.props.changeFilter,
results: this.props.results,
currentResults: this.props.currentResults,
placeholderText: this.props.placeholderText });
placeholderText: this.props.placeholderText }));
}
});

Expand Down
15 changes: 15 additions & 0 deletions docs/src/markdown/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,21 @@ var TestLineChart = React.createClass({

Griddle supports custom filtering and custom filter components. In order to use a custom filter function set the property `useCustomFilterer` to true and pass in a function to the `customFilterer` property. To use a custom filter component set `useCustomFilterComponent` to true and pass a component to `customFilterComponent`.

<dl>
<dt>useCustomFilterComponent</dt>
<dd><strong>bool</strong> - Use custom filter component rather than default filter. default: false</dd>
</dl>

<dl>
<dt>customFilterComponent</dt>
<dd><strong>object</strong> - The custom filter component. default: {}</dd>
</dl>

<dl>
<dt>customFilterComponentOptions</dt>
<dd><strong>object</strong> - Any options to be passed to the custom filter component. default: {}</dd>
</dl>

#####Example:#####

This example shows how to make a custom filter component with a custom filter function that does a case-insensitive search through the items. The component must call `this.props.changeFilter(val)` when the filter should be updated. In the example below we pass a string but any variable type can be used as long as the filter function is expecting it, for example an advanced query could be passed in using an object. The filter function signature takes the items to be filtered and the query to filter them by.
Expand Down
17 changes: 14 additions & 3 deletions modules/customFilterContainer.jsx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,25 @@
*/
"use strict";

var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}return target;
};

var React = require('react');

var CustomFilterContainer = React.createClass({
displayName: "CustomFilterContainer",

getDefaultProps: function getDefaultProps() {
return {
"placeholderText": ""
"placeholderText": "",
"customFilterComponentOptions": {}
};
},
render: function render() {
Expand All @@ -21,11 +32,11 @@ var CustomFilterContainer = React.createClass({
return React.createElement("div", null);
}

return React.createElement(that.props.customFilterComponent, {
return React.createElement(that.props.customFilterComponent, _extends({}, this.props.customFilterComponentOptions, {
changeFilter: this.props.changeFilter,
results: this.props.results,
currentResults: this.props.currentResults,
placeholderText: this.props.placeholderText });
placeholderText: this.props.placeholderText }));
}
});

Expand Down
3 changes: 1 addition & 2 deletions modules/griddle.jsx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,6 @@ var Griddle = React.createClass({
this.props.externalSetPageSize(size);
return;
}

//make this better.
this.state.resultsPerPage = size;
this.setMaxPage();
Expand Down Expand Up @@ -750,7 +749,7 @@ var Griddle = React.createClass({
};
},
getFilter: function getFilter() {
return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { customFilterComponentOptions: this.props.customFilterComponentOptions, changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
},
getSettings: function getSettings() {
return this.props.showSettings ? React.createElement('button', { type: 'button', className: this.props.settingsToggleClassName, onClick: this.toggleColumnChooser,
Expand Down
4 changes: 3 additions & 1 deletion scripts/customFilterContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ var React = require('react');
var CustomFilterContainer = React.createClass({
getDefaultProps: function(){
return {
"placeholderText": ""
"placeholderText": "",
"customFilterComponentOptions": {}
}
},
render: function(){
Expand All @@ -18,6 +19,7 @@ var CustomFilterContainer = React.createClass({
}

return <that.props.customFilterComponent
{...this.props.customFilterComponentOptions}
changeFilter={this.props.changeFilter}
results={this.props.results}
currentResults={this.props.currentResults}
Expand Down
2 changes: 1 addition & 1 deletion scripts/griddle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -760,7 +760,7 @@ var Griddle = React.createClass({
getFilter: function(){
return ((this.props.showFilter && this.shouldUseCustomGridComponent() === false) ?
( this.props.useCustomFilterComponent ?
<CustomFilterContainer changeFilter={this.setFilter} placeholderText={this.props.filterPlaceholderText} customFilterComponent={this.props.customFilterComponent} results={this.props.results} currentResults={this.getCurrentResults()} /> :
<CustomFilterContainer customFilterComponentOptions={this.props.customFilterComponentOptions} changeFilter={this.setFilter} placeholderText={this.props.filterPlaceholderText} customFilterComponent={this.props.customFilterComponent} results={this.props.results} currentResults={this.getCurrentResults()} /> :
<GridFilter changeFilter={this.setFilter} placeholderText={this.props.filterPlaceholderText} />) :
"");
},
Expand Down