NumericFilter (Deprecated)
NumericFilter (Deprecated)
Example Implementation
numeric-filter.fn.tsx
import {useEffect, useState, FunctionComponent, Fragment} from 'react';
import {NumericFilter as HeadlessNumericFilter} from '@coveo/headless';
interface NumericFilterProps {
controller: HeadlessNumericFilter;
}
export const NumericFilter: FunctionComponent<NumericFilterProps> = (props) => {
const {controller} = props;
const [state, setState] = useState(controller.state);
let startRef: HTMLInputElement;
let endRef: HTMLInputElement;
useEffect(() => controller.subscribe(() => setState(controller.state)), []);
const {range} = state;
return (
<Fragment>
<input
key="start"
type="number"
ref={(ref) => (startRef = ref!)}
defaultValue={range?.start}
placeholder="Start"
/>
<input
key="end"
type="number"
ref={(ref) => (endRef = ref!)}
defaultValue={range?.end}
placeholder="End"
/>
<button
key="apply"
onClick={() =>
controller.setRange({
start: startRef.valueAsNumber,
end: endRef.valueAsNumber,
})
}
>
Apply
</button>
</Fragment>
);
};
// usage
/**
* ```tsx
* const controller = buildNumericFilter(engine, {
* options: {
* field: 'size',
* },
* });
*
* <NumericFilter controller={controller} />;
* ```
*/
The NumericFilter
controller makes it possible to create a numeric filter.
Methods
clear
Clears the current filter.
disable
Disables the filter. In other words, prevents it from filtering results.
enable
Enables the filter. In other words, undoes the effects of disable
.
setRange
Updates the selected range.
Parameters
-
range:
NumericFilterRange
The numeric range.
Returns boolean
: Whether the range is valid.
subscribe
Adds a callback that’s invoked on state change.
Parameters
-
listener:
() => void
A callback that’s invoked on state change.
Returns Unsubscribe
: A function to remove the listener.
Attributes
state
The state of the NumericFilter
controller.
Properties
-
enabled:
boolean
Whether the filter is enabled and its value is used to filter search results.
-
facetId:
string
The facet ID.
-
isLoading:
boolean
Returns
true
if a search is in progress, andfalse
if not. -
range?:
NumericFacetValue
The current selected range.
Initialize
buildNumericFilter
Creates a NumericFilter
controller instance.
Parameters
-
engine:
SearchEngine
The headless engine.
-
props:
NumericFilterProps
The configurable
NumericFilter
controller properties.
Returns NumericFilter
NumericFilterProps
The configurable NumericFilter
controller properties.
Properties
-
options:
NumericFilterOptions
The options for the
NumericFilter
controller. -
initialState?:
NumericFilterInitialState
The initial state.
NumericFilterOptions
The options for the NumericFilter
controller.
Properties
-
field:
string
The field whose values you want to display in the filter.
-
facetId?:
string
A unique identifier for the controller. By default, a unique random ID is generated.
-
filterFacetCount?:
boolean
Whether to exclude folded result parents when estimating the result count for each facet value.
Default:
true
-
injectionDepth?:
number
The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.
Note: A high injectionDepth may negatively impact the facet request performance.
Minimum:
0
Default:
1000
NumericFilterInitialState
The initial state.
Properties
-
range:
NumericFilterRange
The initial selected range.
Related Types
NumericFacetValue
Properties
-
end:
number
The ending value for the numeric range.
-
endInclusive:
boolean
Whether or not the end value is included in the range.
-
numberOfResults:
number
The number of results that have the facet value.
-
start:
number
The starting value for the numeric range.
-
state:
'idle' | 'selected'
The state of the facet value, indicating whether it is filtering results (
selected
) or not (idle
).
NumericFilterRange
Properties
-
end:
number
The ending value for the numeric range.
-
start:
number
The starting value for the numeric range.
Unsubscribe
Call signatures
-
(): void