From 740ae656bc78942ef2c421d2d668c47a72dfbc9b Mon Sep 17 00:00:00 2001 From: gabrieldonadel Date: Tue, 31 Jan 2023 10:58:24 -0800 Subject: [PATCH] feat: Add logical border block color properties (#35999) Summary: This PR implements logical border block color properties as requested on https://github.com/facebook/react-native/issues/34425. This implementation includes the addition of the following style properties - `borderBlockColor`, equivalent to `borderTopColor` and `borderBottomColor`. - `borderBlockEndColor`, equivalent to `borderBottomColor`. - `borderBlockStartColor`, equivalent to `borderTopColor`. ## Changelog [GENERAL] [ADDED] - Add logical border block color properties Pull Request resolved: https://github.com/facebook/react-native/pull/35999 Test Plan: 1. Open the RNTester app and navigate to the `View` page 2. Test the new style properties through the `Logical Border Color` section
Android iOS
Reviewed By: cipolleschi Differential Revision: D42849911 Pulled By: jacdebug fbshipit-source-id: 822cff5264689c42031d496105537032b5cd31ef --- .../View/ReactNativeStyleAttributes.js | 3 ++ .../Components/View/ViewNativeComponent.js | 9 +++++ Libraries/StyleSheet/StyleSheetTypes.d.ts | 3 ++ Libraries/StyleSheet/StyleSheetTypes.js | 3 ++ React/Views/RCTView.h | 7 ++++ React/Views/RCTView.m | 13 ++++++- React/Views/RCTViewManager.m | 3 ++ .../com/facebook/react/uimanager/Spacing.java | 24 ++++++++++-- .../facebook/react/uimanager/ViewProps.java | 12 ++++++ .../views/view/ReactMapBufferPropSetter.kt | 6 +++ .../view/ReactViewBackgroundDrawable.java | 38 +++++++++++++++++- .../react/views/view/ReactViewManager.java | 8 +++- .../renderer/components/view/primitives.h | 21 ++++++++-- .../components/view/propsConversions.h | 24 ++++++++++++ .../components/view/viewPropConversions.h | 9 ++++- ReactCommon/react/renderer/core/PropsMacros.h | 8 +++- .../rn-tester/js/examples/View/ViewExample.js | 39 +++++++++++++++++++ 17 files changed, 218 insertions(+), 12 deletions(-) diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 7408b96a461432..13d8db56a5fe67 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -117,6 +117,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { */ backfaceVisibility: true, backgroundColor: colorAttributes, + borderBlockColor: colorAttributes, + borderBlockEndColor: colorAttributes, + borderBlockStartColor: colorAttributes, borderBottomColor: colorAttributes, borderBottomEndRadius: true, borderBottomLeftRadius: true, diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index b60bc0a8d1efec..d8052fb9889b02 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/Libraries/Components/View/ViewNativeComponent.js @@ -85,6 +85,15 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = borderEndColor: { process: require('../../StyleSheet/processColor').default, }, + borderBlockColor: { + process: require('../../StyleSheet/processColor').default, + }, + borderBlockEndColor: { + process: require('../../StyleSheet/processColor').default, + }, + borderBlockStartColor: { + process: require('../../StyleSheet/processColor').default, + }, focusable: true, overflow: true, diff --git a/Libraries/StyleSheet/StyleSheetTypes.d.ts b/Libraries/StyleSheet/StyleSheetTypes.d.ts index f8ea56ae7989ff..f31224e7a62a0c 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -232,6 +232,9 @@ export interface TransformsStyle { export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { backfaceVisibility?: 'visible' | 'hidden' | undefined; backgroundColor?: ColorValue | undefined; + borderBlockColor?: ColorValue | undefined; + borderBlockEndColor?: ColorValue | undefined; + borderBlockStartColor?: ColorValue | undefined; borderBottomColor?: ColorValue | undefined; borderBottomEndRadius?: number | undefined; borderBottomLeftRadius?: number | undefined; diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index 44015f2b02b160..4fc70eed012233 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -698,6 +698,9 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ borderRightColor?: ____ColorValue_Internal, borderStartColor?: ____ColorValue_Internal, borderTopColor?: ____ColorValue_Internal, + borderBlockColor?: ____ColorValue_Internal, + borderBlockEndColor?: ____ColorValue_Internal, + borderBlockStartColor?: ____ColorValue_Internal, borderRadius?: number | AnimatedNode, borderBottomEndRadius?: number | AnimatedNode, borderBottomLeftRadius?: number | AnimatedNode, diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index adda5c1f016848..abb1966a199f0c 100644 --- a/React/Views/RCTView.h +++ b/React/Views/RCTView.h @@ -86,6 +86,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, strong) UIColor *borderStartColor; @property (nonatomic, strong) UIColor *borderEndColor; @property (nonatomic, strong) UIColor *borderColor; +@property (nonatomic, strong) UIColor *borderBlockColor; +@property (nonatomic, strong) UIColor *borderBlockEndColor; +@property (nonatomic, strong) UIColor *borderBlockStartColor; /** * Border widths. @@ -97,6 +100,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, assign) CGFloat borderStartWidth; @property (nonatomic, assign) CGFloat borderEndWidth; @property (nonatomic, assign) CGFloat borderWidth; +// TODO: Implement logical border width logic +@property (nonatomic, assign) CGFloat borderBlockWidth; +@property (nonatomic, assign) CGFloat borderBlockEndWidth; +@property (nonatomic, assign) CGFloat borderBlockStartWidth; /** * Border curve. diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index f9a38f31040f1b..6d7583395e3415 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -745,6 +745,17 @@ - (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCol UIColor *borderTopColor = _borderTopColor; UIColor *borderBottomColor = _borderBottomColor; + if (_borderBlockColor) { + borderTopColor = _borderBlockColor; + borderBottomColor = _borderBlockColor; + } + if (_borderBlockEndColor) { + borderBottomColor = _borderBlockEndColor; + } + if (_borderBlockStartColor) { + borderTopColor = _borderBlockStartColor; + } + #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 if (@available(iOS 13.0, *)) { borderColor = [borderColor resolvedColorWithTraitCollection:self.traitCollection]; @@ -924,7 +935,7 @@ -(void)setBorder##side##Color : (UIColor *)color \ } setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left) - setBorderColor(Start) setBorderColor(End) + setBorderColor(Start) setBorderColor(End) setBorderColor(Block) setBorderColor(BlockEnd) setBorderColor(BlockStart) #pragma mark - Border Width diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index e50b4c19d91a50..a866b6f748987d 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -358,6 +358,9 @@ - (RCTShadowView *)shadowView RCT_VIEW_BORDER_PROPERTY(Left) RCT_VIEW_BORDER_PROPERTY(Start) RCT_VIEW_BORDER_PROPERTY(End) +RCT_VIEW_BORDER_PROPERTY(Block) +RCT_VIEW_BORDER_PROPERTY(BlockEnd) +RCT_VIEW_BORDER_PROPERTY(BlockStart) #define RCT_VIEW_BORDER_RADIUS_PROPERTY(SIDE) \ RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Radius, CGFloat, RCTView) \ diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java index 36aeb9776da067..9ff37664d52b67 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java @@ -47,10 +47,18 @@ public class Spacing { * Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}. */ public static final int ALL = 8; + /** Spacing type that represents block directions (top, bottom). E.g. {@code marginBlock}. */ + public static final int BLOCK = 9; + /** Spacing type that represents the block end direction (bottom). E.g. {@code marginBlockEnd}. */ + public static final int BLOCK_END = 10; + /** + * Spacing type that represents the block start direction (top). E.g. {@code marginBlockStart}. + */ + public static final int BLOCK_START = 11; private static final int[] sFlagsMap = { 1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/ - 128, /*VERTICAL*/ 256, /*ALL*/ + 128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/ }; private final float[] mSpacing; @@ -96,7 +104,8 @@ public boolean set(int spacingType, float value) { mHasAliasesSet = (mValueFlags & sFlagsMap[ALL]) != 0 || (mValueFlags & sFlagsMap[VERTICAL]) != 0 - || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0; + || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0 + || (mValueFlags & sFlagsMap[BLOCK]) != 0; return true; } @@ -111,7 +120,13 @@ public boolean set(int spacingType, float value) { */ public float get(int spacingType) { float defaultValue = - (spacingType == START || spacingType == END ? YogaConstants.UNDEFINED : mDefaultValue); + (spacingType == START + || spacingType == END + || spacingType == BLOCK + || spacingType == BLOCK_END + || spacingType == BLOCK_START + ? YogaConstants.UNDEFINED + : mDefaultValue); if (mValueFlags == 0) { return defaultValue; @@ -174,6 +189,9 @@ private static float[] newFullSpacingArray() { YogaConstants.UNDEFINED, YogaConstants.UNDEFINED, YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, }; } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index 53cc9783421917..3f76fa7dd3d9b1 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -135,6 +135,9 @@ public class ViewProps { public static final String BORDER_RIGHT_COLOR = "borderRightColor"; public static final String BORDER_TOP_COLOR = "borderTopColor"; public static final String BORDER_BOTTOM_COLOR = "borderBottomColor"; + public static final String BORDER_BLOCK_COLOR = "borderBlockColor"; + public static final String BORDER_BLOCK_END_COLOR = "borderBlockEndColor"; + public static final String BORDER_BLOCK_START_COLOR = "borderBlockStartColor"; public static final String BORDER_TOP_START_RADIUS = "borderTopStartRadius"; public static final String BORDER_TOP_END_RADIUS = "borderTopEndRadius"; public static final String BORDER_BOTTOM_START_RADIUS = "borderBottomStartRadius"; @@ -299,6 +302,15 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) { case BORDER_BOTTOM_COLOR: return map.getType(BORDER_BOTTOM_COLOR) == ReadableType.Number && map.getInt(BORDER_BOTTOM_COLOR) == Color.TRANSPARENT; + case BORDER_BLOCK_COLOR: + return map.getType(BORDER_BLOCK_COLOR) == ReadableType.Number + && map.getInt(BORDER_BLOCK_COLOR) == Color.TRANSPARENT; + case BORDER_BLOCK_END_COLOR: + return map.getType(BORDER_BLOCK_END_COLOR) == ReadableType.Number + && map.getInt(BORDER_BLOCK_END_COLOR) == Color.TRANSPARENT; + case BORDER_BLOCK_START_COLOR: + return map.getType(BORDER_BLOCK_START_COLOR) == ReadableType.Number + && map.getInt(BORDER_BLOCK_START_COLOR) == Color.TRANSPARENT; case BORDER_WIDTH: return map.isNull(BORDER_WIDTH) || map.getDouble(BORDER_WIDTH) == 0d; case BORDER_LEFT_WIDTH: diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt index 100cf1c36d3d0e..a7effcdab1752e 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt @@ -87,6 +87,9 @@ object ReactMapBufferPropSetter { private const val EDGE_START = 4 private const val EDGE_END = 5 private const val EDGE_ALL = 6 + private const val EDGE_BLOCK = 7 + private const val EDGE_BLOCK_END = 8 + private const val EDGE_BLOCK_START = 9 private const val CORNER_TOP_LEFT = 0 private const val CORNER_TOP_RIGHT = 1 @@ -349,6 +352,9 @@ object ReactMapBufferPropSetter { EDGE_BOTTOM -> 4 EDGE_START -> 5 EDGE_END -> 6 + EDGE_BLOCK -> 7 + EDGE_BLOCK_END -> 8 + EDGE_BLOCK_START -> 9 else -> throw IllegalArgumentException("Unknown key for border color: $key") } val colorValue = entry.intValue diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java index 937abcc20bb392..eded03ee94dfb0 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java @@ -359,6 +359,21 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) { int colorRight = getBorderColor(Spacing.RIGHT); int colorBottom = getBorderColor(Spacing.BOTTOM); + int colorBlock = getBorderColor(Spacing.BLOCK); + int colorBlockStart = getBorderColor(Spacing.BLOCK_START); + int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); + + if (isBorderColorDefined(Spacing.BLOCK)) { + colorBottom = colorBlock; + colorTop = colorBlock; + } + if (isBorderColorDefined(Spacing.BLOCK_END)) { + colorBottom = colorBlockEnd; + } + if (isBorderColorDefined(Spacing.BLOCK_START)) { + colorTop = colorBlockStart; + } + if (borderWidth.top > 0 || borderWidth.bottom > 0 || borderWidth.left > 0 @@ -552,13 +567,19 @@ private void updatePath() { int colorRight = getBorderColor(Spacing.RIGHT); int colorBottom = getBorderColor(Spacing.BOTTOM); int borderColor = getBorderColor(Spacing.ALL); + int colorBlock = getBorderColor(Spacing.BLOCK); + int colorBlockStart = getBorderColor(Spacing.BLOCK_START); + int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); // Clip border ONLY if its color is non transparent if (Color.alpha(colorLeft) != 0 && Color.alpha(colorTop) != 0 && Color.alpha(colorRight) != 0 && Color.alpha(colorBottom) != 0 - && Color.alpha(borderColor) != 0) { + && Color.alpha(borderColor) != 0 + && Color.alpha(colorBlock) != 0 + && Color.alpha(colorBlockStart) != 0 + && Color.alpha(colorBlockEnd) != 0) { mInnerClipTempRectForBorderRadius.top += borderWidth.top; mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom; @@ -1128,6 +1149,21 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { int colorRight = getBorderColor(Spacing.RIGHT); int colorBottom = getBorderColor(Spacing.BOTTOM); + int colorBlock = getBorderColor(Spacing.BLOCK); + int colorBlockStart = getBorderColor(Spacing.BLOCK_START); + int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); + + if (isBorderColorDefined(Spacing.BLOCK)) { + colorBottom = colorBlock; + colorTop = colorBlock; + } + if (isBorderColorDefined(Spacing.BLOCK_END)) { + colorBottom = colorBlockEnd; + } + if (isBorderColorDefined(Spacing.BLOCK_START)) { + colorTop = colorBlockStart; + } + final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL; int colorStart = getBorderColor(Spacing.START); int colorEnd = getBorderColor(Spacing.END); diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java index 91cbdf7c3b741a..4bd81d72153b0b 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java @@ -47,6 +47,9 @@ public class ReactViewManager extends ReactClippingViewManager { Spacing.BOTTOM, Spacing.START, Spacing.END, + Spacing.BLOCK, + Spacing.BLOCK_END, + Spacing.BLOCK_START }; private static final int CMD_HOTSPOT_UPDATE = 1; private static final int CMD_SET_PRESSED = 2; @@ -238,7 +241,10 @@ public void setBorderWidth(ReactViewGroup view, int index, float width) { ViewProps.BORDER_TOP_COLOR, ViewProps.BORDER_BOTTOM_COLOR, ViewProps.BORDER_START_COLOR, - ViewProps.BORDER_END_COLOR + ViewProps.BORDER_END_COLOR, + ViewProps.BORDER_BLOCK_COLOR, + ViewProps.BORDER_BLOCK_END_COLOR, + ViewProps.BORDER_BLOCK_START_COLOR }, customType = "Color") public void setBorderColor(ReactViewGroup view, int index, Integer color) { diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h index 34ea20376f1df9..ec8a276d307db3 100644 --- a/ReactCommon/react/renderer/components/view/primitives.h +++ b/ReactCommon/react/renderer/components/view/primitives.h @@ -99,6 +99,9 @@ struct CascadedRectangleEdges { OptionalT horizontal{}; OptionalT vertical{}; OptionalT all{}; + OptionalT block{}; + OptionalT blockStart{}; + OptionalT blockEnd{}; Counterpart resolve(bool isRTL, T defaults) const { const auto leadingEdge = isRTL ? end : start; @@ -111,10 +114,14 @@ struct CascadedRectangleEdges { return { /* .left = */ left.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)), - /* .top = */ top.value_or(verticalOrAllOrDefault), + /* .top = */ + blockStart.value_or( + block.value_or(top.value_or(verticalOrAllOrDefault))), /* .right = */ right.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)), - /* .bottom = */ bottom.value_or(verticalOrAllOrDefault), + /* .bottom = */ + blockEnd.value_or( + block.value_or(bottom.value_or(verticalOrAllOrDefault))), }; } @@ -128,7 +135,10 @@ struct CascadedRectangleEdges { this->end, this->horizontal, this->vertical, - this->all) == + this->all, + this->block, + this->blockStart, + this->blockEnd) == std::tie( rhs.left, rhs.top, @@ -138,7 +148,10 @@ struct CascadedRectangleEdges { rhs.end, rhs.horizontal, rhs.vertical, - rhs.all); + rhs.all, + rhs.block, + rhs.blockStart, + rhs.blockEnd); } bool operator!=(const CascadedRectangleEdges &rhs) const { diff --git a/ReactCommon/react/renderer/components/view/propsConversions.h b/ReactCommon/react/renderer/components/view/propsConversions.h index 97fa6b6d7eeb02..ad7cc2f3a3488c 100644 --- a/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/ReactCommon/react/renderer/components/view/propsConversions.h @@ -515,6 +515,30 @@ static inline CascadedRectangleEdges convertRawProp( defaultValue.vertical, prefix, suffix); + result.block = convertRawProp( + context, + rawProps, + "Block", + sourceValue.block, + defaultValue.block, + prefix, + suffix); + result.blockEnd = convertRawProp( + context, + rawProps, + "BlockEnd", + sourceValue.blockEnd, + defaultValue.blockEnd, + prefix, + suffix); + result.blockStart = convertRawProp( + context, + rawProps, + "BlockStart", + sourceValue.blockStart, + defaultValue.blockStart, + prefix, + suffix); result.all = convertRawProp( context, rawProps, "", sourceValue.all, defaultValue.all, prefix, suffix); diff --git a/ReactCommon/react/renderer/components/view/viewPropConversions.h b/ReactCommon/react/renderer/components/view/viewPropConversions.h index fe253277752cb4..64a0469a9f7c8b 100644 --- a/ReactCommon/react/renderer/components/view/viewPropConversions.h +++ b/ReactCommon/react/renderer/components/view/viewPropConversions.h @@ -28,6 +28,9 @@ constexpr MapBuffer::Key EDGE_BOTTOM = 3; constexpr MapBuffer::Key EDGE_START = 4; constexpr MapBuffer::Key EDGE_END = 5; constexpr MapBuffer::Key EDGE_ALL = 6; +constexpr MapBuffer::Key EDGE_BLOCK = 7; +constexpr MapBuffer::Key EDGE_BLOCK_START = 8; +constexpr MapBuffer::Key EDGE_BLOCK_END = 9; constexpr MapBuffer::Key CORNER_TOP_LEFT = 0; constexpr MapBuffer::Key CORNER_TOP_RIGHT = 1; @@ -107,13 +110,17 @@ inline MapBuffer convertBorderColors(CascadedBorderColors const &colors) { template MapBuffer convertCascadedEdges(CascadedRectangleEdges const &edges) { - MapBufferBuilder builder(7); + MapBufferBuilder builder(10); putOptionalFloat(builder, EDGE_TOP, optionalFromValue(edges.top)); putOptionalFloat(builder, EDGE_RIGHT, optionalFromValue(edges.right)); putOptionalFloat(builder, EDGE_BOTTOM, optionalFromValue(edges.bottom)); putOptionalFloat(builder, EDGE_LEFT, optionalFromValue(edges.left)); putOptionalFloat(builder, EDGE_START, optionalFromValue(edges.start)); putOptionalFloat(builder, EDGE_END, optionalFromValue(edges.end)); + putOptionalFloat(builder, EDGE_BLOCK, optionalFromValue(edges.block)); + putOptionalFloat(builder, EDGE_BLOCK_END, optionalFromValue(edges.blockEnd)); + putOptionalFloat( + builder, EDGE_BLOCK_START, optionalFromValue(edges.blockStart)); putOptionalFloat(builder, EDGE_ALL, optionalFromValue(edges.all)); return builder.build(); } diff --git a/ReactCommon/react/renderer/core/PropsMacros.h b/ReactCommon/react/renderer/core/PropsMacros.h index 2aa75fd4e4216e..6fa0bd9a90ca48 100644 --- a/ReactCommon/react/renderer/core/PropsMacros.h +++ b/ReactCommon/react/renderer/core/PropsMacros.h @@ -99,7 +99,13 @@ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ struct, vertical, prefix "Vertical" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, all, prefix "" suffix, rawValue) + struct, all, prefix "" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ + struct, block, prefix "Block" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ + struct, blockEnd, prefix "BlockEnd" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ + struct, blockStart, prefix "BlockStart" suffix, rawValue) // Rebuild a type that contains multiple fields from a single field value #define REBUILD_FIELD_SWITCH_CASE( \ diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index de2e04acc1aec4..8602101cf521bd 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -738,4 +738,43 @@ exports.examples = [ ); }, }, + { + title: 'Logical Border Color', + render(): React.Node { + return ( + + + + borderBlockColor orange + + + + + borderBlockStartColor purple + borderBlockEndColor green + + + + ); + }, + }, ];