From e557fec131fa6a2e906bbfacfc9873b14e1d37c3 Mon Sep 17 00:00:00 2001 From: gabrieldonadel Date: Tue, 31 Jan 2023 01:10:33 -0300 Subject: [PATCH 1/5] feat: Add borderInlineColor implementation on iOS Paper --- .../View/ReactNativeStyleAttributes.js | 3 ++ .../Components/View/ViewNativeComponent.js | 9 ++++++ Libraries/StyleSheet/StyleSheetTypes.d.ts | 3 ++ Libraries/StyleSheet/StyleSheetTypes.js | 3 ++ React/Views/RCTView.h | 6 ++++ React/Views/RCTView.m | 12 +++++--- React/Views/RCTViewManager.m | 3 ++ .../components/view/propsConversions.h | 24 +++++++++++++++ .../components/view/viewPropConversions.h | 10 ++++++- ReactCommon/react/renderer/core/PropsMacros.h | 8 ++++- .../rn-tester/js/examples/View/ViewExample.js | 30 +++++++++++++++++++ 11 files changed, 105 insertions(+), 6 deletions(-) diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 13d8db56a5fe67..6f65c12ed4e177 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -120,6 +120,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { borderBlockColor: colorAttributes, borderBlockEndColor: colorAttributes, borderBlockStartColor: colorAttributes, + borderInlineColor: colorAttributes, + borderInlineEndColor: colorAttributes, + borderInlineStartColor: colorAttributes, borderBottomColor: colorAttributes, borderBottomEndRadius: true, borderBottomLeftRadius: true, diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index d8052fb9889b02..83d7ef39a3be1c 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/Libraries/Components/View/ViewNativeComponent.js @@ -94,6 +94,15 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = borderBlockStartColor: { process: require('../../StyleSheet/processColor').default, }, + borderInlineColor: { + process: require('../../StyleSheet/processColor').default, + }, + borderInlineEndColor: { + process: require('../../StyleSheet/processColor').default, + }, + borderInlineStartColor: { + process: require('../../StyleSheet/processColor').default, + }, focusable: true, overflow: true, diff --git a/Libraries/StyleSheet/StyleSheetTypes.d.ts b/Libraries/StyleSheet/StyleSheetTypes.d.ts index f31224e7a62a0c..58274507a69e2a 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -235,6 +235,9 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { borderBlockColor?: ColorValue | undefined; borderBlockEndColor?: ColorValue | undefined; borderBlockStartColor?: ColorValue | undefined; + borderInlineColor?: ColorValue | undefined; + borderInlineEndColor?: ColorValue | undefined; + borderInlineStartColor?: ColorValue | undefined; borderBottomColor?: ColorValue | undefined; borderBottomEndRadius?: number | undefined; borderBottomLeftRadius?: number | undefined; diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index 4fc70eed012233..53cb283373b666 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -701,6 +701,9 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ borderBlockColor?: ____ColorValue_Internal, borderBlockEndColor?: ____ColorValue_Internal, borderBlockStartColor?: ____ColorValue_Internal, + borderInlineColor?: ____ColorValue_Internal, + borderInlineEndColor?: ____ColorValue_Internal, + borderInlineStartColor?: ____ColorValue_Internal, borderRadius?: number | AnimatedNode, borderBottomEndRadius?: number | AnimatedNode, borderBottomLeftRadius?: number | AnimatedNode, diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index abb1966a199f0c..372cf643c82fb3 100644 --- a/React/Views/RCTView.h +++ b/React/Views/RCTView.h @@ -89,6 +89,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, strong) UIColor *borderBlockColor; @property (nonatomic, strong) UIColor *borderBlockEndColor; @property (nonatomic, strong) UIColor *borderBlockStartColor; +@property (nonatomic, strong) UIColor *borderInlineColor; +@property (nonatomic, strong) UIColor *borderInlineEndColor; +@property (nonatomic, strong) UIColor *borderInlineStartColor; /** * Border widths. @@ -104,6 +107,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, assign) CGFloat borderBlockWidth; @property (nonatomic, assign) CGFloat borderBlockEndWidth; @property (nonatomic, assign) CGFloat borderBlockStartWidth; +@property (nonatomic, assign) CGFloat borderInlineWidth; +@property (nonatomic, assign) CGFloat borderInlineEndWidth; +@property (nonatomic, assign) CGFloat borderInlineStartWidth; /** * Border curve. diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index 6d7583395e3415..96c3ed37c40adc 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -731,14 +731,17 @@ - (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCol UIColor *directionAwareBorderRightColor = nil; if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) { - UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor; - UIColor *borderEndColor = _borderEndColor ?: _borderRightColor; + UIColor *borderStartColor = _borderInlineStartColor ?: _borderInlineColor ?: _borderStartColor ?: _borderLeftColor; + UIColor *borderEndColor = _borderInlineEndColor ?: _borderInlineColor ?: _borderEndColor ?: _borderRightColor; directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor; directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor; } else { - directionAwareBorderLeftColor = (isRTL ? _borderEndColor : _borderStartColor) ?: _borderLeftColor; - directionAwareBorderRightColor = (isRTL ? _borderStartColor : _borderEndColor) ?: _borderRightColor; + UIColor *borderStartColor = _borderInlineStartColor ?: _borderInlineColor ?: _borderStartColor; + UIColor *borderEndColor = _borderInlineEndColor ?: _borderInlineColor ?: _borderEndColor; + + directionAwareBorderLeftColor = (isRTL ? borderEndColor : borderStartColor) ?: _borderLeftColor; + directionAwareBorderRightColor = (isRTL ? borderStartColor : borderEndColor) ?: _borderRightColor; } UIColor *borderColor = _borderColor; @@ -936,6 +939,7 @@ -(void)setBorder##side##Color : (UIColor *)color \ setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left) setBorderColor(Start) setBorderColor(End) setBorderColor(Block) setBorderColor(BlockEnd) setBorderColor(BlockStart) + setBorderColor(Inline) setBorderColor(InlineEnd) setBorderColor(InlineStart) #pragma mark - Border Width diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index a866b6f748987d..9491a85e2e7f22 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -361,6 +361,9 @@ - (RCTShadowView *)shadowView RCT_VIEW_BORDER_PROPERTY(Block) RCT_VIEW_BORDER_PROPERTY(BlockEnd) RCT_VIEW_BORDER_PROPERTY(BlockStart) +RCT_VIEW_BORDER_PROPERTY(Inline) +RCT_VIEW_BORDER_PROPERTY(InlineEnd) +RCT_VIEW_BORDER_PROPERTY(InlineStart) #define RCT_VIEW_BORDER_RADIUS_PROPERTY(SIDE) \ RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Radius, CGFloat, RCTView) \ diff --git a/ReactCommon/react/renderer/components/view/propsConversions.h b/ReactCommon/react/renderer/components/view/propsConversions.h index ad7cc2f3a3488c..ed8294e4a69e99 100644 --- a/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/ReactCommon/react/renderer/components/view/propsConversions.h @@ -539,6 +539,30 @@ static inline CascadedRectangleEdges convertRawProp( defaultValue.blockStart, prefix, suffix); + result.inline = convertRawProp( + context, + rawProps, + "Inline", + sourceValue.inline, + defaultValue.inline, + prefix, + suffix); + result.inlineEnd = convertRawProp( + context, + rawProps, + "InlineEnd", + sourceValue.inlineEnd, + defaultValue.inlineEnd, + prefix, + suffix); + result.inlineStart = convertRawProp( + context, + rawProps, + "InlineStart", + sourceValue.inlineStart, + defaultValue.inlineStart, + 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 64a0469a9f7c8b..9de70faac57e8d 100644 --- a/ReactCommon/react/renderer/components/view/viewPropConversions.h +++ b/ReactCommon/react/renderer/components/view/viewPropConversions.h @@ -31,6 +31,9 @@ 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 EDGE_INLINE = 10; +constexpr MapBuffer::Key EDGE_INLINE_START = 11; +constexpr MapBuffer::Key EDGE_INLINE_END = 12; constexpr MapBuffer::Key CORNER_TOP_LEFT = 0; constexpr MapBuffer::Key CORNER_TOP_RIGHT = 1; @@ -110,7 +113,7 @@ inline MapBuffer convertBorderColors(CascadedBorderColors const &colors) { template MapBuffer convertCascadedEdges(CascadedRectangleEdges const &edges) { - MapBufferBuilder builder(10); + MapBufferBuilder builder(13); putOptionalFloat(builder, EDGE_TOP, optionalFromValue(edges.top)); putOptionalFloat(builder, EDGE_RIGHT, optionalFromValue(edges.right)); putOptionalFloat(builder, EDGE_BOTTOM, optionalFromValue(edges.bottom)); @@ -121,6 +124,11 @@ MapBuffer convertCascadedEdges(CascadedRectangleEdges const &edges) { putOptionalFloat(builder, EDGE_BLOCK_END, optionalFromValue(edges.blockEnd)); putOptionalFloat( builder, EDGE_BLOCK_START, optionalFromValue(edges.blockStart)); + putOptionalFloat(builder, EDGE_INLINE, optionalFromValue(edges.inline)); + putOptionalFloat( + builder, EDGE_INLINE_END, optionalFromValue(edges.inlineEnd)); + putOptionalFloat( + builder, EDGE_INLINE_START, optionalFromValue(edges.inlineStart)); 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 6fa0bd9a90ca48..1ed3be9cd06316 100644 --- a/ReactCommon/react/renderer/core/PropsMacros.h +++ b/ReactCommon/react/renderer/core/PropsMacros.h @@ -105,7 +105,13 @@ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ struct, blockEnd, prefix "BlockEnd" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, blockStart, prefix "BlockStart" suffix, rawValue) + struct, blockStart, prefix "BlockStart" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ + struct, inline, prefix "Inline" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ + struct, inlineEnd, prefix "InlineEnd" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ + struct, inlineStart, prefix "InlineStart" 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 8602101cf521bd..6d4fcdd03da7b5 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -773,6 +773,36 @@ exports.examples = [ borderBlockEndColor green + + + borderInlineColor orange + + + + + borderInlineStartColor purple + borderInlineEndColor green + + ); }, From 9554a1a4d4512e612805fb745227de765b260459 Mon Sep 17 00:00:00 2001 From: gabrieldonadel Date: Thu, 2 Feb 2023 23:09:11 -0300 Subject: [PATCH 2/5] Add Edge suffix to CascadedRectangleEdges properties --- .../view/YogaLayoutableShadowNode.cpp | 24 ++--- .../renderer/components/view/primitives.h | 95 ++++++++++--------- .../components/view/propsConversions.h | 94 +++++++++--------- ReactCommon/react/renderer/core/PropsMacros.h | 30 +++--- 4 files changed, 126 insertions(+), 117 deletions(-) diff --git a/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp index 306fd68cd108aa..218d57d9987f43 100644 --- a/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp +++ b/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp @@ -793,24 +793,24 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps( props.borderRadii.bottomRight.reset(); } - if (props.borderColors.left.has_value()) { - props.borderColors.start = props.borderColors.left; - props.borderColors.left.reset(); + if (props.borderColors.leftEdge.has_value()) { + props.borderColors.startEdge = props.borderColors.leftEdge; + props.borderColors.leftEdge.reset(); } - if (props.borderColors.right.has_value()) { - props.borderColors.end = props.borderColors.right; - props.borderColors.right.reset(); + if (props.borderColors.rightEdge.has_value()) { + props.borderColors.endEdge = props.borderColors.rightEdge; + props.borderColors.rightEdge.reset(); } - if (props.borderStyles.left.has_value()) { - props.borderStyles.start = props.borderStyles.left; - props.borderStyles.left.reset(); + if (props.borderStyles.leftEdge.has_value()) { + props.borderStyles.startEdge = props.borderStyles.leftEdge; + props.borderStyles.leftEdge.reset(); } - if (props.borderStyles.right.has_value()) { - props.borderStyles.end = props.borderStyles.right; - props.borderStyles.right.reset(); + if (props.borderStyles.rightEdge.has_value()) { + props.borderStyles.endEdge = props.borderStyles.rightEdge; + props.borderStyles.rightEdge.reset(); } YGStyle::Edges const &border = props.yogaStyle.border(); diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h index ec8a276d307db3..22ce78eac0070e 100644 --- a/ReactCommon/react/renderer/components/view/primitives.h +++ b/ReactCommon/react/renderer/components/view/primitives.h @@ -90,68 +90,71 @@ struct CascadedRectangleEdges { using Counterpart = RectangleEdges; using OptionalT = std::optional; - OptionalT left{}; - OptionalT top{}; - OptionalT right{}; - OptionalT bottom{}; - OptionalT start{}; - OptionalT end{}; - OptionalT horizontal{}; - OptionalT vertical{}; - OptionalT all{}; - OptionalT block{}; - OptionalT blockStart{}; - OptionalT blockEnd{}; + OptionalT leftEdge{}; + OptionalT topEdge{}; + OptionalT rightEdge{}; + OptionalT bottomEdge{}; + OptionalT startEdge{}; + OptionalT endEdge{}; + OptionalT horizontalEdges{}; + OptionalT verticalEdges{}; + OptionalT allEdges{}; + OptionalT blockEdges{}; + OptionalT blockStartEdge{}; + OptionalT blockEndEdge{}; + OptionalT inlineEdges{}; + OptionalT inlineStartEdge{}; + OptionalT inlineEndEdge{}; Counterpart resolve(bool isRTL, T defaults) const { - const auto leadingEdge = isRTL ? end : start; - const auto trailingEdge = isRTL ? start : end; + const auto leadingEdge = isRTL ? endEdge : startEdge; + const auto trailingEdge = isRTL ? startEdge : endEdge; const auto horizontalOrAllOrDefault = - horizontal.value_or(all.value_or(defaults)); + horizontalEdges.value_or(allEdges.value_or(defaults)); const auto verticalOrAllOrDefault = - vertical.value_or(all.value_or(defaults)); + verticalEdges.value_or(allEdges.value_or(defaults)); return { /* .left = */ - left.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)), + leftEdge.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)), /* .top = */ - blockStart.value_or( - block.value_or(top.value_or(verticalOrAllOrDefault))), + blockStartEdge.value_or( + blockEdges.value_or(topEdge.value_or(verticalOrAllOrDefault))), /* .right = */ - right.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)), + rightEdge.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)), /* .bottom = */ - blockEnd.value_or( - block.value_or(bottom.value_or(verticalOrAllOrDefault))), + blockEndEdge.value_or( + blockEdges.value_or(bottomEdge.value_or(verticalOrAllOrDefault))), }; } bool operator==(const CascadedRectangleEdges &rhs) const { return std::tie( - this->left, - this->top, - this->right, - this->bottom, - this->start, - this->end, - this->horizontal, - this->vertical, - this->all, - this->block, - this->blockStart, - this->blockEnd) == + this->leftEdge, + this->topEdge, + this->rightEdge, + this->bottomEdge, + this->startEdge, + this->endEdge, + this->horizontalEdges, + this->verticalEdges, + this->allEdges, + this->blockEdges, + this->blockStartEdge, + this->blockEndEdge) == std::tie( - rhs.left, - rhs.top, - rhs.right, - rhs.bottom, - rhs.start, - rhs.end, - rhs.horizontal, - rhs.vertical, - rhs.all, - rhs.block, - rhs.blockStart, - rhs.blockEnd); + rhs.leftEdge, + rhs.topEdge, + rhs.rightEdge, + rhs.bottomEdge, + rhs.startEdge, + rhs.endEdge, + rhs.horizontalEdges, + rhs.verticalEdges, + rhs.allEdges, + rhs.blockEdges, + rhs.blockStartEdge, + rhs.blockEndEdge); } 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 ed8294e4a69e99..7443eeeb5eb06e 100644 --- a/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/ReactCommon/react/renderer/components/view/propsConversions.h @@ -450,122 +450,128 @@ static inline CascadedRectangleEdges convertRawProp( CascadedRectangleEdges const &defaultValue) { CascadedRectangleEdges result; - result.left = convertRawProp( + result.leftEdge = convertRawProp( context, rawProps, "Left", - sourceValue.left, - defaultValue.left, + sourceValue.leftEdge, + defaultValue.leftEdge, prefix, suffix); - result.right = convertRawProp( + result.rightEdge = convertRawProp( context, rawProps, "Right", - sourceValue.right, - defaultValue.right, + sourceValue.rightEdge, + defaultValue.rightEdge, prefix, suffix); - result.top = convertRawProp( + result.topEdge = convertRawProp( context, rawProps, "Top", - sourceValue.top, - defaultValue.top, + sourceValue.topEdge, + defaultValue.topEdge, prefix, suffix); - result.bottom = convertRawProp( + result.bottomEdge = convertRawProp( context, rawProps, "Bottom", - sourceValue.bottom, - defaultValue.bottom, + sourceValue.bottomEdge, + defaultValue.bottomEdge, prefix, suffix); - result.start = convertRawProp( + result.startEdge = convertRawProp( context, rawProps, "Start", - sourceValue.start, - defaultValue.start, + sourceValue.startEdge, + defaultValue.startEdge, prefix, suffix); - result.end = convertRawProp( + result.endEdge = convertRawProp( context, rawProps, "End", - sourceValue.end, - defaultValue.end, + sourceValue.endEdge, + defaultValue.endEdge, prefix, suffix); - result.horizontal = convertRawProp( + result.horizontalEdges = convertRawProp( context, rawProps, "Horizontal", - sourceValue.horizontal, - defaultValue.horizontal, + sourceValue.horizontalEdges, + defaultValue.horizontalEdges, prefix, suffix); - result.vertical = convertRawProp( + result.verticalEdges = convertRawProp( context, rawProps, "Vertical", - sourceValue.vertical, - defaultValue.vertical, + sourceValue.verticalEdges, + defaultValue.verticalEdges, prefix, suffix); - result.block = convertRawProp( + result.blockEdges = convertRawProp( context, rawProps, "Block", - sourceValue.block, - defaultValue.block, + sourceValue.blockEdges, + defaultValue.blockEdges, prefix, suffix); - result.blockEnd = convertRawProp( + result.blockEndEdge = convertRawProp( context, rawProps, "BlockEnd", - sourceValue.blockEnd, - defaultValue.blockEnd, + sourceValue.blockEndEdge, + defaultValue.blockEndEdge, prefix, suffix); - result.blockStart = convertRawProp( + result.blockStartEdge = convertRawProp( context, rawProps, "BlockStart", - sourceValue.blockStart, - defaultValue.blockStart, + sourceValue.blockStartEdge, + defaultValue.blockStartEdge, prefix, suffix); - result.inline = convertRawProp( + result.inlineEdges = convertRawProp( context, rawProps, "Inline", - sourceValue.inline, - defaultValue.inline, + sourceValue.inlineEdges, + defaultValue.inlineEdges, prefix, suffix); - result.inlineEnd = convertRawProp( + result.inlineEndEdge = convertRawProp( context, rawProps, "InlineEnd", - sourceValue.inlineEnd, - defaultValue.inlineEnd, + sourceValue.inlineEndEdge, + defaultValue.inlineEndEdge, prefix, suffix); - result.inlineStart = convertRawProp( + result.inlineStartEdge = convertRawProp( context, rawProps, "InlineStart", - sourceValue.inlineStart, - defaultValue.inlineStart, + sourceValue.inlineStartEdge, + defaultValue.inlineStartEdge, prefix, suffix); - result.all = convertRawProp( - context, rawProps, "", sourceValue.all, defaultValue.all, prefix, suffix); + result.allEdges = convertRawProp( + context, + rawProps, + "", + sourceValue.allEdges, + defaultValue.allEdges, + prefix, + suffix); return result; } diff --git a/ReactCommon/react/renderer/core/PropsMacros.h b/ReactCommon/react/renderer/core/PropsMacros.h index 1ed3be9cd06316..b65a12717d6a5b 100644 --- a/ReactCommon/react/renderer/core/PropsMacros.h +++ b/ReactCommon/react/renderer/core/PropsMacros.h @@ -83,35 +83,35 @@ #define SET_CASCADED_RECTANGLE_EDGES(struct, prefix, suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, left, prefix "Left" suffix, rawValue) \ + struct, leftEdge, prefix "Left" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, right, prefix "Right" suffix, rawValue) \ + struct, rightEdge, prefix "Right" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, top, prefix "Top" suffix, rawValue) \ + struct, topEdge, prefix "Top" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, bottom, prefix "Bottom" suffix, rawValue) \ + struct, bottomEdge, prefix "Bottom" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, start, prefix "Start" suffix, rawValue) \ + struct, startEdge, prefix "Start" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, end, prefix "End" suffix, rawValue) \ + struct, endEdge, prefix "End" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, horizontal, prefix "Horizontal" suffix, rawValue) \ + struct, horizontalEdges, prefix "Horizontal" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, vertical, prefix "Vertical" suffix, rawValue) \ + struct, verticalEdges, prefix "Vertical" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, all, prefix "" suffix, rawValue) \ + struct, allEdges, prefix "" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, block, prefix "Block" suffix, rawValue) \ + struct, blockEdges, prefix "Block" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, blockEnd, prefix "BlockEnd" suffix, rawValue) \ + struct, blockEndEdge, prefix "BlockEnd" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, blockStart, prefix "BlockStart" suffix, rawValue) \ + struct, blockStartEdge, prefix "BlockStart" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, inline, prefix "Inline" suffix, rawValue) \ + struct, inlineEdges, prefix "Inline" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, inlineEnd, prefix "InlineEnd" suffix, rawValue) \ + struct, inlineEndEdge, prefix "InlineEnd" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, inlineStart, prefix "InlineStart" suffix, rawValue) + struct, inlineStartEdge, prefix "InlineStart" suffix, rawValue) // Rebuild a type that contains multiple fields from a single field value #define REBUILD_FIELD_SWITCH_CASE( \ From efa5c902b97afd16035a70d08a1104a90d9d0a69 Mon Sep 17 00:00:00 2001 From: gabrieldonadel Date: Thu, 2 Feb 2023 23:28:17 -0300 Subject: [PATCH 3/5] Add borderInlineColor implementation on iOS Fabric --- .../renderer/components/view/primitives.h | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h index 22ce78eac0070e..26835615d6faf3 100644 --- a/ReactCommon/react/renderer/components/view/primitives.h +++ b/ReactCommon/react/renderer/components/view/primitives.h @@ -107,6 +107,9 @@ struct CascadedRectangleEdges { OptionalT inlineEndEdge{}; Counterpart resolve(bool isRTL, T defaults) const { + const auto inlineLeadingEdge = isRTL ? inlineEndEdge : inlineStartEdge; + const auto inlineTrailingEdge = isRTL ? inlineStartEdge : inlineEndEdge; + const auto leadingEdge = isRTL ? endEdge : startEdge; const auto trailingEdge = isRTL ? startEdge : endEdge; const auto horizontalOrAllOrDefault = @@ -116,12 +119,14 @@ struct CascadedRectangleEdges { return { /* .left = */ - leftEdge.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)), + leftEdge.value_or(inlineLeadingEdge.value_or(leadingEdge.value_or( + inlineEdges.value_or(horizontalOrAllOrDefault)))), /* .top = */ blockStartEdge.value_or( blockEdges.value_or(topEdge.value_or(verticalOrAllOrDefault))), /* .right = */ - rightEdge.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)), + rightEdge.value_or(inlineTrailingEdge.value_or(trailingEdge.value_or( + inlineEdges.value_or(horizontalOrAllOrDefault)))), /* .bottom = */ blockEndEdge.value_or( blockEdges.value_or(bottomEdge.value_or(verticalOrAllOrDefault))), @@ -141,7 +146,10 @@ struct CascadedRectangleEdges { this->allEdges, this->blockEdges, this->blockStartEdge, - this->blockEndEdge) == + this->blockEndEdge, + this->inlineEdges, + this->inlineStartEdge, + this->inlineEndEdge) == std::tie( rhs.leftEdge, rhs.topEdge, @@ -154,7 +162,10 @@ struct CascadedRectangleEdges { rhs.allEdges, rhs.blockEdges, rhs.blockStartEdge, - rhs.blockEndEdge); + rhs.blockEndEdge, + rhs.inlineEdges, + rhs.inlineStartEdge, + rhs.inlineEndEdge); } bool operator!=(const CascadedRectangleEdges &rhs) const { From 6e4263ff48b3681ba8de88ddf2313f42b99b1a7d Mon Sep 17 00:00:00 2001 From: gabrieldonadel Date: Fri, 3 Feb 2023 01:46:24 -0300 Subject: [PATCH 4/5] feat: Add borderBlockColor implementation on Android --- .../com/facebook/react/uimanager/Spacing.java | 22 ++++- .../facebook/react/uimanager/ViewProps.java | 12 +++ .../views/view/ReactMapBufferPropSetter.kt | 6 ++ .../view/ReactViewBackgroundDrawable.java | 93 ++++++++++++++++--- .../react/views/view/ReactViewManager.java | 10 +- .../components/view/viewPropConversions.h | 41 ++++---- 6 files changed, 146 insertions(+), 38 deletions(-) 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 9ff37664d52b67..48b6b57958024b 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java @@ -55,10 +55,23 @@ public class Spacing { * Spacing type that represents the block start direction (top). E.g. {@code marginBlockStart}. */ public static final int BLOCK_START = 11; + /** Spacing type that represents inline directions (left, right). E.g. {@code marginInline}. */ + public static final int INLINE = 12; + /** + * Spacing type that represents the inline end direction (right in left-to-right, left in + * right-to-left). E.g. {@code marginInlineEnd}. + */ + public static final int INLINE_END = 13; + /** + * Spacing type that represents the inline start direction (left in left-to-right, right in + * right-to-left). E.g. {@code marginInlineStart}. + */ + public static final int INLINE_START = 14; private static final int[] sFlagsMap = { 1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/ 128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/ + 4096, /*INLINE*/ 8192, /*INLINE_END*/ 16384, /*INLINE_START*/ }; private final float[] mSpacing; @@ -105,7 +118,8 @@ public boolean set(int spacingType, float value) { (mValueFlags & sFlagsMap[ALL]) != 0 || (mValueFlags & sFlagsMap[VERTICAL]) != 0 || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0 - || (mValueFlags & sFlagsMap[BLOCK]) != 0; + || (mValueFlags & sFlagsMap[BLOCK]) != 0 + || (mValueFlags & sFlagsMap[INLINE]) != 0; return true; } @@ -125,6 +139,9 @@ public float get(int spacingType) { || spacingType == BLOCK || spacingType == BLOCK_END || spacingType == BLOCK_START + || spacingType == INLINE + || spacingType == INLINE_END + || spacingType == INLINE_START ? YogaConstants.UNDEFINED : mDefaultValue); @@ -192,6 +209,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 3f76fa7dd3d9b1..81a51f4ad8e3f4 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -138,6 +138,9 @@ public class ViewProps { 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_INLINE_COLOR = "borderInlineColor"; + public static final String BORDER_INLINE_END_COLOR = "borderInlineEndColor"; + public static final String BORDER_INLINE_START_COLOR = "borderInlineStartColor"; 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"; @@ -311,6 +314,15 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) { case BORDER_BLOCK_START_COLOR: return map.getType(BORDER_BLOCK_START_COLOR) == ReadableType.Number && map.getInt(BORDER_BLOCK_START_COLOR) == Color.TRANSPARENT; + case BORDER_INLINE_COLOR: + return map.getType(BORDER_INLINE_COLOR) == ReadableType.Number + && map.getInt(BORDER_INLINE_COLOR) == Color.TRANSPARENT; + case BORDER_INLINE_END_COLOR: + return map.getType(BORDER_INLINE_END_COLOR) == ReadableType.Number + && map.getInt(BORDER_INLINE_END_COLOR) == Color.TRANSPARENT; + case BORDER_INLINE_START_COLOR: + return map.getType(BORDER_INLINE_START_COLOR) == ReadableType.Number + && map.getInt(BORDER_INLINE_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 a7effcdab1752e..836cd0a2072b7b 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 @@ -90,6 +90,9 @@ object ReactMapBufferPropSetter { private const val EDGE_BLOCK = 7 private const val EDGE_BLOCK_END = 8 private const val EDGE_BLOCK_START = 9 + private const val EDGE_INLINE = 10 + private const val EDGE_INLINE_END = 11 + private const val EDGE_INLINE_START = 12 private const val CORNER_TOP_LEFT = 0 private const val CORNER_TOP_RIGHT = 1 @@ -355,6 +358,9 @@ object ReactMapBufferPropSetter { EDGE_BLOCK -> 7 EDGE_BLOCK_END -> 8 EDGE_BLOCK_START -> 9 + EDGE_INLINE -> 10 + EDGE_INLINE_END -> 11 + EDGE_INLINE_START -> 12 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 eded03ee94dfb0..c5c73d81414e1c 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 @@ -408,6 +408,13 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) { int colorStart = getBorderColor(Spacing.START); int colorEnd = getBorderColor(Spacing.END); + final boolean isColorStartDefined = isBorderColorDefined(Spacing.START); + final boolean isColorEndDefined = isBorderColorDefined(Spacing.END); + final boolean isDirectionAwareColorLeftDefined = + isRTL ? isColorEndDefined : isColorStartDefined; + final boolean isDirectionAwareColorRightDefined = + isRTL ? isColorStartDefined : isColorEndDefined; + if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) { if (!isBorderColorDefined(Spacing.START)) { colorStart = colorLeft; @@ -426,13 +433,6 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) { final int directionAwareColorLeft = isRTL ? colorEnd : colorStart; final int directionAwareColorRight = isRTL ? colorStart : colorEnd; - final boolean isColorStartDefined = isBorderColorDefined(Spacing.START); - final boolean isColorEndDefined = isBorderColorDefined(Spacing.END); - final boolean isDirectionAwareColorLeftDefined = - isRTL ? isColorEndDefined : isColorStartDefined; - final boolean isDirectionAwareColorRightDefined = - isRTL ? isColorStartDefined : isColorEndDefined; - if (isDirectionAwareColorLeftDefined) { colorLeft = directionAwareColorLeft; } @@ -442,6 +442,35 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) { } } + // colorInlineStart and colorInlineEnd have precedence over colorEnd and colorStart values + int colorInline = getBorderColor(Spacing.INLINE); + int colorInlineStart = getBorderColor(Spacing.INLINE_START); + int colorInlineEnd = getBorderColor(Spacing.INLINE_END); + final int directionAwareInlineColorLeft = isRTL ? colorInlineEnd : colorInlineStart; + final int directionAwareInlineColorRight = isRTL ? colorInlineStart : colorInlineEnd; + + final boolean isColorInlineDefined = isBorderColorDefined(Spacing.INLINE); + final boolean isColorInlineStartDefined = isBorderColorDefined(Spacing.INLINE_START); + final boolean isColorInlineEndDefined = isBorderColorDefined(Spacing.INLINE_END); + + final boolean isDirectionAwareColorInlineLeftDefined = + isRTL ? isColorInlineEndDefined : isColorInlineStartDefined; + final boolean isDirectionAwareColorInlineRightDefined = + isRTL ? isColorInlineStartDefined : isColorInlineEndDefined; + + if(isDirectionAwareColorInlineLeftDefined){ + colorLeft = directionAwareInlineColorLeft; + }else if(!isDirectionAwareColorLeftDefined && isColorInlineDefined){ + colorLeft = colorInline; + } + + if(isDirectionAwareColorInlineRightDefined){ + colorRight = directionAwareInlineColorRight; + }else if(!isDirectionAwareColorRightDefined && isColorInlineDefined){ + colorRight = colorInline; + } + + final float left = mOuterClipTempRectForBorderRadius.left; final float right = mOuterClipTempRectForBorderRadius.right; final float top = mOuterClipTempRectForBorderRadius.top; @@ -570,6 +599,9 @@ private void updatePath() { int colorBlock = getBorderColor(Spacing.BLOCK); int colorBlockStart = getBorderColor(Spacing.BLOCK_START); int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); + int colorInline = getBorderColor(Spacing.INLINE); + int colorInlineStart = getBorderColor(Spacing.INLINE_START); + int colorInlineEnd = getBorderColor(Spacing.INLINE_END); // Clip border ONLY if its color is non transparent if (Color.alpha(colorLeft) != 0 @@ -579,7 +611,10 @@ private void updatePath() { && Color.alpha(borderColor) != 0 && Color.alpha(colorBlock) != 0 && Color.alpha(colorBlockStart) != 0 - && Color.alpha(colorBlockEnd) != 0) { + && Color.alpha(colorBlockEnd) != 0 + && Color.alpha(colorInline) != 0 + && Color.alpha(colorInlineStart) != 0 + && Color.alpha(colorInlineEnd) != 0) { mInnerClipTempRectForBorderRadius.top += borderWidth.top; mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom; @@ -1168,6 +1203,13 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { int colorStart = getBorderColor(Spacing.START); int colorEnd = getBorderColor(Spacing.END); + final boolean isColorStartDefined = isBorderColorDefined(Spacing.START); + final boolean isColorEndDefined = isBorderColorDefined(Spacing.END); + final boolean isDirectionAwareColorLeftDefined = + isRTL ? isColorEndDefined : isColorStartDefined; + final boolean isDirectionAwareColorRightDefined = + isRTL ? isColorStartDefined : isColorEndDefined; + if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) { if (!isBorderColorDefined(Spacing.START)) { colorStart = colorLeft; @@ -1186,13 +1228,6 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { final int directionAwareColorLeft = isRTL ? colorEnd : colorStart; final int directionAwareColorRight = isRTL ? colorStart : colorEnd; - final boolean isColorStartDefined = isBorderColorDefined(Spacing.START); - final boolean isColorEndDefined = isBorderColorDefined(Spacing.END); - final boolean isDirectionAwareColorLeftDefined = - isRTL ? isColorEndDefined : isColorStartDefined; - final boolean isDirectionAwareColorRightDefined = - isRTL ? isColorStartDefined : isColorEndDefined; - if (isDirectionAwareColorLeftDefined) { colorLeft = directionAwareColorLeft; } @@ -1202,6 +1237,34 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { } } + // colorInlineStart and colorInlineEnd have precedence over colorEnd and colorStart values + int colorInline = getBorderColor(Spacing.INLINE); + int colorInlineStart = getBorderColor(Spacing.INLINE_START); + int colorInlineEnd = getBorderColor(Spacing.INLINE_END); + final int directionAwareInlineColorLeft = isRTL ? colorInlineEnd : colorInlineStart; + final int directionAwareInlineColorRight = isRTL ? colorInlineStart : colorInlineEnd; + + final boolean isColorInlineDefined = isBorderColorDefined(Spacing.INLINE); + final boolean isColorInlineStartDefined = isBorderColorDefined(Spacing.INLINE_START); + final boolean isColorInlineEndDefined = isBorderColorDefined(Spacing.INLINE_END); + + final boolean isDirectionAwareColorInlineLeftDefined = + isRTL ? isColorInlineEndDefined : isColorInlineStartDefined; + final boolean isDirectionAwareColorInlineRightDefined = + isRTL ? isColorInlineStartDefined : isColorInlineEndDefined; + + if(isDirectionAwareColorInlineLeftDefined){ + colorLeft = directionAwareInlineColorLeft; + }else if(!isDirectionAwareColorLeftDefined && isColorInlineDefined){ + colorLeft = colorInline; + } + + if(isDirectionAwareColorInlineRightDefined){ + colorRight = directionAwareInlineColorRight; + }else if(!isDirectionAwareColorRightDefined && isColorInlineDefined){ + colorRight = colorInline; + } + int left = bounds.left; int top = bounds.top; 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 4bd81d72153b0b..cd0be924503e4e 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 @@ -49,7 +49,10 @@ public class ReactViewManager extends ReactClippingViewManager { Spacing.END, Spacing.BLOCK, Spacing.BLOCK_END, - Spacing.BLOCK_START + Spacing.BLOCK_START, + Spacing.INLINE, + Spacing.INLINE_END, + Spacing.INLINE_START }; private static final int CMD_HOTSPOT_UPDATE = 1; private static final int CMD_SET_PRESSED = 2; @@ -244,7 +247,10 @@ public void setBorderWidth(ReactViewGroup view, int index, float width) { ViewProps.BORDER_END_COLOR, ViewProps.BORDER_BLOCK_COLOR, ViewProps.BORDER_BLOCK_END_COLOR, - ViewProps.BORDER_BLOCK_START_COLOR + ViewProps.BORDER_BLOCK_START_COLOR, + ViewProps.BORDER_INLINE_COLOR, + ViewProps.BORDER_INLINE_END_COLOR, + ViewProps.BORDER_INLINE_START_COLOR }, customType = "Color") public void setBorderColor(ReactViewGroup view, int index, Integer color) { diff --git a/ReactCommon/react/renderer/components/view/viewPropConversions.h b/ReactCommon/react/renderer/components/view/viewPropConversions.h index 9de70faac57e8d..e403eceb0c62fc 100644 --- a/ReactCommon/react/renderer/components/view/viewPropConversions.h +++ b/ReactCommon/react/renderer/components/view/viewPropConversions.h @@ -101,35 +101,36 @@ inline void putOptionalColor( inline MapBuffer convertBorderColors(CascadedBorderColors const &colors) { MapBufferBuilder builder(7); - putOptionalColor(builder, EDGE_TOP, colors.top); - putOptionalColor(builder, EDGE_RIGHT, colors.right); - putOptionalColor(builder, EDGE_BOTTOM, colors.bottom); - putOptionalColor(builder, EDGE_LEFT, colors.left); - putOptionalColor(builder, EDGE_START, colors.start); - putOptionalColor(builder, EDGE_END, colors.end); - putOptionalColor(builder, EDGE_ALL, colors.all); + putOptionalColor(builder, EDGE_TOP, colors.topEdge); + putOptionalColor(builder, EDGE_RIGHT, colors.rightEdge); + putOptionalColor(builder, EDGE_BOTTOM, colors.bottomEdge); + putOptionalColor(builder, EDGE_LEFT, colors.leftEdge); + putOptionalColor(builder, EDGE_START, colors.startEdge); + putOptionalColor(builder, EDGE_END, colors.endEdge); + putOptionalColor(builder, EDGE_ALL, colors.allEdges); return builder.build(); } template MapBuffer convertCascadedEdges(CascadedRectangleEdges const &edges) { MapBufferBuilder builder(13); - 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_TOP, optionalFromValue(edges.topEdge)); + putOptionalFloat(builder, EDGE_RIGHT, optionalFromValue(edges.rightEdge)); + putOptionalFloat(builder, EDGE_BOTTOM, optionalFromValue(edges.bottomEdge)); + putOptionalFloat(builder, EDGE_LEFT, optionalFromValue(edges.leftEdge)); + putOptionalFloat(builder, EDGE_START, optionalFromValue(edges.startEdge)); + putOptionalFloat(builder, EDGE_END, optionalFromValue(edges.endEdge)); + putOptionalFloat(builder, EDGE_BLOCK, optionalFromValue(edges.blockEdges)); putOptionalFloat( - builder, EDGE_BLOCK_START, optionalFromValue(edges.blockStart)); - putOptionalFloat(builder, EDGE_INLINE, optionalFromValue(edges.inline)); + builder, EDGE_BLOCK_END, optionalFromValue(edges.blockEndEdge)); putOptionalFloat( - builder, EDGE_INLINE_END, optionalFromValue(edges.inlineEnd)); + builder, EDGE_BLOCK_START, optionalFromValue(edges.blockStartEdge)); + putOptionalFloat(builder, EDGE_INLINE, optionalFromValue(edges.inlineEdges)); putOptionalFloat( - builder, EDGE_INLINE_START, optionalFromValue(edges.inlineStart)); - putOptionalFloat(builder, EDGE_ALL, optionalFromValue(edges.all)); + builder, EDGE_INLINE_END, optionalFromValue(edges.inlineEndEdge)); + putOptionalFloat( + builder, EDGE_INLINE_START, optionalFromValue(edges.inlineStartEdge)); + putOptionalFloat(builder, EDGE_ALL, optionalFromValue(edges.allEdges)); return builder.build(); } From 6c891ea1fe657f0d3f65357f53bf6d5629983dab Mon Sep 17 00:00:00 2001 From: gabrieldonadel Date: Tue, 21 Feb 2023 22:01:53 -0300 Subject: [PATCH 5/5] UNDO THIS COMMIT --- Libraries/Components/View/ReactNativeStyleAttributes.js | 6 ++++++ Libraries/Components/View/ViewNativeComponent.js | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 6f65c12ed4e177..518f7931d15a9c 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -119,9 +119,15 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { backgroundColor: colorAttributes, borderBlockColor: colorAttributes, borderBlockEndColor: colorAttributes, + borderBlockEndStyle: true, borderBlockStartColor: colorAttributes, + borderBlockStartStyle: true, + borderBlockStyle: true, borderInlineColor: colorAttributes, + borderInlineStyle: true, borderInlineEndColor: colorAttributes, + borderInlineEndStyle: true, + borderInlineStartStyle: true, borderInlineStartColor: colorAttributes, borderBottomColor: colorAttributes, borderBottomEndRadius: true, diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index 83d7ef39a3be1c..dfdb29aaa1ee04 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/Libraries/Components/View/ViewNativeComponent.js @@ -50,6 +50,13 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = borderStartEndRadius: true, borderStartStartRadius: true, borderStyle: true, + borderBlockEndStyle: true, + borderBlockStartStyle: true, + borderBlockStyle: true, + borderInlineStyle: true, + borderInlineEndStyle: true, + borderInlineStartStyle: true, + hitSlop: true, pointerEvents: true, nativeBackgroundAndroid: true,