-
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
Create toolbar item compatible for RN. #22232
Conversation
Hey @SergioEstevao! Could you take a look at #22229? I don't think any of this extra stuff is really needed. |
Size Change: 0 B Total Size: 824 kB ℹ️ View Unchanged
|
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.
Thanks for this, @SergioEstevao! :)
I made some comments, but I think the changes I'm suggesting here will make the code exact the same as in #22229, so it would be nice if you can check that.
import ToolbarContext from '../toolbar-context'; | ||
|
||
function ToolbarItem( { children, ...props }, ref ) { | ||
const accessibleToolbarState = useContext( ToolbarContext ); |
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 ToolbarContext
is only for the web. It handles the state of the toolbar when using arrow keys to move between toolbar items.
return null; | ||
} | ||
|
||
const allProps = { ...props, ref, 'data-experimental-toolbar-item': true }; |
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.
data-experimental-toolbar-item
is not needed here.
return ( | ||
<BaseToolbarItem { ...accessibleToolbarState } { ...allProps }> | ||
{ ( htmlProps ) => | ||
// Overwriting BaseToolbarItem's onMouseDown since it disables drag | ||
// and drop | ||
children( { ...htmlProps, onMouseDown: allProps.onMouseDown } ) | ||
} | ||
</BaseToolbarItem> | ||
); |
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.
Does this work on RN?
<View prop="value">{ ( props ) => children( props ) }</View>
I would say that this is not needed at all. And the code would never reach to that point any way because accessibleToolbarState
should be always falsy on RN. So return children( { ...props, ref } )
is probably all you need.
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.
It works, but feel free to push to the PR, with your changes, and I can test it.
Closed in favor of #22229 |
Description
Fix breakage in RN-mobile introduced in #20008
How has this been tested?
This can be tested on GB-mobile here: wordpress-mobile/gutenberg-mobile#2245
Screenshots
Types of changes
Checklist: