react-faceted-search

|badge|

.. |badge| image:: https://jenkins.logilab.org/job/react-faceted-search/badge/icon :target: https://jenkins.logilab.org/job/react-faceted-search

This component relies on 2 elements:

• a set of React components, to render the HTML markup;
• a Filters object, that manages the filtering of the Entities.

The main component, FacetedSearchForm, takes several parameters:

• schema, a definition of the data (see test/data/schema.js for an example);
• config, a map of the entities and properties to display in the form;
• filters, a list of default filters;
• entities, a list of entities implementing the Entities interface.

To be called from the code rendering the form, one has to use the special ref property defined by React:

::

var config = {facets: new Map()}
config.facets.set('Pipe', ['pipe_usage', 'location_type', 'real_length'])
config.facets.set('SubStation', ['name'])
config.facets.set('Junction', ['name'])

render(
    <FacetedSearchForm
       schema={schema}
       config={config}
       entities={entities}
       ref={(ref) => this._form = ref}
    />,
    document.getElementById('entity-search-form')
)

The form will then be available using this._form.

Some methods are accessible through that ref:

• addFilter(filter);
• removeFilter(filter);
• clearFilters();
• getFilteredEntities().

The filter parameter passed to those methods is an object representing the filter. It can have one of the following shapes:

::

{
    entityType: 'Pipe',
    propertyName: 'name',
    value: 'my name'
}
{
    type: 'string_contains',
    entityType: 'Pipe',
    propertyName: 'identifier',
    value: 'P_'
}
{
    type: 'string_in_list',
    entityType: 'Pipe',
    propertyName: '__eid__',
    value: ['123', '345', '678']
}
{
    type: 'number_between',
    entityType: 'Pipe',
    propertyName: 'real_length',
    value: ['1', '10']
}