List

<List> vous permet de restituer efficacement une grande liste d'éléments.

Le <List> peut rendre les éléments de deux manières : sous la forme d'un éventail d'éléments <ListItem> ou sous la forme d'un rappel de rendu (fonction en tant qu'enfants). Il est recommandé d'utiliser le rappel de rendu car il virtualisera tous les éléments, ce qui le rend très rapide lorsqu'un grand nombre d'éléments est fourni.

Si la largeur et la hauteur ne sont pas spécifiées via les accessoires style ou className , elles rempliront la hauteur et la largeur du conteneur, à moins que width="fit-content" ne soit fourni comme accessoire. Ensuite, il dimensionnera le conteneur <List> pour qu'il soit aussi large que le composant <ListItem> mesuré le plus large.

Usage

import { List } from 'nr1'

Exemples

Basique

function render() {
  return (
    <List rowHeight={20}>
      <ListItem>Item 1</ListItem>
      <ListItem>Item 2</ListItem>
      <ListItem>Item 3</ListItem>
      <ListItem>Item 4</ListItem>
    </List>
  );
}

Rendre rappel

function render() {
  const items = new Array(10000).fill().map((_, i) => {
    return { key: `foo-${i}`, name: `Item ${i}` };
  });


  const style = { width: 200, height: 300 };


  return (
    <List style={style} rowHeight={20} items={items}>
      {({ item }) => <ListItem key={item.key}>{item.name}</ListItem>}
    </List>
  );
}

Chargement paresseux

function render() {
  // This example assumes you have a way to know/load this information.
  const remoteTotalNumberOfItems = 9000;


  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
    { id: 4, text: 'Item 4' },
  ];


  function loadMoreItems({ startIndex, stopIndex }) {
    return fetch(`path/to/api?start=${startIndex}&stop=${stopIndex}`).then(
      () => {
        // Store items in list...
      },
    );
  }


  const style = { width: 200, height: 300 };


  return (
    <div style={style}>
      <List
        items={items}
        rowCount={remoteTotalNumberOfItems}
        onLoadMore={loadMoreItems}
      >
        {({ item }) => <ListItem key={item.id}>{item.text}</ListItem>}
      </List>
    </div>
  );
}

Dimensionnement automatique en fonction de la largeur du contenu

class AutoSizingList extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      items: this._generateItems(0),
    };
    this._maxItems = 1000;
    this._onLoadMore = this._onLoadMore.bind(this);
  }


  _onLoadMore(cursor) {
    return (
      Promise.resolve()
        // Fetch more items to load into <List>
        .then(() => this._generateItems(this.state.items.length))
        .then((moreItems) =>
          // Add retrieved items to the stored list
          this.setState(({ items }) => ({ items: items.concat(moreItems) })),
        )
    );
  }


  _generateString(num, extra = 0) {
    return `Entity ${num.toString(10)}: 1${'00'.repeat(
      Math.floor(Math.random() * 10) + 1 + extra,
    )} bytes`;
  }


  _generateItems(start) {
    return new Array(200).fill().map((_, i) => ({
      key: `foo-${start + i}`,
      name: this._generateString(start + i, start / 100),
    }));
  }


  render() {
    const style = { 'height': 300, 'background-color': 'white' };
    const parentStyle = { width: 260 };


    return (
      <div style={parentStyle}>
        <List
          rowCount={this._maxItems}
          onLoadMore={this._onLoadMore}
          style={{ ...style }}
          rowHeight={20}
          items={this.state.items}
          width="fit-content"
        >
          {({ item }) => <ListItem key={item.key}>{item.name}</ListItem>}
        </List>
      </div>
    );
  }
}

Intégration avec les composants de requête

function render() {
  const style = { width: 200, height: 300 };


  const list = (
    <div style={style}>
      <EntitiesByDomainTypeQuery entityDomain="APM" entityType="APPLICATION">
        {({ fetchMore, loading, data }) => {
          const { results, count } = data.actor.entitySearch;


          return (
            <List
              rowHeight={40}
              items={results.entities}
              onLoadMore={fetchMore}
              rowCount={count}
            >
              {({ item }) => <ListItem key={item.id}>{item.text}</ListItem>}
            </List>
          );
        }}
      </EntitiesByDomainTypeQuery>
    </div>
  );
}

Accessoires

children

OBLIGATOIRE

Nœud|fonction

