LiteTodo/lite.todo/components/todo-list.tsx

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";
import * as Animatable from "react-native-animatable";

type Props = {
  data: Todo[];
  onToggle: (id: string) => void;
  onRemove?: (id: string) => void;
  className?: string;
};

export default function TodoList({
  data,
  onToggle,
  onRemove,
  className,
}: Props) {
  return (
    <FlatList
      className={className}
      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}
            >
              <Animatable.View
                animation={item.done ? "bounce" : undefined}
                duration={300}
                useNativeDriver
              >
                <CheckboxIndicator>
                  <CheckboxIcon as={CheckIcon} />
                </CheckboxIndicator>
              </Animatable.View>
              <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>
      }
    />
  );
}