[fix] TouchableHighlight default underlayColor

This commit is contained in:
Nicolas Gallagher
2016-04-18 16:46:09 -07:00
parent 25d11ded46
commit 97c0a31ce6
+9 -13
View File
@@ -105,9 +105,11 @@ var TouchableHighlight = React.createClass({
backgroundColor: props.underlayColor, backgroundColor: props.underlayColor,
} }
}, },
underlayStyle: [ underlayProps: {
INACTIVE_UNDERLAY_PROPS.style style: {
] backgroundColor: props.style.backgroundColor || null
}
}
}; };
}, },
@@ -203,10 +205,7 @@ var TouchableHighlight = React.createClass({
this._hideTimeout = null; this._hideTimeout = null;
if (this._hasPressHandler() && this.refs[UNDERLAY_REF]) { if (this._hasPressHandler() && this.refs[UNDERLAY_REF]) {
this.refs[CHILD_REF].setNativeProps(INACTIVE_CHILD_PROPS); this.refs[CHILD_REF].setNativeProps(INACTIVE_CHILD_PROPS);
this.refs[UNDERLAY_REF].setNativeProps({ this.refs[UNDERLAY_REF].setNativeProps(this.state.underlayStyle);
...INACTIVE_UNDERLAY_PROPS,
style: this.state.underlayStyle,
});
this.props.onHideUnderlay && this.props.onHideUnderlay(); this.props.onHideUnderlay && this.props.onHideUnderlay();
} }
}, },
@@ -233,19 +232,19 @@ var TouchableHighlight = React.createClass({
accessible={true} accessible={true}
accessibilityLabel={this.props.accessibilityLabel} accessibilityLabel={this.props.accessibilityLabel}
accessibilityRole={this.props.accessibilityRole || this.props.accessibilityTraits || 'button'} accessibilityRole={this.props.accessibilityRole || this.props.accessibilityTraits || 'button'}
ref={UNDERLAY_REF}
style={[styles.root, this.props.style]}
onLayout={this.props.onLayout}
hitSlop={this.props.hitSlop} hitSlop={this.props.hitSlop}
onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }} onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }} onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }} onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
onLayout={this.props.onLayout}
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest} onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
onResponderGrant={this.touchableHandleResponderGrant} onResponderGrant={this.touchableHandleResponderGrant}
onResponderMove={this.touchableHandleResponderMove} onResponderMove={this.touchableHandleResponderMove}
onResponderRelease={this.touchableHandleResponderRelease} onResponderRelease={this.touchableHandleResponderRelease}
onResponderTerminate={this.touchableHandleResponderTerminate} onResponderTerminate={this.touchableHandleResponderTerminate}
ref={UNDERLAY_REF}
style={[styles.root, this.props.style]}
tabIndex='0' tabIndex='0'
testID={this.props.testID}> testID={this.props.testID}>
{React.cloneElement( {React.cloneElement(
@@ -264,9 +263,6 @@ var UNDERLAY_REF = keyOf({underlayRef: null});
var INACTIVE_CHILD_PROPS = { var INACTIVE_CHILD_PROPS = {
style: StyleSheet.create({x: {opacity: 1.0}}).x, style: StyleSheet.create({x: {opacity: 1.0}}).x,
}; };
var INACTIVE_UNDERLAY_PROPS = {
style: {backgroundColor: null}
};
var styles = StyleSheet.create({ var styles = StyleSheet.create({
root: { root: {