DataViews: Type the ViewActions component #61729
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
[Type] Code Quality
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
youknowriad
commented
May 16, 2024
| @@ -190,12 +190,12 @@ export interface ViewTable extends ViewBase { | |||
| /** | |||
| * The field to use as the primary field. | |||
| */ | |||
| primaryField: string; | |||
| primaryField?: string; | |||
There was a problem hiding this comment.
When switching view "type", I had to reset the "layout" object because that object is supposed to be different from one view type to another. This forced me to mark all the layout subkeys as optional.
I'm guessing the other options is to have some kind of "defaultLayout" provided per view type but I believe this approach is simpler and does the job for now.
youknowriad
commented
May 16, 2024
| @@ -58,10 +98,15 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { | |||
| name="view-actions-available-view" | |||
| checked={ availableView.type === view.type } | |||
| hideOnClick | |||
| onChange={ ( e ) => { | |||
| onChange={ ( e: ChangeEvent< HTMLInputElement > ) => { | |||
There was a problem hiding this comment.
The main challenge of this PR is this function: Basically how to keep the "view" object valid (correct type) when switching view types.
There was a problem hiding this comment.
Transitional states are difficult, this seems to highlight complexity that wasn't apparent, although it seems like the complexity isn't related to types as much as it is to application states. What should that layout look like?
If the layout properties are truly optional then this makes sense and may be better than the previous behavior where dataviews would maintain layout properties when switching views.
I know this isn't your question, but I try to avoid type assertions like these and would typically do something like this here:
onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
switch ( e.target.value ) {
case 'list':
case 'grid':
case 'table':
return onChangeView( {
...view,
type: e.target.value,
layout: {},
} );
}
throw new Error( 'Invalid dataview' );
} }There was a problem hiding this comment.
I agree the complexity is on the app level: "how to switch view types when the view types can be different" and we don't have a good answer yet.
|
Size Change: +1.61 kB (+0.09%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
sirreal
approved these changes
May 20, 2024
| @@ -58,10 +98,15 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) { | |||
| name="view-actions-available-view" | |||
| checked={ availableView.type === view.type } | |||
| hideOnClick | |||
| onChange={ ( e ) => { | |||
| onChange={ ( e: ChangeEvent< HTMLInputElement > ) => { | |||
There was a problem hiding this comment.
Transitional states are difficult, this seems to highlight complexity that wasn't apparent, although it seems like the complexity isn't related to types as much as it is to application states. What should that layout look like?
If the layout properties are truly optional then this makes sense and may be better than the previous behavior where dataviews would maintain layout properties when switching views.
I know this isn't your question, but I try to avoid type assertions like these and would typically do something like this here:
onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
switch ( e.target.value ) {
case 'list':
case 'grid':
case 'table':
return onChangeView( {
...view,
type: e.target.value,
layout: {},
} );
}
throw new Error( 'Invalid dataview' );
} }
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related #55083
Follow-up to #61185
What?
The DataViews package is a types heavy package. There's a lot of structures that need to be documented properly. So this continues the effort to add explicit types to the package. This PR focuses on typing the ViewActions component.
There's some interesting challenges here, more inline.
Testing instructions
There's a small functional change here (layout is reset when switching view types) but it shouldn't have impacts on the dataviews. You can check the existing usage.