mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
feat: card view bulk select (#10607)
This commit is contained in:
parent
ec7874ff98
commit
a3ac5061fe
@ -20,11 +20,12 @@ import React from 'react';
|
||||
import { TableInstance } from 'react-table';
|
||||
import styled from '@superset-ui/style';
|
||||
|
||||
interface Props {
|
||||
renderCard?: (row: any) => React.ReactNode;
|
||||
prepareRow: TableInstance['prepareRow'];
|
||||
rows: TableInstance['rows'];
|
||||
interface CardCollectionProps {
|
||||
bulkSelectEnabled?: boolean;
|
||||
loading: boolean;
|
||||
prepareRow: TableInstance['prepareRow'];
|
||||
renderCard?: (row: any) => React.ReactNode;
|
||||
rows: TableInstance['rows'];
|
||||
}
|
||||
|
||||
const CardContainer = styled.div`
|
||||
@ -36,19 +37,44 @@ const CardContainer = styled.div`
|
||||
${({ theme }) => theme.gridUnit * 4}px;
|
||||
`;
|
||||
|
||||
const CardWrapper = styled.div`
|
||||
border: 2px solid transparent;
|
||||
&.card-selected {
|
||||
border: 2px solid ${({ theme }) => theme.colors.primary.base};
|
||||
}
|
||||
`;
|
||||
|
||||
export default function CardCollection({
|
||||
renderCard,
|
||||
prepareRow,
|
||||
rows,
|
||||
bulkSelectEnabled,
|
||||
loading,
|
||||
}: Props) {
|
||||
prepareRow,
|
||||
renderCard,
|
||||
rows,
|
||||
}: CardCollectionProps) {
|
||||
function handleClick(event: React.FormEvent, onClick: any) {
|
||||
if (bulkSelectEnabled) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onClick();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<CardContainer>
|
||||
{rows.map(row => {
|
||||
if (!renderCard) return null;
|
||||
prepareRow(row);
|
||||
return (
|
||||
<div key={row.id}>{renderCard({ ...row.original, loading })}</div>
|
||||
<CardWrapper
|
||||
className={
|
||||
row.isSelected && bulkSelectEnabled ? 'card-selected' : ''
|
||||
}
|
||||
key={row.id}
|
||||
onClick={e => handleClick(e, row.toggleRowSelected())}
|
||||
role="none"
|
||||
>
|
||||
{renderCard({ ...row.original, loading })}
|
||||
</CardWrapper>
|
||||
);
|
||||
})}
|
||||
</CardContainer>
|
||||
|
@ -325,6 +325,7 @@ const ListView: FunctionComponent<ListViewProps> = ({
|
||||
)}
|
||||
{viewingMode === 'card' && (
|
||||
<CardCollection
|
||||
bulkSelectEnabled={bulkSelectEnabled}
|
||||
prepareRow={prepareRow}
|
||||
renderCard={renderCard}
|
||||
rows={rows}
|
||||
|
@ -134,7 +134,7 @@ const CoverFooterRight = styled.div`
|
||||
|
||||
interface CardProps {
|
||||
title: React.ReactNode;
|
||||
url: string;
|
||||
url: string | undefined;
|
||||
imgURL: string;
|
||||
imgFallbackURL: string;
|
||||
description: string;
|
||||
|
@ -525,7 +525,7 @@ class ChartList extends React.PureComponent<Props, State> {
|
||||
return (
|
||||
<ListViewCard
|
||||
title={props.slice_name}
|
||||
url={props.url}
|
||||
url={this.state.bulkSelectEnabled ? undefined : props.url}
|
||||
imgURL={props.thumbnail_url ?? ''}
|
||||
imgFallbackURL={'/static/assets/images/chart-card-fallback.png'}
|
||||
description={t('Last modified %s', props.changed_on_delta_humanized)}
|
||||
|
@ -530,7 +530,7 @@ class DashboardList extends React.PureComponent<Props, State> {
|
||||
<ListViewCard
|
||||
title={props.dashboard_title}
|
||||
titleRight={<Label>{props.published ? 'published' : 'draft'}</Label>}
|
||||
url={props.url}
|
||||
url={this.state.bulkSelectEnabled ? undefined : props.url}
|
||||
imgURL={props.thumbnail_url}
|
||||
imgFallbackURL="/static/assets/images/dashboard-card-fallback.png"
|
||||
description={t('Last modified %s', props.changed_on_delta_humanized)}
|
||||
|
Loading…
Reference in New Issue
Block a user