mirror of https://github.com/buster-so/buster.git
containerized class should be white with no border at bottom
This commit is contained in:
parent
307e4bbaf6
commit
6b0c516500
|
@ -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(() => {
|
||||
|
|
|
@ -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,63 +17,60 @@ 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) => {
|
||||
const { styles, cx } = useStyles();
|
||||
const link = row.link;
|
||||
// const router = useRouter();
|
||||
>(
|
||||
(
|
||||
{ style, columnRowVariant, row, columns, onSelectChange, checked, onContextMenuClick },
|
||||
ref
|
||||
) => {
|
||||
const { styles, cx } = useStyles();
|
||||
const link = row.link;
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
onContextMenuClick?.(e, row.id);
|
||||
});
|
||||
const onChange = useMemoizedFn((checked: boolean) => {
|
||||
onSelectChange?.(checked, row.id);
|
||||
});
|
||||
|
||||
const onChange = useMemoizedFn((checked: boolean) => {
|
||||
onSelectChange?.(checked, row.id);
|
||||
});
|
||||
|
||||
return (
|
||||
<LinkWrapper href={link}>
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={style}
|
||||
onContextMenu={onContextMenu}
|
||||
className={cx(styles.row, 'group flex items-center', checked ? 'checked' : '', {
|
||||
clickable: !!(link || row.onClick)
|
||||
})}
|
||||
ref={ref}>
|
||||
{!!onSelectChange ? (
|
||||
<CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} />
|
||||
) : (
|
||||
<div className="pl-2.5"></div>
|
||||
)}
|
||||
{columns.map((column, columnIndex) => (
|
||||
<BusterListCellComponent
|
||||
key={column.dataIndex}
|
||||
data={get(row.data, column.dataIndex)}
|
||||
row={row}
|
||||
render={column.render}
|
||||
isFirstCell={columnIndex === 0}
|
||||
isLastCell={columnIndex === columns.length - 1}
|
||||
width={column.width}
|
||||
onSelectChange={onSelectChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</LinkWrapper>
|
||||
);
|
||||
}),
|
||||
return (
|
||||
<LinkWrapper href={link}>
|
||||
<div
|
||||
onClick={row.onClick}
|
||||
style={style}
|
||||
onContextMenu={onContextMenu}
|
||||
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} />
|
||||
) : (
|
||||
<div className="pl-2.5"></div>
|
||||
)}
|
||||
{columns.map((column, columnIndex) => (
|
||||
<BusterListCellComponent
|
||||
key={column.dataIndex}
|
||||
data={get(row.data, column.dataIndex)}
|
||||
row={row}
|
||||
render={column.render}
|
||||
isFirstCell={columnIndex === 0}
|
||||
isLastCell={columnIndex === columns.length - 1}
|
||||
width={column.width}
|
||||
onSelectChange={onSelectChange}
|
||||
/>
|
||||
))}
|
||||
</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};
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue