status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-05 14:13:26 +00:00
Code Issues Projects Releases Wiki Activity

Move custom measure code out of main layout function

Browse Source 
Reviewed By: gkassabli

Differential Revision: D4213302

fbshipit-source-id: df4bc43848325e99ad338a2fa6d5c9404315b0e6
This commit is contained in:
Emil Sjolander 2016-11-21 11:03:53 -08:00 committed by Facebook Github Bot
parent 8dbb025959
commit cf796248ec
2 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
React/CSSLayout/CSSLayout.c
View File

@ -1198,6 +1198,55 @@ static void absoluteLayoutChild(const CSSNodeRef node,
} }
} }
static void setMeasuredDimensionsForNodeWithMeasureFunc(const CSSNodeRef node,
const float availableWidth,
const float availableHeight,
const CSSMeasureMode widthMeasureMode,
const CSSMeasureMode heightMeasureMode) {
CSS_ASSERT(node->measure, "Expected node to have custom measure function");
const float paddingAndBorderAxisRow = getPaddingAndBorderAxis(node, CSSFlexDirectionRow);
const float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSSFlexDirectionColumn);
const float marginAxisRow = getMarginAxis(node, CSSFlexDirectionRow);
const float marginAxisColumn = getMarginAxis(node, CSSFlexDirectionColumn);
const float innerWidth = availableWidth - marginAxisRow - paddingAndBorderAxisRow;
const float innerHeight = availableHeight - marginAxisColumn - paddingAndBorderAxisColumn;
if (widthMeasureMode == CSSMeasureModeExactly && heightMeasureMode == CSSMeasureModeExactly) {
// Don't bother sizing the text if both dimensions are already defined.
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
} else if (innerWidth <= 0 || innerHeight <= 0) {
// Don't bother sizing the text if there's no horizontal or vertical
// space.
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
} else {
// Measure the text under the current constraints.
const CSSSize measuredSize =
node->measure(node, innerWidth, widthMeasureMode, innerHeight, heightMeasureMode);
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
(widthMeasureMode == CSSMeasureModeUndefined ||
widthMeasureMode == CSSMeasureModeAtMost)
? measuredSize.width + paddingAndBorderAxisRow
: availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
(heightMeasureMode == CSSMeasureModeUndefined ||
heightMeasureMode == CSSMeasureModeAtMost)
? measuredSize.height + paddingAndBorderAxisColumn
: availableHeight - marginAxisColumn);
}
}
// //
// This is the main routine that implements a subset of the flexbox layout // This is the main routine that implements a subset of the flexbox layout
// algorithm // algorithm
@ -1335,45 +1384,9 @@ static void layoutNodeImpl(const CSSNodeRef node,
const CSSDirection direction = resolveDirection(node, parentDirection); const CSSDirection direction = resolveDirection(node, parentDirection);
node->layout.direction = direction; node->layout.direction = direction;
// For content (text) nodes, determine the dimensions based on the text
// contents.
if (node->measure) { if (node->measure) {
const float innerWidth = availableWidth - marginAxisRow - paddingAndBorderAxisRow; setMeasuredDimensionsForNodeWithMeasureFunc(
const float innerHeight = availableHeight - marginAxisColumn - paddingAndBorderAxisColumn; node, availableWidth, availableHeight, widthMeasureMode, heightMeasureMode);
if (widthMeasureMode == CSSMeasureModeExactly && heightMeasureMode == CSSMeasureModeExactly) {
// Don't bother sizing the text if both dimensions are already defined.
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
} else if (innerWidth <= 0 || innerHeight <= 0) {
// Don't bother sizing the text if there's no horizontal or vertical
// space.
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
} else {
// Measure the text under the current constraints.
const CSSSize measuredSize =
node->measure(node, innerWidth, widthMeasureMode, innerHeight, heightMeasureMode);
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
(widthMeasureMode == CSSMeasureModeUndefined ||
widthMeasureMode == CSSMeasureModeAtMost)
? measuredSize.width + paddingAndBorderAxisRow
: availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
(heightMeasureMode == CSSMeasureModeUndefined ||
heightMeasureMode == CSSMeasureModeAtMost)
? measuredSize.height + paddingAndBorderAxisColumn
: availableHeight - marginAxisColumn);
}
return; return;
} }

