From 2f29e8c12771a74bfea598f23c9cc1a6d6388d06 Mon Sep 17 00:00:00 2001 From: Adam Comella Date: Sun, 7 Aug 2016 07:50:02 -0700 Subject: [PATCH] Update css-layout dependency (#565) A second attempt at updating the css-layout dependency. This commit includes the changes from these 2 commits: - 104aa49fc403fd6b05aab474baee90235f8e2c99: Update css-layout dependency - 45010962406ae050714e001e5096dc734dcb9190: Clean up warnings due to project.json It also includes a fix for #561 (horizontal scrolling broken) which was introduced by the previous attempt at upgrading the layout engine. Facebook already found and fixed this bug in their repo so I imported their fix: https://github.com/facebook/react-native/commit/6603cef95cd30fcc05330707d4ce10a2c4e22046 The updated version of css-layout includes significant changes which make the layout engine conform closer to the W3C spec. For details, see facebook/css-layout#185 The inline view implementation had to be modified slightly due to a change in the layout engine. In the updated layout engine, nodes with a measure function are treated as leaves. Consequently, nodes with a mesaure function (e.g. Text) do not have their children laid out automatically. To fix this, Text nodes now manually invoke the layout engine on each of their inline views. --- .../ScrollView/ScrollView.windows.js | 13 +++++++++---- ReactWindows/Playground/project.json | 2 +- ReactWindows/ReactNative.Tests/project.json | 2 +- .../Views/Text/ReactSpanShadowNode.cs | 18 ++++++++++++++++++ .../Views/Text/ReactTextShadowNode.cs | 18 ++++++++++++++++++ ReactWindows/ReactNative/project.json | 2 +- 6 files changed, 48 insertions(+), 7 deletions(-) diff --git a/Libraries/Components/ScrollView/ScrollView.windows.js b/Libraries/Components/ScrollView/ScrollView.windows.js index b7c36e688b5..001b0bee33a 100644 --- a/Libraries/Components/ScrollView/ScrollView.windows.js +++ b/Libraries/Components/ScrollView/ScrollView.windows.js @@ -485,12 +485,14 @@ const ScrollView = React.createClass({ this.props.alwaysBounceVertical !== undefined ? this.props.alwaysBounceVertical : !this.props.horizontal; + + const baseStyle = this.props.horizontal ? styles.baseHorizontal : styles.baseVertical; const props = { ...this.props, alwaysBounceHorizontal, alwaysBounceVertical, - style: ([styles.base, this.props.style]: ?Array), + style: ([baseStyle, this.props.style]: ?Array), onTouchStart: this.scrollResponderHandleTouchStart, onTouchMove: this.scrollResponderHandleTouchMove, onTouchEnd: this.scrollResponderHandleTouchEnd, @@ -557,7 +559,7 @@ const ScrollView = React.createClass({ return React.cloneElement( refreshControl, {style: props.style}, - + {contentContainer} ); @@ -572,11 +574,14 @@ const ScrollView = React.createClass({ }); const styles = StyleSheet.create({ - base: { + baseVertical: { flex: 1, }, + baseHorizontal: { + flex: 1, + flexDirection: 'row', + }, contentContainerHorizontal: { - alignSelf: 'flex-start', flexDirection: 'row', }, }); diff --git a/ReactWindows/Playground/project.json b/ReactWindows/Playground/project.json index 88b591ba76a..0eea258eb70 100644 --- a/ReactWindows/Playground/project.json +++ b/ReactWindows/Playground/project.json @@ -1,6 +1,6 @@ { "dependencies": { - "Facebook.CSSLayout": "2.0.0-pre", + "Facebook.CSSLayout": "2.0.1-pre", "Microsoft.ApplicationInsights": "1.0.0", "Microsoft.ApplicationInsights.PersistenceChannel": "1.0.0", "Microsoft.ApplicationInsights.WindowsApps": "1.0.0", diff --git a/ReactWindows/ReactNative.Tests/project.json b/ReactWindows/ReactNative.Tests/project.json index 024f1e9b081..d56a6f906ac 100644 --- a/ReactWindows/ReactNative.Tests/project.json +++ b/ReactWindows/ReactNative.Tests/project.json @@ -1,6 +1,6 @@ { "dependencies": { - "Facebook.CSSLayout": "2.0.0-pre", + "Facebook.CSSLayout": "2.0.1-pre", "Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2" }, "frameworks": { diff --git a/ReactWindows/ReactNative/Views/Text/ReactSpanShadowNode.cs b/ReactWindows/ReactNative/Views/Text/ReactSpanShadowNode.cs index a3987563e0d..875be969280 100644 --- a/ReactWindows/ReactNative/Views/Text/ReactSpanShadowNode.cs +++ b/ReactWindows/ReactNative/Views/Text/ReactSpanShadowNode.cs @@ -127,5 +127,23 @@ public override void UpdateInline(Inline inline) inline.FontWeight = _fontWeight ?? FontWeights.Normal; inline.FontFamily = _fontFamily != null ? new FontFamily(_fontFamily) : FontFamily.XamlAutoFontFamily; } + + /// + /// This method will be called by once + /// per batch, before calculating layout. This will only be called for + /// nodes that are marked as updated with or + /// require layout (i.e., marked with ). + /// + public override void OnBeforeLayout() + { + // Run flexbox on the children which are inline views. + foreach (var child in this.Children) + { + if (!(child is ReactInlineShadowNode)) + { + child.CalculateLayout(); + } + } + } } } diff --git a/ReactWindows/ReactNative/Views/Text/ReactTextShadowNode.cs b/ReactWindows/ReactNative/Views/Text/ReactTextShadowNode.cs index f8c5114b2f7..826c6d1a9a1 100644 --- a/ReactWindows/ReactNative/Views/Text/ReactTextShadowNode.cs +++ b/ReactWindows/ReactNative/Views/Text/ReactTextShadowNode.cs @@ -267,5 +267,23 @@ private void UpdateTextBlockCore(RichTextBlock textBlock, bool measureOnly) 0); } } + + /// + /// This method will be called by once + /// per batch, before calculating layout. This will only be called for + /// nodes that are marked as updated with or + /// require layout (i.e., marked with ). + /// + public override void OnBeforeLayout() + { + // Run flexbox on the children which are inline views. + foreach (var child in this.Children) + { + if (!(child is ReactInlineShadowNode)) + { + child.CalculateLayout(); + } + } + } } } diff --git a/ReactWindows/ReactNative/project.json b/ReactWindows/ReactNative/project.json index 98ef0f864e3..c1a2c98c6b6 100644 --- a/ReactWindows/ReactNative/project.json +++ b/ReactWindows/ReactNative/project.json @@ -1,6 +1,6 @@ { "dependencies": { - "Facebook.CSSLayout": "2.0.0-pre", + "Facebook.CSSLayout": "2.0.1-pre", "Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2", "Newtonsoft.Json": "9.0.1", "System.Reactive": "3.0.0",