Il peut s'agir soit d'un éventail d'éléments <ListItem> , soit d'un rappel de rendu (Fonction comme enfants). La recommandation est d'utiliser le rappel de rendu car il virtualisera tous les éléments, ce qui le rend très rapide lorsqu'un grand nombre d'éléments est fourni. Lors de l'utilisation du rappel de rendu, les éléments doivent être fournis via la propriété items .

className

chaîne

Nom de classe pour le style personnalisé.

fullHeight

booléen

Étend la stack pour occuper toute la hauteur disponible.

fullWidth

booléen

Étend la stack pour occuper toute la largeur disponible.

items

n'importe lequel[]

Les éléments à utiliser lors du rendu. Ils sont requis lors du rendu d'éléments avec un rappel de rendu. Chaque élément peut avoir n'importe quelle structure et n'importe quel type possible, et celui correspondant sera fourni lors du rendu de chaque liste d'éléments.

function render() {
  const style = { width: 200, height: 300 };

  const items = [
    { foo: 'a', bar: 'x' },
    { foo: 'b', bar: 'y' },
  ];

  return (
    <div style={style}>
      <List items={items}>
        {({ item, index }) => (
          <ListItem key={index}>{`${item.foo} - ${item.bar}`}</ListItem>
        )}
      </List>
    </div>
  );
}

onLoadMore

fonction

Rappel déclenché lorsque davantage d'éléments doivent être chargés. Cela se produit lorsque vous chargez les éléments de manière paresseuse et que les éléments sur le point d'être rendus ne peuvent pas être trouvés dans l'éventail items Ce rappel doit être utilisé pour récupérer/charger les éléments manquants à partir du backend ou d'autres sources. La promesse renvoyée doit être résolue une fois le chargement des données de l'élément terminé. Il sera utilisé pour déterminer quand actualiser la liste avec les données nouvellement chargées. Ce rappel peut être appelé plusieurs fois en réaction à un seul événement de défilement.

function (cursor: Cursor Items to load.
)

rowCount

nombre

Nombre de lignes. Par défaut, il est égal à la longueur de l'éventail passé dans la propriété items. Vous devez spécifier rowCount lorsque vous connaissez le nombre total d'éléments mais que vous souhaitez les charger paresseusement pendant le défilement.

rowHeight

OBLIGATOIRE

nombre

Hauteur de la ligne de la liste. Obligatoire lors du rendu des éléments avec le rappel de rendu (Fonction en tant qu'enfants). Il s'agit d'une hauteur provisoire jusqu'à ce que le contenu de la cellule soit mesuré en le rendant temporairement d'une manière qui n'est pas visible pour l'utilisateur.

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.

<Array of<One ofList.SPACING_TYPE.EXTRA_LARGE, List.SPACING_TYPE.LARGE, List.SPACING_TYPE.MEDIUM, List.SPACING_TYPE.NONE, List.SPACING_TYPE.OMIT, List.SPACING_TYPE.SMALL,
>
>

style

objet

Style en ligne pour un style personnalisé.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

width

chaîne

Représente la largeur de la liste. Il s'agit toujours d'une chaîne et elle peut être de l'un des types suivants :

'fit-content': Active le dimensionnement automatique du conteneur <List> . Destiné à être utilisé avec des <List>virtualisés pour garantir que le conteneur s'adapte à la largeur du <ListItem> le plus large. Redimensionne à mesure que davantage d'éléments sont chargés par le composant <List> . N'affecte pas la hauteur du composant <List> , qui continuera à s'adapter à la hauteur du conteneur dans lequel se trouve le composant <List> .
'auto': La valeur par défaut pour <List>. Cela invite le composant <List> à se dimensionner en fonction de son style par défaut, lui permettant de s'étendre pour remplir la largeur et la hauteur de son conteneur. Le contenu est ensuite dimensionné pour s'adapter à la largeur résultante du composant <List> .

Définitions de types

`RenderCallbackArguments`

{item: any, Item to render.
index: number, Index of the item in the items array.
items: any[], Array of items which we're iterating on.
}

`Cursor`

{startIndex: number, First index of the range of items to load.
stopIndex: number, Last index of the range of items to load.
}

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Rendre rappel

Chargement paresseux

Dimensionnement automatique en fonction de la largeur du contenu

Intégration avec les composants de requête

Accessoires

OBLIGATOIRE

Nœud|fonction

chaîne

booléen

booléen

n'importe lequel[]

fonction

nombre

OBLIGATOIRE

nombre

énumération[]

objet

chaîne

chaîne

Définitions de types

RenderCallbackArguments

Cursor

Usage

`RenderCallbackArguments`

`Cursor`