Make entire list items clickable.

Author: rkistner

demos/nextjs-supabase-todolist/src/components/widgets/ListItemWidget.tsx

@@ -1,5 +1,15 @@
 import React from 'react';
-import { ListItem, IconButton, ListItemAvatar, Avatar, ListItemText, Box, Paper, styled } from '@mui/material';
+import {
+  ListItem,
+  IconButton,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+  Box,
+  Paper,
+  styled,
+  ListItemButton
+} from '@mui/material';
 
 import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import RightIcon from '@mui/icons-material/ArrowRightAlt';
@@ -8,6 +18,7 @@ import ListIcon from '@mui/icons-material/ListAltOutlined';
 export type ListItemWidgetProps = {
   title: string;
   description: string;
+  selected?: boolean;
   onDelete: () => void;
   onPress: () => void;
 };
@@ -16,6 +27,7 @@ export const ListItemWidget: React.FC<ListItemWidgetProps> = (props) => {
   return (
     <S.MainPaper elevation={1}>
       <ListItem
+        disablePadding
         secondaryAction={
           <Box>
             <IconButton
@@ -39,12 +51,19 @@ export const ListItemWidget: React.FC<ListItemWidgetProps> = (props) => {
           </Box>
         }
       >
-        <ListItemAvatar>
-          <Avatar>
-            <ListIcon />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText primary={props.title} secondary={props.description} />
+        <ListItemButton
+          onClick={(event) => {
+            props.onPress();
+          }}
+          selected={props.selected}
+        >
+          <ListItemAvatar>
+            <Avatar>
+              <ListIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={props.title} secondary={props.description} />
+        </ListItemButton>
       </ListItem>
     </S.MainPaper>
   );

demos/nextjs-supabase-todolist/src/components/widgets/TodoItemWidget.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListItem, IconButton, ListItemAvatar, ListItemText, Box, styled, Paper } from '@mui/material';
+import { ListItem, IconButton, ListItemAvatar, ListItemText, Box, styled, Paper, ListItemButton } from '@mui/material';
 
 import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
@@ -16,6 +16,7 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
   return (
     <S.MainPaper elevation={1}>
       <ListItem
+        disablePadding
         secondaryAction={
           <Box>
             <IconButton
@@ -30,18 +31,18 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
           </Box>
         }
       >
-        <ListItemAvatar>
-          <IconButton
-            edge="end"
-            aria-label="toggle"
-            onClick={() => {
-              props.toggleCompletion();
-            }}
-          >
-            {props.isComplete ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />}
-          </IconButton>
-        </ListItemAvatar>
-        <ListItemText primary={props.description} />
+        <ListItemButton
+          onClick={() => {
+            props.toggleCompletion();
+          }}
+        >
+          <ListItemAvatar>
+            <IconButton edge="end" aria-label="toggle">
+              {props.isComplete ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />}
+            </IconButton>
+          </ListItemAvatar>
+          <ListItemText primary={props.description} />
+        </ListItemButton>
       </ListItem>
     </S.MainPaper>
   );