[ActivityIndicator] Add the onLayout prop to the outer container view

Summary:
ActivityIndicator was forwarding all of its props except `style` to the inner native view. This meant that onLayout would report a zero-sized frame that was relative to the wrapper view instead of the parent of the ActivityIndicator.

This diff adds `onLayout` to the wrapper view instead of the native view.

In general, all components that forward props need to be audited in this manner.

Closes https://github.com/facebook/react-native/pull/1292
Github Author: James Ide <ide@jameside.com>

Test Plan: `<ActivityIndicator onLayout={...} />` reports the size of the spinner plus a position relative to its parent view.
This commit is contained in:
James Ide
2015-05-15 18:05:49 -07:00
parent c668fd5be0
commit 08d30e751b
4 changed files with 25 additions and 3 deletions

View File

@@ -53,6 +53,12 @@ var ActivityIndicatorIOS = React.createClass({
'small',
'large',
]),
/**
* Invoked on mount and layout changes with
*
* {nativeEvent: { layout: {x, y, width, height}}}.
*/
onLayout: PropTypes.func,
},
getDefaultProps: function(): DefaultProps {
@@ -65,10 +71,12 @@ var ActivityIndicatorIOS = React.createClass({
},
render: function() {
var {style, ...props} = this.props;
var {onLayout, style, ...props} = this.props;
var sizeStyle = (this.props.size === 'large') ? styles.sizeLarge : styles.sizeSmall;
return (
<View style={[styles.container, sizeStyle, style]}>
<View
onLayout={onLayout}
style={[styles.container, sizeStyle, style]}>
<RCTActivityIndicatorView {...props} />
</View>
);

View File

@@ -91,7 +91,9 @@ var View = React.createClass({
onStartShouldSetResponderCapture: PropTypes.func,
/**
* Invoked on mount and layout changes with {x, y, width, height}.
* Invoked on mount and layout changes with
*
* {nativeEvent: { layout: {x, y, width, height}}}.
*/
onLayout: PropTypes.func,

View File

@@ -99,6 +99,12 @@ var Image = React.createClass({
* testing scripts.
*/
testID: PropTypes.string,
/**
* Invoked on mount and layout changes with
*
* {nativeEvent: { layout: {x, y, width, height}}}.
*/
onLayout: PropTypes.func,
},
statics: {

View File

@@ -92,6 +92,12 @@ var Text = React.createClass({
* Used to locate this view in end-to-end tests.
*/
testID: React.PropTypes.string,
/**
* Invoked on mount and layout changes with
*
* {nativeEvent: { layout: {x, y, width, height}}}.
*/
onLayout: React.PropTypes.func,
},
viewConfig: viewConfig,