Skip to content

Commit

Permalink
CompactValue -> Style::Length (facebook#41392)
Browse files Browse the repository at this point in the history 
Summary:

X-link: facebook/yoga#1458

We're moving `CompactValue` to be an internal detail of `yoga::Style`, where users outside of the style will be dealing with a resolved/non-compact representation.

This change renames usages of `CompactValue` to `Style::Length`, which will be Yoga's representation for CSS input lengths. Right now one is just a type alias of the other, but this will let us change the internals of CompactValue with the rest of the world looking the same.

A few factory functions are added to `yoga::value` for creating CSS values. There are some shenanigans around how we want to represent CSS pixels (one YGUnitPoint), when we also end up adding CSS points (slightly larger than one YGUnitPoint). For now, I reused `point` until making other changes.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D51000389
  • Loading branch information
@NickGerleman @facebook-github-bot
NickGerleman authored and facebook-github-bot committed Nov 25, 2023
1 parent caae388 commit a129c54
Show file tree
Hide file tree
Showing 16 changed files with 246 additions and 239 deletions.
40 changes: 20 additions & 20 deletions packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ - (void)setUp
auto &props = *sharedProps;
props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
auto &yogaStyle = props.yogaStyle;
yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
return sharedProps;
})
.children({
Expand All @@ -134,10 +134,10 @@ - (void)setUp
props.accessible = true;
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = yoga::PositionType::Absolute;
yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(0));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
yogaStyle.setPosition(YGEdgeTop, yoga::value::points(0));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
return sharedProps;
})
.children({
Expand Down Expand Up @@ -214,10 +214,10 @@ - (void)setUp
props.accessible = true;
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = yoga::PositionType::Absolute;
yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(30));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(50));
yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
yogaStyle.setPosition(YGEdgeTop, yoga::value::points(30));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(50));
return sharedProps;
})
.children({
Expand Down Expand Up @@ -258,10 +258,10 @@ - (void)setUp
props.accessible = true;
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = yoga::PositionType::Absolute;
yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(90));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(50));
yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
yogaStyle.setPosition(YGEdgeTop, yoga::value::points(90));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(50));
return sharedProps;
})
.children({
Expand Down Expand Up @@ -418,8 +418,8 @@ - (void)testEntireParagraphLink
auto &props = *sharedProps;
props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
auto &yogaStyle = props.yogaStyle;
yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
return sharedProps;
})
.children({
Expand All @@ -432,10 +432,10 @@ - (void)testEntireParagraphLink
props.accessibilityTraits = AccessibilityTraits::Link;
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = yoga::PositionType::Absolute;
yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(0));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(20));
yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
yogaStyle.setPosition(YGEdgeTop, yoga::value::points(90));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(20));
return sharedProps;
})
.children({
Expand Down
17 changes: 6 additions & 11 deletions ...extinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

#include <yoga/YGEnums.h>
#include <yoga/YGValue.h>
#include <yoga/style/CompactValue.h>

#include <unordered_map>

Expand Down Expand Up @@ -106,27 +105,23 @@ class AndroidTextInputComponentDescriptor final
!textInputProps.hasPaddingLeft &&
!textInputProps.hasPaddingHorizontal) {
changedPadding = true;
style.setPadding(
YGEdgeStart, yoga::CompactValue::of<YGUnitPoint>(theme.start));
style.setPadding(YGEdgeStart, yoga::value::points(theme.start));
}
if (!textInputProps.hasPadding && !textInputProps.hasPaddingEnd &&
!textInputProps.hasPaddingRight &&
!textInputProps.hasPaddingHorizontal) {
changedPadding = true;
style.setPadding(
YGEdgeEnd, yoga::CompactValue::of<YGUnitPoint>(theme.end));
style.setPadding(YGEdgeEnd, yoga::value::points(theme.end));
}
if (!textInputProps.hasPadding && !textInputProps.hasPaddingTop &&
!textInputProps.hasPaddingVertical) {
changedPadding = true;
style.setPadding(
YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(theme.top));
style.setPadding(YGEdgeTop, yoga::value::points(theme.top));
}
if (!textInputProps.hasPadding && !textInputProps.hasPaddingBottom &&
!textInputProps.hasPaddingVertical) {
changedPadding = true;
style.setPadding(
YGEdgeBottom, yoga::CompactValue::of<YGUnitPoint>(theme.bottom));
style.setPadding(YGEdgeBottom, yoga::value::points(theme.bottom));
}

// If the TextInput initially does not have paddingLeft or paddingStart, a
Expand All @@ -137,12 +132,12 @@ class AndroidTextInputComponentDescriptor final
if ((textInputProps.hasPadding || textInputProps.hasPaddingLeft ||
textInputProps.hasPaddingHorizontal) &&
!textInputProps.hasPaddingStart) {
style.setPadding(YGEdgeStart, yoga::CompactValue::ofUndefined());
style.setPadding(YGEdgeStart, yoga::value::undefined());
}
if ((textInputProps.hasPadding || textInputProps.hasPaddingRight ||
textInputProps.hasPaddingHorizontal) &&
!textInputProps.hasPaddingEnd) {
style.setPadding(YGEdgeEnd, yoga::CompactValue::ofUndefined());
style.setPadding(YGEdgeEnd, yoga::value::undefined());
}

// Note that this is expensive: on every adopt, we need to set the Yoga
Expand Down
56 changes: 22 additions & 34 deletions ...ages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,12 +529,8 @@ void YogaLayoutableShadowNode::setSize(Size size) const {
ensureUnsealed();

auto style = yogaNode_.getStyle();
style.setDimension(
yoga::Dimension::Width,
yoga::CompactValue::ofMaybe<YGUnitPoint>(size.width));
style.setDimension(
yoga::Dimension::Height,
yoga::CompactValue::ofMaybe<YGUnitPoint>(size.height));
style.setDimension(yoga::Dimension::Width, yoga::value::points(size.width));
style.setDimension(yoga::Dimension::Height, yoga::value::points(size.height));
yogaNode_.setStyle(style);
yogaNode_.setDirty(true);
}
Expand All @@ -544,23 +540,19 @@ void YogaLayoutableShadowNode::setPadding(RectangleEdges<Float> padding) const {

auto style = yogaNode_.getStyle();

auto leftPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.left);
auto topPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.top);
auto rightPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.right);
auto bottomPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.bottom);
auto leftPadding = yoga::value::points(padding.left);
auto topPadding = yoga::value::points(padding.top);
auto rightPadding = yoga::value::points(padding.right);
auto bottomPadding = yoga::value::points(padding.bottom);

