Accessible, extensible, Filter for React.js
Inspired by: https://github.com/amitayh/react-redux-test
Feedback and PR welcome!
$ yarn add reactmob-filter
# or via npm
$ npm install --save reactmob-filter
import React from 'react';
import ReactDOM from 'react-dom';
import { Set } from 'immutable';
import './style.scss';
import {
Filter,
ChoiceRemoteConfig,
FilterList,
StringType,
NumberType,
DateType,
ChoiceType,
ExistsType
} from 'reactmob-filter';
const countries = [
{ abbr: 'AL', name: 'Alabama' },
{ abbr: 'AK', name: 'Alaska' },
{ abbr: 'AZ', name: 'Arizona' },
{ abbr: 'AR', name: 'Arkansas' },
{ abbr: 'CA', name: 'California' },
{ abbr: 'CO', name: 'Colorado' },
{ abbr: 'CT', name: 'Connecticut' },
{ abbr: 'DE', name: 'Delaware' },
{ abbr: 'FL', name: 'Florida' },
{ abbr: 'GA', name: 'Georgia' },
{ abbr: 'HI', name: 'Hawaii' },
{ abbr: 'ID', name: 'Idaho' },
{ abbr: 'IL', name: 'Illinois' },
{ abbr: 'IN', name: 'Indiana' },
{ abbr: 'IA', name: 'Iowa' },
{ abbr: 'KS', name: 'Kansas' },
];
const countryOptions = {
items: countries,
valueField: 'abbr',
displayField: item => `${item['abbr']} - ${item['name']}`,
/*items: ChoiceRemoteConfig.create({
url: 'http://127.0.0.1:8899/api/v1/countries/',
parser: (data) => {
if (data && data['_embedded']) {
return data['_embedded']['items'];
} else {
return data;
}
}
})*/
};
const fields = new Set([
Filter.create({ name: 'first_name', label: 'First Name', type: StringType }),
Filter.create({ name: 'birthday', label: 'Birthday', type: DateType }),
Filter.create({ name: 'age', label: 'Age', type: NumberType }),
Filter.create({ name: 'country', label: 'Country', type: ChoiceType, options: countryOptions }),
Filter.create({ name: 'enabled', label: 'Enabled', type: ExistsType }),
]);
class App extends React.Component {
render() {
return (
<FilterList fields={fields} onChange={(e) => console.log(e)} onSubmit={(filters) => console.log(filters)}/>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
MIT