aio-button v6.0.0

aio-button

props

options prperties

• 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})}
/>