@logilab/react-faceted-search
v0.1.1
Published
Faceted search form for React
Downloads
67
Readme
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']
}