From b9064d43bb1481e3bd0cd4f5e4400f6e25f2db5b Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 12 Mar 2024 19:55:58 +0000 Subject: [PATCH 01/10] Clicking the checkbox container toggles selection --- packages/dataviews/src/style.scss | 6 ++++++ packages/dataviews/src/view-table.js | 29 ++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index cb57566300b97d..458ee16ef18046 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -127,6 +127,12 @@ background-color: #f8f8f8; } + &.has-bulk-actions { + .dataviews-view-table__checkbox-column { + cursor: pointer; + } + } + .components-checkbox-control__input.components-checkbox-control__input { opacity: 0; diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index aa91e6d9ef77bf..a0aaff7652bd5f 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -242,6 +242,7 @@ function TableRow( { 'is-selected': hasPossibleBulkAction && selection.includes( id ), 'is-hovered': isHovered, + 'has-bulk-actions': hasPossibleBulkAction, } ) } onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } @@ -283,6 +284,34 @@ function TableRow( { width: 20, minWidth: 20, } } + onClickCapture={ ( event ) => { + event.stopPropagation(); + event.preventDefault(); + if ( ! hasPossibleBulkAction ) { + return; + } + if ( ! isSelected ) { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId === id || + selection.includes( itemId ) + ); + } ) + ); + } else { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId !== id && + selection.includes( itemId ) + ); + } ) + ); + } + } } >
Date: Tue, 12 Mar 2024 20:04:22 +0000 Subject: [PATCH 02/10] Fix checkboxes --- packages/dataviews/src/view-table.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index a0aaff7652bd5f..04233459b78024 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -284,9 +284,7 @@ function TableRow( { width: 20, minWidth: 20, } } - onClickCapture={ ( event ) => { - event.stopPropagation(); - event.preventDefault(); + onClickCapture={ () => { if ( ! hasPossibleBulkAction ) { return; } From 146418f29e855392ba49c65fb19f6e94e4f60e48 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 13 Mar 2024 11:08:30 +0000 Subject: [PATCH 03/10] Click row to select --- packages/dataviews/src/style.scss | 6 --- packages/dataviews/src/view-table.js | 76 ++++++++-------------------- 2 files changed, 22 insertions(+), 60 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 458ee16ef18046..cb57566300b97d 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -127,12 +127,6 @@ background-color: #f8f8f8; } - &.has-bulk-actions { - .dataviews-view-table__checkbox-column { - cursor: pointer; - } - } - .components-checkbox-control__input.components-checkbox-control__input { opacity: 0; diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 04233459b78024..7843b0fef8247a 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -246,34 +246,28 @@ function TableRow( { } ) } onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } - onClickCapture={ ( event ) => { - if ( event.ctrlKey || event.metaKey ) { - event.stopPropagation(); - event.preventDefault(); - if ( ! hasPossibleBulkAction ) { - return; - } - if ( ! isSelected ) { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId === id || - selection.includes( itemId ) - ); - } ) - ); - } else { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId !== id && - selection.includes( itemId ) - ); - } ) - ); - } + onClickCapture={ () => { + if ( ! hasPossibleBulkAction ) { + return; + } + if ( ! isSelected ) { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId === id || selection.includes( itemId ) + ); + } ) + ); + } else { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId !== id && selection.includes( itemId ) + ); + } ) + ); } } } > @@ -284,32 +278,6 @@ function TableRow( { width: 20, minWidth: 20, } } - onClickCapture={ () => { - if ( ! hasPossibleBulkAction ) { - return; - } - if ( ! isSelected ) { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId === id || - selection.includes( itemId ) - ); - } ) - ); - } else { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId !== id && - selection.includes( itemId ) - ); - } ) - ); - } - } } >
Date: Wed, 13 Mar 2024 13:29:32 +0000 Subject: [PATCH 04/10] Style adjustments --- packages/dataviews/src/style.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index cb57566300b97d..6071d02722ca57 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -189,6 +189,12 @@ > * { flex-grow: 1; } + + &.dataviews-view-table__primary-field { + a { + flex-grow: 0; + } + } } } .dataviews-view-table-header-button { @@ -235,6 +241,7 @@ white-space: nowrap; display: block; width: 100%; + overflow: hidden; a { text-decoration: none; @@ -243,10 +250,10 @@ white-space: nowrap; overflow: hidden; display: block; - width: 100%; + flex-grow: 0; &:hover { - color: $gray-900; + color: var(--wp-admin-theme-color); } @include link-reset(); } From e2bf36ce6b53cbc3cfa1ab632db5b4f90463846d Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Fri, 15 Mar 2024 17:21:41 +0000 Subject: [PATCH 05/10] Demo: allow click-on-row with meta/cmd or when selection already active --- packages/dataviews/src/view-table.js | 54 +++++++++++++++------------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 397ed603b68583..aaecb95ad22b58 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -237,7 +237,6 @@ function TableRow( { data, } ) { const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item ); - const isSelected = selection.includes( id ); const [ isHovered, setIsHovered ] = useState( false ); @@ -253,35 +252,40 @@ function TableRow( { return ( { - if ( ! hasPossibleBulkAction ) { - return; - } - if ( ! isSelected ) { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId === id || selection.includes( itemId ) - ); - } ) - ); - } else { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId !== id && selection.includes( itemId ) - ); - } ) - ); + onClickCapture={ ( event ) => { + if ( event.ctrlKey || event.metaKey || selection.length > 0 ) { + event.stopPropagation(); + event.preventDefault(); + // if ( ! hasPossibleBulkAction ) { + // return; + // } + if ( ! isSelected ) { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId === id || + selection.includes( itemId ) + ); + } ) + ); + } else { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId !== id && + selection.includes( itemId ) + ); + } ) + ); + } } } } > From 242966da7063a704bcac469cd3953e4d37406887 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Fri, 15 Mar 2024 17:58:41 +0000 Subject: [PATCH 06/10] Demo: always allow click-on-row, taking care not to catch button clicks --- packages/dataviews/src/view-table.js | 60 ++++++++++++++-------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index aaecb95ad22b58..15d3d18ce845ba 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -258,34 +258,25 @@ function TableRow( { } ) } onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } - onClickCapture={ ( event ) => { - if ( event.ctrlKey || event.metaKey || selection.length > 0 ) { - event.stopPropagation(); - event.preventDefault(); - // if ( ! hasPossibleBulkAction ) { - // return; - // } - if ( ! isSelected ) { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId === id || - selection.includes( itemId ) - ); - } ) - ); - } else { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId !== id && - selection.includes( itemId ) - ); - } ) - ); - } + onClick={ () => { + if ( ! isSelected ) { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId === id || selection.includes( itemId ) + ); + } ) + ); + } else { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId !== id && selection.includes( itemId ) + ); + } ) + ); } } } > @@ -336,9 +327,20 @@ function TableRow( { ) ) } { !! actions?.length && ( - + // Disable reason: we are not making the element interactive, + // but preventing any click events from bubbling up to the + // table row. This allows us to add a click handler to the row + // itself (to toggle row selection) without erroneously + // intercepting click events from ItemActions. + + /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ + e.stopPropagation() } + > + /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ ) } ); From 3541f138d7394b19ce40bcbb6ec83ff7ec85159d Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Fri, 15 Mar 2024 18:03:37 +0000 Subject: [PATCH 07/10] Bonus: disable item actions if a selection is already active --- packages/dataviews/src/view-table.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 15d3d18ce845ba..94b2842b21475f 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -336,7 +336,19 @@ function TableRow( { /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ e.stopPropagation() } + onClick={ + // Prevent click events initiated inside ItemActions + // from bubbling up to TableRow. + ( e ) => e.stopPropagation() + } + onClickCapture={ ( e ) => { + // If a selection has already started, prevent click + // events initiated in TableRow from reaching the + // descendants in ItemActions. + if ( selection.length > 0 ) { + e.stopPropagation(); + } + } } > From fa9188606dc43ef8ff4fcc1b8c3e244a753ca28e Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 18 Mar 2024 09:27:08 +0000 Subject: [PATCH 08/10] Revert "Bonus: disable item actions if a selection is already active" This reverts commit 3541f138d7394b19ce40bcbb6ec83ff7ec85159d. --- packages/dataviews/src/view-table.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 94b2842b21475f..15d3d18ce845ba 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -336,19 +336,7 @@ function TableRow( { /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ e.stopPropagation() - } - onClickCapture={ ( e ) => { - // If a selection has already started, prevent click - // events initiated in TableRow from reaching the - // descendants in ItemActions. - if ( selection.length > 0 ) { - e.stopPropagation(); - } - } } + onClick={ ( e ) => e.stopPropagation() } > From 64c4967ae624976a7a89595ac1ca77e6043da74a Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 18 Mar 2024 09:38:23 +0000 Subject: [PATCH 09/10] Do no select record when selecting text --- packages/dataviews/src/view-table.js | 40 +++++++++++++++------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 15d3d18ce845ba..dec2c30ff2b808 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -259,24 +259,28 @@ function TableRow( { onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } onClick={ () => { - if ( ! isSelected ) { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId === id || selection.includes( itemId ) - ); - } ) - ); - } else { - onSelectionChange( - data.filter( ( _item ) => { - const itemId = getItemId?.( _item ); - return ( - itemId !== id && selection.includes( itemId ) - ); - } ) - ); + if ( document.getSelection().type !== 'Range' ) { + if ( ! isSelected ) { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId === id || + selection.includes( itemId ) + ); + } ) + ); + } else { + onSelectionChange( + data.filter( ( _item ) => { + const itemId = getItemId?.( _item ); + return ( + itemId !== id && + selection.includes( itemId ) + ); + } ) + ); + } } } } > From be1856a3a2b3ec2430412683fead58dbea14bcec Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Thu, 21 Mar 2024 15:25:42 +0000 Subject: [PATCH 10/10] Disable click-to-select on touch devices (use onTouchStart) --- packages/dataviews/src/view-table.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index dec2c30ff2b808..7e2e4796da2747 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -249,6 +249,11 @@ function TableRow( { setIsHovered( false ); }; + // Will be set to true if `onTouchStart` fires. This happens before + // `onClick` and can be used to exclude touchscreen devices from certain + // behaviours. + const isTouchDevice = useRef( false ); + return ( { + isTouchDevice.current = true; + } } onClick={ () => { - if ( document.getSelection().type !== 'Range' ) { + if ( + ! isTouchDevice.current && + document.getSelection().type !== 'Range' + ) { if ( ! isSelected ) { onSelectionChange( data.filter( ( _item ) => {