Move FocusZone away from bridge #4067
+201
−72
There are no files selected for viewing
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@fluentui-react-native/focus-zone": major | ||
| "@fluentui-react-native/tester": major | ||
| --- | ||
|
|
||
| Move FocusZone away from bridge | ||
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| #import "RCTFocusZone.h" | ||
| #import "RCTFocusZoneManager.h" | ||
| #import <React/RCTConvert.h> | ||
| #import <React/RCTUIManager.h> | ||
|
|
||
| @implementation RCTFocusZoneManager | ||
|
|
||
| RCT_EXPORT_MODULE() | ||
|
|
||
| RCT_EXPORT_VIEW_PROPERTY(disabled, BOOL) | ||
|
|
||
| RCT_CUSTOM_VIEW_PROPERTY(navigationOrderInRenderOrder, BOOL, RCTFocusZone) | ||
| { | ||
| [view setNavigationOrderInRenderOrder:[json boolValue]]; | ||
| [[view window] recalculateKeyViewLoop]; | ||
| } | ||
|
|
||
| RCT_CUSTOM_VIEW_PROPERTY(focusZoneDirection, NSString, RCTFocusZone) | ||
| { | ||
| if ([json isEqualToString:@"bidirectional"]) | ||
| { | ||
| [view setFocusZoneDirection:FocusZoneDirectionBidirectional]; | ||
| } | ||
| else if ([json isEqualToString:@"vertical"]) | ||
| { | ||
| [view setFocusZoneDirection:FocusZoneDirectionVertical]; | ||
| } | ||
| else if ([json isEqualToString:@"horizontal"]) | ||
| { | ||
| [view setFocusZoneDirection:FocusZoneDirectionHorizontal]; | ||
| } | ||
| else if ([json isEqualToString:@"none"]) | ||
| { | ||
| [view setFocusZoneDirection:FocusZoneDirectionNone]; | ||
| } | ||
| else | ||
| { | ||
| [view setFocusZoneDirection:[defaultView focusZoneDirection]]; | ||
| } | ||
| } | ||
|
|
||
| RCT_EXPORT_VIEW_PROPERTY(navigateAtEnd, NSString) | ||
| RCT_EXPORT_VIEW_PROPERTY(tabKeyNavigation, NSString) | ||
|
|
||
| RCT_CUSTOM_VIEW_PROPERTY(defaultTabbableElement, NSNumber, RCTFocusZone) | ||
| { | ||
| NSNumber *tag = [RCTConvert NSNumber:json]; | ||
| RCTUIManager *manager = [[self bridge] uiManager]; | ||
| NSView *defaultResponder = [manager viewForReactTag:tag]; | ||
| [view setDefaultResponder:defaultResponder]; | ||
| } | ||
|
|
||
| - (RCTView *)view | ||
| { | ||
| return [RCTFocusZone new]; | ||
| } | ||
|
|
||
| @end | ||
|
|
||
| #ifdef RCT_NEW_ARCH_ENABLED | ||
|
|
||
| #include <react/renderer/components/RCTFocusZoneSpec/ComponentDescriptors.h> | ||
| #include <react/renderer/components/RCTFocusZoneSpec/Props.h> | ||
| #include <react/renderer/components/RCTFocusZoneSpec/RCTComponentViewHelpers.h> | ||
|
|
||
| #import <React/RCTFabricComponentsPlugins.h> | ||
|
|
||
| using namespace facebook::react; | ||
|
|
||
| @interface FocusZoneComponentView : RCTViewComponentView | ||
| @end | ||
|
|
||
| @implementation FocusZoneComponentView { | ||
| RCTFocusZone *_focusZoneView; | ||
| } | ||
|
|
||
| + (ComponentDescriptorProvider)componentDescriptorProvider | ||
| { | ||
| return concreteComponentDescriptorProvider<RCTFocusZoneComponentDescriptor>(); | ||
| } | ||
|
|
||
| - (instancetype)initWithFrame:(CGRect)frame | ||
| { | ||
| if (self = [super initWithFrame:frame]) { | ||
| _focusZoneView = [RCTFocusZone new]; | ||
| self.contentView = _focusZoneView; | ||
| } | ||
| return self; | ||
| } | ||
|
|
||
| - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps | ||
| { | ||
| const auto &newProps = static_cast<const RCTFocusZoneProps &>(*props); | ||
|
|
||
| _focusZoneView.disabled = newProps.disabled; | ||
| _focusZoneView.navigationOrderInRenderOrder = newProps.navigationOrderInRenderOrder; | ||
|
|
||
| switch (newProps.navigateAtEnd) { | ||
| case RCTFocusZoneNavigateAtEnd::NavigateWrap: | ||
| _focusZoneView.navigateAtEnd = @"NavigateWrap"; | ||
| break; | ||
| case RCTFocusZoneNavigateAtEnd::NavigateContinue: | ||
| _focusZoneView.navigateAtEnd = @"NavigateContinue"; | ||
| break; | ||
| case RCTFocusZoneNavigateAtEnd::NavigateStopAtEnds: | ||
| _focusZoneView.navigateAtEnd = @"NavigateStopAtEnds"; | ||
| break; | ||
| } | ||
|
|
||
| switch (newProps.focusZoneDirection) { | ||
| case RCTFocusZoneFocusZoneDirection::Bidirectional: | ||
| _focusZoneView.focusZoneDirection = FocusZoneDirectionBidirectional; | ||
| break; | ||
| case RCTFocusZoneFocusZoneDirection::Vertical: | ||
| _focusZoneView.focusZoneDirection = FocusZoneDirectionVertical; | ||
| break; | ||
| case RCTFocusZoneFocusZoneDirection::Horizontal: | ||
| _focusZoneView.focusZoneDirection = FocusZoneDirectionHorizontal; | ||
| break; | ||
| case RCTFocusZoneFocusZoneDirection::None: | ||
| _focusZoneView.focusZoneDirection = FocusZoneDirectionNone; | ||
| break; | ||
| } | ||
|
|
||
| switch (newProps.tabKeyNavigation) { | ||
| case RCTFocusZoneTabKeyNavigation::None: | ||
| _focusZoneView.tabKeyNavigation = @"None"; | ||
| break; | ||
| case RCTFocusZoneTabKeyNavigation::NavigateWrap: | ||
| _focusZoneView.tabKeyNavigation = @"NavigateWrap"; | ||
| break; | ||
| case RCTFocusZoneTabKeyNavigation::NavigateStopAtEnds: | ||
| _focusZoneView.tabKeyNavigation = @"NavigateStopAtEnds"; | ||
| break; | ||
| case RCTFocusZoneTabKeyNavigation::Normal: | ||
| _focusZoneView.tabKeyNavigation = @"Normal"; | ||
| break; | ||
| } | ||
|
|
||
| // defaultTabbableElement is not handled here: resolving a view by React tag | ||
| // requires the legacy UIManager and is not supported in the Fabric renderer. | ||
|
Comment on lines
+140
to
+141
Collaborator
There was a problem hiding this comment. @acoates-ms any idea how one might be able to do this, suppose of you had to do it for windows?
Contributor
There was a problem hiding this comment. In windows we still have a look up by tag in fabric. -- That may not have been the correct move if that isn't available in the other platforms. Also didn't we move to saying this property should be set using nativeId? - Maybe we'll have to force all SDXs to only use that method when using fabric?
Collaborator
There was a problem hiding this comment. Talked offline a bit more, I think we should update this to handle setting by nativeID. And we'll need to make it backwards compatible too since internally, the JS and native code may not be in sync. |
||
|
|
||
| [super updateProps:props oldProps:oldProps]; | ||
| } | ||
|
|
||
| @end | ||
|
|
||
| Class<RCTComponentViewProtocol> RCTFocusZoneCls(void) | ||
| { | ||
| return FocusZoneComponentView.class; | ||
| } | ||
|
|
||
| #endif // RCT_NEW_ARCH_ENABLED | ||
This file contains hidden or 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
This file contains hidden or 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
Oops, something went wrong.
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.
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.
@Saadnajmi please confirm
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.
We disallow major bumps in the repo as of now, and this should be additive not breaking. So I don' think this should be major.