aio-button

aio-button

props

props	Type	Default	Used in type	Description
type	'button', 'select', 'multiselect', 'checkbox', 'radio', 'checklist'	required	all	component type
attrs	object(attributes)	-	all	attributes(style,className,disabled,....)
show	boolean	true	all	visible or not
text	any	-	select,multiselect,button,checkbox	html as text
onChange	function(value,option){void}	-	select,multiselect,button,checkbox	onChange event
onClick	function(){void}	-	button	onClick event
before	any	-	select,multiselect,button	before html
after	any	-	select,multiselect,button	after html
badge	number	-	select,multiselect,button	badge number
caret	boolean or html/jsx	true	select,multiselect	caret icon, true(default caret), false (without caret),html/jsx(custom caret)
caretAttrs	object(attributes)	true	select,multiselect	default caret attributes(style,className,....)
badgeAttrs	object(attributes)	-	select,multiselect,button	badge attributes(style,className,disabled,....)
popupAttrs	object(attributes)	-	select,multiselect	popup attributes(style,className,disabled,....)
poupWidth	'fit' or number	-	select	popup width, 'fit' means popup width set to button width
poupOver	function(props){return html}	-	button	open custom popup under button by clicking button
search	boolean	true	select,multiselect	search options
animate	boolean or css object	false	select,multiselect	popup animation

options prperties

Property	Type	Default	Used in type	Description
value	any	-	select,multiselect,radio	option value
text	any	-	select,multiselect,radio	option text or html
subtext	any	-	select,multiselect,radio	option subtext
show	boolean	true	select,multiselect,radio	set option visible or not
attrs	object attributes	-	all	set option attributes (className,style,disabled,...)
before	any	-	select,multiselect	set option before
after	any	-	select,multiselect	set option after
checked	boolean	undefined	select	set option checkbox
title	string	option text	select,multiselect,radio	set option title(tooltip)
iconSize	array of 3 numbers	option text	select,multiselect,radio	set option check icon size([outer size,inner size,stroke width])
iconColor	string or array of 2 color string	option text	select,multiselect,radio	set option check icon color (color or [outer color,inner color])
checkIcon	html/jsx	default check icon	select,multiselect,radio	set option custom check icon
onClick	function	-	select	set option onClick(will prevent calling onChange by clicking on option)

• All of options properties can set in props 1 time instead of set on each option object.

• for example instead of value property in option object, you can set optionValue props (function or string) in root props of component

• for example (value => optionValue , text => optionText , disabled => optionDisabled)

props for setting options properties

• these functions get option object and index of option as parameters and returns property value of options

Props	Type	Used in type	Description
optionValue	function(option,index){return any}	select,multiselect,radio	returns value of option
optionText	function(option,index){return any}	select,multiselect,radio	returns text or html of option
optionSubext	function(option,index){return any}	select,multiselect,radio	returns option subtext
optionDisabled	function(option,index){return boolean}	select,multiselect,radio	returns a boolean to set option disabled
optionShow	function(option,index){return boolean}	select,multiselect,radio	returns a boolean to set option visible or not
optionBefore	function(option,index){return any}	select,multiselect	returns option before
optionAfter	function(option,index){return any}	select,multiselect	returns option after
optionChecked	function(option,index){return boolean}	select	returns a boolean for check or uncheck option
optionStyle	function(option,index){return object}	select,multiselect,radio	returns option css as object
optionClassName	function(option,index){return string}	select,multiselect,radio	returns option div className
optionTitle	function(option,index){return string}	select,multiselect,radio	returns option title(tooltip)
optionIconSize	function(option,index){return array}	select,multiselect,radio	returns option check icon size
optionIconColor	function(option,index){return string or array}	select,multiselect,radio	returns option check icon color(s)
optionCheckedIcon	function(option,index){return string}	select,multiselect,radio	returns option custom checked icon
optionUncheckedIcon	function(option,index){return string}	select,multiselect,radio	returns option custom unchecked icon

• all of these props can get an string eval as shorthand that can read option object

• for example optionText='option.name' returns name property of option object as option text

• for example optionShow='option.priority > 5' will set true for show property of options that have priority property greater than 5

Set option value

option.value(any)

<AIOButton
  ...
  type='select'
  options={[
    {text:'Option1',value:'opt1'},
    {text:'Option2',value:'opt2'},
    {text:'Option3',value:'opt3'}
  ]}
  value='opt2'
  ...
/>  

optionValue props(function)

<AIOButton
  ...
  type='select'
  valueField={(option)=>option.id}
  options={[
    {text:'Option1',id:'opt1'},
    {text:'Option2',id:'opt2'},
    {text:'Option3',id:'opt3'}
  ]}
  value='opt2'
  ...
/>  

optionValue shorthand (string)

