i-like-robots/react-tags

suggestion Wrapper component as props

soroushm opened this issue · 0 comments

we already use these react-tags and our new business request is to make an infinite scroll for the suggestion!

as I saw the code its only each item can be replaced by a suggestion component in the other hand I thinking about adding other props called suggestionWrapper to wrap the ul li tags, so we can make an infinite scroll with wrapper

function Suggestions (props) {
  const SuggestionComponent = props.suggestionComponent || DefaultSuggestionComponent

  const options = props.options.map((item, index) => {
    const key = `${props.id}-${index}`
    const classNames = []

    if (props.index === index) {
      classNames.push(props.classNames.suggestionActive)
    }

    if (item.disabled) {
      classNames.push(props.classNames.suggestionDisabled)
    }

    return (
      <li
        id={key}
        key={key}
        role='option'
        className={classNames.join(' ')}
        aria-disabled={Boolean(item.disabled)}
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => props.addTag(item)}
      >
        {item.prefix
          ? <span className={props.classNames.suggestionPrefix}>{item.prefix}{' '}</span>
          : null}
        {item.disableMarkIt
          ? item.name
          : <SuggestionComponent item={item} query={props.query} />}
      </li>
    )
  })

  const suggestionsComponent = (
    <ul role='listbox' id={props.id}>{options}</ul>
  ) 
  return (
    <div className={props.classNames.suggestions}>
      {props.suggestionWrapper ?  props.suggestionWrapper(suggestionsComponent) : suggestionsComponent }
    </div>
  )
}

so props.suggestionWrapper used like below

<ReactTags
        tags={this.state.tags}
        suggestions={this.state.suggestions}
        onDelete={this.onDelete.bind(this)}
        onAddition={this.onAddition.bind(this)} />
        suggestionWrapper={InfinitComp}
/>

suggestionWrapper is:

const suggestionWrapper = ({children}) => {
<InfinitComp onEndReach={() => {
        //fetch more and set it to the suggestion
}}>
        {children}
</InfinitComp>