mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-01 18:15:13 +00:00
@@ -14,13 +14,13 @@
|
|||||||
|
|
||||||
// Note (avik): add @flow when Flow supports spread properties in propTypes
|
// Note (avik): add @flow when Flow supports spread properties in propTypes
|
||||||
|
|
||||||
var Animated = require('../../apis/Animated');
|
|
||||||
var NativeMethodsMixin = require('../../modules/NativeMethodsMixin');
|
var NativeMethodsMixin = require('../../modules/NativeMethodsMixin');
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var StyleSheet = require('../../apis/StyleSheet');
|
var StyleSheet = require('../../apis/StyleSheet');
|
||||||
var TimerMixin = require('react-timer-mixin');
|
var TimerMixin = require('react-timer-mixin');
|
||||||
var Touchable = require('./Touchable');
|
var Touchable = require('./Touchable');
|
||||||
var TouchableWithoutFeedback = require('./TouchableWithoutFeedback');
|
var TouchableWithoutFeedback = require('./TouchableWithoutFeedback');
|
||||||
|
var View = require('../View');
|
||||||
|
|
||||||
var ensurePositiveDelayProps = require('./ensurePositiveDelayProps');
|
var ensurePositiveDelayProps = require('./ensurePositiveDelayProps');
|
||||||
var flattenStyle = StyleSheet.flatten
|
var flattenStyle = StyleSheet.flatten
|
||||||
@@ -70,10 +70,7 @@ var TouchableOpacity = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return this.touchableGetInitialState();
|
||||||
...this.touchableGetInitialState(),
|
|
||||||
anim: new Animated.Value(1),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
@@ -85,10 +82,11 @@ var TouchableOpacity = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
setOpacityTo: function(value) {
|
setOpacityTo: function(value) {
|
||||||
Animated.timing(
|
this.setNativeProps({
|
||||||
this.state.anim,
|
style: {
|
||||||
{toValue: value, duration: 150}
|
opacity: value
|
||||||
).start();
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -166,7 +164,7 @@ var TouchableOpacity = React.createClass({
|
|||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<Animated.View
|
<View
|
||||||
accessible={this.props.accessible !== false}
|
accessible={this.props.accessible !== false}
|
||||||
accessibilityLabel={this.props.accessibilityLabel}
|
accessibilityLabel={this.props.accessibilityLabel}
|
||||||
accessibilityRole={this.props.accessibilityRole}
|
accessibilityRole={this.props.accessibilityRole}
|
||||||
@@ -174,8 +172,7 @@ var TouchableOpacity = React.createClass({
|
|||||||
style={[
|
style={[
|
||||||
styles.root,
|
styles.root,
|
||||||
this.props.disabled && styles.disabled,
|
this.props.disabled && styles.disabled,
|
||||||
this.props.style,
|
this.props.style
|
||||||
{opacity: this.state.anim}
|
|
||||||
]}
|
]}
|
||||||
testID={this.props.testID}
|
testID={this.props.testID}
|
||||||
onLayout={this.props.onLayout}
|
onLayout={this.props.onLayout}
|
||||||
@@ -192,7 +189,7 @@ var TouchableOpacity = React.createClass({
|
|||||||
tabIndex={this.props.disabled ? null : '0'}
|
tabIndex={this.props.disabled ? null : '0'}
|
||||||
>
|
>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</Animated.View>
|
</View>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -200,6 +197,7 @@ var TouchableOpacity = React.createClass({
|
|||||||
var styles = StyleSheet.create({
|
var styles = StyleSheet.create({
|
||||||
root: {
|
root: {
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
transition: 'opacity 0.15s',
|
||||||
userSelect: 'none'
|
userSelect: 'none'
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
|
|||||||
Reference in New Issue
Block a user