Skip to content

feat: Add Android Paper implementation of inset logical properties #36242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

feat: Add Android Paper implementation of inset logical properties #36242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d82be9e
feat: Add Android Paper implementation of inset logical properties
gabrieldonadel Feb 22, 2023
5b7aeb6
Add meta position to LayoutShadowNode
gabrieldonadel Feb 24, 2023
6f35c5b
Rename Spacing ALL to ALL_EDGES
gabrieldonadel Apr 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 69 additions & 2 deletions ...eact-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ void setFromDynamic(Dynamic dynamic) {
}

private final MutableYogaValue mTempYogaValue;
private final Dynamic[] mPosition = new Dynamic[Spacing.INLINE_START + 1];

public LayoutShadowNode() {
mTempYogaValue = new MutableYogaValue();
Expand Down Expand Up @@ -765,17 +766,83 @@ public void setBorderWidths(int index, float borderWidth) {
ViewProps.RIGHT,
ViewProps.TOP,
ViewProps.BOTTOM,
ViewProps.INSET,
ViewProps.INSET_BLOCK,
ViewProps.INSET_BLOCK_END,
ViewProps.INSET_BLOCK_START,
ViewProps.INSET_INLINE,
ViewProps.INSET_INLINE_END,
ViewProps.INSET_INLINE_START,
})
public void setPositionValues(int index, Dynamic position) {
if (isVirtual()) {
return;
}

final int[] POSITION_SPACING_TYPES = {
Spacing.START, Spacing.END, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM
Spacing.START,
Spacing.END,
Spacing.LEFT,
Spacing.RIGHT,
Spacing.TOP,
Spacing.BOTTOM,
Spacing.ALL_EDGES,
Spacing.BLOCK,
Spacing.BLOCK_END,
Spacing.BLOCK_START,
Spacing.INLINE,
Spacing.INLINE_END,
Spacing.INLINE_START
};

int spacingType = maybeTransformLeftRightToStartEnd(POSITION_SPACING_TYPES[index]);
mPosition[POSITION_SPACING_TYPES[index]] = position;
updatePositionValues();
}

private void updatePositionValues() {
setYogaPosition(Spacing.TOP, mPosition[Spacing.TOP]);
setYogaPosition(Spacing.BOTTOM, mPosition[Spacing.BOTTOM]);
setYogaPosition(Spacing.START, mPosition[Spacing.START]);
setYogaPosition(Spacing.END, mPosition[Spacing.END]);

if (!I18nUtil.getInstance().doLeftAndRightSwapInRTL(getThemedContext())) {
setYogaPosition(Spacing.LEFT, mPosition[Spacing.LEFT]);
setYogaPosition(Spacing.RIGHT, mPosition[Spacing.RIGHT]);
} else {
setYogaPosition(Spacing.START, mPosition[Spacing.LEFT]);
setYogaPosition(Spacing.END, mPosition[Spacing.RIGHT]);
}

// Aliases with precedence
if (mPosition[Spacing.ALL_EDGES] != null && !mPosition[Spacing.ALL_EDGES].isNull()) {
setYogaPosition(Spacing.ALL_EDGES, mPosition[Spacing.ALL_EDGES]);
}
if (mPosition[Spacing.BLOCK] != null && !mPosition[Spacing.BLOCK].isNull()) {
setYogaPosition(Spacing.VERTICAL, mPosition[Spacing.BLOCK]);
}
if (mPosition[Spacing.INLINE] != null && !mPosition[Spacing.INLINE].isNull()) {
setYogaPosition(Spacing.HORIZONTAL, mPosition[Spacing.INLINE]);
}
if (mPosition[Spacing.INLINE_END] != null && !mPosition[Spacing.INLINE_END].isNull()) {
setYogaPosition(Spacing.END, mPosition[Spacing.INLINE_END]);
}
if (mPosition[Spacing.INLINE_START] != null && !mPosition[Spacing.INLINE_START].isNull()) {
setYogaPosition(Spacing.START, mPosition[Spacing.INLINE_START]);
}

// Aliases without precedence
if (mPosition[Spacing.BOTTOM] == null || mPosition[Spacing.BOTTOM].isNull()) {
setYogaPosition(Spacing.BOTTOM, mPosition[Spacing.BLOCK_END]);
}
if (mPosition[Spacing.TOP] == null || mPosition[Spacing.TOP].isNull()) {
setYogaPosition(Spacing.TOP, mPosition[Spacing.BLOCK_START]);
}
}