89
ReactCommon/CSSLayout/CSSLayout/CSSLayout.c
View File

@ -1198,6 +1198,55 @@ static void absoluteLayoutChild(const CSSNodeRef node,
} }
} }
static void setMeasuredDimensionsForNodeWithMeasureFunc(const CSSNodeRef node,
const float availableWidth,
const float availableHeight,
const CSSMeasureMode widthMeasureMode,
const CSSMeasureMode heightMeasureMode) {
CSS_ASSERT(node->measure, "Expected node to have custom measure function");
const float paddingAndBorderAxisRow = getPaddingAndBorderAxis(node, CSSFlexDirectionRow);
const float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSSFlexDirectionColumn);
const float marginAxisRow = getMarginAxis(node, CSSFlexDirectionRow);
const float marginAxisColumn = getMarginAxis(node, CSSFlexDirectionColumn);
const float innerWidth = availableWidth - marginAxisRow - paddingAndBorderAxisRow;
const float innerHeight = availableHeight - marginAxisColumn - paddingAndBorderAxisColumn;
if (widthMeasureMode == CSSMeasureModeExactly && heightMeasureMode == CSSMeasureModeExactly) {
// Don't bother sizing the text if both dimensions are already defined.
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
} else if (innerWidth <= 0 || innerHeight <= 0) {
// Don't bother sizing the text if there's no horizontal or vertical
// space.
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
} else {
// Measure the text under the current constraints.
const CSSSize measuredSize =
node->measure(node, innerWidth, widthMeasureMode, innerHeight, heightMeasureMode);
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
(widthMeasureMode == CSSMeasureModeUndefined ||
widthMeasureMode == CSSMeasureModeAtMost)
? measuredSize.width + paddingAndBorderAxisRow
: availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
(heightMeasureMode == CSSMeasureModeUndefined ||
heightMeasureMode == CSSMeasureModeAtMost)
? measuredSize.height + paddingAndBorderAxisColumn
: availableHeight - marginAxisColumn);
}
}
// //
// This is the main routine that implements a subset of the flexbox layout // This is the main routine that implements a subset of the flexbox layout
// algorithm // algorithm
@ -1335,45 +1384,9 @@ static void layoutNodeImpl(const CSSNodeRef node,
const CSSDirection direction = resolveDirection(node, parentDirection); const CSSDirection direction = resolveDirection(node, parentDirection);
node->layout.direction = direction; node->layout.direction = direction;
// For content (text) nodes, determine the dimensions based on the text
// contents.
if (node->measure) { if (node->measure) {
const float innerWidth = availableWidth - marginAxisRow - paddingAndBorderAxisRow; setMeasuredDimensionsForNodeWithMeasureFunc(
const float innerHeight = availableHeight - marginAxisColumn - paddingAndBorderAxisColumn; node, availableWidth, availableHeight, widthMeasureMode, heightMeasureMode);
if (widthMeasureMode == CSSMeasureModeExactly && heightMeasureMode == CSSMeasureModeExactly) {
// Don't bother sizing the text if both dimensions are already defined.
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
} else if (innerWidth <= 0 || innerHeight <= 0) {
// Don't bother sizing the text if there's no horizontal or vertical
// space.
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
} else {
// Measure the text under the current constraints.
const CSSSize measuredSize =
node->measure(node, innerWidth, widthMeasureMode, innerHeight, heightMeasureMode);
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
(widthMeasureMode == CSSMeasureModeUndefined ||
widthMeasureMode == CSSMeasureModeAtMost)
? measuredSize.width + paddingAndBorderAxisRow
: availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
(heightMeasureMode == CSSMeasureModeUndefined ||
heightMeasureMode == CSSMeasureModeAtMost)
? measuredSize.height + paddingAndBorderAxisColumn
: availableHeight - marginAxisColumn);
}
return; return;
} }