35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { React, ReactNative } from "@vendetta/metro/common";
|
||
import { TableRow, TableRowGroup } from "./table";
|
||
import NoteBox from "./NoteBox";
|
||
|
||
const { Text } = ReactNative;
|
||
|
||
export interface ListItem {
|
||
key: string;
|
||
label: string;
|
||
subLabel?: string;
|
||
onPress?: () => void;
|
||
}
|
||
|
||
// A titled section listing tap-able rows, with a friendly note shown in place of an empty list.
|
||
// Always pairs onPress with a visible trailing indicator - rows without one have been unreliable
|
||
// about registering taps.
|
||
export default function ListSection({ title, items, emptyText }: { title: string; items: ListItem[]; emptyText: string }) {
|
||
return (
|
||
<TableRowGroup title={title}>
|
||
{items.length === 0 ? (
|
||
<NoteBox>{emptyText}</NoteBox>
|
||
) : (
|
||
items.map((item) => (
|
||
<TableRow
|
||
key={item.key}
|
||
label={item.label}
|
||
subLabel={item.subLabel}
|
||
onPress={item.onPress}
|
||
trailing={<Text style={{ color: "#F23F42", fontSize: 20, fontWeight: "700" }}>×</Text>}
|
||
/>
|
||
))
|
||
)}
|
||
</TableRowGroup>
|
||
);
|
||
}
|