<SubComponets/>

Sub Components

We created some subcomponents to make the creation of a filter as easy as possible!

• Filter: a filter title that wraps the filter inside it, including collapse/ expand logic
• GeneralFilter: a general single filter with checkboxes (includes Filter as a wrapper)
• PriceFilter: a price filter component (includes Filter as a wrapper)
• SwitchFilter: a true / false filter (includes Filter as a wrapper)
• ColorFilter: a swatch based filter for color based filters (includes Filter as a wrapper)
• RatingFilter: a score based filter for rating filters (stars) (includes Filter as a wrapper)
• CategoryListFilter: a filter for category navigation - displays all categories A-Z (includes Filter as a wrapper)
• RemovableTags: tags that can be used to display selected filters, clicking them will clear this filter
• SingleFilter: display a single filter

Example

MyFilter.jsx

import {Filter, GeneralFilter, PriceFilter,SwitchFilter} from "fast-component-library/Filter";
import {useFastState} from "fast-component-library";

const MyFilter = ({ id, values, name, setNarrow}) => {
    const {narrow, results} = useFastState();

    const onNarrow = (facetID, facetName) => {
        /* handle here
         ...
         */

        // end with:
        setNarrow(facetID, facetName);
    }

    const isChecked = (facetName) => {
        return Boolean(narrow && narrow.find(term => term[0] === id && term[1] === facetName))
    }

    if(id === "Types"){
        return <GeneralFilter name={name} onNarrow={onNarrow} values={values} id={id} key={id}/>
    }

    if(id === "On-Sale"){
        return <SwitchFilter id={id} name={name} onNarrow={onNarrow} key={id}/>
    }

    if(id === "Price"){
        const max = results.facets.find(facet => facet[0] === "Price_max")?.[1][0];
        const min = results.facets.find(facet => facet[0] === "Price_min")?.[1][0];
        if (max && min) {
            return <PriceFilter id={id} values={values} priceMin={min} priceMax={max}
                                name={name} onNarrow={onNarrow} key={id}/>
        }
    }

    return (
        <Filter name={name}>
            <ul>
                {
                    values.map(value => {
                        return (
                            <li className={"single-facet"}>
                                <input type={"checkbox"} checked={isChecked(value)} className={"facet-checkbox"} onChange={() => onNarrow(id, value)}/>
                                <label className={"facet-name"}>{value}</label>
                            </li>
                        )
                    })
                }
            </ul>
        </Filter>
    )
}

export default MyFilter;

index.jsx

import {Results, ProductGrid,FastSimonApi,SearchBox, Filters} from "fast-simon-react-component-libray";
import React from "react";
import MyFilter from "../components"

export const App = () => {
    return (
        <FastSimonApi storeID={1} uuid={"rand-omuu-id12-3456"}>
             <header>
                Search: <SearchBox/>
            </header>

            <Results>
                <Filters renderFilter={MyFilter}/>
                <ProductGrid/>
            </Results>
        </FastSimonApi>
    )
}

Props

Filter

Option	Type	Description
name	string (required)	Filter title
collapsedSymbol	string (default="+")	Symbol shown on the right side when collapsed
notCollapsedSymbol	string (default="-")	Symbol shown on the right side when expanded
isCollapsed	boolean (default=false)	Filter default collapse state
className	string	Custom class for the filter element
id	string	Filter ID, this will crete a data attribute
customClasses	{header?: string, children?: string}	Custom classes for this wrapper

GeneralFilter

Option	Type	Description
id	string (required)	Filter title
values	FacetValue[]	CategoryFacetValue[]
name	string (required)	Symbol shown on the right side when expanded
isCollapsed	boolean (default=false)	Filter default collapse state
onNarrow	GeneralFilterNarrowFunc	onChange event for the filter checkbox
customClasses	GeneralFilterCustomClasses	Custom classes for the filter element
children	React.ReactNode	if you want a custom node before the filter values
filterWrapperProps	FilterWrapperProps	props, mostly if you want to add custom classes to the wrapper

