You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.7 KiB
59 lines
1.7 KiB
import { Todo } from "@/store/useTodos";
|
|
import { FlatList } from "react-native";
|
|
import { VStack } from "./ui/vstack";
|
|
import { Text } from "./ui/text";
|
|
import { HStack } from "./ui/hstack";
|
|
import {
|
|
Checkbox,
|
|
CheckboxIcon,
|
|
CheckboxIndicator,
|
|
CheckboxLabel,
|
|
} from "./ui/checkbox";
|
|
import { Button, ButtonText } from "./ui/button";
|
|
import { GS } from "./ui/gluestack-ui-provider/gluestack-ui-token";
|
|
|
|
type Props = {
|
|
data: Todo[];
|
|
onToggle: (id: string) => void;
|
|
onRemove?: (id: string) => void;
|
|
};
|
|
|
|
export default function TodoList({ data, onToggle, onRemove }: Props) {
|
|
return (
|
|
<FlatList
|
|
data={data}
|
|
keyExtractor={(it) => it.id}
|
|
contentContainerStyle={{ paddingBottom: 80 }}
|
|
renderItem={({ item }) => (
|
|
<HStack className="items-center py-2">
|
|
<Checkbox
|
|
isChecked={item.done}
|
|
onChange={(_isChecked) => onToggle(item.id)}
|
|
value={item.title}
|
|
>
|
|
<CheckboxIndicator>
|
|
<CheckboxIcon />
|
|
</CheckboxIndicator>
|
|
<CheckboxLabel className="data-[checked=true]:line-through">
|
|
{item.title}
|
|
</CheckboxLabel>
|
|
</Checkbox>
|
|
{onRemove ? (
|
|
<Button
|
|
variant={GS.variant.link}
|
|
action={GS.action.negative}
|
|
onPress={() => onRemove(item.id)}
|
|
>
|
|
<ButtonText>삭제</ButtonText>
|
|
</Button>
|
|
) : null}
|
|
</HStack>
|
|
)}
|
|
ListEmptyComponent={
|
|
<Text className="text-neutral-400 mt-6 text-center">
|
|
할 일이 없습니다.
|
|
</Text>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|