if (leftPadding != style.padding(YGEdgeLeft) ||
topPadding != style.padding(YGEdgeTop) ||
rightPadding != style.padding(YGEdgeRight) ||
bottomPadding != style.padding(YGEdgeBottom)) {
style.setPadding(
YGEdgeTop, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.top));
style.setPadding(
YGEdgeLeft, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.left));
style.setPadding(
YGEdgeRight, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.right));
style.setPadding(
YGEdgeBottom, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.bottom));
style.setPadding(YGEdgeTop, yoga::value::points(padding.top));
style.setPadding(YGEdgeLeft, yoga::value::points(padding.left));
style.setPadding(YGEdgeRight, yoga::value::points(padding.right));
style.setPadding(YGEdgeBottom, yoga::value::points(padding.bottom));
yogaNode_.setStyle(style);
yogaNode_.setDirty(true);
}
Expand Down Expand Up @@ -630,20 +622,16 @@ void YogaLayoutableShadowNode::layoutTree(
auto ownerHeight = yogaFloatFromFloat(maximumSize.height);

yogaStyle.setMaxDimension(
yoga::Dimension::Width,
yoga::CompactValue::ofMaybe<YGUnitPoint>(maximumSize.width));
yoga::Dimension::Width, yoga::value::points(maximumSize.width));

yogaStyle.setMaxDimension(
yoga::Dimension::Height,
yoga::CompactValue::ofMaybe<YGUnitPoint>(maximumSize.height));
yoga::Dimension::Height, yoga::value::points(maximumSize.height));

yogaStyle.setMinDimension(
yoga::Dimension::Width,
yoga::CompactValue::ofMaybe<YGUnitPoint>(minimumSize.width));
yoga::Dimension::Width, yoga::value::points(minimumSize.width));

yogaStyle.setMinDimension(
yoga::Dimension::Height,
yoga::CompactValue::ofMaybe<YGUnitPoint>(minimumSize.height));
yoga::Dimension::Height, yoga::value::points(minimumSize.height));

auto direction =
yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);
Expand Down Expand Up @@ -887,32 +875,32 @@ void YogaLayoutableShadowNode::swapLeftAndRightInYogaStyleProps(

if (yogaStyle.position(YGEdgeLeft).isDefined()) {
yogaStyle.setPosition(YGEdgeStart, yogaStyle.position(YGEdgeLeft));
yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::ofUndefined());
yogaStyle.setPosition(YGEdgeLeft, yoga::value::undefined());
}

if (yogaStyle.position(YGEdgeRight).isDefined()) {
yogaStyle.setPosition(YGEdgeEnd, yogaStyle.position(YGEdgeRight));
yogaStyle.setPosition(YGEdgeRight, yoga::CompactValue::ofUndefined());
yogaStyle.setPosition(YGEdgeRight, yoga::value::undefined());
}

if (yogaStyle.padding(YGEdgeLeft).isDefined()) {
yogaStyle.setPadding(YGEdgeStart, yogaStyle.padding(YGEdgeLeft));
yogaStyle.setPadding(YGEdgeLeft, yoga::CompactValue::ofUndefined());
yogaStyle.setPadding(YGEdgeLeft, yoga::value::undefined());
}

if (yogaStyle.padding(YGEdgeRight).isDefined()) {
yogaStyle.setPadding(YGEdgeEnd, yogaStyle.padding(YGEdgeRight));
yogaStyle.setPadding(YGEdgeRight, yoga::CompactValue::ofUndefined());
yogaStyle.setPadding(YGEdgeRight, yoga::value::undefined());
}

