mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-11 22:40:37 +08:00
Open sourced CatalystSubviewsClippingTestCase test for RN Android
Reviewed By: bestander Differential Revision: D3411402 fbshipit-source-id: c4f51f0366c30815a3a409ee13b61900d882fcc9
This commit is contained in:
Ovidiu Viorel Iepure
committed by
Facebook Github Bot 7
Facebook Github Bot 7
parent
c99fb9cb9b
commit
a7e6eea919
310
ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js
Normal file
310
ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js
Normal file
@@ -0,0 +1,310 @@
|
||||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule SubviewsClippingTestModule
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var BatchedBridge = require('BatchedBridge');
|
||||
var React = require('React');
|
||||
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
||||
var ScrollView = require('ScrollView');
|
||||
var StyleSheet = require('StyleSheet');
|
||||
var View = require('View');
|
||||
|
||||
var requireNativeComponent = require('requireNativeComponent');
|
||||
|
||||
var ClippableView = requireNativeComponent('ClippableView', null);
|
||||
|
||||
var ClippingSample1 = React.createClass({
|
||||
render: function() {
|
||||
var styles = sample1Styles;
|
||||
return (
|
||||
<View>
|
||||
<ClippableView clippableViewID="outer" style={styles.outer} removeClippedSubviews={true}>
|
||||
<ClippableView clippableViewID="inner1" style={[styles.inner, styles.inner1]}/>
|
||||
<ClippableView clippableViewID="inner2" style={[styles.inner, styles.inner2]}/>
|
||||
<ClippableView clippableViewID="inner3" style={[styles.inner, styles.inner3]}/>
|
||||
<ClippableView clippableViewID="inner4" style={[styles.inner, styles.inner4]}/>
|
||||
<ClippableView clippableViewID="inner5" style={[styles.inner, styles.inner5]}/>
|
||||
</ClippableView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var sample1Styles = StyleSheet.create({
|
||||
outer: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: 'red',
|
||||
},
|
||||
inner: {
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: 'green',
|
||||
},
|
||||
inner1: {
|
||||
top: -150,
|
||||
left: 50,
|
||||
},
|
||||
inner2: {
|
||||
top: 50,
|
||||
left: 50,
|
||||
},
|
||||
inner3: {
|
||||
top: 250,
|
||||
left: 50,
|
||||
},
|
||||
inner4: {
|
||||
left: -150,
|
||||
top: 50,
|
||||
},
|
||||
inner5: {
|
||||
left: 250,
|
||||
top: 50,
|
||||
},
|
||||
});
|
||||
|
||||
var ClippingSample2 = React.createClass({
|
||||
render: function() {
|
||||
var styles = sample2Styles;
|
||||
return (
|
||||
<View>
|
||||
<ClippableView clippableViewID="outer" style={styles.outer} removeClippedSubviews={true}>
|
||||
<ClippableView
|
||||
clippableViewID="complexInner"
|
||||
style={styles.complexInner}
|
||||
removeClippedSubviews={true}>
|
||||
<ClippableView clippableViewID="inner1" style={[styles.inner, styles.inner1]}/>
|
||||
<ClippableView clippableViewID="inner2" style={[styles.inner, styles.inner2]}/>
|
||||
<ClippableView clippableViewID="inner3" style={[styles.inner, styles.inner3]}/>
|
||||
<ClippableView clippableViewID="inner4" style={[styles.inner, styles.inner4]}/>
|
||||
</ClippableView>
|
||||
</ClippableView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var sample2Styles = StyleSheet.create({
|
||||
outer: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: 'red',
|
||||
},
|
||||
complexInner: {
|
||||
position: 'absolute',
|
||||
width: 200,
|
||||
height: 200,
|
||||
left: 100,
|
||||
top: 100,
|
||||
backgroundColor: 'green',
|
||||
},
|
||||
inner: {
|
||||
position: 'absolute',
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundColor: 'blue',
|
||||
},
|
||||
inner1: {
|
||||
left: 10,
|
||||
top: 10,
|
||||
},
|
||||
inner2: {
|
||||
right: 10,
|
||||
top: 10,
|
||||
},
|
||||
inner3: {
|
||||
left: 10,
|
||||
bottom: 10,
|
||||
},
|
||||
inner4: {
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
},
|
||||
});
|
||||
|
||||
var UpdatingSample1 = React.createClass({
|
||||
render: function() {
|
||||
var styles = updating1Styles;
|
||||
var inner1Styles = [styles.inner1, {height: this.props.update1 ? 200 : 100}];
|
||||
var inner2Styles = [styles.inner2, {top: this.props.update2 ? 200 : 50}];
|
||||
return (
|
||||
<View>
|
||||
<ClippableView clippableViewID="outer" style={styles.outer} removeClippedSubviews={true}>
|
||||
<ClippableView clippableViewID="inner1" style={inner1Styles}/>
|
||||
<ClippableView clippableViewID="inner2" style={inner2Styles}/>
|
||||
</ClippableView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var updating1Styles = StyleSheet.create({
|
||||
outer: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: 'red',
|
||||
},
|
||||
inner1: {
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
left: 50,
|
||||
top: -100,
|
||||
backgroundColor: 'green',
|
||||
},
|
||||
inner2: {
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
left: 50,
|
||||
top: 50,
|
||||
backgroundColor: 'green',
|
||||
}
|
||||
});
|
||||
|
||||
var UpdatingSample2 = React.createClass({
|
||||
render: function() {
|
||||
var styles = updating2Styles;
|
||||
var outerStyles = [styles.outer, {height: this.props.update ? 200 : 100}];
|
||||
return (
|
||||
<View>
|
||||
<ClippableView clippableViewID="outer" style={outerStyles} removeClippedSubviews={true}>
|
||||
<ClippableView clippableViewID="inner" style={styles.inner}/>
|
||||
</ClippableView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var updating2Styles = StyleSheet.create({
|
||||
outer: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: 'red',
|
||||
},
|
||||
inner: {
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
top: 100,
|
||||
backgroundColor: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
var ScrollViewTest = React.createClass({
|
||||
render: function() {
|
||||
var styles = scrollTestStyles;
|
||||
var children = [];
|
||||
for (var i = 0; i < 4; i++) {
|
||||
children[i] = (
|
||||
<ClippableView key={i} style={styles.row} clippableViewID={'' + i}/>
|
||||
);
|
||||
}
|
||||
for (var i = 4; i < 6; i++) {
|
||||
var viewID = 'C' + (i - 4);
|
||||
children[i] = (
|
||||
<ClippableView
|
||||
key={i}
|
||||
style={styles.complex}
|
||||
clippableViewID={viewID}
|
||||
removeClippedSubviews={true}>
|
||||
<ClippableView style={styles.inner} clippableViewID={viewID + '.1'}/>
|
||||
<ClippableView style={styles.inner} clippableViewID={viewID + '.2'}/>
|
||||
</ClippableView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView removeClippedSubviews={true} style={styles.scrollView} testID="scroll_view">
|
||||
{children}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var scrollTestStyles = StyleSheet.create({
|
||||
scrollView: {
|
||||
width: 200,
|
||||
height: 300,
|
||||
},
|
||||
row: {
|
||||
flex: 1,
|
||||
height: 120,
|
||||
backgroundColor: 'red',
|
||||
borderColor: 'blue',
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
complex: {
|
||||
flex: 1,
|
||||
height: 240,
|
||||
backgroundColor: 'yellow',
|
||||
borderColor: 'blue',
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
inner: {
|
||||
flex: 1,
|
||||
margin: 10,
|
||||
height: 100,
|
||||
backgroundColor: 'gray',
|
||||
borderColor: 'green',
|
||||
borderWidth: 1,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
var appInstance = null;
|
||||
var SubviewsClippingTestApp = React.createClass({
|
||||
componentWillMount: function() {
|
||||
appInstance = this;
|
||||
},
|
||||
setComponent: function(component) {
|
||||
this.setState({component: component});
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {};
|
||||
},
|
||||
render: function() {
|
||||
var component = this.state.component;
|
||||
return (
|
||||
<View>
|
||||
{component}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
var SubviewsClippingTestModule = {
|
||||
App: SubviewsClippingTestApp,
|
||||
renderClippingSample1: function() {
|
||||
appInstance.setComponent(<ClippingSample1/>);
|
||||
},
|
||||
renderClippingSample2: function() {
|
||||
appInstance.setComponent(<ClippingSample2/>);
|
||||
},
|
||||
renderUpdatingSample1: function(update1, update2) {
|
||||
appInstance.setComponent(<UpdatingSample1 update1={update1} update2={update2}/>);
|
||||
},
|
||||
renderUpdatingSample2: function(update) {
|
||||
appInstance.setComponent(<UpdatingSample2 update={update}/>);
|
||||
},
|
||||
renderScrollViewTest: function() {
|
||||
appInstance.setComponent(<ScrollViewTest/>);
|
||||
},
|
||||
};
|
||||
|
||||
BatchedBridge.registerCallableModule(
|
||||
'SubviewsClippingTestModule',
|
||||
SubviewsClippingTestModule
|
||||
);
|
||||
|
||||
module.exports = SubviewsClippingTestModule;
|
||||
@@ -60,6 +60,10 @@ var apps = [
|
||||
appKey: 'ScrollViewTestApp',
|
||||
component: () => require('ScrollViewTestModule').ScrollViewTestApp,
|
||||
},
|
||||
{
|
||||
appKey: 'SubviewsClippingTestApp',
|
||||
component: () => require('SubviewsClippingTestModule').App,
|
||||
},
|
||||
{
|
||||
appKey: 'SwipeRefreshLayoutTestApp',
|
||||
component: () => require('SwipeRefreshLayoutTestModule').SwipeRefreshLayoutTestApp
|
||||
|
||||
Reference in New Issue
Block a user