Skip to content

[createReactClass] from ReactAndroid/src/androidTest/js/UIManagerTestModule.js #21702

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ronal2do wants to merge 12 commits into from
Closed

[createReactClass] from ReactAndroid/src/androidTest/js/UIManagerTestModule.js #21702

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
17cdc0d
Merge pull request #2 from facebook/master
ronal2do Oct 10, 2018
be7b9fc
Replace createReactClass related 21581
ronal2do Oct 10, 2018
6993ed7
prettier pass
ronal2do Oct 10, 2018
9d52d98
remove inline styles
ronal2do Oct 10, 2018
b1e741c
remove inline styles
ronal2do Oct 10, 2018
02b5814
eslint
ronal2do Oct 10, 2018
4c94f06
prettier
ronal2do Oct 10, 2018
6fa91a1
flow fixes ans add a constructor
ronal2do Oct 11, 2018
3d6d868
flow fixes ans add a constructor
ronal2do Oct 11, 2018
a217904
unused var
ronal2do Oct 11, 2018
f6528b2
unused var
ronal2do Oct 11, 2018
5afd276
fixed
ronal2do Oct 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
300 changes: 168 additions & 132 deletions ReactAndroid/src/androidTest/js/UIManagerTestModule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,216 +9,252 @@

'use strict';

var BatchedBridge = require('BatchedBridge');
var React = require('React');
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
var StyleSheet = require('StyleSheet');
Comment thread
ronal2do marked this conversation as resolved.
var View = require('View');
Comment thread
ronal2do marked this conversation as resolved.
var Text = require('Text');

var createReactClass = require('create-react-class');
var renderApplication = require('renderApplication');

var FlexTestApp = createReactClass({
Comment thread
ronal2do marked this conversation as resolved.
displayName: 'FlexTestApp',
_styles: StyleSheet.create({
Comment thread
ronal2do marked this conversation as resolved.
container: {
width: 200,
height: 200,
flexDirection: 'row',
},
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
child: {
flex: 1,
},
absolute: {
position: 'absolute',
top: 15,
left: 10,
width: 50,
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
height: 60,
Comment thread
ronal2do marked this conversation as resolved.
},
Comment thread
ronal2do marked this conversation as resolved.
}),
Comment thread
ronal2do marked this conversation as resolved.
render: function() {
const BatchedBridge = require('BatchedBridge');
const React = require('React');
const StyleSheet = require('StyleSheet');
const View = require('View');
const Text = require('Text');
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.

const renderApplication = require('renderApplication');
Comment thread
ronal2do marked this conversation as resolved.

Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
type FlexTestAppProps = $ReadOnly<{||}>;
Comment thread
ronal2do marked this conversation as resolved.
class FlexTestApp extends React.Component<FlexTestAppProps> {
render() {
return (
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
<View
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
style={this._styles.container}
style={FlexTestAppStyles.container}
testID="container"
Comment thread
ronal2do marked this conversation as resolved.
collapsable={false}>
<View
style={[this._styles.child, {backgroundColor: '#ff0000'}]}
style={[FlexTestAppStyles.child, FlexTestAppStyles.bgRed]}
Comment thread
ronal2do marked this conversation as resolved.
collapsable={false}
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
/>
<View
style={[this._styles.child, {backgroundColor: '#0000ff'}]}
style={[FlexTestAppStyles.child, FlexTestAppStyles.bgBlue]}
collapsable={false}
/>
</View>
Comment thread
ronal2do marked this conversation as resolved.
);
}
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
}

const FlexTestAppStyles = StyleSheet.create({
container: {
width: 200,
height: 200,
flexDirection: 'row',
},
child: {
Comment thread
ronal2do marked this conversation as resolved.
Comment thread
ronal2do marked this conversation as resolved.
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,
},
Comment thread
ronal2do marked this conversation as resolved.
}),
render: function() {
type AbsolutePositionTestAppProps = $ReadOnly<{||}>;
class AbsolutePositionTestApp extends React.Component<
AbsolutePositionTestAppProps,
> {
render() {
return (
Comment thread
ronal2do marked this conversation as resolved.
<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 = $ReadOnly<{|
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() {
}

Comment thread
ronal2do marked this conversation as resolved.
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) {
const UIManagerTestModule = {
renderFlexTestApplication(rootTag) {
renderApplication(FlexTestApp, {}, rootTag);
},
renderFlexWithTextApplication: function(rootTag) {
renderFlexWithTextApplication(rootTag) {
renderApplication(FlexWithText, {}, rootTag);
},
renderAbsolutePositionBottomRightTestApplication: function(rootTag) {
renderAbsolutePositionBottomRightTestApplication(rootTag) {
renderApplication(AbsolutePositionBottomRightTestApp, {}, rootTag);
},
renderAbsolutePositionTestApplication: function(rootTag) {
renderAbsolutePositionTestApplication(rootTag) {
renderApplication(AbsolutePositionTestApp, {}, rootTag);
},
renderCenteredTextViewTestApplication: function(rootTag, text) {
renderCenteredTextViewTestApplication(rootTag, text) {
renderApplication(CenteredTextView, {text: text}, rootTag);
},
renderUpdatePositionInListTestApplication: function(rootTag) {
renderUpdatePositionInListTestApplication(rootTag) {
renderApplication(UpdatePositionInListTestApp, {}, rootTag);
},
flushUpdatePositionInList: function() {
flushUpdatePositionInList();
},
flushUpdatePositionInList,
};

BatchedBridge.registerCallableModule(
Expand Down