mirror of
https://github.com/status-im/react-native.git
synced 2025-02-21 13:48:13 +00:00
from ReactAndroid/src/androidTest/js/UIManagerTestModule.js (#21702)
Summary: Related to #21581 . Removed createReactClass from ReactAndroid/src/androidTest/js/UIManagerTestModule.js Pull Request resolved: https://github.com/facebook/react-native/pull/21702 Reviewed By: TheSavior Differential Revision: D10345717 Pulled By: RSNara fbshipit-source-id: 280f499abb2e2aa9f8ea25c3f8faaed8162e67d5
This commit is contained in:
Ronaldo Lima
Facebook Github Bot
parent
bb6a69075b
commit
998d69d12d
@ -5,220 +5,270 @@
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var BatchedBridge = require('BatchedBridge');
|
||||
var React = require('React');
|
||||
var StyleSheet = require('StyleSheet');
|
||||
var View = require('View');
|
||||
var Text = require('Text');
|
||||
const BatchedBridge = require('BatchedBridge');
|
||||
const React = require('React');
|
||||
const StyleSheet = require('StyleSheet');
|
||||
const View = require('View');
|
||||
const Text = require('Text');
|
||||
|
||||
var createReactClass = require('create-react-class');
|
||||
var renderApplication = require('renderApplication');
|
||||
const renderApplication = require('renderApplication');
|
||||
|
||||
var FlexTestApp = createReactClass({
|
||||
displayName: 'FlexTestApp',
|
||||
_styles: StyleSheet.create({
|
||||
container: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
child: {
|
||||
flex: 1,
|
||||
},
|
||||
absolute: {
|
||||
position: 'absolute',
|
||||
top: 15,
|
||||
left: 10,
|
||||
width: 50,
|
||||
height: 60,
|
||||
},
|
||||
}),
|
||||
render: function() {
|
||||
type FlexTestAppProps = $ReadOnly<{||}>;
|
||||
class FlexTestApp extends React.Component<FlexTestAppProps> {
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
style={this._styles.container}
|
||||
style={FlexTestAppStyles.container}
|
||||
testID="container"
|
||||
collapsable={false}>
|
||||
<View
|
||||
style={[this._styles.child, {backgroundColor: '#ff0000'}]}
|
||||
style={[FlexTestAppStyles.child, FlexTestAppStyles.bgRed]}
|
||||
collapsable={false}
|
||||
/>
|
||||
<View
|
||||
style={[this._styles.child, {backgroundColor: '#0000ff'}]}
|
||||
style={[FlexTestAppStyles.child, FlexTestAppStyles.bgBlue]}
|
||||
collapsable={false}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const FlexTestAppStyles = StyleSheet.create({
|
||||
container: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
child: {
|
||||
flex: 1,
|
||||
},
|
||||
absolute: {
|
||||
position: 'absolute',
|
||||
top: 15,
|
||||
left: 10,
|
||||
width: 50,
|
||||
height: 60,
|
||||
},
|
||||
bgRed: {
|
||||
backgroundColor: '#ff0000',
|
||||
},
|
||||
bgBlue: {
|
||||
backgroundColor: '#0000ff',
|
||||
},
|
||||
});
|
||||
|
||||
var FlexWithText = createReactClass({
|
||||
displayName: 'FlexWithText',
|
||||
_styles: StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'column',
|
||||
margin: 20,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
height: 300,
|
||||
},
|
||||
inner: {
|
||||
flex: 1,
|
||||
margin: 10,
|
||||
},
|
||||
}),
|
||||
render: function() {
|
||||
type FlexWithTextProps = $ReadOnly<{||}>;
|
||||
class FlexWithText extends React.Component<FlexWithTextProps> {
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
style={this._styles.container}
|
||||
style={FlexWithTextStyles.container}
|
||||
testID="container"
|
||||
collapsable={false}>
|
||||
<View style={this._styles.row} collapsable={false}>
|
||||
<Text style={this._styles.inner}>Hello</Text>
|
||||
<Text style={this._styles.inner}>World</Text>
|
||||
<View style={FlexWithTextStyles.row} collapsable={false}>
|
||||
<Text style={FlexWithTextStyles.inner}>Hello</Text>
|
||||
<Text style={FlexWithTextStyles.inner}>World</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const FlexWithTextStyles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'column',
|
||||
margin: 20,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
height: 300,
|
||||
},
|
||||
inner: {
|
||||
flex: 1,
|
||||
margin: 10,
|
||||
},
|
||||
});
|
||||
|
||||
var AbsolutePositionTestApp = createReactClass({
|
||||
displayName: 'AbsolutePositionTestApp',
|
||||
_styles: StyleSheet.create({
|
||||
absolute: {
|
||||
position: 'absolute',
|
||||
top: 15,
|
||||
left: 10,
|
||||
width: 50,
|
||||
height: 60,
|
||||
},
|
||||
}),
|
||||
render: function() {
|
||||
type AbsolutePositionTestAppProps = $ReadOnly<{||}>;
|
||||
class AbsolutePositionTestApp extends React.Component<
|
||||
AbsolutePositionTestAppProps,
|
||||
> {
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
style={this._styles.absolute}
|
||||
style={AbsolutePositionTestAppStyles.absolute}
|
||||
testID="absolute"
|
||||
collapsable={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const AbsolutePositionTestAppStyles = StyleSheet.create({
|
||||
absolute: {
|
||||
position: 'absolute',
|
||||
top: 15,
|
||||
left: 10,
|
||||
width: 50,
|
||||
height: 60,
|
||||
},
|
||||
});
|
||||
|
||||
var AbsolutePositionBottomRightTestApp = createReactClass({
|
||||
displayName: 'AbsolutePositionBottomRightTestApp',
|
||||
_styles: StyleSheet.create({
|
||||
container: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
absolute: {
|
||||
position: 'absolute',
|
||||
bottom: 15,
|
||||
right: 10,
|
||||
width: 50,
|
||||
height: 60,
|
||||
},
|
||||
}),
|
||||
render: function() {
|
||||
type AbsolutePositionBottomRightTestAppProps = $ReadOnly<{||}>;
|
||||
class AbsolutePositionBottomRightTestApp extends React.Component<
|
||||
AbsolutePositionBottomRightTestAppProps,
|
||||
> {
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
style={this._styles.container}
|
||||
style={AbsolutePositionBottomRightTestAppStyles.container}
|
||||
testID="container"
|
||||
collapsable={false}>
|
||||
<View style={this._styles.absolute} collapsable={false} />
|
||||
<View
|
||||
style={AbsolutePositionBottomRightTestAppStyles.absolute}
|
||||
collapsable={false}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const AbsolutePositionBottomRightTestAppStyles = StyleSheet.create({
|
||||
container: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
absolute: {
|
||||
position: 'absolute',
|
||||
bottom: 15,
|
||||
right: 10,
|
||||
width: 50,
|
||||
height: 60,
|
||||
},
|
||||
});
|
||||
|
||||
var CenteredTextView = createReactClass({
|
||||
displayName: 'CenteredTextView',
|
||||
_styles: StyleSheet.create({
|
||||
parent: {
|
||||
width: 200,
|
||||
height: 100,
|
||||
backgroundColor: '#aa3311',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
text: {
|
||||
fontSize: 15,
|
||||
color: '#672831',
|
||||
},
|
||||
}),
|
||||
render: function() {
|
||||
type CenteredTextViewProps = $ReadOnly<{|
|
||||
text?: ?string,
|
||||
|}>;
|
||||
class CenteredTextView extends React.Component<CenteredTextViewProps> {
|
||||
render() {
|
||||
return (
|
||||
<View collapsable={false}>
|
||||
<View style={this._styles.parent} collapsable={false}>
|
||||
<Text style={this._styles.text} testID="text">
|
||||
<View style={CenteredTextViewStyles.parent} collapsable={false}>
|
||||
<Text style={CenteredTextViewStyles.text} testID="text">
|
||||
{this.props.text}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const CenteredTextViewStyles = StyleSheet.create({
|
||||
parent: {
|
||||
width: 200,
|
||||
height: 100,
|
||||
backgroundColor: '#aa3311',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
text: {
|
||||
fontSize: 15,
|
||||
color: '#672831',
|
||||
},
|
||||
});
|
||||
|
||||
var flushUpdatePositionInList = null;
|
||||
var UpdatePositionInListTestApp = createReactClass({
|
||||
displayName: 'UpdatePositionInListTestApp',
|
||||
_styles: StyleSheet.create({
|
||||
element: {
|
||||
height: 10,
|
||||
},
|
||||
active: {
|
||||
height: 50,
|
||||
},
|
||||
}),
|
||||
getInitialState: function() {
|
||||
let flushUpdatePositionInList = null;
|
||||
|
||||
type UpdatePositionInListTestAppProps = $ReadOnly<{||}>;
|
||||
type UpdatePositionInListTestAppState = {|
|
||||
active: boolean,
|
||||
|};
|
||||
class UpdatePositionInListTestApp extends React.Component<
|
||||
UpdatePositionInListTestAppProps,
|
||||
UpdatePositionInListTestAppState,
|
||||
> {
|
||||
state = {
|
||||
active: false,
|
||||
};
|
||||
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
flushUpdatePositionInList = () => this.setState({active: true});
|
||||
return {active: false};
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View collapsable={false} testID="container">
|
||||
<View style={this._styles.element} collapsable={false} />
|
||||
<View
|
||||
style={UpdatePositionInListTestAppStyles.element}
|
||||
collapsable={false}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
this._styles.element,
|
||||
this.state.active && this._styles.active,
|
||||
UpdatePositionInListTestAppStyles.element,
|
||||
this.state.active && UpdatePositionInListTestAppStyles.active,
|
||||
]}
|
||||
collapsable={false}
|
||||
/>
|
||||
<View style={this._styles.element} collapsable={false} />
|
||||
<View
|
||||
style={UpdatePositionInListTestAppStyles.element}
|
||||
collapsable={false}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const UpdatePositionInListTestAppStyles = StyleSheet.create({
|
||||
element: {
|
||||
height: 10,
|
||||
},
|
||||
active: {
|
||||
height: 50,
|
||||
},
|
||||
});
|
||||
|
||||
var UIManagerTestModule = {
|
||||
renderFlexTestApplication: function(rootTag) {
|
||||
renderApplication(FlexTestApp, {}, rootTag);
|
||||
/**
|
||||
* This is a workaround for the following flow problem:
|
||||
*
|
||||
* const emptyObject: {||} = {}; // Raises error
|
||||
*
|
||||
* @see https://github.com/facebook/flow/issues/2977
|
||||
*/
|
||||
const emptyExactProps = Object.freeze({});
|
||||
|
||||
const UIManagerTestModule = {
|
||||
renderFlexTestApplication(rootTag: number) {
|
||||
renderApplication(FlexTestApp, emptyExactProps, rootTag);
|
||||
},
|
||||
renderFlexWithTextApplication: function(rootTag) {
|
||||
renderApplication(FlexWithText, {}, rootTag);
|
||||
renderFlexWithTextApplication(rootTag: number) {
|
||||
renderApplication(FlexWithText, emptyExactProps, rootTag);
|
||||
},
|
||||
renderAbsolutePositionBottomRightTestApplication: function(rootTag) {
|
||||
renderApplication(AbsolutePositionBottomRightTestApp, {}, rootTag);
|
||||
renderAbsolutePositionBottomRightTestApplication(rootTag: number) {
|
||||
renderApplication(
|
||||
AbsolutePositionBottomRightTestApp,
|
||||
emptyExactProps,
|
||||
rootTag,
|
||||
);
|
||||
},
|
||||
renderAbsolutePositionTestApplication: function(rootTag) {
|
||||
renderApplication(AbsolutePositionTestApp, {}, rootTag);
|
||||
renderAbsolutePositionTestApplication(rootTag: number) {
|
||||
renderApplication(AbsolutePositionTestApp, emptyExactProps, rootTag);
|
||||
},
|
||||
renderCenteredTextViewTestApplication: function(rootTag, text) {
|
||||
renderCenteredTextViewTestApplication(rootTag: number, text: string) {
|
||||
renderApplication(CenteredTextView, {text: text}, rootTag);
|
||||
},
|
||||
renderUpdatePositionInListTestApplication: function(rootTag) {
|
||||
renderApplication(UpdatePositionInListTestApp, {}, rootTag);
|
||||
},
|
||||
flushUpdatePositionInList: function() {
|
||||
flushUpdatePositionInList();
|
||||
renderUpdatePositionInListTestApplication(rootTag: number) {
|
||||
renderApplication(UpdatePositionInListTestApp, emptyExactProps, rootTag);
|
||||
},
|
||||
flushUpdatePositionInList,
|
||||
};
|
||||
|
||||
BatchedBridge.registerCallableModule(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user