DataViews: iterate on list view #56746
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,96 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classNames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useAsyncList } from '@wordpress/compose'; | ||
| import { | ||
| __experimentalHStack as HStack, | ||
| __experimentalVStack as VStack, | ||
| } from '@wordpress/components'; | ||
| import { ENTER } from '@wordpress/keycodes'; | ||
|
|
||
| export default function ViewList( { | ||
| view, | ||
| fields, | ||
| data, | ||
| getItemId, | ||
| onSelectionChange, | ||
| selection, | ||
| } ) { | ||
| const shownData = useAsyncList( data, { step: 3 } ); | ||
| const mediaField = fields.find( | ||
| ( field ) => field.id === view.layout.mediaField | ||
| ); | ||
| const primaryField = fields.find( | ||
| ( field ) => field.id === view.layout.primaryField | ||
| ); | ||
| const visibleFields = fields.filter( | ||
| ( field ) => | ||
| ! view.hiddenFields.includes( field.id ) && | ||
| ! [ view.layout.primaryField, view.layout.mediaField ].includes( | ||
| field.id | ||
| ) | ||
| ); | ||
|
|
||
| const onEnter = ( item ) => ( event ) => { | ||
| const { keyCode } = event; | ||
| if ( keyCode === ENTER ) { | ||
| onSelectionChange( [ item ] ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <ul className="dataviews-list-view"> | ||
| { shownData.map( ( item, index ) => { | ||
| return ( | ||
| <li key={ getItemId?.( item ) || index }> | ||
| <div | ||
| role="button" | ||
| tabIndex={ 0 } | ||
| onKeyDown={ onEnter( item ) } | ||
| className={ classNames( | ||
| 'dataviews-list-view__item', | ||
| { | ||
| 'dataviews-list-view__item-selected': | ||
| selection.includes( item.id ), | ||
| } | ||
| ) } | ||
| onClick={ () => onSelectionChange( [ item ] ) } | ||
| > | ||
|
There was a problem hiding this comment. Have you tried/considered using There was a problem hiding this comment. Yeah. Other than styling, my main concern was that this component is going to have buttons within (this, but also actions). There was a problem hiding this comment. Hmm... OK. In which case, we shouldn't be doing this at all! Will need to have a think about how best to handle this scenario. There was a problem hiding this comment. Hopefully it's okay to 'visually nest' those buttons, with either absolute positioning, something like the List view implementation, or some other technique? There was a problem hiding this comment.
Yeah, it's a pretty well established paradigm to visually overlay interactive elements. We just can't nest them in the DOM. For example, this card pattern is routinely used on news sites and in other related content...
There are two interactive elements in this card – links for the article title, and the the article category.
However, through some clever use of generated content, and a bit of We don't have to implement it exactly like that, but the general idea is there. One thing to be aware of when doing this is target size – it's bad enough when it's hard to tap on something, but when it's surrounded by a different action context it's even worse. There was a problem hiding this comment. Nice, thanks for sharing the details. It'll be useful when we implement this feature. |
||
| <HStack spacing={ 3 }> | ||
| <div className="dataviews-list-view__media-wrapper"> | ||
| { mediaField?.render( { item } ) || ( | ||
| <div className="dataviews-list-view__media-placeholder"></div> | ||
| ) } | ||
| </div> | ||
| <HStack> | ||
| <VStack spacing={ 1 }> | ||
| { primaryField?.render( { item } ) } | ||
| <div className="dataviews-list-view__fields"> | ||
| { visibleFields.map( ( field ) => { | ||
| return ( | ||
| <span | ||
| key={ field.id } | ||
| className="dataviews-list-view__field" | ||
| > | ||
| { field.render( { | ||
| item, | ||
| } ) } | ||
| </span> | ||
| ); | ||
| } ) } | ||
| </div> | ||
| </VStack> | ||
| </HStack> | ||
| </HStack> | ||
| </div> | ||
| </li> | ||
| ); | ||
| } ) } | ||
| </ul> | ||
| ); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This means there is no longer a need to export anything from dataviews (
VIEW_LAYOUTSor any specificgetViewSupportfunction).