Function TodoItem

src/examples/todo.tsx:140–238

(props: { item: TodoItem; index: () => number })

}

function TodoItem(props: { item: TodoItem; index: () => number }) {
  const colorScheme = useColorScheme();
  let textField: HTMLTextFieldElement | null = null;
  const [editable, setEditable] = createSignal(false);

  return (
    <view
      style={{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: props.index() % 2 === 0
          ? colorScheme === "dark" ? "rgba(0,0,0,0.1)" : "#f7f7f7"
          : undefined,
        paddingHorizontal: 10,
        width: "100%",
      }}
    >
      <view
        style={{
          flexDirection: "row",
          alignItems: "center",
          gap: 10,
        }}
      >
        <checkbox
          checked={props.item.completed}
          onClick={(event) => {
            const checkbox = event.target as HTMLCheckboxElement;
            setTodos((prev) => {
              const next = [...prev];
              next[props.index()] = {
                ...next[props.index()],
                completed: !checkbox.checked,
              };
              return next;
            });
          }}
          style={{
            width: 15,
            height: 15,
          }}
        />
        <text-field
          ref={(el: HTMLTextFieldElement) => (textField = el)}
          style={{
            color: props.item.completed ? "gray" : undefined,
            fontSize: 14,
          }}
          value={props.item.title}
          editable={editable()}
          onSubmit={(event) => {
            setTodos((prev) => {
              const next = [...prev];
              next[props.index()] = {
                ...next[props.index()],
                title: event.value,
              };