5/n Allow CKComponents to embed Fabric surfaces
Summary: Changelog: [Fabric][iOS] Allow CKComponents to embed Fabric surfaces too. Previously RCTSurfaceHostingComponent, a CKComponent, could only initialize the legacy RCTSurface. Now it can initialize RCTFabricSurface too, when a RCTSurfacePresenter is passed in. Reviewed By: RSNara Differential Revision: D35163595 fbshipit-source-id: e11a9334b0282e0728a38cc1c96de48a694e9e3d
This commit is contained in:
Родитель
32fa5d6025
Коммит
6ee70a9cae
2
BUCK
2
BUCK
|
@ -1362,6 +1362,7 @@ rn_xplat_cxx_library2(
|
|||
visibility = ["PUBLIC"],
|
||||
deps = [
|
||||
"//fbobjc/Libraries/MobileUI/ComponentKit:ComponentKit",
|
||||
"//xplat/js/react-native-github:RCTFabric",
|
||||
"//xplat/js/react-native-github:RCTLinking",
|
||||
"//xplat/js/react-native-github:RCTPushNotification",
|
||||
"//xplat/js/react-native-github:ReactInternal",
|
||||
|
@ -1397,6 +1398,7 @@ rn_xplat_cxx_library2(
|
|||
deps = [
|
||||
":RCTSurfaceHostingComponent",
|
||||
"//fbobjc/Libraries/MobileUI/ComponentKit:ComponentKit",
|
||||
"//xplat/js/react-native-github:RCTFabric",
|
||||
"//xplat/js/react-native-github:RCTLinking",
|
||||
"//xplat/js/react-native-github:RCTPushNotification",
|
||||
"//xplat/js/react-native-github:ReactInternal",
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
#import <ComponentKit/CKComponent.h>
|
||||
#import <ComponentKit/CKCompositeComponent.h>
|
||||
#import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponentOptions.h>
|
||||
#import <React/RCTSurfacePresenter.h>
|
||||
|
||||
@class RCTBridge;
|
||||
|
||||
|
@ -19,6 +20,7 @@
|
|||
@interface RCTSurfaceBackedComponent : CKCompositeComponent
|
||||
|
||||
+ (instancetype)newWithBridge:(RCTBridge *)bridge
|
||||
surfacePresenter:(RCTSurfacePresenter *)surfacePresenter
|
||||
moduleName:(NSString *)moduleName
|
||||
properties:(NSDictionary *)properties
|
||||
options:(RCTSurfaceHostingComponentOptions)options;
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
#import <ComponentKit/CKOverlayLayoutComponent.h>
|
||||
#import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponent.h>
|
||||
#import <React/RCTSurface.h>
|
||||
#import <React/RCTFabricSurface.h>
|
||||
|
||||
#import "RCTSurfaceBackedComponentState.h"
|
||||
|
||||
|
@ -24,6 +25,7 @@
|
|||
}
|
||||
|
||||
+ (instancetype)newWithBridge:(RCTBridge *)bridge
|
||||
surfacePresenter:(RCTSurfacePresenter *)surfacePresenter
|
||||
moduleName:(NSString *)moduleName
|
||||
properties:(NSDictionary *)properties
|
||||
options:(RCTSurfaceHostingComponentOptions)options
|
||||
|
@ -32,11 +34,21 @@
|
|||
|
||||
RCTSurfaceBackedComponentState *state = scope.state();
|
||||
|
||||
if (state.surface == nil || ![state.surface.moduleName isEqualToString:moduleName]) {
|
||||
id<RCTSurfaceProtocol> surface = [[RCTSurface alloc] initWithBridge:bridge
|
||||
moduleName:moduleName
|
||||
initialProperties:properties];
|
||||
// JavaScript entrypoints expects "fabric" key for Fabric surfaces
|
||||
NSMutableDictionary *adjustedProperties = [[NSMutableDictionary alloc] initWithDictionary:properties];
|
||||
adjustedProperties[@"fabric"] = surfacePresenter ? @YES : nil;
|
||||
|
||||
if (state.surface == nil || ![state.surface.moduleName isEqualToString:moduleName]) {
|
||||
id<RCTSurfaceProtocol> surface;
|
||||
if (surfacePresenter) {
|
||||
surface = [[RCTFabricSurface alloc] initWithSurfacePresenter:surfacePresenter
|
||||
moduleName:moduleName
|
||||
initialProperties:adjustedProperties];
|
||||
} else {
|
||||
surface = [[RCTSurface alloc] initWithBridge:bridge
|
||||
moduleName:moduleName
|
||||
initialProperties:adjustedProperties];
|
||||
}
|
||||
[surface start];
|
||||
|
||||
state = [RCTSurfaceBackedComponentState newWithSurface:surface];
|
||||
|
@ -44,8 +56,8 @@
|
|||
CKComponentScope::replaceState(scope, state);
|
||||
}
|
||||
else {
|
||||
if (![state.surface.properties isEqualToDictionary:properties]) {
|
||||
state.surface.properties = properties;
|
||||
if (![state.surface.properties isEqualToDictionary:adjustedProperties]) {
|
||||
state.surface.properties = adjustedProperties;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
#import <UIKit/UIKit.h>
|
||||
|
||||
#import <ComponentKit/CKComponentSubclass.h>
|
||||
#import <React/RCTFabricSurface.h>
|
||||
#import <React/RCTSurface.h>
|
||||
#import <React/RCTSurfaceView.h>
|
||||
|
||||
|
@ -77,8 +78,18 @@
|
|||
// Just in case of the very first building pass, we give React Native a chance
|
||||
// to prepare its internals for coming synchronous measuring.
|
||||
if ([_surface isKindOfClass:[RCTSurface class]]) {
|
||||
// Legacy Pre-Fabric Surface
|
||||
[(RCTSurface *)_surface synchronouslyWaitForStage:RCTSurfaceStageSurfaceDidInitialLayout
|
||||
timeout:_options.synchronousLayoutingTimeout];
|
||||
timeout:_options.synchronousLayoutingTimeout];
|
||||
} else if ([_surface isKindOfClass:[RCTFabricSurface class]]) {
|
||||
// Fabric Surface
|
||||
// Hack: Increase timeout because RCTFabricSurface stage will be RCTSurfaceStageSurfaceDidInitialLayout
|
||||
// before mounting has finished, which can cause sizeThatFitsMinimumSize to return the wrong value.
|
||||
// Safe hack because timeout length can be increased without making the component seem slower.
|
||||
// However if timeout length is less than the time to mount a surface, the size may be incorrect.
|
||||
// TODO (T115399546) Allow RCTFabricSurface synchronouslyWaitFor to wait for mounting completion stage
|
||||
NSTimeInterval timeout = 20;
|
||||
[(RCTFabricSurface *)_surface synchronouslyWaitFor:timeout];
|
||||
}
|
||||
|
||||
CGSize fittingSize = CGSizeZero;
|
||||
|
|
Загрузка…
Ссылка в новой задаче