<AIOButton
  ...
  type='select'
  optionValue='option.id'
  options={[
    {text:'Option1',id:'opt1'},
    {text:'Option2',id:'opt2'},
    {text:'Option3',id:'opt3'}
  ]}
  value='opt2'
  ...
/>  

Set option text

option.text

<AIOButton
  ...
  type='select'
  options={[
    {text:'Option1',value:'opt1'},
    {text:'Option2',value:'opt2'},
    {text:'Option3',value:'opt3'}
  ]}
  ...
/>  

optionsText props

<AIOButton
  ...
  type='select'
  optionText={(option)=>{
    let {priority = 0} = option;
    if(priority < 5){
      return `${option.name} (low priority)`
    }
    if(priority < 7){
      return `${option.name} (medium priority)`
    }
    else{
      return `${option.name} (high priority)`
    }
  }}
  options={[
    {name:'Option1',value:'opt1',priority:10},
    {name:'Option2',value:'opt2',priority:6},
    {name:'Option3',value:'opt3',priority:2}
  ]}
  value='opt2'
  ...
/>  

optionText shorthand (string)

<AIOButton
  ...
  type='select'
  optionText='option.name'
  options={[
    {name:'Option1',value:'opt1'},
    {name:'Option2',value:'opt2'},
    {name:'Option3',value:'opt3'}
  ]}
  value='opt2'
  ...
/>  

Set option className

option.className (string)

<AIOButton
  ...
  type='select'
  options={[
    {text:'Option1',value:'opt1',className:'high-priority'},
    {text:'Option2',value:'opt2',className:'medium-priority'},
    {text:'Option3',value:'opt3',className:'low-priority'}
  ]}
  value='opt2'
  ...
/>  

optionClassName props (function)

<AIOButton
  ...
  type='select'
  optionClassName={(option)=>{
    let {priority = 0} = option;
    if(priority < 5){return 'low-priority'}
    if(priority < 7){return 'medium-priority'}
    else{return 'high-priority'}
  }}
  options={[
    {text:'Option1',value:'opt1',priority:10},
    {text:'Option2',value:'opt2',priority:6},
    {text:'Option3',value:'opt3',priority:2}
  ]}
  value='opt2'
  ...
/>  

classNameField shorthand (string)

<AIOButton
  ...
  type='select'
  optionClassName='option.state + "-priority"'
  options={[
    {text:'Option1',value:'opt1',state:'low'},
    {text:'Option2',value:'opt2',state:'medium'},
    {text:'Option3',value:'opt3',state:'high'}
  ]}
  value='opt2'
  ...
/>  

Set option style

option.style (object)

<AIOButton
  ...
  type='select'
  options={[
    {text:'Option1',value:'opt1',style:{color:'red'}},
    {text:'Option2',value:'opt2',style:{color:'orange'}},
    {text:'Option3',value:'opt3',style:{color:'yellow'}}
  ]}
  value='opt2'
  ...
/>  

optionStyle props (function)

<AIOButton
  ...
  type='select'
  optionStyle={(option)=>{
    let {priority = 0} = option;
    if(priority < 5){return {color:'yellow'}}
    if(priority < 7){return {color:'orange'}}
    else{return {color:'red'}}
  }}
  options={[
    {name:'Option1',value:'opt1',priority:10},
    {name:'Option2',value:'opt2',priority:6},
    {name:'Option3',value:'opt3',priority:2}
  ]}
  value='opt2'
  ...
/>  

optionStyle shorthand (string)

<AIOButton
  ...
  type='select'
  optionStyle='{color:option.color}'
  options={[
    {name:'Option1',value:'opt1',color:'red'},
    {name:'Option2',value:'opt2',color:'orange'},
    {name:'Option3',value:'opt3',color:'yellow'}
  ]}
  value='opt2'
  ...
/>  

Set option disabled

option.disabled (boolean)

<AIOButton
  ...
  type='select'
  options={[
    {text:'Option1',value:'opt1'},
    {text:'Option2',value:'opt2',disabled:true},
    {text:'Option3',value:'opt3'}
  ]}
  value='opt2'
  ...
/>  

optionDisabled props (function)

<AIOButton
  ...
  type='select'
  disabledField={()=>option.priority < 5}}
  options={[
    {text:'Option1',value:'opt1',priority:10},
    {text:'Option2',value:'opt2',priority:8},
    {text:'Option3',value:'opt3',priority:4}
  ]}
  value='opt2'
  ...
/>  

optionDisabled shorthand (string)

<AIOButton
  ...
  type='select'
  optionDisabled='option.priority < 5'
  options={[
    {text:'Option1',value:'opt1',priority:10},
    {text:'Option2',value:'opt2',priority:8},
    {text:'Option3',value:'opt3',priority:4}
  ]}
  value='opt2'
  ...
/>  

Set option show

option.show (boolean)

