samuca-libs
Version:
### Custom React Components
178 lines (157 loc) • 8.79 kB
Markdown
# Samuca Lib's
### Custom React Components
React library with frontend development support components.
## MultiSelectAria
The Select control for React.
## Props
| Field | Type | Required | Default | Description |
| ------------------ | ------------ | -------- | -------------- | ------------------------------------------------------------------------------------ |
| labelKey | string | no | label | Field name for the label. |
| valueKey | string | no | value | Field name for the value. |
| options | array | yes | | Array of options, should contains objects with labelKey and valueKey fields. |
| selected | object/array | yes | | Array or Object selected, should contains objects with labelKey and valueKey fields. |
| onSelect | func | yes | | Fuction to change list of selecteds. |
| onInputChange | func | false | | Return the string typed. |
| isLoadingText | string | no | It's Loading | Text displayed when options is loading. |
| noResultsText | string | no | It's empty | Text displayed when there are no options. |
| searchPromptText | string | no | Type to search | Text for guidance. |
| placeholder | string | no | | Placeholder for input. |
| isLoading | bool | no | false | Indcate if options are loading. |
| classMain | string | no | | Class for overwrite design. |
| classContainer | string | no | | Class for overwrite design. |
| classBox | string | no | | Class for overwrite design. |
| classChip | string | no | | Class for overwrite design. |
| classInput | string | no | | Class for overwrite design. |
| classClearButton | string | no | | Class for overwrite design. |
| classOptions | string | no | | Class for overwrite design. |
| classOptionsItem | string | no | | Class for overwrite design. |
| listName | string | no | list | ID for list of options. |
| id | string | no | undefined | ID for component |
| minimumInput | number | no | 3 | Minimum characters to search start. |
| multi | bool | no | false | Allows multiple choices. |
| statick | bool | no | false | If true don't reload options. |
| showOptionSelected | bool | no | false | Show the items selecteds in list options. |
### Example
```
import React from 'react';
import MultiSelectAria from './lib/components/multi-select-aria/multi-select-aria';
class App extends React.Component {
constructor(props) {
super(props);
this.state= {
options: [],
selecteds: [{label: 'item c', value: 'item 2'}],
initialValue: {label: 'Initial 1', value: 1},
selectedsForInitialValueExample: [],
selected: null,
isLoading: false
}
}
onFilter = (value) => {
const options = [{label: 'item a', value: 'item 1'},
{label: 'item c', value: 'item 2'},
{label: 'item d', value: 'item 3'},
{label: 'item e', value: 'item 4'},
{label: 'item f', value: 'item 5'},
{label: 'item g', value: 'item 6'},
{label: 'item h', value: 'item 7'}
]
if (value) {
this.setState({...this.state, isLoading: true});
let optionsFiltered = options.filter((item) => item.label && item.label.toLowerCase().includes(value.toLowerCase()));
setTimeout(() => {
this.setState({...this.state, options: optionsFiltered, isLoading: false});
}, 2000);
}
}
onSingleSelect = (item) => {
this.setState({...this.state, selected: item});
}
onSelect = (items) => {
this.setState({...this.state, selecteds: items});
}
render(){
return (
<div className="App">
<div style={{display: 'flex', justifyContent: 'center'}}>
<div style={{width: '800px'}}>
<h1>Samuca Lib's</h1>
<div style={{width: '50%'}}>
<h2>Single selected</h2>
<MultiSelectAria
isLoading={this.state.isLoading}
options={this.state.options}
onInputChange={(e) => this.onFilter(e)}
onSelect={(item) => this.onSingleSelect(item)}
labelKey={'label'}
valueKey={'value'}
multi={false}
selecteds={this.state.selecteds}
/>
{
this.state.selected &&
<div style={{marginTop: '2rem'}}>
<strong>Label: </strong>{this.state.selected.label}
<strong style={{marginLeft: '1rem'}}>Value: </strong>{this.state.selected.value}
</div>
}
</div>
<div style={{width: '50%', marginTop: '2rem'}}>
<h2>Multi selecteds</h2>
<MultiSelectAria
isLoading={this.state.isLoading}
options={this.state.options}
onInputChange={(e) => this.onFilter(e)}
onSelect={(items) => this.onSelect(items)}
labelKey={'label'}
valueKey={'value'}
multi={true}
selecteds={this.state.selecteds}
/>
<div style={{marginTop: '2rem'}}>
{
this.state.selecteds.map((item, i)=> (
<div key={i} >
<strong>Label: </strong>{item.label}
<strong style={{marginLeft: '1rem'}}>Value: </strong>{item.value}
</div>
))
}
</div>
</div>
<div style={{width: '50%', marginTop: '2rem'}}>
<h2>Initial value</h2>
<MultiSelectAria
isLoading={this.state.isLoading}
options={[
{label: 'Initial 1', value: 1},
{label: 'Initial 2', value: 2},
{label: 'Initial 3', value: 3}
]}
onSelect={(selectedsForInitialValueExample) =>
this.setState({...this.state, selectedsForInitialValueExample})}
labelKey={'label'}
valueKey={'value'}
initialValue={this.state.initialValue}
static={true}
multi={false}
selecteds={this.state.selecteds}
/>
<div style={{marginTop: '2rem'}}>
{
<div>
<strong>Label: </strong>{this.state.selectedsForInitialValueExample.label}
<strong style={{marginLeft: '1rem'}}>Value: </strong>{this.state.selectedsForInitialValueExample.value}
</div>
}
</div>
</div>
</div>
</div>
</div>
)
}
}
export default App;
```
