From b697d147d1f18e422d3949e4afc86078a1f5d7be Mon Sep 17 00:00:00 2001 From: Roman Gorbunov Date: Thu, 25 Jul 2019 03:59:05 -0700 Subject: [PATCH] CKFlexboxComponent live editing Summary: CKFlexboxComponent's insets are now live editable P.S. Now it takes some time to see the view changed and the new value of everything on flipper side Reviewed By: kevin0571 Differential Revision: D16379743 fbshipit-source-id: 69bc9b7cb6b2103ff34b5c4489b240ac7562a85d --- .../CKFlexboxComponent+Sonar.mm | 139 +++++++++++++++--- .../Utils.h | 1 + .../Utils.mm | 10 ++ 3 files changed, 132 insertions(+), 18 deletions(-) diff --git a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.mm b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.mm index 39d46e583..de0aa659b 100644 --- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.mm +++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.mm @@ -18,32 +18,39 @@ FB_LINKABLE(CKFlexboxComponent_Sonar) @implementation CKFlexboxComponent (Sonar) -- (NSArray *> *> *)sonar_additionalDataOverride +static NSDictionary *CKFlexboxDirectionEnumMap; + +static NSDictionary *CKFlexboxJustifyContentEnumMap; + +static NSDictionary *CKFlexboxAlignItemsEnumMap; + +static NSDictionary *CKFlexboxAlignContentEnumMap; + +static NSDictionary *CKFlexboxWrapEnumMap; + ++ (void)initialize { - static NSDictionary *CKFlexboxDirectionEnumMap = @{ + CKFlexboxDirectionEnumMap = @{ @(CKFlexboxDirectionColumn): @"column", @(CKFlexboxDirectionRow): @"row", @(CKFlexboxDirectionColumnReverse): @"column-reverse", @(CKFlexboxDirectionRowReverse): @"row-reverse", }; - - static NSDictionary *CKFlexboxJustifyContentEnumMap = @{ + CKFlexboxJustifyContentEnumMap = @{ @(CKFlexboxJustifyContentStart): @"start", @(CKFlexboxJustifyContentCenter): @"center", @(CKFlexboxJustifyContentEnd): @"end", @(CKFlexboxJustifyContentSpaceBetween): @"space-between", @(CKFlexboxJustifyContentSpaceAround): @"space-around", }; - - static NSDictionary *CKFlexboxAlignItemsEnumMap = @{ + CKFlexboxAlignItemsEnumMap = @{ @(CKFlexboxAlignItemsStart): @"start", @(CKFlexboxAlignItemsEnd): @"end", @(CKFlexboxAlignItemsCenter): @"center", @(CKFlexboxAlignItemsBaseline): @"baseline", @(CKFlexboxAlignItemsStretch): @"stretch", }; - - static NSDictionary *CKFlexboxAlignContentEnumMap = @{ + CKFlexboxAlignContentEnumMap = @{ @(CKFlexboxAlignContentStart): @"start", @(CKFlexboxAlignContentEnd): @"end", @(CKFlexboxAlignContentCenter): @"center", @@ -51,30 +58,126 @@ FB_LINKABLE(CKFlexboxComponent_Sonar) @(CKFlexboxAlignContentSpaceAround): @"space-around", @(CKFlexboxAlignContentStretch): @"stretch", }; - - static NSDictionary *CKFlexboxWrapEnumMap = @{ + CKFlexboxWrapEnumMap = @{ @(CKFlexboxWrapWrap): @"wrap", @(CKFlexboxWrapNoWrap): @"no-wrap", @(CKFlexboxWrapWrapReverse): @"wrap-reverse", }; +} +- (NSArray *> *> *)sonar_additionalDataOverride +{ CKFlexboxComponentStyle style; [[self valueForKey: @"_style"] getValue: &style]; return @[[SKNamed newWithName:@"CKFlexboxComponent" withValue:@{ - @"spacing": SKObject(@(style.spacing)), - @"direction": SKObject(CKFlexboxDirectionEnumMap[@(style.direction)]), - @"justifyContent": SKObject(CKFlexboxJustifyContentEnumMap[@(style.justifyContent)]), - @"alignItems": SKObject(CKFlexboxAlignItemsEnumMap[@(style.alignItems)]), - @"alignContent": SKObject(CKFlexboxAlignContentEnumMap[@(style.alignContent)]), - @"wrap": SKObject(CKFlexboxWrapEnumMap[@(style.wrap)]), - @"margin": SKObject(flexboxRect(style.margin)), - @"padding": SKObject(flexboxRect(style.padding)), + @"spacing": SKMutableObject(@(style.spacing)), + @"direction": SKMutableObject(CKFlexboxDirectionEnumMap[@(style.direction)]), + @"justifyContent": SKMutableObject(CKFlexboxJustifyContentEnumMap[@(style.justifyContent)]), + @"alignItems": SKMutableObject(CKFlexboxAlignItemsEnumMap[@(style.alignItems)]), + @"alignContent": SKMutableObject(CKFlexboxAlignContentEnumMap[@(style.alignContent)]), + @"wrap": SKMutableObject(CKFlexboxWrapEnumMap[@(style.wrap)]), + @"margin": SKMutableObject(flexboxRect(style.margin)), + @"padding": SKMutableObject(flexboxRect(style.padding)), }]]; } +- (void)setMutableData:(id)data { + CKFlexboxComponentStyle style; + [data getValue:&style]; + [self setValue:data forKey:@"_style"]; +} + +- (NSDictionary *)sonar_getDataMutationsChanged { + __block CKFlexboxComponentStyle style; + [[self valueForKey:@"_style"] getValue: &style]; + return @{ + @"CKFlexboxComponent.spacing": ^(NSNumber *value) { + style.spacing = value.floatValue; + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.direction": ^(NSString *value) { + for (NSNumber *key in CKFlexboxDirectionEnumMap) { + if ([CKFlexboxDirectionEnumMap[key] isEqualToString:value]) { + style.direction = (CKFlexboxDirection) key.intValue; + break; + } + } + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.alignContent": ^(NSString *value) { + for (NSNumber *key in CKFlexboxAlignContentEnumMap) { + if ([CKFlexboxAlignContentEnumMap[key] isEqualToString:value]) { + style.alignContent = (CKFlexboxAlignContent) key.intValue; + break; + } + } + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.alignContent": ^(NSString *value) { + for (NSNumber *key in CKFlexboxAlignItemsEnumMap) { + if ([CKFlexboxAlignItemsEnumMap[key] isEqualToString:value]) { + style.alignItems = (CKFlexboxAlignItems) key.intValue; + break; + } + } + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.justifyContent": ^(NSString *value) { + for (NSNumber *key in CKFlexboxJustifyContentEnumMap) { + if ([CKFlexboxJustifyContentEnumMap[key] isEqualToString:value]) { + style.justifyContent = (CKFlexboxJustifyContent) key.intValue; + break; + } + } + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.wrap": ^(NSString *value) { + for (NSNumber *key in CKFlexboxWrapEnumMap) { + if ([CKFlexboxWrapEnumMap[key] isEqualToString:value]) { + style.wrap = (CKFlexboxWrap) key.intValue; + break; + } + } + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.margin.bottom": ^(NSString *value) { + style.margin.bottom = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.margin.top": ^(NSString *value) { + style.margin.top = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.margin.end": ^(NSString *value) { + style.margin.end = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.margin.start": ^(NSString *value) { + style.margin.start = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.padding.bottom": ^(NSString *value) { + style.padding.bottom = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.padding.top": ^(NSString *value) { + style.padding.top = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.padding.end": ^(NSString *value) { + style.padding.end = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + @"CKFlexboxComponent.padding.start": ^(NSString *value) { + style.padding.start = relativeStructDimension(value); + return [NSValue value:&style withObjCType:@encode(CKFlexboxComponentStyle)]; + }, + }; +} + @end #endif diff --git a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.h b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.h index 0c4a73990..fa8ec58c8 100644 --- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.h +++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.h @@ -9,3 +9,4 @@ NSString *relativeDimension(CKRelativeDimension dimension); NSDictionary *flexboxRect(CKFlexboxSpacing spacing); +CKRelativeDimension relativeStructDimension(NSString *dimension); diff --git a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.mm b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.mm index 260a2afb6..62c81114b 100644 --- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.mm +++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.mm @@ -20,6 +20,16 @@ NSString *relativeDimension(CKRelativeDimension dimension) { } } +CKRelativeDimension relativeStructDimension(NSString *dimension) { + if ([dimension hasSuffix:@"%"]) { + return CKRelativeDimension::Percent([[dimension substringToIndex:([dimension length] - 1)] integerValue]); + } + if ([dimension hasSuffix:@"pt"]) { + return CKRelativeDimension::Points([[dimension substringToIndex:([dimension length] - 2)] integerValue]); + } + return CKRelativeDimension::Auto(); +} + NSDictionary *flexboxRect(CKFlexboxSpacing spacing) { return @{ @"top": relativeDimension(spacing.top.dimension()),