<AIOButton
  ...
  type='select'
  options={[
    {text:'Option1',value:'opt1'},
    {text:'Option2',value:'opt2',show:false},
    {text:'Option3',value:'opt3'}
  ]}
  value='opt2'
  ...
/>  

optionShow props(function)

<AIOButton
  ...
  type='select'
  optionShow={()=>option.priority > 5}}
  options={[
    {text:'Option1',value:'opt1',priority:10},
    {text:'Option2',value:'opt2',priority:8},
    {text:'Option3',value:'opt3',priority:4}
  ]}
  value='opt2'
  ...
/>  

optionShow shorthand (string)

<AIOButton
  ...
  type='select'
  optionShow='option.priority > 5'
  options={[
    {text:'Option1',value:'opt1',priority:10},
    {text:'Option2',value:'opt2',priority:8},
    {text:'Option3',value:'opt3',priority:4}
  ]}
  value='opt2'
  ...
/>  

Set option checked

option.checked (boolean)

<AIOButton
  type='select'
  text='Setting'
  options={[
    {text:'Option1',key:'opt1',checked:opt1},
    {text:'Option2',key:'opt2',checked:opt2},
    {text:'Option3',key:'opt3',checked:opt3}
  ]}
  value='opt2'
  onChange={(value,option)=>this.setState({[option.key]:!option.checked})}
/>    

optionChecked props (function)

<AIOButton
  type='select'
  text='Setting'
  optionChecked={(option)=>this.state[option.key]}
  options={[
    {text:'Option1',key:'opt1'},
    {text:'Option2',key:'opt2'},
    {text:'Option3',key:'opt3'}
  ]}
  onChange={(value,option)=>this.setState({[option.key]:!this.state[option.key]})}
/>  

optionChecked shorthand (string)

<AIOButton
  type='select'
  text='Setting'
  optionChecked='option.value'
  options={[
    {text:'Option1',value:opt1,key:'opt1'},
    {text:'Option2',value:opt2,key:'opt2'},
    {text:'Option3',value:opt3,key:'opt3'}
  ]}
  onChange={(value,option)=>this.setState({[option.key]:!value})}
/>    

Set option before

option.before(boolean)

<AIOButton
  type='select'
  className='button'
  options={[
    {text:'Option1',value:'opt1',before:<Icon path={mdiAccount} size={0.8}/>},
    {text:'Option2',value:'opt2',before:<Icon path={mdiTag} size={0.8}/>},
    {text:'Option3',value:'opt3',before:<Icon path={mdiAttachment} size={0.8}/>}
  ]}
  value={opt}
  onChange={(value)=>this.setState({opt:value})}
/>  

optionBefore props (function)

<AIOButton
  type='select'
  className='button'
  optionBefore={(option)=>{
    if(option.type === 'account'){return <Icon path={mdiAccount} size={0.8}/>}
    if(option.type === 'tag'){return <Icon path={mdiTag} size={0.8}/>}
    if(option.type === 'attachment'){return <Icon path={mdiAttachment} size={0.8}/>}
  }}
  options={[
    {text:'Option1',value:'opt1',type:'account'},
    {text:'Option2',value:'opt2',type:'tag'},
    {text:'Option3',value:'opt3',type:'attachment'}
  ]}
  value={opt}
  onChange={(value)=>this.setState({opt:value})}
/>  

optionBefore shorthand (string)

<AIOButton
  type='select'
  className='button'
  optionBefore='option.value + " - "'
  options={[
    {text:'Option1',value:'opt1'},
    {text:'Option2',value:'opt2'},
    {text:'Option3',value:'opt3'}
  ]}
  value={opt}
  onChange={(value)=>this.setState({opt:value})}
/> 

Set option after

option.after (boolean)

<AIOButton
  type='select'
  className='button'
  options={[
    {text:'Option1',value:'opt1',after:<div className='after'>account</div>},
    {text:'Option2',value:'opt2',after:<div className='after'>tag</div>},
    {text:'Option3',value:'opt3',after:<div className='after'>attachment</div>}
  ]}
  value={opt}
  onChange={(value)=>this.setState({opt:value})}
/>  

optionAfter props(function)

<AIOButton
  type='select'
  open={true}
  className='button'
  optionAfter={(option)=>{ 
    return <div className='after'>{option.type}</div>
  }}
  options={[
    {text:'Option1',value:'opt1',type:'account'},
    {text:'Option2',value:'opt2',type:'tag'},
    {text:'Option3',value:'opt3',type:'attachment'}
  ]}
  value={opt}
  onChange={(value)=>this.setState({opt:value})}
/>    

optionAfter shorthand (string)

<AIOButton
  type='select'
  className='button'
  optionAfter='" - " + option.value'
  options={[
    {text:'Option1',value:'opt1'},
    {text:'Option2',value:'opt2'},
    {text:'Option3',value:'opt3'}
  ]}
  value={opt}
  onChange={(value)=>this.setState({opt:value})}
/>