PriceFilter

Option	Type	Description
id	string (required)	Filter title
values	FacetValue[]	Filter values
name	string (required)	Symbol shown on the right side when expanded
priceMin	number (required)	Filter min price
PriceMax	number (required)	Filter max price
onNarrow	GeneralFilterNarrowFunc	onChange event for the filter slider/ checkbox
usePriceRange	boolean (default=true)	onChange event for the filter slider/ checkbox
sliderProps	"rc-slider" Range props	Custom props for the Range component
customClasses	PriceFilterCustomClasses	Custom classes for the filter element
filterWrapperProps	FilterWrapperProps	props, mostly if you want to add custom classes to the wrapper

SwitchFilter

Option	Type	Description
id	string (required)	Filter title
name	string (required)	Symbol shown on the right side when expanded
onNarrow	GeneralFilterNarrowFunc	onChange event for the filter slider/ checkbox
customClasses	SwitchFilterCustomClasses	Custom classes for the filter element
filterWrapperProps	FilterWrapperProps	props, mostly if you want to add custom classes to the wrapper

ColorFilter

Option	Type	Description
id	string (required)	Filter title
values	FacetValue[]	ColorFamilyFacetValue[]
name	string (required)	Symbol shown on the right side when expanded
isCollapsed	boolean (default=false)	Filter default collapse state
onNarrow	GeneralFilterNarrowFunc	onChange event for the filter checkbox
customClasses	ColorFilterCustomClasses	Custom classes for the filter element
children	React.ReactNode	if you want a custom node before the filter values
filterWrapperProps	FilterWrapperProps	props, mostly if you want to add custom classes to the wrapper

RatingFilter

Option	Type	Description
id	string (required)	Filter title
values	FacetValue[]	Filter values
name	string (required)	Symbol shown on the right side when expanded
isCollapsed	boolean (default=false)	Filter default collapse state
customClasses	RatingFilterCustomClasses	Custom classes for the filter element
filterWrapperProps	FilterWrapperProps	props, mostly if you want to add custom classes to the wrapper
color	string	star fill color

CategoryListFilter

Option	Type	Description
id	string (required)	Filter title
name	string (required)	Symbol shown on the right side when expanded
isCollapsed	boolean (default=false)	Filter default collapse state
children	React.ReactNode	if you want a custom node before the filter values
filterWrapperProps	FilterWrapperProps	props, mostly if you want to add custom classes to the wrapper
onClick	(category: FastCategory) => void	category clicked callback

Removable Tags

Option	Type	Description
customCloseIcon	React.ReactNode	custom close icon
customClasses	RemovableTagsCustomClasses	custom classes
noGroupName	boolean (default=false)	false="{filter_group}:{filter_name}", true="{filter_name}"

Single Filter

Option	Type	Description
filter	Facet (required)	the facet you want to render
renderFilter	RenderFilterFunc	render a custom filter. undefined will render default
onCategoryFilterClick	(category: FastCategory) => void	callback when a category filter is clicked (collection only)
redirectType	RedirectType	single-page - will use to url, multi page will redirect to url directly
className	string	custom class

Types

interface GeneralFilterCustomClasses{
    filterWrapper?: string
    filterItem?: string
    checkbox?: string
    count?: string
}

interface SwitchFilterCustomClasses{
    filter?: string
    switch?: string
}

interface PriceFilterCustomClasses{
    filter?: string
    range?: string
    rangeWrapper?: string
}

interface RatingFilterCustomClasses {
    checkbox?: string
    item?: string
    stars?: string
    filter?: string
}

interface ColorFilterCustomClasses {
    swatch?: string
    item?: string
    label?: string
}

export interface RemovableTagsCustomClasses {
    wrapper?: string
    item?: string
    clearAll?: string
}