Allow for overriding the Item display, specifically so we can disable…

… the hover effect
CruGlobal · Aug 12, 2024 · f007de0 · f007de0
1 parent ed6f84e
commit f007de0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/InfiniteList/InfiniteList.tsx b/src/components/InfiniteList/InfiniteList.tsx
@@ -23,7 +23,7 @@ const ListContainer: React.ComponentType<ListProps> = React.forwardRef(
   ),
 );
 
-const ItemWithBorders = styled(ListItem, {
+export const ItemWithBorders = styled(ListItem, {
   shouldForwardProp: (prop) => prop !== 'disableHover',
 })<{ disableHover?: boolean }>(({ disableHover }) => ({
   padding: `${padding}px`,
@@ -71,6 +71,7 @@ const GroupLabel = styled(Typography)(({ theme }) => ({
 export interface InfiniteListProps<T, C> {
   loading: boolean;
   EmptyPlaceholder?: ReactElement | null;
+  ItemOverride?: React.ComponentType<ItemProps> | null;
   itemContent: ItemContent<T, C>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   context?: any;
@@ -81,6 +82,7 @@ export const InfiniteList = <T, C>({
   loading,
   data = [],
   EmptyPlaceholder = null,
+  ItemOverride = null,
   context,
   groupBy,
   itemContent,
@@ -98,7 +100,7 @@ export const InfiniteList = <T, C>({
       Footer: loading ? Loading : undefined,
       EmptyPlaceholder: loading ? undefined : () => EmptyPlaceholder,
       List: ListContainer,
-      Item,
+      Item: ItemOverride ?? Item,
       ScrollSeekPlaceholder: SkeletonItem,
       ...props.components,
     },

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
@@ -13,8 +13,12 @@ import {
 import { styled } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import { Trans, useTranslation } from 'react-i18next';
+import { ItemProps } from 'react-virtuoso';
 import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
-import { InfiniteList } from 'src/components/InfiniteList/InfiniteList';
+import {
+  InfiniteList,
+  ItemWithBorders,
+} from 'src/components/InfiniteList/InfiniteList';
 import { navBarHeight } from 'src/components/Layouts/Primary/Primary';
 import {
   PersonInvalidEmailFragment,
@@ -93,6 +97,10 @@ const DefaultSourceWrapper = styled(Box)(({ theme }) => ({
   },
 }));
 
+const ItemOverride: React.ComponentType<ItemProps> = (props) => (
+  <ItemWithBorders disableGutters disableHover={true} {...props} />
+);
+
 export interface EmailAddressData {
   id: string;
   primary: boolean;
@@ -400,6 +408,7 @@ export const FixEmailAddresses: React.FC<FixEmailAddressesProps> = ({
                   width: '100%',
                   scrollbarWidth: 'none',
                 }}
+                ItemOverride={ItemOverride}
               ></InfiniteList>
               <Grid item xs={12}>
                 <Box width="100%" display="flex" justifyContent="center">