Move components outside of ContactRow

CruGlobal · May 14, 2024 · 44f7283 · 44f7283
1 parent e7bb12e
commit 44f7283
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/src/components/Contacts/ContactRow/ContactRow.tsx b/src/components/Contacts/ContactRow/ContactRow.tsx
@@ -11,6 +11,7 @@ import {
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import {
   ContactsContext,
   ContactsType,
@@ -22,6 +23,29 @@ import { preloadContactsRightPanel } from '../ContactsRightPanel/DynamicContacts
 import { StarContactIconButton } from '../StarContactIconButton/StarContactIconButton';
 import { ContactRowFragment } from './ContactRow.generated';
 
+const ListItemButton = styled(ButtonBase)(({ theme }) => ({
+  flex: '1 1 auto',
+  textAlign: 'left',
+  padding: theme.spacing(0, 0.5, 0, 2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(0, 0.5),
+  },
+  '&.top-margin': {
+    marginTop: 16,
+  },
+  '&.checked': {
+    backgroundColor: theme.palette.cruGrayLight.main,
+  },
+}));
+
+const StyledCheckbox = styled(Checkbox, {
+  shouldForwardProp: (prop) => prop !== 'value',
+})(() => ({
+  '&:hover': {
+    backgroundColor: 'rgba(0, 0, 0, 0.04)',
+  },
+}));
+
 interface Props {
   contact: ContactRowFragment;
   useTopMargin?: boolean;
@@ -36,27 +60,6 @@ export const ContactRow: React.FC<Props> = ({ contact, useTopMargin }) => {
     toggleSelectionById: onContactCheckToggle,
   } = React.useContext(ContactsContext) as ContactsType;
 
-  const ListItemButton = styled(ButtonBase)(({ theme }) => ({
-    flex: '1 1 auto',
-    textAlign: 'left',
-    marginTop: useTopMargin ? '16px' : '0',
-    padding: theme.spacing(0, 0.5, 0, 2),
-    [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing(0, 0.5),
-    },
-    ...(isChecked(contactId)
-      ? { backgroundColor: theme.palette.cruGrayLight.main }
-      : {}),
-  }));
-
-  const StyledCheckbox = styled(Checkbox, {
-    shouldForwardProp: (prop) => prop !== 'value',
-  })(() => ({
-    '&:hover': {
-      backgroundColor: 'rgba(0, 0, 0, 0.04)',
-    },
-  }));
-
   const onClick = () => {
     onContactSelected(contact.id);
   };
@@ -80,6 +83,10 @@ export const ContactRow: React.FC<Props> = ({ contact, useTopMargin }) => {
       focusRipple
       onClick={onClick}
       onMouseEnter={preloadContactsRightPanel}
+      className={clsx({
+        'top-margin': useTopMargin,
+        checked: isChecked(contactId),
+      })}
       data-testid="rowButton"
     >
       <Hidden xsDown>