containerized class should be white with no border at bottom

web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMemoizedFn, useUpdateEffect } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import { BusterListProps } from '../BusterList';
 import { getAllIdsInSection } from '../BusterList/helpers';
 import { useEffect, useMemo, useRef, useCallback } from 'react';
@@ -19,8 +19,8 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
   onSelectChange,
   emptyState,
   showHeader = true,
-  columnHeaderVariant,
   contextMenu,
+  columnRowVariant = 'containerized',
   showSelectAll = true,
   onScrollEnd,
   loadingNewContent,
@@ -68,9 +68,18 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
       selectedRowKeys,
       onSelectChange: onSelectChange ? onSelectChangePreflight : undefined,
       onSelectSectionChange: onSelectChange ? onSelectSectionChange : undefined,
-      onContextMenuClick: undefined
+      onContextMenuClick: undefined,
+      columnRowVariant
     };
-  }, [columns, rows, onSelectChange, onSelectSectionChange, contextMenu, selectedRowKeys]);
+  }, [
+    columns,
+    rows,
+    onSelectChange,
+    columnRowVariant,
+    onSelectSectionChange,
+    contextMenu,
+    selectedRowKeys
+  ]);
 
   // Add scroll handler
   const handleScroll = useCallback(() => {

web/src/components/list/BusterList/BusterListRowComponent.tsx

@@ -1,7 +1,7 @@
 import { useMemoizedFn } from 'ahooks';
 import get from 'lodash/get';
 import React, { useMemo } from 'react';
-import { BusterListRow, BusterListColumn, BusterListRowItem } from './interfaces';
+import { BusterListRow, BusterListColumn, BusterListRowItem, BusterListProps } from './interfaces';
 import Link from 'next/link';
 import { CheckboxColumn } from './CheckboxColumn';
 import { createStyles } from 'antd-style';
@@ -17,23 +17,15 @@ export const BusterListRowComponent = React.memo(
       onSelectChange?: (v: boolean, id: string) => void;
       onContextMenuClick?: (e: React.MouseEvent<HTMLDivElement>, id: string) => void;
       style?: React.CSSProperties;
+      columnRowVariant: BusterListProps['columnRowVariant'];
     }
-  >(({ style, row, columns, onSelectChange, checked, onContextMenuClick }, ref) => {
+  >(
+    (
+      { style, columnRowVariant, row, columns, onSelectChange, checked, onContextMenuClick },
+      ref
+    ) => {
       const { styles, cx } = useStyles();
       const link = row.link;
-    // const router = useRouter();
-
-    const onClick = useMemoizedFn(() => {
-      // if (link) {
-      //   const isLocalLink = link.startsWith('/');
-      //   if (isLocalLink) {
-      //     router.push(link);
-      //   } else {
-      //     window.open(link, '_blank');
-      //   }
-      // }
-      row.onClick?.();
-    });
 
       const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
         onContextMenuClick?.(e, row.id);
@@ -46,12 +38,16 @@ export const BusterListRowComponent = React.memo(
       return (
         <LinkWrapper href={link}>
           <div
-          onClick={onClick}
+            onClick={row.onClick}
             style={style}
             onContextMenu={onContextMenu}
-          className={cx(styles.row, 'group flex items-center', checked ? 'checked' : '', {
-            clickable: !!(link || row.onClick)
-          })}
+            className={cx(
+              styles.row,
+              'group flex items-center',
+              checked ? 'checked' : '',
+              columnRowVariant,
+              { clickable: !!(link || row.onClick) }
+            )}
             ref={ref}>
             {!!onSelectChange ? (
               <CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} />
@@ -73,7 +69,8 @@ export const BusterListRowComponent = React.memo(
           </div>
         </LinkWrapper>
       );
-  }),
+    }
+  ),
   (prevProps, nextProps) => {
     return prevProps.checked === nextProps.checked && prevProps.row.id === nextProps.row.id;
   }
@@ -151,6 +148,14 @@ export const useStyles = createStyles(({ css, token }) => ({
         background-color: ${token.colorPrimaryBgHover};
       }
     }
+
+    &.containerized {
+      background-color: ${token.colorBgContainer};
+
+      &:last-child {
+        border-bottom: 0px;
+      }
+    }
   `,
   cell: css`
     color: ${token.colorText};

web/src/components/list/BusterList/BusterListRowComponentSelector.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BusterListRow, BusterListColumn } from './interfaces';
+import { BusterListRow, BusterListColumn, BusterListProps } from './interfaces';
 import { BusterListSectionComponent } from './BusterListSectionComponent';
 import { BusterListRowComponent } from './BusterListRowComponent';
 
@@ -15,6 +15,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
     selectedRowKeys?: string[];
     rows: BusterListRow[];
     style?: React.CSSProperties;
+    columnRowVariant: BusterListProps['columnRowVariant'];
   }
 >(
   (
@@ -26,7 +27,8 @@ export const BusterListRowComponentSelector = React.forwardRef<
       onSelectChange,
       onSelectSectionChange,
       selectedRowKeys,
-      onContextMenuClick
+      onContextMenuClick,
+      columnRowVariant
     },
     ref
   ) => {
@@ -55,6 +57,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
         checked={!!selectedRowKeys?.includes(row.id)}
         ref={ref}
         onContextMenuClick={onContextMenuClick}
+        columnRowVariant={columnRowVariant}
       />
     );
   }

web/src/components/list/BusterList/interfaces.ts

@@ -8,7 +8,7 @@ import type {
 import React from 'react';
 export interface BusterListProps {
   columns: BusterListColumn[];
-  columnHeaderVariant?: 'default' | 'gray';
+  columnRowVariant?: 'default' | 'containerized';
   rows: BusterListRow[];
   onSelectChange?: (selectedRowKeys: string[]) => void;
   emptyState?: undefined | React.ReactNode;