77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
import Checkbox from "@mui/material/Checkbox";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import ListItem from "@mui/material/ListItem";
|
|
import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
|
|
import ListItemText from "@mui/material/ListItemText";
|
|
import TextField from "@mui/material/TextField";
|
|
import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
|
|
|
|
import { TaskItemT } from "../types";
|
|
import { useAppDispatch, useInputValue } from "../hooks";
|
|
import { updateText, markDone, remove } from "../store/slices/todo";
|
|
import { enterHandler } from "../utils";
|
|
|
|
export type TodoItemProps = { task: TaskItemT; index: number };
|
|
|
|
export const TodoItem: React.FC<TodoItemProps> = ({ task, index }) => {
|
|
const { done, text } = task;
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const [editing, setEditing] = useState(false);
|
|
const { value, change, submit } = useInputValue(text, (submitValue) =>
|
|
dispatch(updateText({ index, text: submitValue }))
|
|
);
|
|
|
|
const save = () => {
|
|
setEditing(false);
|
|
submit();
|
|
};
|
|
|
|
return (
|
|
<ListItem>
|
|
<Checkbox
|
|
checked={done}
|
|
onClick={() => dispatch(markDone({ index, value: !done }))}
|
|
/>
|
|
{editing ? (
|
|
<TextField
|
|
fullWidth
|
|
variant="standard"
|
|
value={value}
|
|
autoFocus={true}
|
|
onFocus={(e) => {
|
|
e.currentTarget.setSelectionRange(value.length, value.length);
|
|
}}
|
|
onChange={(e) => change(e.currentTarget.value)}
|
|
onBlur={save}
|
|
inputProps={{
|
|
onKeyDown: enterHandler(save),
|
|
}}
|
|
multiline
|
|
/>
|
|
) : (
|
|
<ListItemText
|
|
sx={{
|
|
textDecoration: done ? "line-through" : undefined,
|
|
whiteSpace: "pre-wrap",
|
|
overflow: "hidden",
|
|
}}
|
|
onClick={() => setEditing(true)}
|
|
primary={text}
|
|
/>
|
|
)}
|
|
<ListItemSecondaryAction>
|
|
<IconButton
|
|
aria-label="Delete Todo"
|
|
onClick={() => dispatch(remove(index))}
|
|
>
|
|
<DeleteOutlined />
|
|
</IconButton>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
);
|
|
};
|