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

Provide RTL support for RCTShadowView according to new csslayout 

Summary:
The make current RCTShadowView support RTL layout.
1 Change all left/right to start/end for margin, padding, boarder and position
2 Calculate position in the same way as margin, padding and boarder

Reviewed By: fkgozali

Differential Revision: D3619292

fbshipit-source-id: eaaa6faeee93c964d59bb6f498d89effc09ed567
This commit is contained in:
Mengjue Wang 2016-07-29 10:30:34 -07:00 committed by Facebook Github Bot 8
parent 654a36018c
commit 70dc98dea4
4 changed files with 58 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -378,11 +378,11 @@ public class CSSNode {
/**
* Get this node's position, as defined by style.
*/
public Spacing getPosition() {
public Spacing getPositionValue() {
return style.position;
}
public void setPosition(int spacingType, float position) {
public void setPositionValue(int spacingType, float position) {
if (style.position.set(spacingType, position)) {
dirty();
}
@ -396,9 +396,7 @@ public class CSSNode {
}
public void setPositionTop(float positionTop) {
if (style.position.set(TOP, positionTop)) {
dirty();
}
setPositionValue(TOP, positionTop);
}
/**
@ -409,9 +407,7 @@ public class CSSNode {
}
public void setPositionBottom(float positionBottom) {
if (style.position.set(BOTTOM, positionBottom)) {
dirty();
}
setPositionValue(BOTTOM, positionBottom);
}
/**
@ -422,9 +418,7 @@ public class CSSNode {
}
public void setPositionLeft(float positionLeft) {
if (style.position.set(LEFT, positionLeft)) {
dirty();
}
setPositionValue(LEFT, positionLeft);
}
/**
@ -435,9 +429,7 @@ public class CSSNode {
}
public void setPositionRight(float positionRight) {
if (style.position.set(RIGHT, positionRight)) {
dirty();
}
setPositionValue(RIGHT, positionRight);
}
/**

33
ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
View File

@ -51,26 +51,6 @@ public class LayoutShadowNode extends ReactShadowNode {
setStyleMaxHeight(CSSConstants.isUndefined(maxHeight) ? maxHeight : PixelUtil.toPixelFromDIP(maxHeight));
}
@ReactProp(name = ViewProps.LEFT, defaultFloat = CSSConstants.UNDEFINED)
public void setLeft(float left) {
setPositionLeft(CSSConstants.isUndefined(left) ? left : PixelUtil.toPixelFromDIP(left));
}
@ReactProp(name = ViewProps.TOP, defaultFloat = CSSConstants.UNDEFINED)
public void setTop(float top) {
setPositionTop(CSSConstants.isUndefined(top) ? top : PixelUtil.toPixelFromDIP(top));
}
@ReactProp(name = ViewProps.BOTTOM, defaultFloat = CSSConstants.UNDEFINED)
public void setBottom(float bottom) {
setPositionBottom(CSSConstants.isUndefined(bottom) ? bottom : PixelUtil.toPixelFromDIP(bottom));
}
@ReactProp(name = ViewProps.RIGHT, defaultFloat = CSSConstants.UNDEFINED)
public void setRight(float right) {
setPositionRight(CSSConstants.isUndefined(right) ? right : PixelUtil.toPixelFromDIP(right));
}
@ReactProp(name = ViewProps.FLEX, defaultFloat = 0f)
public void setFlex(float flex) {
super.setFlex(flex);
@ -146,6 +126,19 @@ public class LayoutShadowNode extends ReactShadowNode {
setBorder(ViewProps.BORDER_SPACING_TYPES[index], PixelUtil.toPixelFromDIP(borderWidth));
}
@ReactPropGroup(names = {
ViewProps.LEFT,
ViewProps.RIGHT,
ViewProps.TOP,
ViewProps.BOTTOM,
}, defaultFloat = CSSConstants.UNDEFINED)
public void setPositionValues(int index, float position) {
setPositionValue(
ViewProps.POSITION_SPACING_TYPES[index],
CSSConstants.isUndefined(position) ? position : PixelUtil.toPixelFromDIP(position)
);
}
@ReactProp(name = ViewProps.POSITION)
public void setPosition(@Nullable String position) {
CSSPositionType positionType = position == null ?

7
ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View File

@ -90,12 +90,15 @@ public class ViewProps {
public static final String BORDER_BOTTOM_LEFT_RADIUS = "borderBottomLeftRadius";
public static final String BORDER_BOTTOM_RIGHT_RADIUS = "borderBottomRightRadius";
public static final int[] BORDER_SPACING_TYPES = {
Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM
Spacing.ALL, Spacing.START, Spacing.END, Spacing.TOP, Spacing.BOTTOM
};
public static final int[] PADDING_MARGIN_SPACING_TYPES = {
Spacing.ALL, Spacing.VERTICAL, Spacing.HORIZONTAL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP,
Spacing.ALL, Spacing.VERTICAL, Spacing.HORIZONTAL, Spacing.START, Spacing.END, Spacing.TOP,
Spacing.BOTTOM
};
public static final int[] POSITION_SPACING_TYPES = {
Spacing.START, Spacing.END, Spacing.TOP, Spacing.BOTTOM
};
private static final HashSet<String> LAYOUT_ONLY_PROPS = new HashSet<>(
Arrays.asList(

68
ReactAndroid/src/test/java/com/facebook/react/uimanager/LayoutPropertyApplicatorTest.java
View File

@ -83,9 +83,9 @@ public class LayoutPropertyApplicatorTest {
verify(map).getFloat(eq("width"), anyFloat());
verify(reactShadowNode).setStyleHeight(anyFloat());
verify(map).getFloat(eq("height"), anyFloat());
verify(reactShadowNode).setPositionLeft(anyFloat());
verify(reactShadowNode).setPositionValue(eq(Spacing.START), anyFloat());
verify(map).getFloat(eq("left"), anyFloat());
verify(reactShadowNode).setPositionTop(anyFloat());
verify(reactShadowNode).setPositionValue(eq(Spacing.TOP), anyFloat());
verify(map).getFloat(eq("top"), anyFloat());
reactShadowNode = spy(new LayoutShadowNode());
@ -96,9 +96,9 @@ public class LayoutPropertyApplicatorTest {
verify(map, never()).getFloat(eq("width"), anyFloat());
verify(reactShadowNode, never()).setStyleHeight(anyFloat());
verify(map, never()).getFloat(eq("height"), anyFloat());
verify(reactShadowNode, never()).setPositionLeft(anyFloat());
verify(reactShadowNode, never()).setPositionValue(eq(Spacing.START), anyFloat());
verify(map, never()).getFloat(eq("left"), anyFloat());
verify(reactShadowNode, never()).setPositionTop(anyFloat());
verify(reactShadowNode, never()).setPositionValue(eq(Spacing.TOP), anyFloat());
verify(map, never()).getFloat(eq("top"), anyFloat());
}
@ -128,8 +128,8 @@ public class LayoutPropertyApplicatorTest {
"right", 5.0));
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setPositionBottom(anyFloat());
verify(reactShadowNode).setPositionRight(anyFloat());
verify(reactShadowNode).setPositionValue(eq(Spacing.BOTTOM), anyFloat());
verify(reactShadowNode).setPositionValue(eq(Spacing.END), anyFloat());
verify(reactShadowNode).setPositionType(any(CSSPositionType.class));
verify(map).getFloat("bottom", Float.NaN);
verify(map).getFloat("right", Float.NaN);
@ -138,8 +138,8 @@ public class LayoutPropertyApplicatorTest {
map = spy(buildStyles());
reactShadowNode.updateProperties(map);
verify(reactShadowNode, never()).setPositionBottom(anyFloat());
verify(reactShadowNode, never()).setPositionRight(anyFloat());
verify(reactShadowNode, never()).setPositionValue(eq(Spacing.BOTTOM), anyFloat());
verify(reactShadowNode, never()).setPositionValue(eq(Spacing.END), anyFloat());
verify(reactShadowNode, never()).setPositionType(any(CSSPositionType.class));
verify(map, never()).getFloat("bottom", Float.NaN);
verify(map, never()).getFloat("right", Float.NaN);
@ -192,7 +192,7 @@ public class LayoutPropertyApplicatorTest {
map = spy(buildStyles("marginLeft", 10.0));
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setMargin(eq(Spacing.LEFT), anyFloat());
verify(reactShadowNode).setMargin(eq(Spacing.START), anyFloat());
verify(map).getFloat("marginLeft", CSSConstants.UNDEFINED);
// marginRight
@ -200,7 +200,7 @@ public class LayoutPropertyApplicatorTest {
map = spy(buildStyles("marginRight", 10.0));
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setMargin(eq(Spacing.RIGHT), anyFloat());
verify(reactShadowNode).setMargin(eq(Spacing.END), anyFloat());
verify(map).getFloat("marginRight", CSSConstants.UNDEFINED);
// no margin
@ -259,7 +259,7 @@ public class LayoutPropertyApplicatorTest {
map = spy(buildStyles("paddingLeft", 10.0));
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setPadding(eq(Spacing.LEFT), anyFloat());
verify(reactShadowNode).setPadding(eq(Spacing.START), anyFloat());
verify(map).getFloat("paddingLeft", CSSConstants.UNDEFINED);
// paddingRight
@ -267,7 +267,7 @@ public class LayoutPropertyApplicatorTest {
map = spy(buildStyles("paddingRight", 10.0));
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setPadding(eq(Spacing.RIGHT), anyFloat());
verify(reactShadowNode).setPadding(eq(Spacing.END), anyFloat());
verify(map).getFloat("paddingRight", CSSConstants.UNDEFINED);
// no padding
@ -332,11 +332,11 @@ public class LayoutPropertyApplicatorTest {
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setStyleWidth(10.f);
verify(reactShadowNode).setStyleHeight(10.f);
verify(reactShadowNode).setPositionLeft(10.f);
verify(reactShadowNode).setPositionTop(10.f);
verify(reactShadowNode).setPositionValue(Spacing.START, 10.f);
verify(reactShadowNode).setPositionValue(Spacing.TOP, 10.f);
verify(reactShadowNode).setFlex(1.0f);
verify(reactShadowNode).setPadding(Spacing.ALL, 10.f);
verify(reactShadowNode).setMargin(Spacing.LEFT, 10.f);
verify(reactShadowNode).setMargin(Spacing.START, 10.f);
verify(reactShadowNode).setBorder(Spacing.TOP, 10.f);
verify(reactShadowNode).setFlexDirection(CSSFlexDirection.ROW);
verify(reactShadowNode).setAlignSelf(CSSAlign.STRETCH);
@ -363,11 +363,11 @@ public class LayoutPropertyApplicatorTest {
reactShadowNode.updateProperties(map);
verify(reactShadowNode).setStyleWidth(CSSConstants.UNDEFINED);
verify(reactShadowNode).setStyleHeight(CSSConstants.UNDEFINED);
verify(reactShadowNode).setPositionLeft(CSSConstants.UNDEFINED);
verify(reactShadowNode).setPositionTop(CSSConstants.UNDEFINED);
verify(reactShadowNode).setPositionValue(Spacing.START, CSSConstants.UNDEFINED);
verify(reactShadowNode).setPositionValue(Spacing.TOP, CSSConstants.UNDEFINED);
verify(reactShadowNode).setFlex(0.f);
verify(reactShadowNode).setPadding(Spacing.ALL, CSSConstants.UNDEFINED);
verify(reactShadowNode).setMargin(Spacing.LEFT, CSSConstants.UNDEFINED);
verify(reactShadowNode).setMargin(Spacing.START, CSSConstants.UNDEFINED);
verify(reactShadowNode).setBorder(Spacing.TOP, CSSConstants.UNDEFINED);
verify(reactShadowNode).setFlexDirection(CSSFlexDirection.COLUMN);
verify(reactShadowNode).setAlignSelf(CSSAlign.AUTO);
@ -391,9 +391,9 @@ public class LayoutPropertyApplicatorTest {
LayoutShadowNode[] nodes = new LayoutShadowNode[7];
for (int idx = 0; idx < nodes.length; idx++) {
nodes[idx] = new LayoutShadowNode();
nodes[idx].setDefaultPadding(Spacing.LEFT, 15);
nodes[idx].setDefaultPadding(Spacing.START, 15);
nodes[idx].setDefaultPadding(Spacing.TOP, 25);
nodes[idx].setDefaultPadding(Spacing.RIGHT, 35);
nodes[idx].setDefaultPadding(Spacing.END, 35);
nodes[idx].setDefaultPadding(Spacing.BOTTOM, 45);
}
@ -413,39 +413,39 @@ public class LayoutPropertyApplicatorTest {
nodes[idx].updateProperties(mapNodes[idx]);
}
assertEquals(10.0, nodes[0].getPadding().get(Spacing.LEFT), .0001);
assertEquals(10.0, nodes[0].getPadding().get(Spacing.START), .0001);
assertEquals(25.0, nodes[0].getPadding().get(Spacing.TOP), .0001);
assertEquals(5.0, nodes[0].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(5.0, nodes[0].getPadding().get(Spacing.END), .0001);
assertEquals(45.0, nodes[0].getPadding().get(Spacing.BOTTOM), .0001);
assertEquals(10.0, nodes[1].getPadding().get(Spacing.LEFT), .0001);
assertEquals(10.0, nodes[1].getPadding().get(Spacing.START), .0001);
assertEquals(5.0, nodes[1].getPadding().get(Spacing.TOP), .0001);
assertEquals(10.0, nodes[1].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(10.0, nodes[1].getPadding().get(Spacing.END), .0001);
assertEquals(10.0, nodes[1].getPadding().get(Spacing.BOTTOM), .0001);
assertEquals(10.0, nodes[2].getPadding().get(Spacing.LEFT), .0001);
assertEquals(10.0, nodes[2].getPadding().get(Spacing.START), .0001);
assertEquals(5.0, nodes[2].getPadding().get(Spacing.TOP), .0001);
assertEquals(35.0, nodes[2].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(35.0, nodes[2].getPadding().get(Spacing.END), .0001);
assertEquals(5.0, nodes[2].getPadding().get(Spacing.BOTTOM), .0001);
assertEquals(5.0, nodes[3].getPadding().get(Spacing.LEFT), .0001);
assertEquals(5.0, nodes[3].getPadding().get(Spacing.START), .0001);
assertEquals(25.0, nodes[3].getPadding().get(Spacing.TOP), .0001);
assertEquals(5.0, nodes[3].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(5.0, nodes[3].getPadding().get(Spacing.END), .0001);
assertEquals(10.0, nodes[3].getPadding().get(Spacing.BOTTOM), .0001);
assertEquals(15.0, nodes[4].getPadding().get(Spacing.LEFT), .0001);
assertEquals(15.0, nodes[4].getPadding().get(Spacing.START), .0001);
assertEquals(5.0, nodes[4].getPadding().get(Spacing.TOP), .0001);
assertEquals(35.0, nodes[4].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(35.0, nodes[4].getPadding().get(Spacing.END), .0001);
assertEquals(45.0, nodes[4].getPadding().get(Spacing.BOTTOM), .0001);
assertEquals(15.0, nodes[5].getPadding().get(Spacing.LEFT), .0001);
assertEquals(15.0, nodes[5].getPadding().get(Spacing.START), .0001);
assertEquals(7.0, nodes[5].getPadding().get(Spacing.TOP), .0001);
assertEquals(10.0, nodes[5].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(10.0, nodes[5].getPadding().get(Spacing.END), .0001);
assertEquals(7.0, nodes[5].getPadding().get(Spacing.BOTTOM), .0001);
assertEquals(15.0, nodes[6].getPadding().get(Spacing.LEFT), .0001);
assertEquals(15.0, nodes[6].getPadding().get(Spacing.START), .0001);
assertEquals(25.0, nodes[6].getPadding().get(Spacing.TOP), .0001);
assertEquals(35.0, nodes[6].getPadding().get(Spacing.RIGHT), .0001);
assertEquals(35.0, nodes[6].getPadding().get(Spacing.END), .0001);
assertEquals(45.0, nodes[6].getPadding().get(Spacing.BOTTOM), .0001);
}
}