@hbsis.uikit/react/src/components/select-box/auto-complete/index.js

Biblioteca ReactJS

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Select from 'react-select'
import Highlighter from 'react-highlight-words'
import { Arrow as ArrowIcon } from 'icons'
import InputContainer from 'utils/input-container'
import AutoCompleteStyled from '../select-box.styled'

const arrowRenderer = () => (
  <div>
    <ArrowIcon />
  </div>
)

class AutoComplete extends Component {
  renderOption = option => {
    const { labelKey } = this.props

    return (
      <div className='option-item'>
        <Highlighter
          searchWords={[this._inputValue]}
          textToHighlight={option[labelKey]}
          highlightClassName='text-hightlight'
        />
      </div>
    )
  }

  loadOptions = (params) => {
    const { loadData, options } = this.props

    return loadData ? loadData(params) : Promise.resolve({ options: options || [] })
  }

  render () {
    const {
      placeholder,
      name,
      onChange,
      value,
      labelKey,
      valueKey,
      multi,
      loadData,
      className,
      clearable,
      cache,
      ...rest
    } = this.props

    return (
      <InputContainer {...rest} >
        <AutoCompleteStyled className={className} >
          <Select.Async
            ref={(widget) => this.widget = widget}
            onInputChange={inputValue => { this._inputValue = inputValue }}
            noResultsText='Nenhum resultado encontrado'
            loadingPlaceholder='Buscando...'
            placeholder={placeholder}
            onChange={onChange}
            value={value}
            autosize={false}
            autoload
            openOnClick
            arrowRenderer={arrowRenderer}
            optionRenderer={this.renderOption}
            valueKey={valueKey}
            labelKey={labelKey}
            multi={multi}
            loadOptions={this.loadOptions}
            clearable={clearable}
            cache={cache}
          />
        </AutoCompleteStyled>
      </InputContainer>
    )
  }
}

AutoComplete.propTypes = {
  className: PropTypes.string,
  width: PropTypes.string,
  placeholder: PropTypes.string,
  label: PropTypes.string,
  name: PropTypes.string,
  type: PropTypes.oneOf(['primary', 'success', 'error', 'alert']),
  message: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.array
  ]),
  cache: PropTypes.bool,
  labelKey: PropTypes.string,
  valueKey: PropTypes.string,
  multi: PropTypes.bool,
  clearable: PropTypes.bool,
  loadData: PropTypes.func
}

export { AutoComplete }