mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-20 21:42:29 +00:00
[change] Touchable pass through props
Add support for web-specific props to improve accessibility, e.g., ARIA properties (and declarative links). Fix #65
This commit is contained in:
@@ -318,7 +318,6 @@ var TouchableDisabled = React.createClass({
|
||||
<TouchableHighlight
|
||||
activeOpacity={1}
|
||||
disabled={true}
|
||||
animationVelocity={0}
|
||||
underlayColor="rgb(210, 230, 255)"
|
||||
style={[styles.row, styles.block]}
|
||||
onPress={action('TouchableHighlight')}>
|
||||
@@ -329,7 +328,6 @@ var TouchableDisabled = React.createClass({
|
||||
|
||||
<TouchableHighlight
|
||||
activeOpacity={1}
|
||||
animationVelocity={0}
|
||||
underlayColor="rgb(210, 230, 255)"
|
||||
style={[styles.row, styles.block]}
|
||||
onPress={action('TouchableHighlight')}>
|
||||
|
||||
@@ -231,17 +231,30 @@ var TouchableHighlight = React.createClass({
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const {
|
||||
/* eslint-disable */
|
||||
activeOpacity,
|
||||
onHideUnderlay,
|
||||
onShowUnderlay,
|
||||
underlayColor,
|
||||
delayLongPress,
|
||||
delayPressIn,
|
||||
delayPressOut,
|
||||
onLongPress,
|
||||
onPress,
|
||||
onPressIn,
|
||||
onPressOut,
|
||||
pressRetentionOffset,
|
||||
/* eslint-enable */
|
||||
...other
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<View
|
||||
accessible={true}
|
||||
accessibilityLabel={this.props.accessibilityLabel}
|
||||
accessibilityRole={this.props.accessibilityRole}
|
||||
disabled={this.props.disabled}
|
||||
hitSlop={this.props.hitSlop}
|
||||
{...other}
|
||||
onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
|
||||
onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
|
||||
onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
|
||||
onLayout={this.props.onLayout}
|
||||
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
|
||||
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
|
||||
onResponderGrant={this.touchableHandleResponderGrant}
|
||||
@@ -255,7 +268,7 @@ var TouchableHighlight = React.createClass({
|
||||
this.state.underlayStyle
|
||||
]}
|
||||
tabIndex={this.props.disabled ? null : '0'}
|
||||
testID={this.props.testID}>
|
||||
>
|
||||
{React.cloneElement(
|
||||
React.Children.only(this.props.children),
|
||||
{
|
||||
|
||||
@@ -163,20 +163,30 @@ var TouchableOpacity = React.createClass({
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const {
|
||||
/* eslint-disable */
|
||||
activeOpacity,
|
||||
focusedOpacity,
|
||||
delayLongPress,
|
||||
delayPressIn,
|
||||
delayPressOut,
|
||||
onLongPress,
|
||||
onPress,
|
||||
onPressIn,
|
||||
onPressOut,
|
||||
pressRetentionOffset,
|
||||
/* eslint-enable */
|
||||
...other
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<View
|
||||
accessible={this.props.accessible !== false}
|
||||
accessibilityLabel={this.props.accessibilityLabel}
|
||||
accessibilityRole={this.props.accessibilityRole}
|
||||
disabled={this.props.disabled}
|
||||
{...other}
|
||||
style={[
|
||||
styles.root,
|
||||
this.props.disabled && styles.disabled,
|
||||
this.props.style
|
||||
]}
|
||||
testID={this.props.testID}
|
||||
onLayout={this.props.onLayout}
|
||||
hitSlop={this.props.hitSlop}
|
||||
onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
|
||||
onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
|
||||
onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
|
||||
@@ -187,9 +197,7 @@ var TouchableOpacity = React.createClass({
|
||||
onResponderRelease={this.touchableHandleResponderRelease}
|
||||
onResponderTerminate={this.touchableHandleResponderTerminate}
|
||||
tabIndex={this.props.disabled ? null : '0'}
|
||||
>
|
||||
{this.props.children}
|
||||
</View>
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -145,6 +145,21 @@ const TouchableWithoutFeedback = React.createClass({
|
||||
},
|
||||
|
||||
render: function(): React.Element<any> {
|
||||
const {
|
||||
/* eslint-disable */
|
||||
delayLongPress,
|
||||
delayPressIn,
|
||||
delayPressOut,
|
||||
onLongPress,
|
||||
onPress,
|
||||
onPressIn,
|
||||
onPressOut,
|
||||
pressRetentionOffset,
|
||||
/* eslint-enable */
|
||||
...other
|
||||
} = this.props;
|
||||
|
||||
|
||||
// Note(avik): remove dynamic typecast once Flow has been upgraded
|
||||
const child = React.Children.only(this.props.children);
|
||||
let children = child.props.children;
|
||||
@@ -166,13 +181,7 @@ const TouchableWithoutFeedback = React.createClass({
|
||||
child.props.style
|
||||
];
|
||||
return (React: any).cloneElement(child, {
|
||||
accessible: this.props.accessible !== false,
|
||||
accessibilityLabel: this.props.accessibilityLabel,
|
||||
accessibilityRole: this.props.accessibilityRole,
|
||||
disabled: this.props.disabled,
|
||||
testID: this.props.testID,
|
||||
onLayout: this.props.onLayout,
|
||||
hitSlop: this.props.hitSlop,
|
||||
...other,
|
||||
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
|
||||
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
|
||||
onResponderGrant: this.touchableHandleResponderGrant,
|
||||
|
||||
Reference in New Issue
Block a user