From 31f848a5fa56e17fbc6dbbba7d319a3b30083ac8 Mon Sep 17 00:00:00 2001 From: Emil Sjolander Date: Wed, 1 Mar 2017 09:12:48 -0800 Subject: [PATCH] Expose alignContent to react native Summary: This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage. ``` class Playground extends React.Component { render() { return ( ); } } ``` Reviewed By: astreet Differential Revision: D4611803 fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2 --- Libraries/StyleSheet/LayoutPropTypes.js | 14 ++++++++++++++ React/Base/RCTConvert.m | 4 +++- React/Views/RCTShadowView.h | 1 + React/Views/RCTShadowView.m | 1 + React/Views/RCTViewManager.m | 1 + .../facebook/react/uimanager/LayoutShadowNode.java | 10 ++++++++++ .../facebook/react/uimanager/ReactShadowNode.java | 4 ++++ .../com/facebook/react/uimanager/ViewProps.java | 2 ++ 8 files changed, 36 insertions(+), 1 deletion(-) diff --git a/Libraries/StyleSheet/LayoutPropTypes.js b/Libraries/StyleSheet/LayoutPropTypes.js index d8790f2af..df0fb87ef 100644 --- a/Libraries/StyleSheet/LayoutPropTypes.js +++ b/Libraries/StyleSheet/LayoutPropTypes.js @@ -402,6 +402,20 @@ var LayoutPropTypes = { 'baseline' ]), + /** `alignContent` controls how a rows align in the cross direction, + * overriding the `alignContent` of the parent. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content + * for more details. + */ + alignContent: ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch', + 'space-between', + 'space-around' + ]), + /** `overflow` controls how a children are measured and displayed. * `overflow: hidden` causes views to be clipped while `overflow: scroll` * causes views to be measured independently of their parents main axis.` diff --git a/React/Base/RCTConvert.m b/React/Base/RCTConvert.m index 709b1278b..89409e932 100644 --- a/React/Base/RCTConvert.m +++ b/React/Base/RCTConvert.m @@ -666,7 +666,9 @@ RCT_ENUM_CONVERTER(YGAlign, (@{ @"center": @(YGAlignCenter), @"auto": @(YGAlignAuto), @"stretch": @(YGAlignStretch), - @"baseline": @(YGAlignBaseline) + @"baseline": @(YGAlignBaseline), + @"space-between": @(YGAlignSpaceBetween), + @"space-around": @(YGAlignSpaceAround) }), YGAlignFlexStart, intValue) RCT_ENUM_CONVERTER(YGDirection, (@{ diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h index 6bc996638..3895985bb 100644 --- a/React/Views/RCTShadowView.h +++ b/React/Views/RCTShadowView.h @@ -130,6 +130,7 @@ typedef void (^RCTApplierBlock)(NSDictionary *viewRegistry @property (nonatomic, assign) YGJustify justifyContent; @property (nonatomic, assign) YGAlign alignSelf; @property (nonatomic, assign) YGAlign alignItems; +@property (nonatomic, assign) YGAlign alignContent; @property (nonatomic, assign) YGPositionType position; @property (nonatomic, assign) YGWrap flexWrap; diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m index e6ca99b8b..a45c47a1b 100644 --- a/React/Views/RCTShadowView.m +++ b/React/Views/RCTShadowView.m @@ -700,6 +700,7 @@ RCT_STYLE_PROPERTY(FlexDirection, flexDirection, FlexDirection, YGFlexDirection) RCT_STYLE_PROPERTY(JustifyContent, justifyContent, JustifyContent, YGJustify) RCT_STYLE_PROPERTY(AlignSelf, alignSelf, AlignSelf, YGAlign) RCT_STYLE_PROPERTY(AlignItems, alignItems, AlignItems, YGAlign) +RCT_STYLE_PROPERTY(AlignContent, alignContent, AlignContent, YGAlign) RCT_STYLE_PROPERTY(Position, position, PositionType, YGPositionType) RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, YGWrap) RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, YGOverflow) diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index d551781d2..792f6cc87 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -305,6 +305,7 @@ RCT_EXPORT_SHADOW_PROPERTY(flexWrap, YGWrap) RCT_EXPORT_SHADOW_PROPERTY(justifyContent, YGJustify) RCT_EXPORT_SHADOW_PROPERTY(alignItems, YGAlign) RCT_EXPORT_SHADOW_PROPERTY(alignSelf, YGAlign) +RCT_EXPORT_SHADOW_PROPERTY(alignContent, YGAlign) RCT_EXPORT_SHADOW_PROPERTY(position, YGPositionType) RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float) diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java index 17b6217e8..d526b7d39 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java @@ -283,6 +283,16 @@ public class LayoutShadowNode extends ReactShadowNode { alignItems.toUpperCase(Locale.US).replace("-", "_"))); } + @ReactProp(name = ViewProps.ALIGN_CONTENT) + public void setAlignContent(@Nullable String alignContent) { + if (isVirtual()) { + return; + } + setAlignContent( + alignContent == null ? YogaAlign.FLEX_START : YogaAlign.valueOf( + alignContent.toUpperCase(Locale.US).replace("-", "_"))); + } + @ReactProp(name = ViewProps.JUSTIFY_CONTENT) public void setJustifyContent(@Nullable String justifyContent) { if (isVirtual()) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java index 8fda24b9e..e1278b14c 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java @@ -650,6 +650,10 @@ public class ReactShadowNode { mYogaNode.setAlignItems(alignItems); } + public void setAlignContent(YogaAlign alignContent) { + mYogaNode.setAlignContent(alignContent); + } + public void setJustifyContent(YogaJustify justifyContent) { mYogaNode.setJustifyContent(justifyContent); } diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index 138437940..4d60d3add 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -25,6 +25,7 @@ public class ViewProps { // !!! Keep in sync with LAYOUT_ONLY_PROPS below public static final String ALIGN_ITEMS = "alignItems"; public static final String ALIGN_SELF = "alignSelf"; + public static final String ALIGN_CONTENT = "alignContent"; public static final String OVERFLOW = "overflow"; public static final String BOTTOM = "bottom"; public static final String COLLAPSABLE = "collapsable"; @@ -122,6 +123,7 @@ public class ViewProps { FLEX_WRAP, JUSTIFY_CONTENT, OVERFLOW, + ALIGN_CONTENT, /* position */ POSITION,