status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement flex properties in java version as well 

Reviewed By: lucasr

Differential Revision: D3753231

fbshipit-source-id: ea41d887cd99d1f03d2bc876a2fd7141dbe48320
This commit is contained in:
Emil Sjolander 2016-08-23 04:36:55 -07:00 committed by Facebook Github Bot 2
parent 993cfa1826
commit e63a7ea7bd
6 changed files with 127 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ReactAndroid/src/main/java/com/facebook/csslayout/CSSLayout.java
View File

@ -31,7 +31,7 @@ public class CSSLayout {
public float[] dimensions = new float[2];
public CSSDirection direction = CSSDirection.LTR;
public float flexBasis;
public float computedFlexBasis;
public int generationCount;
public CSSDirection lastParentDirection;
@ -51,7 +51,7 @@ public class CSSLayout {
Arrays.fill(dimensions, CSSConstants.UNDEFINED);
direction = CSSDirection.LTR;
flexBasis = 0;
computedFlexBasis = 0;
generationCount = 0;
lastParentDirection = null;

61
ReactAndroid/src/main/java/com/facebook/csslayout/CSSNode.java
View File

@ -361,17 +361,72 @@ public class CSSNode implements CSSNodeAPI<CSSNode> {
*/
@Override
public float getFlex() {
return style.flex;
if (style.flexGrow > 0) {
return style.flexGrow;
} else if (style.flexShrink > 0) {
return -style.flexShrink;
}
return 0;
}
@Override
public void setFlex(float flex) {
if (!valuesEqual(style.flex, flex)) {
style.flex = flex;
if (CSSConstants.isUndefined(flex) || flex == 0) {
setFlexGrow(0);
setFlexShrink(0);
setFlexBasis(CSSConstants.UNDEFINED);
} else if (flex > 0) {
setFlexGrow(flex);
setFlexShrink(0);
setFlexBasis(0);
} else {
setFlexGrow(0);
setFlexShrink(-flex);
setFlexBasis(CSSConstants.UNDEFINED);
}
}
@Override
public float getFlexGrow() {
return style.flexGrow;
}
@Override
public void setFlexGrow(float flexGrow) {
if (!valuesEqual(style.flexGrow, flexGrow)) {
style.flexGrow = flexGrow;
dirty();
}
}
@Override
public float getFlexShrink() {
return style.flexShrink;
}
@Override
public void setFlexShrink(float flexShrink) {
if (!valuesEqual(style.flexShrink, flexShrink)) {
style.flexShrink = flexShrink;
dirty();
}
}
@Override
public float getFlexBasis() {
return style.flexBasis;
}
@Override
public void setFlexBasis(float flexBasis) {
if (!valuesEqual(style.flexBasis, flexBasis)) {
style.flexBasis = flexBasis;
dirty();
}
}
/**
* Get this node's margin, as defined by style + default margin.
*/

6
ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeAPI.java
View File

@ -54,6 +54,12 @@ public interface CSSNodeAPI<CSSNodeType extends CSSNodeAPI> {
void setWrap(CSSWrap flexWrap);
float getFlex();
void setFlex(float flex);
float getFlexGrow();
void setFlexGrow(float flexGrow);
float getFlexShrink();
void setFlexShrink(float flexShrink);
float getFlexBasis();
void setFlexBasis(float flexBasis);
Spacing getMargin();
void setMargin(int spacingType, float margin);
Spacing getPadding();

42
ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeJNI.java
View File

@ -293,6 +293,48 @@ public class CSSNodeJNI implements CSSNodeAPI<CSSNodeJNI> {
jni_CSSNodeStyleSetFlex(mNativePointer, flex);
}
private native float jni_CSSNodeStyleGetFlexGrow(long nativePointer);
@Override
public float getFlexGrow() {
assertNativeInstance();
return jni_CSSNodeStyleGetFlexGrow(mNativePointer);
}
private native void jni_CSSNodeStyleSetFlexGrow(long nativePointer, float flexGrow);
@Override
public void setFlexGrow(float flexGrow) {
assertNativeInstance();
jni_CSSNodeStyleSetFlexGrow(mNativePointer, flexGrow);
}
private native float jni_CSSNodeStyleGetFlexShrink(long nativePointer);
@Override
public float getFlexShrink() {
assertNativeInstance();
return jni_CSSNodeStyleGetFlexShrink(mNativePointer);
}
private native void jni_CSSNodeStyleSetFlexShrink(long nativePointer, float flexShrink);
@Override
public void setFlexShrink(float flexShrink) {
assertNativeInstance();
jni_CSSNodeStyleSetFlexShrink(mNativePointer, flexShrink);
}
private native float jni_CSSNodeStyleGetFlexBasis(long nativePointer);
@Override
public float getFlexBasis() {
assertNativeInstance();
return jni_CSSNodeStyleGetFlexBasis(mNativePointer);
}
private native void jni_CSSNodeStyleSetFlexBasis(long nativePointer, float flexBasis);
@Override
public void setFlexBasis(float flexBasis) {
assertNativeInstance();
jni_CSSNodeStyleSetFlexBasis(mNativePointer, flexBasis);
}
private native float jni_CSSNodeStyleGetMargin(long nativePointer, int edge);
@Override
public Spacing getMargin() {

8
ReactAndroid/src/main/java/com/facebook/csslayout/CSSStyle.java
View File

@ -25,7 +25,9 @@ public class CSSStyle {
public CSSPositionType positionType;
public CSSWrap flexWrap;
public CSSOverflow overflow;
public float flex;
public float flexGrow;
public float flexShrink;
public float flexBasis;
public Spacing margin = new Spacing();
public Spacing padding = new Spacing();
@ -54,7 +56,9 @@ public class CSSStyle {
positionType = CSSPositionType.RELATIVE;
flexWrap = CSSWrap.NOWRAP;
overflow = CSSOverflow.VISIBLE;
flex = 0f;
flexGrow = 0;
flexShrink = 0;
flexBasis = CSSConstants.UNDEFINED;
margin.reset();
padding.reset();

49
ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java
View File

@ -23,8 +23,6 @@ import static com.facebook.csslayout.CSSLayout.POSITION_TOP;
*/
public class LayoutEngine {
private static final boolean POSITIVE_FLEX_IS_AUTO = false;
private static final int CSS_FLEX_DIRECTION_COLUMN =
CSSFlexDirection.COLUMN.ordinal();
private static final int CSS_FLEX_DIRECTION_COLUMN_REVERSE =
@ -80,36 +78,15 @@ public class LayoutEngine {
};
private static boolean isFlexBasisAuto(CSSNode node) {
if (POSITIVE_FLEX_IS_AUTO) {
// All flex values are auto.
return true;
} else {
// A flex value > 0 implies a basis of zero.
return node.style.flex <= 0;
}
return CSSConstants.isUndefined(node.style.flexBasis);
}
private static float getFlexGrowFactor(CSSNode node) {
// Flex grow is implied by positive values for flex.
if (node.style.flex > 0) {
return node.style.flex;
}
return 0;
return node.style.flexGrow;
}
private static float getFlexShrinkFactor(CSSNode node) {
if (POSITIVE_FLEX_IS_AUTO) {
// A flex shrink factor of 1 is implied by non-zero values for flex.
if (node.style.flex != 0) {
return 1;
}
} else {
// A flex shrink factor of 1 is implied by negative values for flex.
if (node.style.flex < 0) {
return 1;
}
}
return 0;
return node.style.flexShrink;
}
@ -712,15 +689,15 @@ public class LayoutEngine {
if (isMainAxisRow && (child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0)) {
// The width is definite, so use that as the flex basis.
child.layout.flexBasis = Math.max(child.style.dimensions[DIMENSION_WIDTH], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]))));
child.layout.computedFlexBasis = Math.max(child.style.dimensions[DIMENSION_WIDTH], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]))));
} else if (!isMainAxisRow && (child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0)) {
// The height is definite, so use that as the flex basis.
child.layout.flexBasis = Math.max(child.style.dimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]))));
child.layout.computedFlexBasis = Math.max(child.style.dimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]))));
} else if (!isFlexBasisAuto(child) && !Float.isNaN(availableInnerMainDim)) {
// If the basis isn't 'auto', it is assumed to be zero.
child.layout.flexBasis = Math.max(0, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
child.layout.computedFlexBasis = Math.max(child.style.flexBasis, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
} else {
// Compute the flex basis and hypothetical main size (i.e. the clamped flex basis).
@ -778,7 +755,7 @@ public class LayoutEngine {
// Measure the child
layoutNodeInternal(layoutContext, child, childWidth, childHeight, direction, childWidthMeasureMode, childHeightMeasureMode, false, "measure");
child.layout.flexBasis = Math.max(isMainAxisRow ? child.layout.measuredDimensions[DIMENSION_WIDTH] : child.layout.measuredDimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
child.layout.computedFlexBasis = Math.max(isMainAxisRow ? child.layout.measuredDimensions[DIMENSION_WIDTH] : child.layout.measuredDimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
}
}
}
@ -825,7 +802,7 @@ public class LayoutEngine {
child.lineIndex = lineCount;
if (child.style.positionType != CSSPositionType.ABSOLUTE) {
float outerFlexBasis = child.layout.flexBasis + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]));
float outerFlexBasis = child.layout.computedFlexBasis + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]));
// If this is a multi-line flow and this item pushes us over the available size, we've
// hit the end of the current line. Break out of the loop and lay out the current line.
@ -836,12 +813,12 @@ public class LayoutEngine {
sizeConsumedOnCurrentLine += outerFlexBasis;
itemsOnLine++;
if ((child.style.positionType == CSSPositionType.RELATIVE && child.style.flex != 0)) {
if ((child.style.positionType == CSSPositionType.RELATIVE && (child.style.flexGrow != 0 || child.style.flexShrink != 0))) {
totalFlexGrowFactors += getFlexGrowFactor(child);
// Unlike the grow factor, the shrink factor is scaled relative to the child
// dimension.
totalFlexShrinkScaledFactors += getFlexShrinkFactor(child) * child.layout.flexBasis;
totalFlexShrinkScaledFactors += getFlexShrinkFactor(child) * child.layout.computedFlexBasis;
}
// Store a private linked list of children that need to be layed out.
@ -910,7 +887,7 @@ public class LayoutEngine {
float deltaFlexGrowFactors = 0;
currentRelativeChild = firstRelativeChild;
while (currentRelativeChild != null) {
childFlexBasis = currentRelativeChild.layout.flexBasis;
childFlexBasis = currentRelativeChild.layout.computedFlexBasis;
if (remainingFreeSpace < 0) {
flexShrinkScaledFactor = getFlexShrinkFactor(currentRelativeChild) * childFlexBasis;
@ -957,7 +934,7 @@ public class LayoutEngine {
deltaFreeSpace = 0;
currentRelativeChild = firstRelativeChild;
while (currentRelativeChild != null) {
childFlexBasis = currentRelativeChild.layout.flexBasis;
childFlexBasis = currentRelativeChild.layout.computedFlexBasis;
float updatedMainSize = childFlexBasis;
if (remainingFreeSpace < 0) {
@ -1095,7 +1072,7 @@ public class LayoutEngine {
if (canSkipFlex) {
// If we skipped the flex step, then we can't rely on the measuredDims because
// they weren't computed. This means we can't call getDimWithMargin.
mainDim += betweenMainDim + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])) + child.layout.flexBasis;
mainDim += betweenMainDim + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])) + child.layout.computedFlexBasis;
crossDim = availableInnerCrossDim;
} else {
// The main dimension is the sum of all the elements dimension plus