diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx index 6668850369c5f..065f8c35e0b48 100644 --- a/superset-frontend/src/components/ListView/CardCollection.tsx +++ b/superset-frontend/src/components/ListView/CardCollection.tsx @@ -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; +interface CardCollectionProps { + bulkSelectEnabled?: boolean; + loading: boolean; prepareRow: TableInstance['prepareRow']; + renderCard?: (row: any) => React.ReactNode; rows: TableInstance['rows']; - loading: boolean; } 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, + bulkSelectEnabled, + loading, prepareRow, + renderCard, rows, - loading, -}: Props) { +}: CardCollectionProps) { + function handleClick(event: React.FormEvent, onClick: any) { + if (bulkSelectEnabled) { + event.preventDefault(); + event.stopPropagation(); + onClick(); + } + } + return ( {rows.map(row => { if (!renderCard) return null; prepareRow(row); return ( -
{renderCard({ ...row.original, loading })}
+ handleClick(e, row.toggleRowSelected())} + role="none" + > + {renderCard({ ...row.original, loading })} + ); })}
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index 8a50c26136b41..edcaa614e2c0f 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -325,6 +325,7 @@ const ListView: FunctionComponent = ({ )} {viewingMode === 'card' && ( { return ( { {props.published ? 'published' : 'draft'}} - 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)}