private void setYogaPosition(int spacingType, Dynamic position) {
if (position == null){
return;
}

mTempYogaValue.setFromDynamic(position);
switch (mTempYogaValue.unit) {
Expand Down
10 changes: 5 additions & 5 deletions ...t-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ public class ReactShadowNodeImpl implements ReactShadowNode<ReactShadowNodeImpl>
private int mScreenWidth;
private int mScreenHeight;
private final Spacing mDefaultPadding;
private final float[] mPadding = new float[Spacing.ALL + 1];
private final boolean[] mPaddingIsPercent = new boolean[Spacing.ALL + 1];
private final float[] mPadding = new float[Spacing.ALL_EDGES + 1];
private final boolean[] mPaddingIsPercent = new boolean[Spacing.ALL_EDGES + 1];
private YogaNode mYogaNode;
private Integer mWidthMeasureSpec;
private Integer mHeightMeasureSpec;
Expand Down Expand Up @@ -921,21 +921,21 @@ public void setPaddingPercent(int spacingType, float percent) {
}

private void updatePadding() {
for (int spacingType = Spacing.LEFT; spacingType <= Spacing.ALL; spacingType++) {
for (int spacingType = Spacing.LEFT; spacingType <= Spacing.ALL_EDGES; spacingType++) {
if (spacingType == Spacing.LEFT
|| spacingType == Spacing.RIGHT
|| spacingType == Spacing.START
|| spacingType == Spacing.END) {
if (YogaConstants.isUndefined(mPadding[spacingType])
&& YogaConstants.isUndefined(mPadding[Spacing.HORIZONTAL])
&& YogaConstants.isUndefined(mPadding[Spacing.ALL])) {
&& YogaConstants.isUndefined(mPadding[Spacing.ALL_EDGES])) {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
continue;
}
} else if (spacingType == Spacing.TOP || spacingType == Spacing.BOTTOM) {
if (YogaConstants.isUndefined(mPadding[spacingType])
&& YogaConstants.isUndefined(mPadding[Spacing.VERTICAL])
&& YogaConstants.isUndefined(mPadding[Spacing.ALL])) {
&& YogaConstants.isUndefined(mPadding[Spacing.ALL_EDGES])) {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
continue;
}
Expand Down
43 changes: 34 additions & 9 deletions packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ public class Spacing {
*/
public static final int VERTICAL = 7;
/**
* Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
* Spacing type that represents all edge directions (left, top, right, bottom). E.g. {@code margin}.
*/
public static final int ALL = 8;
public static final int ALL_EDGES = 8;
/** Spacing type that represents block directions (top, bottom). E.g. {@code marginBlock}. */
public static final int BLOCK = 9;
/** Spacing type that represents the block end direction (bottom). E.g. {@code marginBlockEnd}. */
Expand All @@ -55,10 +55,27 @@ public class Spacing {
* Spacing type that represents the block start direction (top). E.g. {@code marginBlockStart}.
*/
public static final int BLOCK_START = 11;
/** Spacing type that represents inline directions (left, right). E.g. {@code marginInline}. */
public static final int INLINE = 12;
/**
* Spacing type that represents the inline end direction (right in left-to-right, left in
* right-to-left). E.g. {@code marginInlineEnd}.
*/
public static final int INLINE_END = 13;
/**
* Spacing type that represents the inline start direction (left in left-to-right, right in
* right-to-left). E.g. {@code marginInlineStart}.
*/
public static final int INLINE_START = 14;
/**
* Spacing type that represents all directions E.g. {@code margin}.
*/
public static final int ALL = 15;

private static final int[] sFlagsMap = {
1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/
128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/
128, /*VERTICAL*/ 256, /*ALL_EDGES*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/
4096, /*INLINE*/ 8192, /*INLINE_END*/ 16384, /*INLINE_START*/ 32768, /*ALL*/
};

private final float[] mSpacing;
Expand Down Expand Up @@ -86,7 +103,7 @@ public Spacing(Spacing original) {
* Set a spacing value.
*
* @param spacingType one of {@link #LEFT}, {@link #TOP}, {@link #RIGHT}, {@link #BOTTOM}, {@link
* #VERTICAL}, {@link #HORIZONTAL}, {@link #ALL}
* #VERTICAL}, {@link #HORIZONTAL}, {@link #ALL_EDGES}
* @param value the value for this direction
* @return {@code true} if the spacing has changed, or {@code false} if the same value was already
* set
Expand All @@ -102,10 +119,11 @@ public boolean set(int spacingType, float value) {
}

mHasAliasesSet =
(mValueFlags & sFlagsMap[ALL]) != 0
(mValueFlags & sFlagsMap[ALL_EDGES]) != 0
|| (mValueFlags & sFlagsMap[VERTICAL]) != 0
|| (mValueFlags & sFlagsMap[HORIZONTAL]) != 0
|| (mValueFlags & sFlagsMap[BLOCK]) != 0;
|| (mValueFlags & sFlagsMap[BLOCK]) != 0
|| (mValueFlags & sFlagsMap[INLINE]) != 0;

return true;
}
Expand All @@ -125,6 +143,9 @@ public float get(int spacingType) {
|| spacingType == BLOCK
|| spacingType == BLOCK_END
|| spacingType == BLOCK_START
|| spacingType == INLINE
|| spacingType == INLINE_END
|| spacingType == INLINE_START
? YogaConstants.UNDEFINED
: mDefaultValue);

Expand All @@ -140,8 +161,8 @@ public float get(int spacingType) {
int secondType = spacingType == TOP || spacingType == BOTTOM ? VERTICAL : HORIZONTAL;
if ((mValueFlags & sFlagsMap[secondType]) != 0) {
return mSpacing[secondType];
} else if ((mValueFlags & sFlagsMap[ALL]) != 0) {
return mSpacing[ALL];
} else if ((mValueFlags & sFlagsMap[ALL_EDGES]) != 0) {
return mSpacing[ALL_EDGES];
}
}

Expand All @@ -153,7 +174,7 @@ public float get(int spacingType) {
* any default values.
*
* @param spacingType one of {@link #LEFT}, {@link #TOP}, {@link #RIGHT}, {@link #BOTTOM}, {@link
* #VERTICAL}, {@link #HORIZONTAL}, {@link #ALL}
* #VERTICAL}, {@link #HORIZONTAL}, {@link #ALL_EDGES}
*/
public float getRaw(int spacingType) {
return mSpacing[spacingType];
Expand Down Expand Up @@ -192,6 +213,10 @@ private static float[] newFullSpacingArray() {
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
};
}
}
19 changes: 17 additions & 2 deletions packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,14 @@ public class ViewProps {
public static final String HEIGHT = "height";
public static final String JUSTIFY_CONTENT = "justifyContent";
public static final String LEFT = "left";
public static final String INSET = "inset";
public static final String INSET_BLOCK = "insetBlock";
public static final String INSET_BLOCK_END = "insetBlockEnd";
public static final String INSET_BLOCK_START = "insetBlockStart";
public static final String INSET_INLINE = "insetInline";
public static final String INSET_INLINE_END = "insetInlineEnd";
public static final String INSET_INLINE_START = "insetInlineStart";


public static final String MARGIN = "margin";
public static final String MARGIN_VERTICAL = "marginVertical";
Expand Down Expand Up @@ -180,7 +188,7 @@ public class ViewProps {
public static final String NATIVE_ID = "nativeID";

public static final int[] BORDER_SPACING_TYPES = {
Spacing.ALL,
Spacing.ALL_EDGES,
Spacing.START,
Spacing.END,
Spacing.TOP,
Expand All @@ -189,7 +197,7 @@ public class ViewProps {
Spacing.RIGHT
};
public static final int[] PADDING_MARGIN_SPACING_TYPES = {
Spacing.ALL,
Spacing.ALL_EDGES,
Spacing.VERTICAL,
Spacing.HORIZONTAL,
Spacing.START,
Expand Down Expand Up @@ -230,6 +238,13 @@ public class ViewProps {
LEFT,
START,
END,
INSET,
INSET_BLOCK,
INSET_BLOCK_END,
INSET_BLOCK_START,
INSET_INLINE,
INSET_INLINE_END,
INSET_INLINE_START,

/* dimensions */
WIDTH,
Expand Down
2 changes: 1 addition & 1 deletion ...droid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
public static final String REACT_CLASS = "AndroidHorizontalScrollView";

private static final int[] SPACING_TYPES = {
Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
Spacing.ALL_EDGES, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
};

private @Nullable FpsListener mFpsListener = null;
Expand Down
2 changes: 1 addition & 1 deletion ...ve/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ public class ReactScrollViewManager extends ViewGroupManager<ReactScrollView>
public static final String REACT_CLASS = "RCTScrollView";

private static final int[] SPACING_TYPES = {
Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
Spacing.ALL_EDGES, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
};

private @Nullable FpsListener mFpsListener = null;
Expand Down
2 changes: 1 addition & 1 deletion .../ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
extends BaseViewManager<T, C> {

private static final int[] SPACING_TYPES = {
Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
Spacing.ALL_EDGES, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
};
private static final String TAG = "ReactTextAnchorViewManager";

Expand Down
2 changes: 1 addition & 1 deletion .../ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
private static final short TX_STATE_KEY_MOST_RECENT_EVENT_COUNT = 3;

private static final int[] SPACING_TYPES = {
Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
Spacing.ALL_EDGES, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
};
private static final Map<String, String> REACT_PROPS_AUTOFILL_HINTS_MAP =
new HashMap<String, String>() {
Expand Down
6 changes: 6 additions & 0 deletions ...tive/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ object ReactMapBufferPropSetter {
private const val EDGE_BLOCK = 7
private const val EDGE_BLOCK_END = 8
private const val EDGE_BLOCK_START = 9
private const val EDGE_INLINE = 10
private const val EDGE_INLINE_END = 11
private const val EDGE_INLINE_START = 12

private const val CORNER_TOP_LEFT = 0
private const val CORNER_TOP_RIGHT = 1
Expand Down Expand Up @@ -355,6 +358,9 @@ object ReactMapBufferPropSetter {
EDGE_BLOCK -> 7
EDGE_BLOCK_END -> 8
EDGE_BLOCK_START -> 9
EDGE_INLINE -> 10
EDGE_INLINE_END -> 11
EDGE_INLINE_START -> 12
else -> throw IllegalArgumentException("Unknown key for border color: $key")
}
val colorValue = entry.intValue
Expand Down
Loading