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;