Utilisation

Scroll a list in a test.

Ce type est utilisé par 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'));
});

Déclaration du type

ts
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>;
}

Membres 120

NomTypeRequisDescription
dataProp<readonly T[]>OuiThe items, or a signal of them.
renderItem(info: ListItem<T>) => KuitoNodeOui—
itemKey(item: T, index: number) => stringNonA unique key per item; defaults to item.key, then item.id, then the index.
sectionKey(item: T, index: number) => stringNonThe item's section: each run of items with the same section gets a header row.
renderSection(info: { section: string; item: T;}) => KuitoNodeNonRenders a section's header row, given its section and its first item.
stickySectionsbooleanNonSection headers stay at the top while their section scrolls under them; vertical lists only.
separatorSlotNon—
headerSlotNon—
emptySlotNonRendered instead of the rows when data is empty.
columnsnumberNonLays items out in rows of this many; gap spaces both directions.
invertedbooleanNonStarts at the end, with the first item at the bottom (or the right).
initialIndexnumberNonScrolls to this item when the list first shows it; no getItemLayout needed.
estimatedItemSizenumberNonThe length of a row not measured yet; the average measured row by default.
onViewableChange(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}) => voidNon—
viewabilityViewabilityNon—
refElementRef<ListHandle>Non—
scrollbarProp<boolean>NonShows the scrollbar while scrolling; true by default.
opacityAnimatable<number>Non—
backgroundColorAnimatable<string>Non—
borderRadiusAnimatable<number>Non—
borderColorAnimatable<string>Non—
widthAnimatable<SizeValue>Non—
heightAnimatable<SizeValue>Non—
translateXAnimatable<number>Non—
translateYAnimatable<number>Non—
scaleAnimatable<number>Non—
scaleXAnimatable<number>Non—
scaleYAnimatable<number>Non—
rotateAnimatable<number>NonDegrees.
shadowColorAnimatable<string>Non—
shadowRadiusAnimatable<number>Non—
shadowOffsetXAnimatable<number>Non—
shadowOffsetYAnimatable<number>Non—
hiddenProp<boolean>NonTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>Non—
positionProp<"relative" | "absolute">Non—
idstringNon—
classProp<ClassNames>NonClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNonStyles 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) => voidNon—
onPressCapture(event: PressEvent) => voidNon—
keystring | numberNon—
paddingTopProp<LengthPercentage>Non—
paddingRightProp<LengthPercentage>Non—
paddingBottomProp<LengthPercentage>Non—
paddingLeftProp<LengthPercentage>Non—
minWidthProp<SizeValue>Non—
maxWidthProp<SizeValue>Non—
minHeightProp<SizeValue>Non—
maxHeightProp<SizeValue>Non—
aspectRatioProp<number>NonWidth divided by height; sizes the missing side from the other.
topProp<LengthPercentageAuto>Non—
rightProp<LengthPercentageAuto>Non—
bottomProp<LengthPercentageAuto>Non—
leftProp<LengthPercentageAuto>Non—
marginProp<LengthPercentageAuto>Non—
marginTopProp<LengthPercentageAuto>Non—
marginRightProp<LengthPercentageAuto>Non—
marginBottomProp<LengthPercentageAuto>Non—
marginLeftProp<LengthPercentageAuto>Non—
flexGrowProp<number>Non—
flexShrinkProp<number>Non—
flexBasisProp<SizeValue | "content">Non—
flexProp<number>NonA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>Non—
directionProp<"ltr" | "rtl">NonThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">Non—
paddingInlineStartProp<LengthPercentage>NonPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NonPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NonMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NonMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Nonleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Nonright in ltr, left in rtl.
roleProp<Role>Non—
onAction(event: AccessibilityActionEvent) => voidNonThe screen reader action taken, by name.
accessibleProp<boolean>NonMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NonWhat a screen reader says for the view.
hintProp<string>NonWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NonScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NonActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NonARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>Non—
aria-selectedProp<boolean>Non—
aria-checkedProp<boolean | "mixed">Non—
aria-busyProp<boolean>Non—
aria-expandedProp<boolean>Non—
aria-valueminProp<number>Non—
aria-valuemaxProp<number>Non—
aria-valuenowProp<number>Non—
aria-valuetextProp<string>Non—
gesturesreadonly Composable[]NonThe view's gestures; several race unless composed with together or orElse.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NonHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NonAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNonWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NonWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NonHow the view moves to a new frame the layout gives it: layout={spring()}.
overflowProp<"visible" | "hidden" | "clip" | "scroll">Nonhidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>Non—
backgroundGradient{ angle: number; colors: string[];}Non—
colorProp<string>Non—
sharedIdProp<string>NonA 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).
alignItemsProp<SelfAlignment>Non—
justifyContentProp<ContentAlignment>Non—
gapProp<LengthPercentage>Non—
rowGapProp<LengthPercentage>Non—
columnGapProp<LengthPercentage>Non—
flexDirectionProp<"row" | "column" | "row-reverse" | "column-reverse">Non—
flexWrapProp<"nowrap" | "wrap" | "wrap-reverse" | "balance">Non—
flexLineCountProp<number>NonThe minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
alignContentProp<ContentAlignment>Non—
keyboardProp<{ dismiss?: "none" | "on-drag" | "interactive"; persistTaps?: "never" | "always" | "handled"; inset?: boolean; avoid?: "none" | "padding" | "position";}>Non—
horizontalProp<boolean>NonScrolls sideways; changing it remounts the view, as the native axis is fixed.
motionScrollMotionNonMoves with the view every frame on the UI thread: scrollMotion(), given to one view.
onScroll(event: ScrollEvent) => voidNon—
onReachEnd(event: KuitoEvent<"reachend">) => voidNonCalled once each time the content end comes within the threshold.
onRefresh(event: KuitoEvent<"refresh">) => voidNonEnables pull-to-refresh.
scrollIntervalProp<number>NonAt most one scroll event per this many milliseconds; 50 by default.
reachEndThresholdProp<number>NonDistance from the end, in visible lengths, that counts as the end; 0.5 by default.
refreshingBound<boolean>NonShows the pull-to-refresh spinner while true.
renderItem — signatures de méthode

