BlueprintJS: SUGGEST => Как ограничить номер строки в поповере? - PullRequest
Новая
       37

BlueprintJS: SUGGEST => Как ограничить номер строки в поповере?

0 голосов
/ 26 сентября 2018

Как ограничить отображаемый номер строки (добавить полосу прокрутки) в popOver с помощью компонента «Предложить» BluePrintJS? 

<Suggest
    items={this.state.Plats}
    activeItem={this.state.activePlat}
    onActiveItemChange={this.handleActiveItemChange}
    itemRenderer={renderPlat}
    itemPredicate={filterFilm}
    onItemSelect={this.handleClick}
    noResults={<MenuItem disabled={true} text="Pas de résultat." />}
    inputValueRenderer={this.renderValue}
    popoverProps={{minimal: true, usePortal: true}}
/>

const filterFilm: ItemPredicate<IPlat> = (query, plat) => {
    const text = `${plat.Nom}`;
     return text.toLocaleLowerCase().indexOf(query.toLowerCase()) >= 0;
};

const renderPlat: ItemRenderer<IPlat> = (Plat, { handleClick, modifiers}) => 
{
  if (!modifiers.matchesPredicate){
    return null;
  }
  const text = `${Plat.Key}. ${Plat.Nom}`;
  return <MenuItem 
    key={Plat.Key} 
    active={modifiers.active}
    disabled={modifiers.disabled}
    label={Plat.Categorie}
    onClick={handleClick} 
    text={text} />;
};

Вот мой результат

Я хотел бы ограничить список 10 пунктами, как в примере на сайте, но все, что я пробовал, не сработало.

Спасибо за любой совет или помощь.

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Отображаемое изображение не является нормальным стилем для компонента Suggest.Вы включаете Suggest файл CSS?Убедитесь, что это добавлено, потому что это ограничит высоту popover и сделает прокручиваемый контент, а не огромный список по всей высоте страницы.

0 голосов
/ 01 ноября 2018

Вы должны использовать itemListRenderer опору.Из документов :

ItemListRenderer Пользовательский рендерер для содержимого раскрывающегося списка.

Реализация по умолчанию вызывает itemRenderer для каждого элемента, который передает предикат, и переносит ихвсе в элементе меню.Если запрос пуст, тогда возвращается initialContent, а если нет элементов, соответствующих предикату, то возвращается noResults.Унаследовано от IListItemsProps.itemListRenderer

Вы можете настроить опору с помощью собственной функции рендерера.В вашем случае вы, вероятно, можете поднять код рендерера по умолчанию и добавить строку, в которой вы ограничиваете количество элементов до X.

...