From 47972c098aade51ad874b769bd3ad2a044efbcea Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Dall'Agnol Date: Fri, 9 Dec 2022 01:19:45 -0300 Subject: [PATCH] feat: Add logical border radius Fabric implementation for iOS --- .../jni/react/fabric/viewPropConversions.h | 8 +++++ .../view/YogaLayoutableShadowNode.cpp | 20 ++++++++++++ .../renderer/components/view/primitives.h | 32 +++++++++++++++---- .../components/view/propsConversions.h | 32 +++++++++++++++++++ .../components/view/viewPropConversions.h | 13 +++++++- .../rn-tester/js/examples/RTL/RTLExample.js | 16 +++++----- 6 files changed, 106 insertions(+), 15 deletions(-) diff --git a/ReactAndroid/src/main/jni/react/fabric/viewPropConversions.h b/ReactAndroid/src/main/jni/react/fabric/viewPropConversions.h index fe44e662340b63..8c4612bfd5c67e 100644 --- a/ReactAndroid/src/main/jni/react/fabric/viewPropConversions.h +++ b/ReactAndroid/src/main/jni/react/fabric/viewPropConversions.h @@ -113,6 +113,10 @@ constexpr MapBuffer::Key CORNER_TOP_END = 5; constexpr MapBuffer::Key CORNER_BOTTOM_END = 6; constexpr MapBuffer::Key CORNER_BOTTOM_START = 7; constexpr MapBuffer::Key CORNER_ALL = 8; +constexpr MapBuffer::Key CORNER_END_END = 9; +constexpr MapBuffer::Key CORNER_END_START = 10; +constexpr MapBuffer::Key CORNER_START_END = 11; +constexpr MapBuffer::Key CORNER_START_START = 12; inline void putOptionalFloat( MapBufferBuilder &builder, @@ -132,6 +136,10 @@ MapBuffer convertBorderRadii(CascadedBorderRadii const &radii) { putOptionalFloat(builder, CORNER_BOTTOM_END, radii.bottomEnd); putOptionalFloat(builder, CORNER_BOTTOM_START, radii.bottomStart); putOptionalFloat(builder, CORNER_ALL, radii.all); + putOptionalFloat(builder, CORNER_END_END, radii.endEnd); + putOptionalFloat(builder, CORNER_END_START, radii.endStart); + putOptionalFloat(builder, CORNER_START_END, radii.startEnd); + putOptionalFloat(builder, CORNER_START_START, radii.startStart); return builder.build(); } diff --git a/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp index 4bc5bac4a971b0..b43bc9a2be7aa6 100644 --- a/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp +++ b/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp @@ -751,6 +751,26 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps( auto &props = const_cast(typedCasting); // Swap border node values, borderRadii, borderColors and borderStyles. + if (props.borderRadii.startEnd.has_value()) { + props.borderRadii.topEnd = props.borderRadii.startEnd; + props.borderRadii.startEnd.reset(); + } + + if (props.borderRadii.startStart.has_value()) { + props.borderRadii.topStart = props.borderRadii.startStart; + props.borderRadii.startStart.reset(); + } + + if (props.borderRadii.endEnd.has_value()) { + props.borderRadii.bottomEnd = props.borderRadii.endEnd; + props.borderRadii.endEnd.reset(); + } + + if (props.borderRadii.endStart.has_value()) { + props.borderRadii.bottomStart = props.borderRadii.endStart; + props.borderRadii.endStart.reset(); + } + if (props.borderRadii.topLeft.has_value()) { props.borderRadii.topStart = props.borderRadii.topLeft; props.borderRadii.topLeft.reset(); diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h index b3ab4cfe0fbead..37c781cb84580c 100644 --- a/ReactCommon/react/renderer/components/view/primitives.h +++ b/ReactCommon/react/renderer/components/view/primitives.h @@ -160,12 +160,24 @@ struct CascadedRectangleCorners { OptionalT bottomStart{}; OptionalT bottomEnd{}; OptionalT all{}; + OptionalT endEnd{}; + OptionalT endStart{}; + OptionalT startEnd{}; + OptionalT startStart{}; Counterpart resolve(bool isRTL, T defaults) const { - const auto topLeading = isRTL ? topEnd : topStart; - const auto topTrailing = isRTL ? topStart : topEnd; - const auto bottomLeading = isRTL ? bottomEnd : bottomStart; - const auto bottomTrailing = isRTL ? bottomStart : bottomEnd; + const auto topLeading = isRTL ? startEnd ? startEnd : topEnd + : startStart ? startStart + : topStart; + const auto topTrailing = isRTL ? startStart ? startStart : topStart + : startEnd ? startEnd + : topEnd; + const auto bottomLeading = isRTL ? endEnd ? endEnd : bottomEnd + : endStart ? endStart + : bottomStart; + const auto bottomTrailing = isRTL ? endStart ? endStart : bottomStart + : endEnd ? endEnd + : bottomEnd; return { /* .topLeft = */ topLeft.value_or( @@ -189,7 +201,11 @@ struct CascadedRectangleCorners { this->topEnd, this->bottomStart, this->bottomEnd, - this->all) == + this->all, + this->endEnd, + this->endStart, + this->startEnd, + this->startStart) == std::tie( rhs.topLeft, rhs.topRight, @@ -199,7 +215,11 @@ struct CascadedRectangleCorners { rhs.topEnd, rhs.bottomStart, rhs.bottomEnd, - rhs.all); + rhs.all, + rhs.endEnd, + rhs.endStart, + rhs.startEnd, + rhs.startStart); } bool operator!=(const CascadedRectangleCorners &rhs) const { diff --git a/ReactCommon/react/renderer/components/view/propsConversions.h b/ReactCommon/react/renderer/components/view/propsConversions.h index 3973637eaec9e8..cc5426efcadd81 100644 --- a/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/ReactCommon/react/renderer/components/view/propsConversions.h @@ -401,6 +401,38 @@ static inline CascadedRectangleCorners convertRawProp( defaultValue.bottomEnd, prefix, suffix); + result.endEnd = convertRawProp( + context, + rawProps, + "EndEnd", + sourceValue.endEnd, + defaultValue.endEnd, + prefix, + suffix); + result.endStart = convertRawProp( + context, + rawProps, + "EndStart", + sourceValue.endStart, + defaultValue.endStart, + prefix, + suffix); + result.startEnd = convertRawProp( + context, + rawProps, + "StartEnd", + sourceValue.startEnd, + defaultValue.startEnd, + prefix, + suffix); + result.startStart = convertRawProp( + context, + rawProps, + "StartStart", + sourceValue.startStart, + defaultValue.startStart, + 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 6a672aef01ad4c..fe253277752cb4 100644 --- a/ReactCommon/react/renderer/components/view/viewPropConversions.h +++ b/ReactCommon/react/renderer/components/view/viewPropConversions.h @@ -38,6 +38,10 @@ constexpr MapBuffer::Key CORNER_TOP_END = 5; constexpr MapBuffer::Key CORNER_BOTTOM_END = 6; constexpr MapBuffer::Key CORNER_BOTTOM_START = 7; constexpr MapBuffer::Key CORNER_ALL = 8; +constexpr MapBuffer::Key CORNER_END_END = 9; +constexpr MapBuffer::Key CORNER_END_START = 10; +constexpr MapBuffer::Key CORNER_START_END = 11; +constexpr MapBuffer::Key CORNER_START_START = 12; inline void putOptionalFloat( MapBufferBuilder &builder, @@ -116,7 +120,7 @@ MapBuffer convertCascadedEdges(CascadedRectangleEdges const &edges) { template MapBuffer convertCascadedCorners(CascadedRectangleCorners const &corners) { - MapBufferBuilder builder(9); + MapBufferBuilder builder(13); putOptionalFloat( builder, CORNER_TOP_LEFT, optionalFromValue(corners.topLeft)); putOptionalFloat( @@ -132,6 +136,13 @@ MapBuffer convertCascadedCorners(CascadedRectangleCorners const &corners) { builder, CORNER_BOTTOM_END, optionalFromValue(corners.bottomEnd)); putOptionalFloat( builder, CORNER_BOTTOM_START, optionalFromValue(corners.bottomStart)); + putOptionalFloat(builder, CORNER_END_END, optionalFromValue(corners.endEnd)); + putOptionalFloat( + builder, CORNER_END_START, optionalFromValue(corners.endStart)); + putOptionalFloat( + builder, CORNER_START_END, optionalFromValue(corners.startEnd)); + putOptionalFloat( + builder, CORNER_START_START, optionalFromValue(corners.startStart)); putOptionalFloat(builder, CORNER_ALL, optionalFromValue(corners.all)); return builder.build(); } diff --git a/packages/rn-tester/js/examples/RTL/RTLExample.js b/packages/rn-tester/js/examples/RTL/RTLExample.js index 5c56dc62e3005e..151967eb218856 100644 --- a/packages/rn-tester/js/examples/RTL/RTLExample.js +++ b/packages/rn-tester/js/examples/RTL/RTLExample.js @@ -513,20 +513,20 @@ const LogicalBorderRadiiExample = withRTLState(({isRTL, setRTL}) => { return ( Styles - borderEndStartRadius: 10, - borderEndEndRadius: 20, - borderStartEndRadius: 30, - borderStartStartRadius: 40 + borderStartStartRadius: 10 + borderStartEndRadius: 20, + borderEndStartRadius: 30, + borderEndEndRadius: 40, Demo: