Skip to content

Commit

Permalink
Fix issue where paddingStart and paddingEnd were swapped with row rev…
Browse files Browse the repository at this point in the history
…erse (#41023)

Summary:
Pull Request resolved: #41023

X-link: facebook/yoga#1426

Just like D50140503 where marginStart and marginEnd were not working with row reverse, paddingStart and paddingEnd are not working either with row reverse either. The solution is similar - we were checking the flex item layout starting/ending edges and not the general layout starting/ending edges. This change makes it so that we look at the proper edge according to what direction is set.

One caveat is that in the case of padding (and also border) there is a callsite that actually wants to get the flex item layout's leading/trailing padding and not the one dictated by direction. So, I made a new function to accommodate this and just swapped that callsite out.

Reviewed By: NickGerleman

Differential Revision: D50348995

fbshipit-source-id: 85717df23de7cf5f66b38d3ff28435b053a4e68e
  • Loading branch information
joevilches authored and facebook-github-bot committed Oct 18, 2023
1 parent 24169e2 commit 2bf1a8f
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1535,13 +1535,17 @@ static void calculateLayoutImpl(
node->getInlineEndBorder(flexColumnDirection, direction), YGEdgeBottom);

node->setLayoutPadding(
node->getFlexStartPadding(flexRowDirection, ownerWidth), startEdge);
node->getInlineStartPadding(flexRowDirection, direction, ownerWidth),
startEdge);
node->setLayoutPadding(
node->getFlexEndPadding(flexRowDirection, ownerWidth), endEdge);
node->getInlineEndPadding(flexRowDirection, direction, ownerWidth),
endEdge);
node->setLayoutPadding(
node->getFlexStartPadding(flexColumnDirection, ownerWidth), YGEdgeTop);
node->getInlineStartPadding(flexColumnDirection, direction, ownerWidth),
YGEdgeTop);
node->setLayoutPadding(
node->getFlexEndPadding(flexColumnDirection, ownerWidth), YGEdgeBottom);
node->getInlineEndPadding(flexColumnDirection, direction, ownerWidth),
YGEdgeBottom);

if (node->hasMeasureFunc()) {
measureNodeWithMeasureFunc(
Expand Down
51 changes: 43 additions & 8 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -197,18 +197,52 @@ float Node::getFlexEndBorder(FlexDirection axis, Direction direction) const {
return maxOrDefined(trailingBorder.value, 0.0f);
}

float Node::getFlexStartPadding(FlexDirection axis, float widthSize) const {
float Node::getInlineStartPadding(
FlexDirection axis,
Direction direction,
float widthSize) const {
const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction);
auto leadingPadding = isRow(axis)
? computeEdgeValueForRow(style_.padding(), YGEdgeStart, startEdge)
: computeEdgeValueForColumn(style_.padding(), startEdge);

return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f);
}

float Node::getFlexStartPadding(
FlexDirection axis,
Direction direction,
float widthSize) const {
const YGEdge leadRelativeFlexItemEdge =
flexStartRelativeEdge(axis, direction);
auto leadingPadding = isRow(axis)
? computeEdgeValueForRow(
style_.padding(), YGEdgeStart, flexStartEdge(axis))
style_.padding(), leadRelativeFlexItemEdge, flexStartEdge(axis))
: computeEdgeValueForColumn(style_.padding(), flexStartEdge(axis));

return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f);
}

float Node::getFlexEndPadding(FlexDirection axis, float widthSize) const {
float Node::getInlineEndPadding(
FlexDirection axis,
Direction direction,
float widthSize) const {
const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction);
auto trailingPadding = isRow(axis)
? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, endEdge)
: computeEdgeValueForColumn(style_.padding(), endEdge);

return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f);
}

float Node::getFlexEndPadding(
FlexDirection axis,
Direction direction,
float widthSize) const {
const YGEdge trailRelativeFlexItemEdge = flexEndRelativeEdge(axis, direction);
auto trailingPadding = isRow(axis)
? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, flexEndEdge(axis))
? computeEdgeValueForRow(
style_.padding(), trailRelativeFlexItemEdge, flexEndEdge(axis))
: computeEdgeValueForColumn(style_.padding(), flexEndEdge(axis));

return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f);
Expand All @@ -218,31 +252,32 @@ float Node::getInlineStartPaddingAndBorder(
FlexDirection axis,
Direction direction,
float widthSize) const {
return getFlexStartPadding(axis, widthSize) +
return getInlineStartPadding(axis, direction, widthSize) +
getInlineStartBorder(axis, direction);
}

float Node::getFlexStartPaddingAndBorder(
FlexDirection axis,
Direction direction,
float widthSize) const {
return getFlexStartPadding(axis, widthSize) +
return getFlexStartPadding(axis, direction, widthSize) +
getFlexStartBorder(axis, direction);
}

float Node::getInlineEndPaddingAndBorder(
FlexDirection axis,
Direction direction,
float widthSize) const {
return getFlexEndPadding(axis, widthSize) +
return getInlineEndPadding(axis, direction, widthSize) +
getInlineEndBorder(axis, direction);
}

float Node::getFlexEndPaddingAndBorder(
FlexDirection axis,
Direction direction,
float widthSize) const {
return getFlexEndPadding(axis, widthSize) + getFlexEndBorder(axis, direction);
return getFlexEndPadding(axis, direction, widthSize) +
getFlexEndBorder(axis, direction);
}

float Node::getMarginForAxis(FlexDirection axis, float widthSize) const {
Expand Down
18 changes: 16 additions & 2 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.h
Original file line number Diff line number Diff line change
Expand Up @@ -216,8 +216,22 @@ class YG_EXPORT Node : public ::YGNode {
const;
float getInlineEndBorder(FlexDirection flexDirection, Direction direction)
const;
float getFlexStartPadding(FlexDirection axis, float widthSize) const;
float getFlexEndPadding(FlexDirection axis, float widthSize) const;
float getFlexStartPadding(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getInlineStartPadding(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getFlexEndPadding(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getInlineEndPadding(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getFlexStartPaddingAndBorder(
FlexDirection axis,
Direction direction,
Expand Down

0 comments on commit 2bf1a8f

Please sign in to comment.