Skip to content

Commit fbeb2e0

Browse files
joevilchesfacebook-github-bot
joevilches
authored and
facebook-github-bot
committed
Modify private apis to set, store, and get intrinsic sizing keywords (facebook#46938)
Summary: X-link: facebook/yoga#1721 The private internals of how we store styles needed to change a bit to support 3 new keyword values. Right now the only other keyword that can be stored is `auto`. As a result there isn't much fancy logic to support storing this and its just stored as a specific type inside of `StyleValueHandle`. There are only 3 bits for types (8 values), so it is not sustainable to just stuff every keyword in there. So the change writes the keyword as a value with a new `keyword` `Type`. I chose not to put `auto` in there even though it is a keyword since it is a hot path, I did not want to regress perf when I did not need to. I also make a new `StyleSizeValue` class to store size values - so values for `width`, `height`, etc. This way these new keywords are kept specific to sizes and we will not be able to create, for example, a margin: `max-content`. Differential Revision: D63927512
1 parent 1459d80 commit fbeb2e0

File tree

17 files changed

+374
-83
lines changed

17 files changed

+374
-83
lines changed

‎packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ - (void)setUp
121121
auto &props = *sharedProps;
122122
props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
123123
auto &yogaStyle = props.yogaStyle;
124-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
125-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
124+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
125+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(200));
126126
return sharedProps;
127127
})
128128
.children({
@@ -136,8 +136,8 @@ - (void)setUp
136136
yogaStyle.setPositionType(yoga::PositionType::Absolute);
137137
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
138138
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(0));
139-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
140-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
139+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
140+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(200));
141141
return sharedProps;
142142
})
143143
.children({
@@ -216,8 +216,8 @@ - (void)setUp
216216
yogaStyle.setPositionType(yoga::PositionType::Absolute);
217217
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
218218
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(30));
219-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
220-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(50));
219+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
220+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(50));
221221
return sharedProps;
222222
})
223223
.children({
@@ -260,8 +260,8 @@ - (void)setUp
260260
yogaStyle.setPositionType(yoga::PositionType::Absolute);
261261
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
262262
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(90));
263-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
264-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(50));
263+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
264+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(50));
265265
return sharedProps;
266266
})
267267
.children({
@@ -418,8 +418,8 @@ - (void)testEntireParagraphLink
418418
auto &props = *sharedProps;
419419
props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
420420
auto &yogaStyle = props.yogaStyle;
421-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
422-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
421+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
422+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(200));
423423
return sharedProps;
424424
})
425425
.children({
@@ -434,8 +434,8 @@ - (void)testEntireParagraphLink
434434
yogaStyle.setPositionType(yoga::PositionType::Absolute);
435435
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
436436
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(90));
437-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
438-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(20));
437+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
438+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(20));
439439
return sharedProps;
440440
})
441441
.children({

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaUnit.java‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ public enum YogaUnit {
1313
UNDEFINED(0),
1414
POINT(1),
1515
PERCENT(2),
16-
AUTO(3);
16+
AUTO(3),
17+
MAX_CONTENT(4),
18+
FIT_CONTENT(5),
19+
STRETCH(6);
1720

1821
private final int mIntValue;
1922

@@ -31,6 +34,9 @@ public static YogaUnit fromInt(int value) {
3134
case 1: return POINT;
3235
case 2: return PERCENT;
3336
case 3: return AUTO;
37+
case 4: return MAX_CONTENT;
38+
case 5: return FIT_CONTENT;
39+
case 6: return STRETCH;
3440
default: throw new IllegalArgumentException("Unknown enum value: " + value);
3541
}
3642
}

‎packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -533,9 +533,9 @@ void YogaLayoutableShadowNode::setSize(Size size) const {
533533

534534
auto style = yogaNode_.style();
535535
style.setDimension(
536-
yoga::Dimension::Width, yoga::StyleLength::points(size.width));
536+
yoga::Dimension::Width, yoga::StyleSizeValue::points(size.width));
537537
style.setDimension(
538-
yoga::Dimension::Height, yoga::StyleLength::points(size.height));
538+
yoga::Dimension::Height, yoga::StyleSizeValue::points(size.height));
539539
yogaNode_.setStyle(style);
540540
yogaNode_.setDirty(true);
541541
}
@@ -626,16 +626,18 @@ void YogaLayoutableShadowNode::layoutTree(
626626
auto ownerHeight = yogaFloatFromFloat(maximumSize.height);
627627

628628
yogaStyle.setMaxDimension(
629-
yoga::Dimension::Width, yoga::StyleLength::points(maximumSize.width));
629+
yoga::Dimension::Width, yoga::StyleSizeValue::points(maximumSize.width));
630630

631631
yogaStyle.setMaxDimension(
632-
yoga::Dimension::Height, yoga::StyleLength::points(maximumSize.height));
632+
yoga::Dimension::Height,
633+
yoga::StyleSizeValue::points(maximumSize.height));
633634

