-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DataViews: Implement isItemClickable
and onClickItem
props
#66365
Changes from all commits
785085b
dd7e0a3
77f2217
433e45f
f890963
c32622e
9a39fe6
5419b0a
68ef300
cd923f8
94335a4
030a28d
baf7a82
4095dab
23d8695
ec715ed
ea29690
106af4d
cc46724
b11e923
c6dffd7
3c262d6
c053a9a
57faa8f
d2eeb0e
05f0d1a
c4db3b9
cd9fe2f
8356977
e27dec1
a187591
8815e5a
a461d85
fcc2e6e
577f836
a3449c4
2366429
1b84ac0
6ca01ff
8e612d4
c448c49
2b595c2
9cc6d80
01a57a8
7b1e40a
6592d36
c2994e0
b039310
42f90f4
1c3bdb9
ea8e941
1d0809a
e6e3eb9
09b2f79
9e2cbf9
08ea4d5
e77b93b
5bf9726
a8e3d75
c9ab19d
9f7c57d
eb2a816
f8d86b1
5c7b0c4
f8036fd
419f3fa
7a79644
0071e09
507d60b
ed48f39
c9e418b
fdc2892
84cc4c2
eaa3324
f24172b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,8 +17,13 @@ | |
|
||
.dataviews-view-grid__primary-field { | ||
min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button | ||
|
||
&--clickable { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree the way this handles the classes needs to be iterated, see related conversation #66365 (comment) In discussing with Riad IRL the idea was to land this PR and iterate. |
||
width: fit-content; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why is this needed, and why only for |
||
} | ||
} | ||
|
||
|
||
&.is-selected { | ||
.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value { | ||
color: $gray-900; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
export default function getClickableItemProps< Item >( | ||
item: Item, | ||
isItemClickable: ( item: Item ) => boolean, | ||
onClickItem: ( item: Item ) => void, | ||
className: string | ||
) { | ||
if ( ! isItemClickable( item ) ) { | ||
return { className }; | ||
} | ||
|
||
return { | ||
className: `${ className } ${ className }--clickable`, | ||
role: 'button', | ||
tabIndex: 0, | ||
onClick: () => onClickItem( item ), | ||
onKeyDown: ( event: React.KeyboardEvent ) => { | ||
if ( event.key === 'Enter' || event.key === '' ) { | ||
onClickItem( item ); | ||
} | ||
}, | ||
}; | ||
} |
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.
Is this one really necessary? I mean what happens if we just do nothing in
onClickItem
instead?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 can be useful for differentiating the layout style of clickable primary fields from non-clickable ones. In the page view, the “primary” field is gray when the item is not clickable:
Screen.Capture.on.2024-11-04.at.14-52-41.mp4
(also, I just noticed that
deleted
pages aren't visible in theAll pages
view)