ListProps — Kuito Documentação

Utilização

Scroll a list in a test.

Este tipo é usado por List

tsx

// Scroll a list in a test.
import { List, Text } from 'kuito';
import { assert, render, screen, scroll, test } from 'kuito/tests';

const rows = Array.from({ length: 200 }, (_, index) => `Row ${index}`);

const Long = () => <List data={rows} renderItem={({ item }) => <Text height={44}>{item}</Text>} />;

test('rows far down bind once the list scrolls to them', async () => {
  await render(<Long />);

  assert.equal(screen.queryByText('Row 150'), null);

  await scroll(screen.getByText('Row 0'), { y: 150 * 44 });

  assert.ok(screen.getByText('Row 150'));
});

Declaração do tipo

export interface ListProps<T> extends Omit<
  ScrollProps,
  'children' | 'ref' | 'paging' | 'snapOffsets' | 'onScrollEnd'
> {
  /** The items, or a signal of them. */
  data: Prop<readonly T[]>;
  renderItem: (info: ListItem<T>) => KuitoNode;
  /** A unique key per item; defaults to `item.key`, then `item.id`, then the index. */
  itemKey?: (item: T, index: number) => string;
  /** The item's section: each run of items with the same section gets a header row. */
  sectionKey?: (item: T, index: number) => string;
  /** Renders a section's header row, given its section and its first item. */
  renderSection?: (info: { section: string; item: T }) => KuitoNode;
  /** Section headers stay at the top while their section scrolls under them; vertical lists only. */
  stickySections?: boolean;
  separator?: Slot;
  header?: Slot;
  footer?: Slot;
  /** Rendered instead of the rows when `data` is empty. */
  empty?: Slot;
  /** Lays items out in rows of this many; `gap` spaces both directions. */
  columns?: number;
  /** Starts at the end, with the first item at the bottom (or the right). */
  inverted?: boolean;
  /** Scrolls to this item when the list first shows it; no `getItemLayout` needed. */
  initialIndex?: number;
  /** The length of a row not measured yet; the average measured row by default. */
  estimatedItemSize?: number;
  onViewableChange?: (info: {
    viewableItems: ViewableItem<T>[];
    changed: ViewableItem<T>[];
  }) => void;
  viewability?: Viewability;
  ref?: ElementRef<ListHandle>;
}

Membros 120

Nome	Tipo	Obrigatório	Descrição
`data`	`Prop<readonly T[]>`	Sim	The items, or a signal of them.
`renderItem`	`(info: ListItem<T>) => KuitoNode`	Sim	—
`itemKey`	`(item: T, index: number) => string`	Não	A unique key per item; defaults to `item.key`, then `item.id`, then the index.
`sectionKey`	`(item: T, index: number) => string`	Não	The item's section: each run of items with the same section gets a header row.
`renderSection`	`(info: { section: string; item: T;}) => KuitoNode`	Não	Renders a section's header row, given its section and its first item.
`stickySections`	`boolean`	Não	Section headers stay at the top while their section scrolls under them; vertical lists only.
`separator`	`Slot`	Não	—
`header`	`Slot`	Não	—
`footer`	`Slot`	Não	—
`empty`	`Slot`	Não	Rendered instead of the rows when `data` is empty.
`columns`	`number`	Não	Lays items out in rows of this many; `gap` spaces both directions.
`inverted`	`boolean`	Não	Starts at the end, with the first item at the bottom (or the right).
`initialIndex`	`number`	Não	Scrolls to this item when the list first shows it; no `getItemLayout` needed.
`estimatedItemSize`	`number`	Não	The length of a row not measured yet; the average measured row by default.
`onViewableChange`	`(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}) => void`	Não	—
`viewability`	`Viewability`	Não	—
`ref`	`ElementRef<ListHandle>`	Não	—
`scrollbar`	`Prop<boolean>`	Não	Shows the scrollbar while scrolling; true by default.
`opacity`	`Animatable<number>`	Não	—
`backgroundColor`	`Animatable<string>`	Não	—
`borderRadius`	`Animatable<number>`	Não	—
`borderColor`	`Animatable<string>`	Não	—
`width`	`Animatable<SizeValue>`	Não	—
`height`	`Animatable<SizeValue>`	Não	—
`translateX`	`Animatable<number>`	Não	—
`translateY`	`Animatable<number>`	Não	—
`scale`	`Animatable<number>`	Não	—
`scaleX`	`Animatable<number>`	Não	—
`scaleY`	`Animatable<number>`	Não	—
`rotate`	`Animatable<number>`	Não	Degrees.
`shadowColor`	`Animatable<string>`	Não	—
`shadowRadius`	`Animatable<number>`	Não	—
`shadowOffsetX`	`Animatable<number>`	Não	—
`shadowOffsetY`	`Animatable<number>`	Não	—
`hidden`	`Prop<boolean>`	Não	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Não	—
`position`	`Prop<"relative" \| "absolute">`	Não	—
`id`	`string`	Não	—
`class`	`Prop<ClassNames>`	Não	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Não	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`onPress`	`(event: PressEvent) => void`	Não	—
`onPressCapture`	`(event: PressEvent) => void`	Não	—
`key`	`string \| number`	Não	—
`paddingTop`	`Prop<LengthPercentage>`	Não	—
`paddingRight`	`Prop<LengthPercentage>`	Não	—
`paddingBottom`	`Prop<LengthPercentage>`	Não	—
`paddingLeft`	`Prop<LengthPercentage>`	Não	—
`minWidth`	`Prop<SizeValue>`	Não	—
`maxWidth`	`Prop<SizeValue>`	Não	—
`minHeight`	`Prop<SizeValue>`	Não	—
`maxHeight`	`Prop<SizeValue>`	Não	—
`aspectRatio`	`Prop<number>`	Não	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Não	—
`right`	`Prop<LengthPercentageAuto>`	Não	—
`bottom`	`Prop<LengthPercentageAuto>`	Não	—
`left`	`Prop<LengthPercentageAuto>`	Não	—
`margin`	`Prop<LengthPercentageAuto>`	Não	—
`marginTop`	`Prop<LengthPercentageAuto>`	Não	—
`marginRight`	`Prop<LengthPercentageAuto>`	Não	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Não	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Não	—
`flexGrow`	`Prop<number>`	Não	—
`flexShrink`	`Prop<number>`	Não	—
`flexBasis`	`Prop<SizeValue \| "content">`	Não	—
`flex`	`Prop<number>`	Não	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Não	—
`direction`	`Prop<"ltr" \| "rtl">`	Não	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Não	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Não	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Não	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Não	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Não	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Não	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Não	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Não	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Não	What a screen reader says for the view.
`hint`	`Prop<string>`	Não	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Não	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Não	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Não	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Não	—
`aria-selected`	`Prop<boolean>`	Não	—
`aria-checked`	`Prop<boolean \| "mixed">`	Não	—
`aria-busy`	`Prop<boolean>`	Não	—
`aria-expanded`	`Prop<boolean>`	Não	—
`aria-valuemin`	`Prop<number>`	Não	—
`aria-valuemax`	`Prop<number>`	Não	—
`aria-valuenow`	`Prop<number>`	Não	—
`aria-valuetext`	`Prop<string>`	Não	—
`gestures`	`readonly Composable[]`	Não	The view's gestures; several race unless composed with together or orElse.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	Não	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	Não	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Não	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Não	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	Não	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Não	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Não	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Não	—
`color`	`Prop<string>`	Não	—
`sharedId`	`Prop<string>`	Não	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`alignItems`	`Prop<SelfAlignment>`	Não	—
`justifyContent`	`Prop<ContentAlignment>`	Não	—
`gap`	`Prop<LengthPercentage>`	Não	—
`rowGap`	`Prop<LengthPercentage>`	Não	—
`columnGap`	`Prop<LengthPercentage>`	Não	—
`flexDirection`	`Prop<"row" \| "column" \| "row-reverse" \| "column-reverse">`	Não	—
`flexWrap`	`Prop<"nowrap" \| "wrap" \| "wrap-reverse" \| "balance">`	Não	—
`flexLineCount`	`Prop<number>`	Não	The minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
`alignContent`	`Prop<ContentAlignment>`	Não	—
`keyboard`	`Prop<{ dismiss?: "none" \| "on-drag" \| "interactive"; persistTaps?: "never" \| "always" \| "handled"; inset?: boolean; avoid?: "none" \| "padding" \| "position";}>`	Não	—
`horizontal`	`Prop<boolean>`	Não	Scrolls sideways; changing it remounts the view, as the native axis is fixed.
`motion`	`ScrollMotion`	Não	Moves with the view every frame on the UI thread: `scrollMotion()`, given to one view.
`onScroll`	`(event: ScrollEvent) => void`	Não	—
`onReachEnd`	`(event: KuitoEvent<"reachend">) => void`	Não	Called once each time the content end comes within the threshold.
`onRefresh`	`(event: KuitoEvent<"refresh">) => void`	Não	Enables pull-to-refresh.
`scrollInterval`	`Prop<number>`	Não	At most one scroll event per this many milliseconds; 50 by default.
`reachEndThreshold`	`Prop<number>`	Não	Distance from the end, in visible lengths, that counts as the end; 0.5 by default.
`refreshing`	`Bound<boolean>`	Não	Shows the pull-to-refresh spinner while true.

renderItem — assinaturas de método

Assinaturas

(info: ListItem<T>): KuitoNode

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`info`	`ListItem<T>`	Sim	—

Devolve

KuitoNode

itemKey — assinaturas de método

Assinaturas

(item: T, index: number): string

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`item`	`T`	Sim	—
`index`	`number`	Sim	—

Devolve

string

sectionKey — assinaturas de método

Assinaturas

(item: T, index: number): string

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`item`	`T`	Sim	—
`index`	`number`	Sim	—

Devolve

string

renderSection — assinaturas de método

Assinaturas

(info: { section: string; item: T; }): KuitoNode

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`info`	`{ section: string; item: T;}`	Sim	—

Devolve

KuitoNode

onViewableChange — assinaturas de método

Assinaturas

(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[]; }): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`info`	`{ viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}`	Sim	—

Devolve

void

onPress — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onPressCapture — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onAction — assinaturas de método

Assinaturas

(event: AccessibilityActionEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`AccessibilityActionEvent`	Sim	—

Devolve

void

backgroundGradient — campos aninhados

backgroundGradient campos

Nome	Tipo	Obrigatório	Descrição
`angle`	`number`	Sim	—
`colors`	`string[]`	Sim	—

onScroll — assinaturas de método

Assinaturas

(event: ScrollEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`ScrollEvent`	Sim	—

Devolve

void

onReachEnd — assinaturas de método

Assinaturas

(event: KuitoEvent<"reachend">): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`KuitoEvent<"reachend">`	Sim	—

Devolve

void

onRefresh — assinaturas de método

Assinaturas

(event: KuitoEvent<"refresh">): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`KuitoEvent<"refresh">`	Sim	—

Devolve

void

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.