634635
yogaStyle.setMinDimension(
635-
yoga::Dimension::Width, yoga::StyleLength::points(minimumSize.width));
636+
yoga::Dimension::Width, yoga::StyleSizeValue::points(minimumSize.width));
636637

637638
yogaStyle.setMinDimension(
638-
yoga::Dimension::Height, yoga::StyleLength::points(minimumSize.height));
639+
yoga::Dimension::Height,
640+
yoga::StyleSizeValue::points(minimumSize.height));
639641

640642
auto direction =
641643
yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);

‎packages/react-native/ReactCommon/react/renderer/components/view/conversions.h‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ inline std::optional<Float> optionalFloatFromYogaValue(
9494
std::optional<Float> base = {}) {
9595
switch (length.unit()) {
9696
case yoga::Unit::Undefined:
97+
case yoga::Unit::Auto:
98+
case yoga::Unit::MaxContent:
99+
case yoga::Unit::Stretch:
100+
case yoga::Unit::FitContent:
97101
return {};
98102
case yoga::Unit::Point:
99103
return floatFromYogaOptionalFloat(length.value());
@@ -102,8 +106,6 @@ inline std::optional<Float> optionalFloatFromYogaValue(
102106
? std::optional<Float>(
103107
base.value() * floatFromYogaOptionalFloat(length.value()))
104108
: std::optional<Float>();
105-
case yoga::Unit::Auto:
106-
return {};
107109
}
108110
}
109111

@@ -432,6 +434,47 @@ inline void fromRawValue(
432434
LOG(ERROR) << "Could not parse yoga::Display: " << stringValue;
433435
}
434436

437+
inline void fromRawValue(
438+
const PropsParserContext& /*context*/,
439+
const RawValue& value,
440+
yoga::Style::SizeValue& result) {
441+
if (value.hasType<Float>()) {
442+
result = yoga::StyleSizeValue::points((float)value);
443+
return;
444+
} else if (value.hasType<std::string>()) {
445+
const auto stringValue = (std::string)value;
446+
if (stringValue == "auto") {
447+
result = yoga::StyleSizeValue::ofAuto();
448+
return;
449+
} else if (stringValue == "maxContent") {
450+
result = yoga::StyleSizeValue::ofMaxContent();
451+
return;
452+
} else if (stringValue == "stretch") {
453+
result = yoga::StyleSizeValue::ofStretch();
454+
return;
455+
} else if (stringValue == "fitContent") {
456+
result = yoga::StyleSizeValue::ofFitContent();
457+
return;
458+
} else {
459+
if (stringValue.back() == '%') {
460+
auto tryValue = folly::tryTo<float>(
461+
std::string_view(stringValue).substr(0, stringValue.length() - 1));
462+
if (tryValue.hasValue()) {
463+
result = yoga::StyleSizeValue::percent(tryValue.value());
464+
return;
465+
}
466+
} else {
467+
auto tryValue = folly::tryTo<float>(stringValue);
468+
if (tryValue.hasValue()) {
469+
result = yoga::StyleSizeValue::points(tryValue.value());
470+
return;
471+
}
472+
}
473+
}
474+
}
475+
result = yoga::StyleSizeValue::undefined();
476+
}
477+
435478
inline void fromRawValue(
436479
const PropsParserContext& context,
437480
const RawValue& value,
@@ -1365,6 +1408,31 @@ inline std::string toString(const yoga::Style::Length& length) {
13651408
return std::to_string(length.value().unwrap()) + "%";
13661409
case yoga::Unit::Auto:
13671410
return "auto";
1411+
case yoga::Unit::FitContent:
1412+
return "fitContent";
1413+
case yoga::Unit::MaxContent:
1414+
return "maxContent";
1415+
case yoga::Unit::Stretch:
1416+
return "stretch";
1417+
}
1418+
}
1419+
1420+
inline std::string toString(const yoga::Style::SizeValue& length) {
1421+
switch (length.unit()) {
1422+
case yoga::Unit::Undefined:
1423+
return "undefined";
1424+
case yoga::Unit::Point:
1425+
return std::to_string(length.value().unwrap());
1426+
case yoga::Unit::Percent:
1427+
return std::to_string(length.value().unwrap()) + "%";
1428+
case yoga::Unit::Auto:
1429+
return "auto";
1430+
case yoga::Unit::FitContent:
1431+
return "fitContent";
1432+
case yoga::Unit::MaxContent:
1433+
return "maxContent";
1434+
case yoga::Unit::Stretch:
1435+
return "stretch";
13681436
}
13691437
}
13701438

‎packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ class LayoutTest : public ::testing::Test {
7777
auto &props = *sharedProps;
7878
props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
7979
auto &yogaStyle = props.yogaStyle;
80-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
81-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
80+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(200));
81+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(200));
8282
return sharedProps;
8383
})
8484
.children({
@@ -90,8 +90,8 @@ class LayoutTest : public ::testing::Test {
9090
auto &props = *sharedProps;
9191
auto &yogaStyle = props.yogaStyle;
9292
yogaStyle.setPositionType(yoga::PositionType::Absolute);
93-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(50));
94-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(50));
93+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(50));
94+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(50));
9595
return sharedProps;
9696
})
9797
.children({
@@ -105,8 +105,8 @@ class LayoutTest : public ::testing::Test {
105105
yogaStyle.setPositionType(yoga::PositionType::Absolute);
106106
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(10));
107107
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(10));
108-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(30));
109-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(90));
108+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(30));
109+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(90));
110110

