Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

containerized class should be white with no border at bottom

This commit is contained in:
Nate Kelley 2025-01-14 11:09:56 -07:00
parent 307e4bbaf6
commit 6b0c516500
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
4 changed files with 78 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
View File

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

113
web/src/components/list/BusterList/BusterListRowComponent.tsx
View File

@ -1,7 +1,7 @@
import { useMemoizedFn } from 'ahooks'; import { useMemoizedFn } from 'ahooks';
import get from 'lodash/get'; import get from 'lodash/get';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { BusterListRow, BusterListColumn, BusterListRowItem } from './interfaces'; import { BusterListRow, BusterListColumn, BusterListRowItem, BusterListProps } from './interfaces';
import Link from 'next/link'; import Link from 'next/link';
import { CheckboxColumn } from './CheckboxColumn'; import { CheckboxColumn } from './CheckboxColumn';
import { createStyles } from 'antd-style'; import { createStyles } from 'antd-style';
@ -17,63 +17,60 @@ export const BusterListRowComponent = React.memo(
onSelectChange?: (v: boolean, id: string) => void; onSelectChange?: (v: boolean, id: string) => void;
onContextMenuClick?: (e: React.MouseEvent<HTMLDivElement>, id: string) => void; onContextMenuClick?: (e: React.MouseEvent<HTMLDivElement>, id: string) => void;
style?: React.CSSProperties; style?: React.CSSProperties;
columnRowVariant: BusterListProps['columnRowVariant'];
} }
>(({ style, row, columns, onSelectChange, checked, onContextMenuClick }, ref) => { >(
const { styles, cx } = useStyles(); (
const link = row.link; { style, columnRowVariant, row, columns, onSelectChange, checked, onContextMenuClick },
// const router = useRouter(); ref
) => {
const { styles, cx } = useStyles();
const link = row.link;
const onClick = useMemoizedFn(() => { const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
// if (link) { onContextMenuClick?.(e, row.id);
// const isLocalLink = link.startsWith('/'); });
// if (isLocalLink) {
// router.push(link);
// } else {
// window.open(link, '_blank');
// }
// }
row.onClick?.();
});
const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => { const onChange = useMemoizedFn((checked: boolean) => {
onContextMenuClick?.(e, row.id); onSelectChange?.(checked, row.id);
}); });
const onChange = useMemoizedFn((checked: boolean) => { return (
onSelectChange?.(checked, row.id); <LinkWrapper href={link}>
}); <div
onClick={row.onClick}
return ( style={style}
<LinkWrapper href={link}> onContextMenu={onContextMenu}
<div className={cx(
onClick={onClick} styles.row,
style={style} 'group flex items-center',
onContextMenu={onContextMenu} checked ? 'checked' : '',
className={cx(styles.row, 'group flex items-center', checked ? 'checked' : '', { columnRowVariant,
clickable: !!(link || row.onClick) { clickable: !!(link || row.onClick) }
})} )}
ref={ref}> ref={ref}>
{!!onSelectChange ? ( {!!onSelectChange ? (
<CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} /> <CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} />
) : ( ) : (
<div className="pl-2.5"></div> <div className="pl-2.5"></div>
)} )}
{columns.map((column, columnIndex) => ( {columns.map((column, columnIndex) => (
<BusterListCellComponent <BusterListCellComponent
key={column.dataIndex} key={column.dataIndex}
data={get(row.data, column.dataIndex)} data={get(row.data, column.dataIndex)}
row={row} row={row}
render={column.render} render={column.render}
isFirstCell={columnIndex === 0} isFirstCell={columnIndex === 0}
isLastCell={columnIndex === columns.length - 1} isLastCell={columnIndex === columns.length - 1}
width={column.width} width={column.width}
onSelectChange={onSelectChange} onSelectChange={onSelectChange}
/> />
))} ))}
</div> </div>
</LinkWrapper> </LinkWrapper>
); );
}), }
),
(prevProps, nextProps) => { (prevProps, nextProps) => {
return prevProps.checked === nextProps.checked && prevProps.row.id === nextProps.row.id; 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}; background-color: ${token.colorPrimaryBgHover};
} }
} }
&.containerized {
background-color: ${token.colorBgContainer};
&:last-child {
border-bottom: 0px;
}
}
`, `,
cell: css` cell: css`
color: ${token.colorText}; color: ${token.colorText};

7
web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
View File

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

2
web/src/components/list/BusterList/interfaces.ts
View File

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