Filter

A Filter. Make selections and filter your data.

Usage

import { Filter } from @motor-js/core
//...
<Filter  
  dimension={['myAwesomeDimension']}
  label='AwesomeDimension'
/>

Props

Prop	Description	Options / Example
label	Filter label	is required string
dimension	Dimension to be rendered	is required array
size	Size of the filter	oneOf 'tiny' 'small' 'medium' 'large' 'xlarge'
width	width of the filter	string '100%'
dropHeight	Height of the dropdown	string '250px'
margin	margin around the filter	string '5px'
onSelectionChange	function fired on a change in selection	function
onSearch	function fired on search	function
single	option to enable only single selections in the Filter list	boolean false
sortByState	option that sorts our Filter by selection state	boolean true
selectionsTitle	Add the Filter selections to the title	boolean true

Examples

Simple Filter example

function FilterTest() {
  return (
    <Motor config={config}>
      <Filter 
        dimension={['Product Sub Group Desc']}
        label='Product Group'
      />
    </Motor>
  )
}

Singe Selection

function FilterTest() {
  return (
    <Motor config={config}>
      <Filter 
        dimension={['Product Sub Group Desc']}
        label='Product Group'
        single
      />
    </Motor>
  )
}

Theme API

filter

Settings in filter are below:

e.g. global.filter.color.selected = 'brand'

or

global.filter.title.border = '1px solid'

Setting	Description	Options / Example
color	filter.color
selected	background color of selected item	string
icon	color of the filter icons	string
backgroundColor	background color	string
selectedFont	font color of selected item	string
fontTitle	color of Filter label	string
notSelected	color not selected item	string
altSelection	color of alternate selections	string
title	filter.title
border	filter title border	string
borderColor	filter title border color	string
radius	filter title border radius	string
justifyContent	title alignment	string
main	filter.main
border	filter border	string
selected	filter.selected
border	selected item border	string
borderColor	selected item border color	string
dropdown	filter.dropdown
border	dropdown border	string
borderColor	dropdown border color	string
borderItems	dropdown border color	string
radius	dropdown border radius	string
marginTop	margin at the top of the dropdown	string
shadow	dropdown shadow	string
itemHeight	height of the dropdown items	object{ tiny: 'number', small: 'number', medium: 'number', large: 'number', xlarge: 'number' }
hover	filter.hover
borderColor	border color on hover	string