Skip to content

Commit 63c7697

Browse files
joevilchesfacebook-github-bot
joevilches
authored and
facebook-github-bot
committed
[skip ci] 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 0d66410 commit 63c7697

File tree

18 files changed

+388
-102
lines changed

18 files changed

+388
-102
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
@@ -538,9 +538,9 @@ void YogaLayoutableShadowNode::setSize(Size size) const {
538538

539539
auto style = yogaNode_.style();
540540
style.setDimension(
541-
yoga::Dimension::Width, yoga::StyleLength::points(size.width));
541+
yoga::Dimension::Width, yoga::StyleSizeValue::points(size.width));
542542
style.setDimension(
543-
yoga::Dimension::Height, yoga::StyleLength::points(size.height));
543+
yoga::Dimension::Height, yoga::StyleSizeValue::points(size.height));
544544
yogaNode_.setStyle(style);
545545
yogaNode_.setDirty(true);
546546
}
@@ -631,16 +631,18 @@ void YogaLayoutableShadowNode::layoutTree(
631631
auto ownerHeight = yogaFloatFromFloat(maximumSize.height);
632632

633633
yogaStyle.setMaxDimension(
634-
yoga::Dimension::Width, yoga::StyleLength::points(maximumSize.width));
634+
yoga::Dimension::Width, yoga::StyleSizeValue::points(maximumSize.width));
635635

636636
yogaStyle.setMaxDimension(
637-
yoga::Dimension::Height, yoga::StyleLength::points(maximumSize.height));
637+
yoga::Dimension::Height,
638+
yoga::StyleSizeValue::points(maximumSize.height));
638639

639640
yogaStyle.setMinDimension(
640-
yoga::Dimension::Width, yoga::StyleLength::points(minimumSize.width));
641+
yoga::Dimension::Width, yoga::StyleSizeValue::points(minimumSize.width));
641642

642643
yogaStyle.setMinDimension(
643-
yoga::Dimension::Height, yoga::StyleLength::points(minimumSize.height));
644+
yoga::Dimension::Height,
645+
yoga::StyleSizeValue::points(minimumSize.height));
644646

645647
auto direction =
646648
yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);

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

Lines changed: 70 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -92,18 +92,15 @@ inline yoga::FloatOptional yogaOptionalFloatFromFloat(Float value) {
9292
inline std::optional<Float> optionalFloatFromYogaValue(
9393
const yoga::Style::Length& length,
9494
std::optional<Float> base = {}) {
95-
switch (length.unit()) {
96-
case yoga::Unit::Undefined:
97-
return {};
98-
case yoga::Unit::Point:
99-
return floatFromYogaOptionalFloat(length.value());
100-
case yoga::Unit::Percent:
101-
return base.has_value()
102-
? std::optional<Float>(
103-
base.value() * floatFromYogaOptionalFloat(length.value()))
104-
: std::optional<Float>();
105-
case yoga::Unit::Auto:
106-
return {};
95+
if (length.isPoints()) {
96+
return floatFromYogaOptionalFloat(length.value());
97+
} else if (length.isPercent()) {
98+
return base.has_value()
99+
? std::optional<Float>(
100+
base.value() * floatFromYogaOptionalFloat(length.value()))
101+
: std::optional<Float>();
102+
} else {
103+
return {};
107104
}
108105
}
109106

@@ -446,6 +443,47 @@ inline void fromRawValue(
446443
LOG(ERROR) << "Could not parse yoga::Display: " << stringValue;
447444
}
448445

446+
inline void fromRawValue(
447+
const PropsParserContext& /*context*/,
448+
const RawValue& value,
449+
yoga::Style::SizeValue& result) {
450+
if (value.hasType<Float>()) {
451+
result = yoga::StyleSizeValue::points((float)value);
452+
return;
453+
} else if (value.hasType<std::string>()) {
454+
const auto stringValue = (std::string)value;
455+
if (stringValue == "auto") {
456+
result = yoga::StyleSizeValue::ofAuto();
457+
return;
458+
} else if (stringValue == "max-content") {
459+
result = yoga::StyleSizeValue::ofMaxContent();
460+
return;
461+
} else if (stringValue == "stretch") {
462+
result = yoga::StyleSizeValue::ofStretch();
463+
return;
464+
} else if (stringValue == "fit-content") {
465+
result = yoga::StyleSizeValue::ofFitContent();
466+
return;
467+
} else {
468+
if (stringValue.back() == '%') {
469+
auto tryValue = folly::tryTo<float>(
470+
std::string_view(stringValue).substr(0, stringValue.length() - 1));
471+
if (tryValue.hasValue()) {
472+
result = yoga::StyleSizeValue::percent(tryValue.value());
473+
return;
474+
}
475+
} else {
476+
auto tryValue = folly::tryTo<float>(stringValue);
477+
if (tryValue.hasValue()) {
478+
result = yoga::StyleSizeValue::points(tryValue.value());
479+
return;
480+
}
481+
}
482+
}
483+
}
484+
result = yoga::StyleSizeValue::undefined();
485+
}
486+
449487
inline void fromRawValue(
450488
const PropsParserContext& context,
451489
const RawValue& value,
@@ -1370,6 +1408,20 @@ inline std::string toString(const yoga::Display& value) {
13701408
}
13711409

13721410
inline std::string toString(const yoga::Style::Length& length) {
1411+
if (length.isUndefined()) {
1412+
return "undefined";
1413+
} else if (length.isAuto()) {
1414+
return "auto";
1415+
} else if (length.isPoints()) {
1416+
return std::to_string(length.value().unwrap());
1417+
} else if (length.isPercent()) {
1418+
return std::to_string(length.value().unwrap()) + "%";
1419+
} else {
1420+
return "unknown";
1421+
}
1422+
}
1423+
1424+
inline std::string toString(const yoga::Style::SizeValue& length) {
13731425
switch (length.unit()) {
13741426
case yoga::Unit::Undefined:
13751427
return "undefined";
@@ -1379,6 +1431,12 @@ inline std::string toString(const yoga::Style::Length& length) {
13791431
return std::to_string(length.value().unwrap()) + "%";
13801432
case yoga::Unit::Auto:
13811433
return "auto";
1434+
case yoga::Unit::FitContent:
1435+
return "fit-content";
1436+
case yoga::Unit::MaxContent:
1437+
return "max-content";
1438+
case yoga::Unit::Stretch:
1439+
return "stretch";
13821440
}
13831441
}
13841442

‎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
@@ -245,6 +245,12 @@ const char* YGUnitToString(const YGUnit value) {
245245
return "percent";
246246
case YGUnitAuto:
247247
return "auto";
248+
case YGUnitMaxContent:
249+
return "max-content";
250+
case YGUnitFitContent:
251+
return "fit-content";
252+
case YGUnitStretch:
253+
return "stretch";
248254
}
249255
return "unknown";
250256
}

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

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

136139
YG_ENUM_DECL(
137140
YGWrap,

0 commit comments

Comments
 (0)