From 39a4d1c93fd3f9bee19db3566e92ce4a03e67544 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 2 Dec 2024 13:14:14 +0100 Subject: [PATCH] DataViews: Better handling of missing onClickItem prop (#67402) Co-authored-by: youknowriad Co-authored-by: jsnajdr --- .../src/components/dataviews-context/index.ts | 5 ++--- .../src/components/dataviews/index.tsx | 5 ++--- .../src/dataviews-layouts/grid/index.tsx | 14 +++++++------- .../src/dataviews-layouts/table/index.tsx | 16 ++++++++-------- .../utils/get-clickable-item-props.ts | 19 ++++++++++++------- packages/dataviews/src/types.ts | 2 +- 6 files changed, 32 insertions(+), 29 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts index 19f6b4178b7b5..4bef3ecdbcbb4 100644 --- a/packages/dataviews/src/components/dataviews-context/index.ts +++ b/packages/dataviews/src/components/dataviews-context/index.ts @@ -26,7 +26,7 @@ type DataViewsContextType< Item > = { openedFilter: string | null; setOpenedFilter: ( openedFilter: string | null ) => void; getItemId: ( item: Item ) => string; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; isItemClickable: ( item: Item ) => boolean; }; @@ -44,8 +44,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( { setOpenedFilter: () => {}, openedFilter: null, getItemId: ( item ) => item.id, - onClickItem: () => {}, - isItemClickable: () => false, + isItemClickable: () => true, } ); export default DataViewsContext; diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx index ee6073f40bf3d..99d9b6d684b08 100644 --- a/packages/dataviews/src/components/dataviews/index.tsx +++ b/packages/dataviews/src/components/dataviews/index.tsx @@ -52,8 +52,7 @@ type DataViewsProps< Item > = { : { getItemId: ( item: Item ) => string } ); const defaultGetItemId = ( item: ItemWithId ) => item.id; -const defaultIsItemClickable = () => false; -const defaultOnClickItem = () => {}; +const defaultIsItemClickable = () => true; const EMPTY_ARRAY: any[] = []; export default function DataViews< Item >( { @@ -70,7 +69,7 @@ export default function DataViews< Item >( { defaultLayouts, selection: selectionProperty, onChangeSelection, - onClickItem = defaultOnClickItem, + onClickItem, isItemClickable = defaultIsItemClickable, header, }: DataViewsProps< Item > ) { diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx index 2a09fb68efab8..17053e01604a5 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx @@ -31,7 +31,7 @@ interface GridItemProps< Item > { selection: string[]; onChangeSelection: SetSelection; getItemId: ( item: Item ) => string; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; isItemClickable: ( item: Item ) => boolean; item: Item; actions: Action< Item >[]; @@ -66,19 +66,19 @@ function GridItem< Item >( { ) : null; - const clickableMediaItemProps = getClickableItemProps( + const clickableMediaItemProps = getClickableItemProps( { item, isItemClickable, onClickItem, - 'dataviews-view-grid__media' - ); + className: 'dataviews-view-grid__media', + } ); - const clickablePrimaryItemProps = getClickableItemProps( + const clickablePrimaryItemProps = getClickableItemProps( { item, isItemClickable, onClickItem, - 'dataviews-view-grid__primary-field' - ); + className: 'dataviews-view-grid__primary-field', + } ); return ( { field: NormalizedField< Item >; item: Item; isItemClickable: ( item: Item ) => boolean; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; } interface TableColumnCombinedProps< Item > { @@ -52,7 +52,7 @@ interface TableColumnCombinedProps< Item > { item: Item; view: ViewTableType; isItemClickable: ( item: Item ) => boolean; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; } interface TableColumnProps< Item > { @@ -62,7 +62,7 @@ interface TableColumnProps< Item > { column: string; view: ViewTableType; isItemClickable: ( item: Item ) => boolean; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; } interface TableRowProps< Item > { @@ -77,7 +77,7 @@ interface TableRowProps< Item > { getItemId: ( item: Item ) => string; onChangeSelection: SetSelection; isItemClickable: ( item: Item ) => boolean; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; } function TableColumn< Item >( { @@ -118,12 +118,12 @@ function TableColumnField< Item >( { const isItemClickableField = ( i: Item ) => isItemClickable( i ) && isPrimaryField; - const clickableProps = getClickableItemProps( + const clickableProps = getClickableItemProps( { item, - isItemClickableField, + isItemClickable: isItemClickableField, onClickItem, - 'dataviews-view-table__cell-content' - ); + className: 'dataviews-view-table__cell-content', + } ); return (
( - item: Item, - isItemClickable: ( item: Item ) => boolean, - onClickItem: ( item: Item ) => void, - className: string -) { - if ( ! isItemClickable( item ) ) { +export default function getClickableItemProps< Item >( { + item, + isItemClickable, + onClickItem, + className, +}: { + item: Item; + isItemClickable: ( item: Item ) => boolean; + onClickItem?: ( item: Item ) => void; + className: string; +} ) { + if ( ! isItemClickable( item ) || ! onClickItem ) { return { className }; } diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 861dc53404f91..0bce8b8cf2c08 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -510,7 +510,7 @@ export interface ViewBaseProps< Item > { onChangeSelection: SetSelection; selection: string[]; setOpenedFilter: ( fieldId: string ) => void; - onClickItem: ( item: Item ) => void; + onClickItem?: ( item: Item ) => void; isItemClickable: ( item: Item ) => boolean; view: View; }