31 lines
910 B
TypeScript
31 lines
910 B
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { View, Text } from "react-native";
|
|
import { useKeyboard } from "./useKeyboard";
|
|
|
|
export type ListProps<T> = {
|
|
items: T[],
|
|
renderItem: (props: { item: T, isSelected: boolean }) => ReactNode;
|
|
};
|
|
export function List<T>({ items, renderItem }: ListProps<T>) {
|
|
const [idx, setIdx] = useState(0);
|
|
|
|
useKeyboard((key) => {
|
|
if (key.name == 'j') {
|
|
setIdx((prevIdx) => prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1);
|
|
} else if (key.name == 'k') {
|
|
setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
|
|
} else if (key.name == 'g' && key.shift) {
|
|
setIdx(items.length - 1);
|
|
}
|
|
}, [items]);
|
|
|
|
return (
|
|
<View>
|
|
{items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
|
|
{renderItem({ item, isSelected: index == idx })}
|
|
</View>)}
|
|
</View>
|
|
);
|
|
}
|
|
|