Skip to content
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

Jump to bottom

Fix inline styles eslint warnings for examples #22123

Closed
wants to merge 1 commit into from
Closed

Fix inline styles eslint warnings for examples #22123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 1 addition & 3 deletions RNTester/js/ActivityIndicatorExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,7 @@ exports.examples = [
return (
<View>
<ActivityIndicator style={[styles.centering]} />
<ActivityIndicator
style={[styles.centering, {backgroundColor: '#eeeeee'}]}
/>
<ActivityIndicator style={[styles.centering, styles.gray]} />
</View>
);
},
Expand Down
10 changes: 8 additions & 2 deletions RNTester/js/AlertIOSExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ class PromptOptions extends React.Component<$FlowFixMeProps, any> {
render() {
return (
<View>
<Text style={{marginBottom: 10}}>
<Text style={{fontWeight: 'bold'}}>Prompt value:</Text>{' '}
<Text style={styles.promptValue}>
<Text style={styles.promptValueLabel}>Prompt value:</Text>{' '}
{this.state.promptValue}
</Text>

Expand Down Expand Up @@ -189,4 +189,10 @@ const styles = StyleSheet.create({
backgroundColor: '#eeeeee',
padding: 10,
},
promptValue: {
marginBottom: 10,
},
promptValueLabel: {
fontWeight: 'bold',
},
});
6 changes: 5 additions & 1 deletion RNTester/js/AnimatedExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ exports.examples = [
<Animated.Image
source={require('./bunny.png')}
style={[
{width: 70, height: 70},
styles.rotatingImage,
{
transform: [
{
Expand Down Expand Up @@ -298,4 +298,8 @@ const styles = StyleSheet.create({
borderRadius: 10,
alignItems: 'center',
},
rotatingImage: {
width: 70,
height: 70,
},
});
25 changes: 20 additions & 5 deletions RNTester/js/BorderExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ const styles = StyleSheet.create({
width: 100,
height: 100,
},
wrapper: {
flexDirection: 'row',
},
border1: {
borderWidth: 10,
borderColor: 'brown',
Expand Down Expand Up @@ -92,6 +95,18 @@ const styles = StyleSheet.create({
marginRight: 10,
backgroundColor: 'lightgrey',
},
border8Top: {
borderTopWidth: 5,
},
border8Left: {
borderLeftWidth: 5,
},
border8Bottom: {
borderBottomWidth: 5,
},
border8Right: {
borderRightWidth: 5,
},
border9: {
borderWidth: 10,
borderTopLeftRadius: 10,
Expand Down Expand Up @@ -232,11 +247,11 @@ exports.examples = [
description: 'top, left, bottom right',
render() {
return (
<View style={{flexDirection: 'row'}}>
<View style={[styles.box, styles.border8, {borderTopWidth: 5}]} />
<View style={[styles.box, styles.border8, {borderLeftWidth: 5}]} />
<View style={[styles.box, styles.border8, {borderBottomWidth: 5}]} />
<View style={[styles.box, styles.border8, {borderRightWidth: 5}]} />
<View style={styles.wrapper}>
<View style={[styles.box, styles.border8, styles.border8Top]} />
<View style={[styles.box, styles.border8, styles.border8Left]} />
<View style={[styles.box, styles.border8, styles.border8Bottom]} />
<View style={[styles.box, styles.border8, styles.border8Right]} />
</View>
);
},
Expand Down
45 changes: 21 additions & 24 deletions RNTester/js/BoxShadowExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,23 @@ const styles = StyleSheet.create({
shadowRadius: 0,
shadowOffset: {width: 3, height: 3},
},
shadowShaped: {
borderRadius: 50,
},
shadowImage: {
borderWidth: 0,
overflow: 'visible',
},
shadowChild: {
backgroundColor: 'transparent',
},
shadowChildBox: {
width: 80,
height: 80,
borderRadius: 40,
margin: 8,
backgroundColor: 'red',
},
});

exports.title = 'Box Shadow';
Expand All @@ -54,7 +71,7 @@ exports.examples = [
title: 'Shaped shadow',
description: 'borderRadius: 50',
render() {
return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
return <View style={[styles.box, styles.shadow1, styles.shadowShaped]} />;
},
},
{
Expand All @@ -64,11 +81,7 @@ exports.examples = [
return (
<Image
source={require('./hawk.png')}
style={[
styles.box,
styles.shadow1,
{borderWidth: 0, overflow: 'visible'},
]}
style={[styles.box, styles.shadow1, styles.shadowImage]}
/>
);
},
Expand All @@ -79,24 +92,8 @@ exports.examples = [
'For views without an opaque background color, shadow will be derived from the subviews.',
render() {
return (
<View
style={[
styles.box,
styles.shadow1,
{backgroundColor: 'transparent'},
]}>
<View
style={[
styles.box,
{
width: 80,
height: 80,
borderRadius: 40,
margin: 8,
backgroundColor: 'red',
},
]}
/>
<View style={[styles.box, styles.shadow1, styles.shadowChild]}>
<View style={[styles.box, styles.shadowChildBox]} />
</View>
);
},
Expand Down
11 changes: 9 additions & 2 deletions RNTester/js/ButtonExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

const React = require('react');
const ReactNative = require('react-native');
const {Alert, Button, View} = ReactNative;
const {Alert, Button, View, StyleSheet} = ReactNative;

function onButtonPress(buttonName) {
Alert.alert(`${buttonName} has been pressed!`);
Expand Down Expand Up @@ -63,7 +63,7 @@ exports.examples = [
'This layout strategy lets the title define the width of ' + 'the button',
render: function() {
return (
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={styles.container}>
<Button
onPress={() => onButtonPress('Left')}
title="This looks great!"
Expand Down Expand Up @@ -94,3 +94,10 @@ exports.examples = [
},
},
];

const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
},
});
27 changes: 19 additions & 8 deletions RNTester/js/CheckBoxExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@
* @flow
* @format
*/

'use strict';

const React = require('react');
const ReactNative = require('react-native');
const {CheckBox, Text, View} = ReactNative;
const {CheckBox, Text, View, StyleSheet} = ReactNative;

class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
state = {
Expand All @@ -24,7 +25,7 @@ class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
<View>
<CheckBox
onValueChange={value => this.setState({falseCheckBoxIsOn: value})}
style={{marginBottom: 10}}
style={styles.checkbox}
value={this.state.falseCheckBoxIsOn}
/>
<CheckBox
Expand All @@ -40,7 +41,7 @@ class DisabledCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
render() {
return (
<View>
<CheckBox disabled={true} style={{marginBottom: 10}} value={true} />
<CheckBox disabled={true} style={styles.checkbox} value={true} />
<CheckBox disabled={true} value={false} />
</View>
);
Expand All @@ -55,16 +56,16 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {

render() {
return (
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={styles.container}>
<View>
<CheckBox
onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
style={{marginBottom: 10}}
style={styles.checkbox}
value={this.state.eventCheckBoxIsOn}
/>
<CheckBox
onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
style={{marginBottom: 10}}
style={styles.checkbox}
value={this.state.eventCheckBoxIsOn}
/>
<Text>{this.state.eventCheckBoxIsOn ? 'On' : 'Off'}</Text>
Expand All @@ -74,14 +75,14 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
onValueChange={value =>
this.setState({eventCheckBoxRegressionIsOn: value})
}
style={{marginBottom: 10}}
style={styles.checkbox}
value={this.state.eventCheckBoxRegressionIsOn}
/>
<CheckBox
onValueChange={value =>
this.setState({eventCheckBoxRegressionIsOn: value})
}
style={{marginBottom: 10}}
style={styles.checkbox}
value={this.state.eventCheckBoxRegressionIsOn}
/>
<Text>{this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}</Text>
Expand Down Expand Up @@ -122,3 +123,13 @@ exports.title = '<CheckBox>';
exports.displayName = 'CheckBoxExample';
exports.description = 'Native boolean input';
exports.examples = examples;

const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
},
checkbox: {
marginBottom: 10,
},
});
16 changes: 13 additions & 3 deletions RNTester/js/ClipboardExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

const React = require('react');
const ReactNative = require('react-native');
const {Clipboard, View, Text} = ReactNative;
const {Clipboard, View, Text, StyleSheet} = ReactNative;

class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
state = {
Expand All @@ -32,10 +32,10 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
render() {
return (
<View>
<Text onPress={this._setClipboardContent} style={{color: 'blue'}}>
<Text onPress={this._setClipboardContent} style={styles.label}>
Tap to put "Hello World" in the clipboard
</Text>
<Text style={{color: 'red', marginTop: 20}}>{this.state.content}</Text>
<Text style={styles.content}>{this.state.content}</Text>
</View>
);
}
Expand All @@ -51,3 +51,13 @@ exports.examples = [
},
},
];

const styles = StyleSheet.create({
label: {
color: 'blue',
},
content: {
color: 'red',
marginTop: 20,
},
});
8 changes: 6 additions & 2 deletions RNTester/js/ToolbarAndroidExample.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,7 @@ class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
height: 144,
})}
style={styles.toolbar}>
<View
style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
<View style={styles.switchWrapper}>
<Switch
value={this.state.toolbarSwitch}
onValueChange={value => this.setState({toolbarSwitch: value})}
Expand Down Expand Up @@ -168,6 +167,11 @@ const styles = StyleSheet.create({
backgroundColor: '#e9eaed',
height: 56,
},
switchWrapper: {
height: 56,
flexDirection: 'row',
alignItems: 'center',
},
});

module.exports = ToolbarAndroidExample;
11 changes: 7 additions & 4 deletions RNTester/js/TouchableExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ class TouchableFeedbackEvents extends React.Component<{}, $FlowFixMeState> {
render() {
return (
<View testID="touchable_feedback_events">
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, styles.centered]}>
<TouchableOpacity
style={styles.wrapper}
testID="touchable_feedback_events_button"
Expand Down Expand Up @@ -269,7 +269,7 @@ class TouchableDelayEvents extends React.Component<{}, $FlowFixMeState> {
render() {
return (
<View testID="touchable_delay_events">
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, styles.centered]}>
<TouchableOpacity
style={styles.wrapper}
testID="touchable_delay_events_button"
Expand Down Expand Up @@ -317,7 +317,7 @@ class ForceTouchExample extends React.Component<{}, $FlowFixMeState> {
<View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
<Text>{this._renderConsoleText()}</Text>
</View>
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, styles.centered]}>
<View
style={styles.wrapper}
testID="touchable_3dtouch_button"
Expand Down Expand Up @@ -355,7 +355,7 @@ class TouchableHitSlop extends React.Component<{}, $FlowFixMeState> {

return (
<View testID="touchable_hit_slop">
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, styles.centered]}>
<TouchableOpacity
onPress={this.onPress}
style={styles.hitSlopWrapper}
Expand Down Expand Up @@ -467,6 +467,9 @@ const styles = StyleSheet.create({
justifyContent: 'center',
flexDirection: 'row',
},
centered: {
justifyContent: 'center',
},
image: {
width: 50,
height: 50,
Expand Down
Loading