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.
70 lines
2.2 KiB
70 lines
2.2 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";
|
|
import { CheckIcon, CloseIcon, Icon } from "@/components/ui/icon";
|
|
|
|
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 }) => {
|
|
return (
|
|
<HStack className="items-center justify-between py-2 hover:bg-secondary-200">
|
|
<Checkbox
|
|
isChecked={item.done}
|
|
onChange={(_isChecked) => onToggle(item.id)}
|
|
value={item.title}
|
|
>
|
|
<CheckboxIndicator>
|
|
<CheckboxIcon as={CheckIcon} />
|
|
</CheckboxIndicator>
|
|
<CheckboxLabel className="data-[checked=true]:line-through">
|
|
{item.title}
|
|
</CheckboxLabel>
|
|
</Checkbox>
|
|
{onRemove ? (
|
|
<Button
|
|
className="pl-2"
|
|
variant={GS.variant.link}
|
|
action={GS.action.secondary}
|
|
onPress={() => onRemove(item.id)}
|
|
>
|
|
<HStack className="flex justify-center items-center">
|
|
<Icon
|
|
as={CloseIcon}
|
|
size={GS.size.xs}
|
|
className="text-secondary-950"
|
|
/>
|
|
<ButtonText size={GS.size.xs}>삭제</ButtonText>
|
|
</HStack>
|
|
</Button>
|
|
) : null}
|
|
</HStack>
|
|
);
|
|
}}
|
|
ListEmptyComponent={
|
|
<Text className="text-neutral-400 mt-6 text-center">
|
|
할 일이 없습니다.
|
|
</Text>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|