Filter

A Filter. Make selections and filter your data.#

Filter Gif

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'

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`