if (yogaStyle.margin(YGEdgeLeft).isDefined()) {
yogaStyle.setMargin(YGEdgeStart, yogaStyle.margin(YGEdgeLeft));
yogaStyle.setMargin(YGEdgeLeft, yoga::CompactValue::ofUndefined());
yogaStyle.setMargin(YGEdgeLeft, yoga::value::undefined());
}

if (yogaStyle.margin(YGEdgeRight).isDefined()) {
yogaStyle.setMargin(YGEdgeEnd, yogaStyle.margin(YGEdgeRight));
yogaStyle.setMargin(YGEdgeRight, yoga::CompactValue::ofUndefined());
yogaStyle.setMargin(YGEdgeRight, yoga::value::undefined());
}

shadowNode.yogaNode_.setStyle(yogaStyle);
Expand Down Expand Up @@ -967,12 +955,12 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(

if (props.yogaStyle.border(YGEdgeLeft).isDefined()) {
props.yogaStyle.setBorder(YGEdgeStart, props.yogaStyle.border(YGEdgeLeft));
props.yogaStyle.setBorder(YGEdgeLeft, yoga::CompactValue::ofUndefined());
props.yogaStyle.setBorder(YGEdgeLeft, yoga::value::undefined());
}

if (props.yogaStyle.border(YGEdgeRight).isDefined()) {
props.yogaStyle.setBorder(YGEdgeEnd, props.yogaStyle.border(YGEdgeRight));
props.yogaStyle.setBorder(YGEdgeRight, yoga::CompactValue::ofUndefined());
props.yogaStyle.setBorder(YGEdgeRight, yoga::value::undefined());
}
}

Expand Down
2 changes: 0 additions & 2 deletions packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@
namespace facebook::react {

class YogaLayoutableShadowNode : public LayoutableShadowNode {
using CompactValue = facebook::yoga::CompactValue;

public:
using Shared = std::shared_ptr<const YogaLayoutableShadowNode>;
using ListOfShared = std::vector<Shared>;
Expand Down
32 changes: 16 additions & 16 deletions packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,98 +417,98 @@ void YogaStylableProps::convertRawPropAliases(
rawProps,
"insetBlockEnd",
sourceProps.insetBlockEnd,
CompactValue::ofUndefined());
yoga::value::undefined());
insetBlockStart = convertRawProp(
context,
rawProps,
"insetBlockStart",
sourceProps.insetBlockStart,
CompactValue::ofUndefined());
yoga::value::undefined());
insetInlineEnd = convertRawProp(
context,
rawProps,
"insetInlineEnd",
sourceProps.insetInlineEnd,
CompactValue::ofUndefined());
yoga::value::undefined());
insetInlineStart = convertRawProp(
context,
rawProps,
"insetInlineStart",
sourceProps.insetInlineStart,
CompactValue::ofUndefined());
yoga::value::undefined());
marginInline = convertRawProp(
context,
rawProps,
"marginInline",
sourceProps.marginInline,
CompactValue::ofUndefined());
yoga::value::undefined());
marginInlineStart = convertRawProp(
context,
rawProps,
"marginInlineStart",
sourceProps.marginInlineStart,
CompactValue::ofUndefined());
yoga::value::undefined());
marginInlineEnd = convertRawProp(
context,
rawProps,
"marginInlineEnd",
sourceProps.marginInlineEnd,
CompactValue::ofUndefined());
yoga::value::undefined());
marginBlock = convertRawProp(
context,
rawProps,
"marginBlock",
sourceProps.marginBlock,
CompactValue::ofUndefined());
yoga::value::undefined());
marginBlockStart = convertRawProp(
context,
rawProps,
"marginBlockStart",
sourceProps.marginBlockStart,
CompactValue::ofUndefined());
yoga::value::undefined());
marginBlockEnd = convertRawProp(
context,
rawProps,
"marginBlockEnd",
sourceProps.marginBlockEnd,
CompactValue::ofUndefined());
yoga::value::undefined());

paddingInline = convertRawProp(
context,
rawProps,
"paddingInline",
sourceProps.paddingInline,
CompactValue::ofUndefined());
yoga::value::undefined());
paddingInlineStart = convertRawProp(
context,
rawProps,
"paddingInlineStart",
sourceProps.paddingInlineStart,
CompactValue::ofUndefined());
yoga::value::undefined());
paddingInlineEnd = convertRawProp(
context,
rawProps,
"paddingInlineEnd",
sourceProps.paddingInlineEnd,
CompactValue::ofUndefined());
yoga::value::undefined());
paddingBlock = convertRawProp(
context,
rawProps,
"paddingBlock",
sourceProps.paddingBlock,
CompactValue::ofUndefined());
yoga::value::undefined());
paddingBlockStart = convertRawProp(
context,
rawProps,
"paddingBlockStart",
sourceProps.paddingBlockStart,
CompactValue::ofUndefined());
yoga::value::undefined());
paddingBlockEnd = convertRawProp(
context,
rawProps,
"paddingBlockEnd",
sourceProps.paddingBlockEnd,
CompactValue::ofUndefined());
yoga::value::undefined());
}

} // namespace facebook::react
Loading

0 comments on commit a129c54

Please sign in to comment.