Current Selections

Current Selections Box. Returns the current app selections.

Selections Gif

Usage

import { CurrentSelections } from @motor-js/core
//...
<CurrentSelections />

Props

PropDescriptionOptions / Example
sizesize of the selections boxoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
widthwidth of the selections boxstring
'100%'
maxWidthmax width of the selections boxstring
'100%'
marginmargin around the selections boxstring
'5px'
maxHeightmaximum height of the selections boxstring
'80px'
minHeightminimum height of the selections boxstring
'80px'
selectionsLimitNumber of selections the object will display per dimension, before the values are groupednumber
'3'
overflowSet overflow property, either on the x-axis or y-axisoneOf
'x-axis'
'y-axis'

Examples

Simple Example

function SelectionsTest() {
return (
<Motor config={config}>
<CurrentSelections />
</Motor>
);
}

Change of Theme

function SelectionsTest() {
return (
<Motor
config={config}
theme={{
selections: {
color: {
defaultFont: '#0000ff',
fontTitle: '#ebebff',
item: '#ebebff',
clear: 'white',
border: '#ebebff',
},
wrapper: {
backgroundColor: '#ebebff',
borderColor: '#ebebff',
},
item: {
backgroundColor: '#0000ff',
},
}
}}
>
<Filter
dimension={['Product Sub Group Desc']}
label='Product Group'
/>
<CurrentSelections size='large'/>
</Motor>
);
}

Theme API

selections

Settings in selections are below:

e.g. selections.color.defaultFont = 'brand'

SettingDescriptionOptions / Example
colorselections.color
defaultFontdefault font colorstring
fontTitlefont title colorstring
itemselection item colorstring
clearclear icon colorstring
borderborder colorstring
wrapperselections.wrapper
borderwrapper borderstring
backgroundColorwrapper background colorstring
borderColorwrapper border colorstring
radiuswrapper border radiusstring
itemselections.item
borderitem borderstring
backgroundColoritem background colorstring
radiusitem border radiusstring
titleFontWeightitem font weightstring