Skip to content

Commit

Permalink
Fixed ExampleBox in test case, added more new example
Browse files Browse the repository at this point in the history
  • Loading branch information
hsource committed Jun 4, 2020
1 parent 3feb3bf commit f0ca359
Showing 1 changed file with 26 additions and 5 deletions.
31 changes: 26 additions & 5 deletions RNTester/js/examples/PointerEvents/PointerEventsExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,22 +32,30 @@ class ExampleBox extends React.Component<ExampleBoxProps, ExampleBoxState> {
};

handleLog = (msg: string) => {
this.setState({log: this.state.log.concat([msg])});
// $FlowFixMe
this.state.log = this.state.log.concat([msg]);
};

flushReactChanges = () => {
this.forceUpdate();
};

/**
* Capture phase of bubbling to append separator before any of the bubbling
* happens.
*/
handleTouchCapture = () => {
this.setState({log: this.state.log.concat(['---'])});
// $FlowFixMe
this.state.log = this.state.log.concat(['---']);
};

render() {
const {Component} = this.props;
return (
<View>
<View onTouchEndCapture={this.handleTouchCapture}>
<View
onTouchEndCapture={this.handleTouchCapture}
onTouchStart={this.flushReactChanges}>
<Component onLog={this.handleLog} />
</View>
<View style={styles.logBox}>
Expand Down Expand Up @@ -195,6 +203,13 @@ class OverflowExample extends React.Component<OverflowExampleProps> {
onTouchStart={() => this.props.onLog('C fully outside touched')}
style={[styles.box, styles.boxFullyOutside]}>
<DemoText style={styles.text}>C: fully outside</DemoText>
<View
onTouchStart={() =>
this.props.onLog('D fully outside child touched')
}
style={[styles.box, styles.boxFullyOutsideChild]}>
<DemoText style={styles.text}>D: child of fully outside</DemoText>
</View>
</View>
</View>
);
Expand Down Expand Up @@ -243,13 +258,13 @@ const exampleClasses: Array<ExampleClass> = [
Component: OverflowVisibleExample,
title: '`overflow: visible`',
description:
'`overflow: visible` style should allow subelements that are outside of the parent box to be touchable. Tapping the parts of Box B outside Box A should print "B touched" and "A touched", and tapping Box C should also print "C touched" and "A touched.',
'`overflow: visible` style should allow subelements that are outside of the parent box to be touchable. Tapping the parts of Box B outside Box A should print "B touched" and "A touched", and tapping Box C should also print "C touched" and "A touched".',
},
{
Component: OverflowHiddenExample,
title: '`overflow: hidden`',
description:
"`overflow: hidden` style should only allow subelements within the parent box to be touchable. Tapping just below Box A (where Box B would otherwise extend if it weren't cut off) should not trigger any touches or messages.",
'`overflow: hidden` style should only allow subelements within the parent box to be touchable. Tapping just below Box A (where Box B would otherwise extend if it weren\'t cut off) should not trigger any touches or messages. Touching Box D (inside the bounds) should print "D touched" and "A touched".',
},
];

Expand Down Expand Up @@ -295,6 +310,12 @@ const styles = StyleSheet.create({
left: 200,
top: 65,
},
boxFullyOutsideChild: {
position: 'absolute',
left: 0,
top: -65,
width: 100,
},
logText: {
fontSize: 9,
},
Expand Down

0 comments on commit f0ca359

Please sign in to comment.