reacrmob-filter

Accessible, extensible, Filter for React.js

Inspired by: https://github.com/amitayh/react-redux-test

Feedback and PR welcome!

Installation

$ yarn add reactmob-filter
# or via npm
$ npm install --save reactmob-filter

Demo

Usage

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'));

License

MIT