111111
if (testCase == TRANSFORM_SCALE) {
112112
props.transform = props.transform * Transform::Scale(2, 2, 1);
@@ -138,8 +138,8 @@ class LayoutTest : public ::testing::Test {
138138
yogaStyle.setPositionType(yoga::PositionType::Absolute);
139139
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(10));
140140
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(10));
141-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(110));
142-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(20));
141+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(110));
142+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(20));
143143
return sharedProps;
144144
})
145145
.children({
@@ -153,8 +153,8 @@ class LayoutTest : public ::testing::Test {
153153
yogaStyle.setPositionType(yoga::PositionType::Absolute);
154154
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(70));
155155
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(-50));
156-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(30));
157-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(60));
156+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(30));
157+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(60));
158158
return sharedProps;
159159
})
160160
}),
@@ -168,8 +168,8 @@ class LayoutTest : public ::testing::Test {
168168
yogaStyle.setPositionType(yoga::PositionType::Absolute);
169169
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(-60));
170170
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(50));
171-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(70));
172-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(20));
171+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(70));
172+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(20));
173173
return sharedProps;
174174
})
175175
})

‎packages/react-native/ReactCommon/react/renderer/uimanager/tests/PointerEventsProcessorTest.cpp‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ class PointerEventsProcessorTest : public ::testing::Test {
8787
listenToAllPointerEvents(props);
8888
props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
8989
auto &yogaStyle = props.yogaStyle;
90-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(400));
91-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(400));
90+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(400));
91+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(400));
9292
yogaStyle.setDisplay(yoga::Display::Flex);
9393
yogaStyle.setFlexDirection(yoga::FlexDirection::Row);
9494
yogaStyle.setAlignItems(yoga::Align::Center);
@@ -109,8 +109,8 @@ class PointerEventsProcessorTest : public ::testing::Test {
109109
yogaStyle.setFlexDirection(yoga::FlexDirection::Column);
110110
yogaStyle.setAlignItems(yoga::Align::FlexEnd);
111111
yogaStyle.setJustifyContent(yoga::Justify::Center);
112-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(150));
113-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(300));
112+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(150));
113+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(300));
114114
return sharedProps;
115115
})
116116
.children({
@@ -123,8 +123,8 @@ class PointerEventsProcessorTest : public ::testing::Test {
123123
auto &props = *sharedProps;
124124
listenToAllPointerEvents(props);
125125
auto &yogaStyle = props.yogaStyle;
126-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(100));
127-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
126+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(100));
127+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(200));
128128
return sharedProps;
129129
})
130130
}),
@@ -141,8 +141,8 @@ class PointerEventsProcessorTest : public ::testing::Test {
141141
yogaStyle.setFlexDirection(yoga::FlexDirection::Column);
142142
yogaStyle.setAlignItems(yoga::Align::FlexStart);
143143
yogaStyle.setJustifyContent(yoga::Justify::Center);
144-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(150));
145-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(300));
144+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(150));
145+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(300));
146146
return sharedProps;
147147
})
148148
.children({
@@ -155,8 +155,8 @@ class PointerEventsProcessorTest : public ::testing::Test {
155155
auto &props = *sharedProps;
156156
listenToAllPointerEvents(props);
157157
auto &yogaStyle = props.yogaStyle;
158-
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(100));
159-
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
158+
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeValue::points(100));
159+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeValue::points(200));
160160
return sharedProps;
161161
})
162162
})

‎packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,12 @@ const char* YGUnitToString(const YGUnit value) {
243243
return "percent";
244244
case YGUnitAuto:
245245
return "auto";
246+
case YGUnitMaxContent:
247+
return "max-content";
248+
case YGUnitFitContent:
249+
return "fit-content";
250+
case YGUnitStretch:
251+
return "stretch";
246252
}
247253
return "unknown";
248254
}

‎packages/react-native/ReactCommon/yoga/yoga/YGEnums.h‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,10 @@ YG_ENUM_DECL(
130130
YGUnitUndefined,
131131
YGUnitPoint,
132132
YGUnitPercent,
133-
YGUnitAuto)
133+
YGUnitAuto,
134+
YGUnitMaxContent,
135+
YGUnitFitContent,
136+
YGUnitStretch)
134137

135138
YG_ENUM_DECL(
136139
YGWrap,

0 commit comments

Comments
 (0)