From c246350c47213c0db044433c193df7e6c9c028fd Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Fri, 14 Aug 2020 15:36:14 -0700 Subject: [PATCH 1/3] card view bulk select --- .../components/ListView/CardCollection.tsx | 29 ++++++++++++++----- .../src/components/ListView/ListView.tsx | 1 + .../src/components/ListViewCard/index.tsx | 4 ++- .../src/views/CRUD/chart/ChartList.tsx | 1 + .../views/CRUD/dashboard/DashboardList.tsx | 1 + 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx index 6668850369c5..3bd6f6c6e0dd 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` @@ -34,21 +35,35 @@ const CardContainer = styled.div` justify-content: center; padding: ${({ theme }) => theme.gridUnit * 2}px ${({ theme }) => theme.gridUnit * 4}px; + + .card-selected { + border: 2px solid ${({ theme }) => theme.colors.primary.base}; + } `; export default function CardCollection({ - renderCard, + bulkSelectEnabled, + loading, prepareRow, + renderCard, rows, - loading, -}: Props) { +}: CardCollectionProps) { return ( {rows.map(row => { if (!renderCard) return null; prepareRow(row); return ( -
{renderCard({ ...row.original, loading })}
+
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 8a50c26136b4..edcaa614e2c0 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 ( { return ( {props.published ? 'published' : 'draft'}} url={props.url} From 0360e4d2b6a8a8278599ecdf4f566a5f49819acd Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 17 Aug 2020 10:41:46 -0700 Subject: [PATCH 2/3] update style for card wrapper --- .../src/components/ListView/CardCollection.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx index 3bd6f6c6e0dd..a6ccccb3d511 100644 --- a/superset-frontend/src/components/ListView/CardCollection.tsx +++ b/superset-frontend/src/components/ListView/CardCollection.tsx @@ -35,8 +35,11 @@ const CardContainer = styled.div` justify-content: center; padding: ${({ theme }) => theme.gridUnit * 2}px ${({ theme }) => theme.gridUnit * 4}px; +`; - .card-selected { +const CardWrapper = styled.div` + border: 2px solid transparent; + &.card-selected { border: 2px solid ${({ theme }) => theme.colors.primary.base}; } `; @@ -54,7 +57,7 @@ export default function CardCollection({ if (!renderCard) return null; prepareRow(row); return ( -
{renderCard({ ...row.original, loading })} -
+ ); })} From b6105e9d2c2f7645278f50b50a8aeb7e2d08713a Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Tue, 18 Aug 2020 09:46:40 -0700 Subject: [PATCH 3/3] update card wrapper onclick --- .../src/components/ListView/CardCollection.tsx | 10 +++++++++- .../src/components/ListViewCard/index.tsx | 6 ++---- superset-frontend/src/views/CRUD/chart/ChartList.tsx | 3 +-- .../src/views/CRUD/dashboard/DashboardList.tsx | 3 +-- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx index a6ccccb3d511..065f8c35e0b4 100644 --- a/superset-frontend/src/components/ListView/CardCollection.tsx +++ b/superset-frontend/src/components/ListView/CardCollection.tsx @@ -51,6 +51,14 @@ export default function CardCollection({ renderCard, rows, }: CardCollectionProps) { + function handleClick(event: React.FormEvent, onClick: any) { + if (bulkSelectEnabled) { + event.preventDefault(); + event.stopPropagation(); + onClick(); + } + } + return ( {rows.map(row => { @@ -62,7 +70,7 @@ export default function CardCollection({ row.isSelected && bulkSelectEnabled ? 'card-selected' : '' } key={row.id} - onClick={() => row.toggleRowSelected()} + onClick={e => handleClick(e, row.toggleRowSelected())} role="none" > {renderCard({ ...row.original, loading })} diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx index 6dfcf0030f3c..f6c5af81bb98 100644 --- a/superset-frontend/src/components/ListViewCard/index.tsx +++ b/superset-frontend/src/components/ListViewCard/index.tsx @@ -134,7 +134,7 @@ const CoverFooterRight = styled.div` interface CardProps { title: React.ReactNode; - url: string; + url: string | undefined; imgURL: string; imgFallbackURL: string; description: string; @@ -142,7 +142,6 @@ interface CardProps { coverLeft?: React.ReactNode; coverRight?: React.ReactNode; actions: React.ReactNode; - bulkSelectEnabled?: boolean; } function ListViewCard({ @@ -155,13 +154,12 @@ function ListViewCard({ coverLeft, coverRight, actions, - bulkSelectEnabled, }: CardProps) { return ( - + { return ( { 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)}