diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index 12a92d96a16f..ac54183bb554 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -67,14 +67,6 @@ export const transformOriginAttribute: AnyAttributeType = nativeCSSParsing ? true : {process: processTransformOrigin}; -export const aspectRatioAttribute: AnyAttributeType = nativeCSSParsing - ? true - : {process: processAspectRatio}; - -export const fontVariantAttribute: AnyAttributeType = nativeCSSParsing - ? true - : {process: processFontVariant}; - const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { /** * Layout @@ -82,7 +74,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { alignContent: true, alignItems: true, alignSelf: true, - aspectRatio: aspectRatioAttribute, + aspectRatio: {process: processAspectRatio}, borderBottomWidth: true, borderEndWidth: true, borderLeftWidth: true, @@ -256,7 +248,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { fontFamily: true, fontSize: true, fontStyle: true, - fontVariant: fontVariantAttribute, + fontVariant: {process: processFontVariant}, fontWeight: true, includeFontPadding: true, letterSpacing: true, diff --git a/packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h b/packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h index 8c16431460c4..5635a692b17b 100644 --- a/packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h +++ b/packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h @@ -9,7 +9,6 @@ #include #include -#include #include #include #include @@ -22,8 +21,6 @@ #include #include #include -#include -#include #include #ifdef RN_SERIALIZABLE_STATE @@ -320,66 +317,7 @@ inline std::string toString(const FontStyle &fontStyle) return "normal"; } -inline std::optional fontVariantFromCSSFontVariant(CSSFontVariant cssVariant) -{ - switch (cssVariant) { - case CSSFontVariant::SmallCaps: - return FontVariant::SmallCaps; - case CSSFontVariant::OldstyleNums: - return FontVariant::OldstyleNums; - case CSSFontVariant::LiningNums: - return FontVariant::LiningNums; - case CSSFontVariant::TabularNums: - return FontVariant::TabularNums; - case CSSFontVariant::ProportionalNums: - return FontVariant::ProportionalNums; - case CSSFontVariant::StylisticOne: - return FontVariant::StylisticOne; - case CSSFontVariant::StylisticTwo: - return FontVariant::StylisticTwo; - case CSSFontVariant::StylisticThree: - return FontVariant::StylisticThree; - case CSSFontVariant::StylisticFour: - return FontVariant::StylisticFour; - case CSSFontVariant::StylisticFive: - return FontVariant::StylisticFive; - case CSSFontVariant::StylisticSix: - return FontVariant::StylisticSix; - case CSSFontVariant::StylisticSeven: - return FontVariant::StylisticSeven; - case CSSFontVariant::StylisticEight: - return FontVariant::StylisticEight; - case CSSFontVariant::StylisticNine: - return FontVariant::StylisticNine; - case CSSFontVariant::StylisticTen: - return FontVariant::StylisticTen; - case CSSFontVariant::StylisticEleven: - return FontVariant::StylisticEleven; - case CSSFontVariant::StylisticTwelve: - return FontVariant::StylisticTwelve; - case CSSFontVariant::StylisticThirteen: - return FontVariant::StylisticThirteen; - case CSSFontVariant::StylisticFourteen: - return FontVariant::StylisticFourteen; - case CSSFontVariant::StylisticFifteen: - return FontVariant::StylisticFifteen; - case CSSFontVariant::StylisticSixteen: - return FontVariant::StylisticSixteen; - case CSSFontVariant::StylisticSeventeen: - return FontVariant::StylisticSeventeen; - case CSSFontVariant::StylisticEighteen: - return FontVariant::StylisticEighteen; - case CSSFontVariant::StylisticNineteen: - return FontVariant::StylisticNineteen; - case CSSFontVariant::StylisticTwenty: - return FontVariant::StylisticTwenty; - default: - // Ligature variants (CommonLigatures, etc.) have no FontVariant equivalent - return std::nullopt; - } -} - -inline void parseProcessedFontVariant(const PropsParserContext &context, const RawValue &value, FontVariant &result) +inline void fromRawValue(const PropsParserContext &context, const RawValue &value, FontVariant &result) { result = FontVariant::Default; react_native_expect(value.hasType>()); @@ -438,6 +376,7 @@ inline void parseProcessedFontVariant(const PropsParserContext &context, const R result = (FontVariant)((int)result | (int)FontVariant::StylisticTwenty); } else { LOG(ERROR) << "Unsupported FontVariant value: " << item; + react_native_expect(false); } } } else { @@ -445,40 +384,6 @@ inline void parseProcessedFontVariant(const PropsParserContext &context, const R } } -inline void parseUnprocessedFontVariantString(const std::string &value, FontVariant &result) -{ - auto fontVariantList = parseCSSProperty(value); - if (!std::holds_alternative(fontVariantList)) { - result = FontVariant::Default; - return; - } - - result = FontVariant::Default; - for (const auto &cssVariant : std::get(fontVariantList)) { - if (auto fv = fontVariantFromCSSFontVariant(cssVariant)) { - result = (FontVariant)((int)result | (int)*fv); - } - } -} - -inline void parseUnprocessedFontVariant(const PropsParserContext &context, const RawValue &value, FontVariant &result) -{ - if (value.hasType()) { - parseUnprocessedFontVariantString((std::string)value, result); - } else { - parseProcessedFontVariant(context, value, result); - } -} - -inline void fromRawValue(const PropsParserContext &context, const RawValue &value, FontVariant &result) -{ - if (ReactNativeFeatureFlags::enableNativeCSSParsing()) { - parseUnprocessedFontVariant(context, value, result); - } else { - parseProcessedFontVariant(context, value, result); - } -} - inline std::string toString(const FontVariant &fontVariant) { auto result = std::string{}; diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp index ae2da15fc0a4..0e2529c1e5af 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp @@ -147,40 +147,35 @@ void YogaStylableProps::setProp( REBUILD_FIELD_SWITCH_CASE_YSP(flexBasis, setFlexBasis); REBUILD_FIELD_SWITCH_CASE2(positionType, setPositionType, "position"); REBUILD_FIELD_YG_GUTTER(gap, setGap, "rowGap", "columnGap", "gap"); - case CONSTEXPR_RAW_PROPS_KEY_HASH("aspectRatio"): { - yogaStyle.setAspectRatio( - value.hasValue() ? convertAspectRatio(context, value) - : ygDefaults.aspectRatio()); - return; - } - REBUILD_FIELD_SWITCH_CASE_YSP(boxSizing, setBoxSizing); - REBUILD_FIELD_YG_DIMENSION(dimension, setDimension, "width", "height"); - REBUILD_FIELD_YG_DIMENSION( - minDimension, setMinDimension, "minWidth", "minHeight"); - REBUILD_FIELD_YG_DIMENSION( - maxDimension, setMaxDimension, "maxWidth", "maxHeight"); - REBUILD_FIELD_YG_EDGES_POSITION(); - REBUILD_FIELD_YG_EDGES(margin, setMargin, "margin", ""); - REBUILD_FIELD_YG_EDGES(padding, setPadding, "padding", ""); - REBUILD_FIELD_YG_EDGES(border, setBorder, "border", "Width"); + REBUILD_FIELD_SWITCH_CASE_YSP(aspectRatio, setAspectRatio); + REBUILD_FIELD_SWITCH_CASE_YSP(boxSizing, setBoxSizing); + REBUILD_FIELD_YG_DIMENSION(dimension, setDimension, "width", "height"); + REBUILD_FIELD_YG_DIMENSION( + minDimension, setMinDimension, "minWidth", "minHeight"); + REBUILD_FIELD_YG_DIMENSION( + maxDimension, setMaxDimension, "maxWidth", "maxHeight"); + REBUILD_FIELD_YG_EDGES_POSITION(); + REBUILD_FIELD_YG_EDGES(margin, setMargin, "margin", ""); + REBUILD_FIELD_YG_EDGES(padding, setPadding, "padding", ""); + REBUILD_FIELD_YG_EDGES(border, setBorder, "border", "Width"); - // Aliases - RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd"); - RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart"); - RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd"); - RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart"); - RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline"); - RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart"); - RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd"); - RAW_SET_PROP_SWITCH_CASE(marginBlock, "marginBlock"); - RAW_SET_PROP_SWITCH_CASE(marginBlockStart, "marginBlockStart"); - RAW_SET_PROP_SWITCH_CASE(marginBlockEnd, "marginBlockEnd"); - RAW_SET_PROP_SWITCH_CASE(paddingInline, "paddingInline"); - RAW_SET_PROP_SWITCH_CASE(paddingInlineStart, "paddingInlineStart"); - RAW_SET_PROP_SWITCH_CASE(paddingInlineEnd, "paddingInlineEnd"); - RAW_SET_PROP_SWITCH_CASE(paddingBlock, "paddingBlock"); - RAW_SET_PROP_SWITCH_CASE(paddingBlockStart, "paddingBlockStart"); - RAW_SET_PROP_SWITCH_CASE(paddingBlockEnd, "paddingBlockEnd"); + // Aliases + RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd"); + RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart"); + RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd"); + RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart"); + RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline"); + RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart"); + RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd"); + RAW_SET_PROP_SWITCH_CASE(marginBlock, "marginBlock"); + RAW_SET_PROP_SWITCH_CASE(marginBlockStart, "marginBlockStart"); + RAW_SET_PROP_SWITCH_CASE(marginBlockEnd, "marginBlockEnd"); + RAW_SET_PROP_SWITCH_CASE(paddingInline, "paddingInline"); + RAW_SET_PROP_SWITCH_CASE(paddingInlineStart, "paddingInlineStart"); + RAW_SET_PROP_SWITCH_CASE(paddingInlineEnd, "paddingInlineEnd"); + RAW_SET_PROP_SWITCH_CASE(paddingBlock, "paddingBlock"); + RAW_SET_PROP_SWITCH_CASE(paddingBlockStart, "paddingBlockStart"); + RAW_SET_PROP_SWITCH_CASE(paddingBlockEnd, "paddingBlockEnd"); } } diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h index 7ae43641ee1f..929fe68cd58c 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h @@ -498,23 +498,6 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu result = value.hasType() ? yoga::FloatOptional((float)value) : yoga::FloatOptional(); } -inline yoga::FloatOptional convertAspectRatio(const PropsParserContext &context, const RawValue &value) -{ - if (value.hasType()) { - return yoga::FloatOptional((float)value); - } - if (ReactNativeFeatureFlags::enableNativeCSSParsing() && value.hasType()) { - auto ratio = parseCSSProperty((std::string)value); - if (std::holds_alternative(ratio)) { - auto r = std::get(ratio); - if (!r.isDegenerate()) { - return yoga::FloatOptional(r.numerator / r.denominator); - } - } - } - return yoga::FloatOptional(); -} - inline std::optional toRadians(const RawValue &value) { if (value.hasType()) { diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h index 76968bc47fbd..410fde1b56df 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h @@ -356,12 +356,8 @@ convertRawProp(const PropsParserContext &context, const RawProps &rawProps, cons yoga::Dimension::Height, convertRawProp(context, rawProps, "maxHeight", sourceValue.maxDimension(yoga::Dimension::Height), {})); - { - const auto *rawValue = rawProps.at("aspectRatio", nullptr, nullptr); - if (rawValue != nullptr) { - yogaStyle.setAspectRatio(rawValue->hasValue() ? convertAspectRatio(context, *rawValue) : yogaStyle.aspectRatio()); - } - } + yogaStyle.setAspectRatio( + convertRawProp(context, rawProps, "aspectRatio", sourceValue.aspectRatio(), yogaStyle.aspectRatio())); yogaStyle.setBoxSizing( convertRawProp(context, rawProps, "boxSizing", sourceValue.boxSizing(), yogaStyle.boxSizing())); diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp index 35ae84bfc738..c784ecfd3ed7 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp @@ -7,7 +7,6 @@ #include -#include #include #include #include @@ -455,89 +454,4 @@ TEST(ConversionsTest, unprocessed_transform_origin_rawvalue_string_with_z) { EXPECT_EQ(result.z, 15.0f); } -TEST(ConversionsTest, convert_aspect_ratio_float) { - RawValue value{folly::dynamic(1.5)}; - auto result = - convertAspectRatio(PropsParserContext{-1, ContextContainer{}}, value); - - EXPECT_FALSE(result.isUndefined()); - EXPECT_EQ(result.unwrap(), 1.5f); -} - -TEST(ConversionsTest, convert_aspect_ratio_ratio_string) { - // CSSRatio parses "16/9" as {numerator: 16, denominator: 9} - auto ratio = parseCSSProperty("16/9"); - ASSERT_TRUE(std::holds_alternative(ratio)); - auto r = std::get(ratio); - EXPECT_FALSE(r.isDegenerate()); - EXPECT_NEAR(r.numerator / r.denominator, 16.0f / 9.0f, 0.001f); -} - -TEST(ConversionsTest, convert_aspect_ratio_number_string) { - // CSSRatio parses "1.5" as {numerator: 1.5, denominator: 1.0} - auto ratio = parseCSSProperty("1.5"); - ASSERT_TRUE(std::holds_alternative(ratio)); - auto r = std::get(ratio); - EXPECT_FALSE(r.isDegenerate()); - EXPECT_EQ(r.numerator / r.denominator, 1.5f); -} - -TEST(ConversionsTest, convert_aspect_ratio_degenerate) { - auto ratio = parseCSSProperty("0/0"); - ASSERT_TRUE(std::holds_alternative(ratio)); - EXPECT_TRUE(std::get(ratio).isDegenerate()); -} - -TEST(ConversionsTest, float_optional_from_rawvalue_float) { - RawValue value{folly::dynamic(1.5)}; - yoga::FloatOptional result; - fromRawValue(PropsParserContext{-1, ContextContainer{}}, value, result); - - EXPECT_FALSE(result.isUndefined()); - EXPECT_EQ(result.unwrap(), 1.5f); -} - -TEST(ConversionsTest, float_optional_undefined_for_non_float) { - RawValue value{folly::dynamic(nullptr)}; - yoga::FloatOptional result; - fromRawValue(PropsParserContext{-1, ContextContainer{}}, value, result); - - EXPECT_TRUE(result.isUndefined()); -} - -TEST(ConversionsTest, float_optional_undefined_for_string) { - // fromRawValue for FloatOptional does not parse strings — - // that is handled by convertAspectRatio specifically. - RawValue value{folly::dynamic("16/9")}; - yoga::FloatOptional result; - fromRawValue(PropsParserContext{-1, ContextContainer{}}, value, result); - - EXPECT_TRUE(result.isUndefined()); -} - -TEST(ConversionsTest, unprocessed_font_variant_string_single) { - FontVariant result; - parseUnprocessedFontVariantString("small-caps", result); - - EXPECT_EQ((int)result, (int)FontVariant::SmallCaps); -} - -TEST(ConversionsTest, unprocessed_font_variant_string_multiple) { - FontVariant result; - parseUnprocessedFontVariantString( - "small-caps oldstyle-nums tabular-nums", result); - - EXPECT_EQ( - (int)result, - (int)FontVariant::SmallCaps | (int)FontVariant::OldstyleNums | - (int)FontVariant::TabularNums); -} - -TEST(ConversionsTest, unprocessed_font_variant_string_invalid) { - FontVariant result; - parseUnprocessedFontVariantString("not-a-variant", result); - - EXPECT_EQ((int)result, (int)FontVariant::Default); -} - } // namespace facebook::react