Signatures

ts
(info: ListItem<T>): KuitoNode

Paramètres

NomTypeRequisDescription
infoListItem<T>Oui—

Retourne

KuitoNode

itemKey — signatures de méthode

Signatures

ts
(item: T, index: number): string

Paramètres

NomTypeRequisDescription
itemTOui—
indexnumberOui—

Retourne

string

sectionKey — signatures de méthode

Signatures

ts
(item: T, index: number): string

Paramètres

NomTypeRequisDescription
itemTOui—
indexnumberOui—

Retourne

string

renderSection — signatures de méthode

Signatures

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

Paramètres

NomTypeRequisDescription
info{ section: string; item: T;}Oui—

Retourne

KuitoNode

onViewableChange — signatures de méthode

Signatures

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

Paramètres

NomTypeRequisDescription
info{ viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}Oui—

Retourne

void

onPress — signatures de méthode

Signatures

ts
(event: PressEvent): void

Paramètres

NomTypeRequisDescription
eventPressEventOui—

Retourne

void

onPressCapture — signatures de méthode

Signatures

ts
(event: PressEvent): void

Paramètres

NomTypeRequisDescription
eventPressEventOui—

Retourne

void

onAction — signatures de méthode

Signatures

ts
(event: AccessibilityActionEvent): void

Paramètres

NomTypeRequisDescription
eventAccessibilityActionEventOui—

Retourne

void

backgroundGradient — champs imbriqués

backgroundGradient champs

NomTypeRequisDescription
anglenumberOui—
colorsstring[]Oui—
onScroll — signatures de méthode

Signatures

ts
(event: ScrollEvent): void

Paramètres

NomTypeRequisDescription
eventScrollEventOui—

Retourne

void

onReachEnd — signatures de méthode

Signatures

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

Paramètres

NomTypeRequisDescription
eventKuitoEvent<"reachend">Oui—

Retourne

void

onRefresh — signatures de méthode

Signatures

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

Paramètres

NomTypeRequisDescription
eventKuitoEvent<"refresh">Oui—

Retourne

void

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.