Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

suggestion Wrapper component as props #252

Open
soroushm opened this issue Sep 3, 2021 · 0 comments
Open

suggestion Wrapper component as props #252

soroushm opened this issue Sep 3, 2021 · 0 comments

Comments

@soroushm
Copy link

soroushm commented Sep 3, 2021

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant