From 0acba126f963ef3fba96eb31a69a29199409ea22 Mon Sep 17 00:00:00 2001 From: Huang Yu Date: Thu, 21 Jan 2016 11:07:50 -0800 Subject: [PATCH] Fix StyleSheet 'textAlign' for AndroidTextInput. Closes #2702 Summary: change `setTextAlign` and `setTextAlignVertical` to receive argument of type `String` (the same as in `StyleSheet`), so that native props and stylesheet props are calling the same ReactMethod - add demo (may not be necessary) Closes https://github.com/facebook/react-native/pull/4481 Reviewed By: svcscm Differential Revision: D2823456 Pulled By: mkonicek fb-gh-sync-id: 349d17549f419b5bdc001d70b583423ade06bfe8 --- .../UIExplorer/TextInputExample.android.js | 12 ++--- Libraries/Components/TextInput/TextInput.js | 24 ---------- Libraries/Text/TextStylePropTypes.js | 6 +++ .../facebook/react/uimanager/ViewProps.java | 1 + .../textinput/ReactTextInputManager.java | 44 ++++++++++++------- 5 files changed, 38 insertions(+), 49 deletions(-) diff --git a/Examples/UIExplorer/TextInputExample.android.js b/Examples/UIExplorer/TextInputExample.android.js index 9bccf5256a8341..b3f5c6a4e263fe 100644 --- a/Examples/UIExplorer/TextInputExample.android.js +++ b/Examples/UIExplorer/TextInputExample.android.js @@ -348,25 +348,19 @@ exports.examples = [ placeholder="multiline, aligned top-left" placeholderTextColor="red" multiline={true} - textAlign="start" - textAlignVertical="top" - style={styles.multiline} + style={[styles.multiline, {textAlign: "left", textAlignVertical: "top"}]} /> + style={[styles.multiline, {color: 'blue'}, {textAlign: "right", textAlignVertical: "bottom"}]}> multiline with children, aligned bottom-right diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index b029db359b0389..f9c03a1758641f 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -101,24 +101,6 @@ var TextInput = React.createClass({ * The default value is false. */ autoFocus: PropTypes.bool, - /** - * Set the position of the cursor from where editing will begin. - * @platform android - */ - textAlign: PropTypes.oneOf([ - 'start', - 'center', - 'end', - ]), - /** - * Aligns text vertically within the TextInput. - * @platform android - */ - textAlignVertical: PropTypes.oneOf([ - 'top', - 'center', - 'bottom', - ]), /** * If false, text is not editable. The default value is true. */ @@ -491,10 +473,6 @@ var TextInput = React.createClass({ var autoCapitalize = UIManager.AndroidTextInput.Constants.AutoCapitalizationType[this.props.autoCapitalize]; - var textAlign = UIManager.AndroidTextInput.Constants.TextAlign[this.props.textAlign]; - var textAlignVertical = - UIManager.AndroidTextInput.Constants.TextAlignVertical[this.props.textAlignVertical]; - var children = this.props.children; var childCount = 0; ReactChildren.forEach(children, () => ++childCount); @@ -512,8 +490,6 @@ var TextInput = React.createClass({ style={[this.props.style]} autoCapitalize={autoCapitalize} autoCorrect={this.props.autoCorrect} - textAlign={textAlign} - textAlignVertical={textAlignVertical} keyboardType={this.props.keyboardType} mostRecentEventCount={0} multiline={this.props.multiline} diff --git a/Libraries/Text/TextStylePropTypes.js b/Libraries/Text/TextStylePropTypes.js index 3db900fd712a54..9c4668174e4f8e 100644 --- a/Libraries/Text/TextStylePropTypes.js +++ b/Libraries/Text/TextStylePropTypes.js @@ -46,6 +46,12 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), { textAlign: ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ), + /** + * @platform android + */ + textAlignVertical: ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] + ), /** * @platform ios */ 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 7e87a8419d854b..33e52fe95b2159 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -70,6 +70,7 @@ public class ViewProps { public static final String ON = "on"; public static final String RESIZE_MODE = "resizeMode"; public static final String TEXT_ALIGN = "textAlign"; + public static final String TEXT_ALIGN_VERTICAL = "textAlignVertical"; public static final String BORDER_WIDTH = "borderWidth"; public static final String BORDER_LEFT_WIDTH = "borderLeftWidth"; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 8b6396ff2bd59b..ed0d84935f8d78 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -28,6 +28,8 @@ import android.widget.TextView; import com.facebook.infer.annotation.Assertions; +import com.facebook.react.bridge.JSApplicationCausedNativeException; +import com.facebook.react.bridge.JSApplicationIllegalArgumentException; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.common.MapBuilder; @@ -202,14 +204,34 @@ public void setUnderlineColor(ReactEditText view, @Nullable Integer underlineCol } } - @ReactProp(name = "textAlign") - public void setTextAlign(ReactEditText view, int gravity) { - view.setGravityHorizontal(gravity); + @ReactProp(name = ViewProps.TEXT_ALIGN) + public void setTextAlign(ReactEditText view, @Nullable String textAlign) { + if (textAlign == null || "auto".equals(textAlign)) { + view.setGravityHorizontal(Gravity.NO_GRAVITY); + } else if ("left".equals(textAlign)) { + view.setGravityHorizontal(Gravity.LEFT); + } else if ("right".equals(textAlign)) { + view.setGravityHorizontal(Gravity.RIGHT); + } else if ("center".equals(textAlign)) { + view.setGravityHorizontal(Gravity.CENTER_HORIZONTAL); + } else { + throw new JSApplicationIllegalArgumentException("Invalid textAlign: " + textAlign); + } } - @ReactProp(name = "textAlignVertical") - public void setTextAlignVertical(ReactEditText view, int gravity) { - view.setGravityVertical(gravity); + @ReactProp(name = ViewProps.TEXT_ALIGN_VERTICAL) + public void setTextAlignVertical(ReactEditText view, @Nullable String textAlignVertical) { + if (textAlignVertical == null || "auto".equals(textAlignVertical)) { + view.setGravityVertical(Gravity.NO_GRAVITY); + } else if ("top".equals(textAlignVertical)) { + view.setGravityVertical(Gravity.TOP); + } else if ("bottom".equals(textAlignVertical)) { + view.setGravityVertical(Gravity.BOTTOM); + } else if ("center".equals(textAlignVertical)) { + view.setGravityVertical(Gravity.CENTER_VERTICAL); + } else { + throw new JSApplicationIllegalArgumentException("Invalid textAlignVertical: " + textAlignVertical); + } } @ReactProp(name = "editable", defaultBoolean = true) @@ -474,16 +496,6 @@ public void onSelectionChanged(int start, int end) { @Override public @Nullable Map getExportedViewConstants() { return MapBuilder.of( - "TextAlign", - MapBuilder.of( - "start", Gravity.START, - "center", Gravity.CENTER_HORIZONTAL, - "end", Gravity.END), - "TextAlignVertical", - MapBuilder.of( - "top", Gravity.TOP, - "center", Gravity.CENTER_VERTICAL, - "bottom", Gravity.BOTTOM), "AutoCapitalizationType", MapBuilder.of( "none",