ListProps
Props of List: its items, how a row renders, and a Scroll's other props.
A list rests where its rows do: paging and snap offsets are a Scroll's.
Utilisation
Scroll a list in a test.
Ce type est utilisé par List
// 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
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
| Nom | Type | Requis | Description |
|---|---|---|---|
data | Prop<readonly T[]> | Oui | The items, or a signal of them. |
renderItem | (info: ListItem<T>) => KuitoNode | Oui | — |
itemKey | (item: T, index: number) => string | Non | A unique key per item; defaults to item.key, then item.id, then the index. |
sectionKey | (item: T, index: number) => string | Non | The item's section: each run of items with the same section gets a header row. |
renderSection | (info: { section: string; item: T;}) => KuitoNode | Non | Renders a section's header row, given its section and its first item. |
stickySections | boolean | Non | Section headers stay at the top while their section scrolls under them; vertical lists only. |
separator | Slot | Non | — |
header | Slot | Non | — |
footer | Slot | Non | — |
empty | Slot | Non | Rendered instead of the rows when data is empty. |
columns | number | Non | Lays items out in rows of this many; gap spaces both directions. |
inverted | boolean | Non | Starts at the end, with the first item at the bottom (or the right). |
initialIndex | number | Non | Scrolls to this item when the list first shows it; no getItemLayout needed. |
estimatedItemSize | number | Non | The length of a row not measured yet; the average measured row by default. |
onViewableChange | (info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}) => void | Non | — |
viewability | Viewability | Non | — |
ref | ElementRef<ListHandle> | Non | — |
scrollbar | Prop<boolean> | Non | Shows the scrollbar while scrolling; true by default. |
opacity | Animatable<number> | Non | — |
backgroundColor | Animatable<string> | Non | — |
borderRadius | Animatable<number> | Non | — |
borderColor | Animatable<string> | Non | — |
width | Animatable<SizeValue> | Non | — |
height | Animatable<SizeValue> | Non | — |
translateX | Animatable<number> | Non | — |
translateY | Animatable<number> | Non | — |
scale | Animatable<number> | Non | — |
scaleX | Animatable<number> | Non | — |
scaleY | Animatable<number> | Non | — |
rotate | Animatable<number> | Non | Degrees. |
shadowColor | Animatable<string> | Non | — |
shadowRadius | Animatable<number> | Non | — |
shadowOffsetX | Animatable<number> | Non | — |
shadowOffsetY | Animatable<number> | Non | — |
padding | Prop<LengthPercentage> | Non | — |
position | Prop<"relative" | "absolute"> | Non | — |
id | string | Non | — |
class | Prop<ClassNames> | Non | Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads. |
style | StyleDeclarations | Non | 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 | Non | — |
onPressCapture | (event: PressEvent) => void | Non | — |
key | string | number | Non | — |
paddingTop | Prop<LengthPercentage> | Non | — |
paddingRight | Prop<LengthPercentage> | Non | — |
paddingBottom | Prop<LengthPercentage> | Non | — |
paddingLeft | Prop<LengthPercentage> | Non | — |
minWidth | Prop<SizeValue> | Non | — |
maxWidth | Prop<SizeValue> | Non | — |
minHeight | Prop<SizeValue> | Non | — |
maxHeight | Prop<SizeValue> | Non | — |
aspectRatio | Prop<number> | Non | Width divided by height; sizes the missing side from the other. |
top | Prop<LengthPercentageAuto> | Non | — |
right | Prop<LengthPercentageAuto> | Non | — |
bottom | Prop<LengthPercentageAuto> | Non | — |
left | Prop<LengthPercentageAuto> | Non | — |
margin | Prop<LengthPercentageAuto> | Non | — |
marginTop | Prop<LengthPercentageAuto> | Non | — |
marginRight | Prop<LengthPercentageAuto> | Non | — |
marginBottom | Prop<LengthPercentageAuto> | Non | — |
marginLeft | Prop<LengthPercentageAuto> | Non | — |
flexGrow | Prop<number> | Non | — |
flexShrink | Prop<number> | Non | — |
flexBasis | Prop<SizeValue | "content"> | Non | — |
flex | Prop<number> | Non | A grow factor from a zero basis, as CSS flex: n; 0 is inflexible. |
alignSelf | Prop<"auto" | SelfAlignment> | Non | — |
direction | Prop<"ltr" | "rtl"> | Non | The way lines run; unset, the parent's, and the app's first language's at the root. |
boxSizing | Prop<"border-box" | "content-box"> | Non | — |
paddingInlineStart | Prop<LengthPercentage> | Non | Padding on the side lines start from: the left in ltr, the right in rtl. |
paddingInlineEnd | Prop<LengthPercentage> | Non | Padding on the side lines end at: the right in ltr, the left in rtl. |
marginInlineStart | Prop<LengthPercentageAuto> | Non | Margin on the side lines start from: the left in ltr, the right in rtl. |
marginInlineEnd | Prop<LengthPercentageAuto> | Non | Margin on the side lines end at: the right in ltr, the left in rtl. |
insetInlineStart | Prop<LengthPercentageAuto> | Non | left in ltr, right in rtl. |
insetInlineEnd | Prop<LengthPercentageAuto> | Non | right in ltr, left in rtl. |
role | Prop<Role> | Non | — |
onAction | (event: AccessibilityActionEvent) => void | Non | The screen reader action taken, by name. |
accessible | Prop<boolean> | Non | Makes the view one screen reader element, read as its label or its children's text. |
label | Prop<string> | Non | What a screen reader says for the view. |
hint | Prop<string> | Non | What happens when the view is activated, read after the label. |
actions | Prop<readonly AccessibilityAction[]> | Non | Actions a screen reader offers; onAction receives the one taken. |
live | Prop<"off" | "polite" | "assertive"> | Non | ARIA's aria-live: announces changes to the view's content, on iOS too. |
aria-disabled | Prop<boolean> | Non | — |
aria-selected | Prop<boolean> | Non | — |
aria-checked | Prop<boolean | "mixed"> | Non | — |
aria-busy | Prop<boolean> | Non | — |
aria-expanded | Prop<boolean> | Non | — |
aria-valuemin | Prop<number> | Non | — |
aria-valuemax | Prop<number> | Non | — |
aria-valuenow | Prop<number> | Non | — |
aria-valuetext | Prop<string> | Non | — |
gestures | readonly Composable[] | Non | 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>> | Non | 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>> | Non | Animatable props whose every change moves as transition says; the first value applies at once. |
enter | Effect | Non | Where the view enters from: fade.and(slide.up(12)). |
exit | Prop<Effect> | Non | 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> | Non | How the view moves to a new frame the layout gives it: layout={spring()}. |
overflow | Prop<"visible" | "hidden" | "clip" | "scroll"> | Non | hidden and scroll clip; as in CSS, either lets a flex item shrink below its content. |
borderWidth | Prop<number> | Non | — |
backgroundGradient | { angle: number; colors: string[];} | Non | — |
color | Prop<string> | Non | — |
sharedId | Prop<string> | Non | 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> | Non | — |
justifyContent | Prop<ContentAlignment> | Non | — |
gap | Prop<LengthPercentage> | Non | — |
rowGap | Prop<LengthPercentage> | Non | — |
columnGap | Prop<LengthPercentage> | Non | — |
flexDirection | Prop<"row" | "column" | "row-reverse" | "column-reverse"> | Non | — |
flexWrap | Prop<"nowrap" | "wrap" | "wrap-reverse" | "balance"> | Non | — |
flexLineCount | Prop<number> | Non | The minimum number of lines a wrapping container breaks into (CSS Flexbox 2). |
alignContent | Prop<ContentAlignment> | Non | — |
keyboard | Prop<{ dismiss?: "none" | "on-drag" | "interactive"; persistTaps?: "never" | "always" | "handled"; inset?: boolean; avoid?: "none" | "padding" | "position";}> | Non | — |
horizontal | Prop<boolean> | Non | Scrolls sideways; changing it remounts the view, as the native axis is fixed. |
motion | ScrollMotion | Non | Moves with the view every frame on the UI thread: scrollMotion(), given to one view. |
onScroll | (event: ScrollEvent) => void | Non | — |
onReachEnd | (event: KuitoEvent<"reachend">) => void | Non | Called once each time the content end comes within the threshold. |
onRefresh | (event: KuitoEvent<"refresh">) => void | Non | Enables pull-to-refresh. |
scrollInterval | Prop<number> | Non | At most one scroll event per this many milliseconds; 50 by default. |
reachEndThreshold | Prop<number> | Non | Distance from the end, in visible lengths, that counts as the end; 0.5 by default. |
refreshing | Bound<boolean> | Non | Shows the pull-to-refresh spinner while true. |
renderItem — signatures de méthode
Signatures
itemKey — signatures de méthode
Signatures
(item: T, index: number): stringParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
item | T | Oui | — |
index | number | Oui | — |
Retourne
string
sectionKey — signatures de méthode
Signatures
(item: T, index: number): stringParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
item | T | Oui | — |
index | number | Oui | — |
Retourne
string
renderSection — signatures de méthode
Signatures
(info: { section: string; item: T; }): KuitoNodeParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
info | { section: string; item: T;} | Oui | — |
Retourne
onViewableChange — signatures de méthode
Signatures
(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[]; }): voidParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
info | { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];} | Oui | — |
Retourne
void
onPress — signatures de méthode
Signatures
onPressCapture — signatures de méthode
Signatures
onAction — signatures de méthode
Signatures
(event: AccessibilityActionEvent): voidParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
event | AccessibilityActionEvent | Oui | — |
Retourne
void
backgroundGradient — champs imbriqués
backgroundGradient champs
| Nom | Type | Requis | Description |
|---|---|---|---|
angle | number | Oui | — |
colors | string[] | Oui | — |
onScroll — signatures de méthode
Signatures
onReachEnd — signatures de méthode
Signatures
(event: KuitoEvent<"reachend">): voidParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
event | KuitoEvent<"reachend"> | Oui | — |
Retourne
void
onRefresh — signatures de méthode
Signatures
(event: KuitoEvent<"refresh">): voidParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
event | KuitoEvent<"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.