Skip to content

Commit 895a082

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`. Reviewed By: NickGerleman Differential Revision: D63927512
1 parent af384a9 commit 895a082

File tree

21 files changed

+418
-114
lines changed

21 files changed

+418
-114
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::StyleSizeLength::points(200));
125+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(200));
140+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(200));
220+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(200));
264+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(200));
422+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(200));
438+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(20));
439439
return sharedProps;
440440
})
441441
.children({

‎packages/react-native/React/Views/RCTLayout.m‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@ CGFloat RCTCoreGraphicsFloatFromYogaValue(YGValue value, CGFloat baseFloatValue)
8787
return RCTCoreGraphicsFloatFromYogaFloat(value.value) * baseFloatValue;
8888
case YGUnitAuto:
8989
case YGUnitUndefined:
90+
case YGUnitMaxContent:
91+
case YGUnitFitContent:
92+
case YGUnitStretch:
9093
return baseFloatValue;
9194
}
9295
}

‎packages/react-native/React/Views/RCTShadowView.m‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ + (YGConfigRef)yogaConfig
6363
#define RCT_SET_YGVALUE(ygvalue, setter, ...) \
6464
switch (ygvalue.unit) { \
6565
case YGUnitAuto: \
66+
case YGUnitMaxContent: \
67+
case YGUnitFitContent: \
68+
case YGUnitStretch: \
6669
case YGUnitUndefined: \
6770
setter(__VA_ARGS__, YGUndefined); \
6871
break; \
@@ -80,6 +83,9 @@ + (YGConfigRef)yogaConfig
8083
setter##Auto(__VA_ARGS__); \
8184
break; \
8285
case YGUnitUndefined: \
86+
case YGUnitMaxContent: \
87+
case YGUnitFitContent: \
88+
case YGUnitStretch: \
8389
setter(__VA_ARGS__, YGUndefined); \
8490
break; \
8591
case YGUnitPoint: \

‎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::StyleSizeLength::points(size.width));
542542
style.setDimension(
543-
yoga::Dimension::Height, yoga::StyleLength::points(size.height));
543+
yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(maximumSize.width));
635635

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

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

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

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

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

Lines changed: 80 additions & 21 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::SizeLength& result) {
450+
if (value.hasType<Float>()) {
451+
result = yoga::StyleSizeLength::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::StyleSizeLength::ofAuto();
457+
return;
458+
} else if (stringValue == "max-content") {
459+
result = yoga::StyleSizeLength::ofMaxContent();
460+
return;
461+
} else if (stringValue == "stretch") {
462+
result = yoga::StyleSizeLength::ofStretch();
463+
return;
464+
} else if (stringValue == "fit-content") {
465+
result = yoga::StyleSizeLength::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::StyleSizeLength::percent(tryValue.value());
473+
return;
474+
}
475+
} else {
476+
auto tryValue = folly::tryTo<float>(stringValue);
477+
if (tryValue.hasValue()) {
478+
result = yoga::StyleSizeLength::points(tryValue.value());
479+
return;
480+
}
481+
}
482+
}
483+
}
484+
result = yoga::StyleSizeLength::undefined();
485+
}
486+
449487
inline void fromRawValue(
450488
const PropsParserContext& context,
451489
const RawValue& value,
@@ -1370,15 +1408,36 @@ inline std::string toString(const yoga::Display& value) {
13701408
}
13711409

13721410
inline std::string toString(const yoga::Style::Length& length) {
1373-
switch (length.unit()) {
1374-
case yoga::Unit::Undefined:
1375-
return "undefined";
1376-
case yoga::Unit::Point:
1377-
return std::to_string(length.value().unwrap());
1378-
case yoga::Unit::Percent:
1379-
return std::to_string(length.value().unwrap()) + "%";
1380-
case yoga::Unit::Auto:
1381-
return "auto";
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::SizeLength& length) {
1425+
if (length.isUndefined()) {
1426+
return "undefined";
1427+
} else if (length.isAuto()) {
1428+
return "auto";
1429+
} else if (length.isPoints()) {
1430+
return std::to_string(length.value().unwrap());
1431+
} else if (length.isPercent()) {
1432+
return std::to_string(length.value().unwrap()) + "%";
1433+
} else if (length.isMaxContent()) {
1434+
return "max-content";
1435+
} else if (length.isFitContent()) {
1436+
return "fit-content";
1437+
} else if (length.isStretch()) {
1438+
return "stretch";
1439+
} else {
1440+
return "unknown";
13821441
}
13831442
}
13841443

‎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::StyleSizeLength::points(200));
81+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(50));
94+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(30));
109+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(110));
142+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(30));
157+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::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::StyleSizeLength::points(70));
172+
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(20));
173173
return sharedProps;
174174
})
175175
})

0 commit comments

Comments
 (0)