kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-28 20:25:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Prettier the rest of ReactNative

Browse Source 
Reviewed By: yungsters

Differential Revision: D7974340

fbshipit-source-id: 5fe457a8a9be4bd360fc3af9acb5c1136b2be0d7
This commit is contained in:
Eli White
2018-05-11 13:32:37 -07:00
committed by Facebook Github Bot
parent aba4ec0c09
commit 36fcbaa56d
170 changed files with 5132 additions and 3995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
RNTester/js/ModalExample.js
View File

@@ -4,8 +4,10 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
var React = require('react');
@@ -52,7 +54,9 @@ class Button extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
onShowUnderlay={this._onHighlight}
style={[styles.button, this.props.style]}
underlayColor="#a9d9d4">
<Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
<Text style={[styles.buttonText, colorStyle]}>
{this.props.children}
</Text>
</TouchableHighlight>
);
}
@@ -77,11 +81,11 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
currentOrientation: 'unknown',
};
_setModalVisible = (visible) => {
_setModalVisible = visible => {
this.setState({modalVisible: visible});
};
_setAnimationType = (type) => {
_setAnimationType = type => {
this.setState({animationType: type});
};
@@ -94,19 +98,24 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
return null;
}
return (
<Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
<Switch
value={this.state.transparent}
onValueChange={this._toggleTransparent}
/>
);
}
render() {
var modalBackgroundStyle = {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
backgroundColor: this.state.transparent
? 'rgba(0, 0, 0, 0.5)'
: '#f5fcff',
};
var innerContainerTransparentStyle = this.state.transparent
? {backgroundColor: '#fff', padding: 20}
: null;
var activeButtonStyle = {
backgroundColor: '#ddd'
backgroundColor: '#ddd',
};
return (
@@ -117,13 +126,26 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() => this._setModalVisible(false)}
supportedOrientations={supportedOrientationsPickerValues[this.state.selectedSupportedOrientation]}
onOrientationChange={evt => this.setState({currentOrientation: evt.nativeEvent.orientation})}
>
supportedOrientations={
supportedOrientationsPickerValues[
this.state.selectedSupportedOrientation
]
}
onOrientationChange={evt =>
this.setState({currentOrientation: evt.nativeEvent.orientation})
}>
<View style={[styles.container, modalBackgroundStyle]}>
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
<Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
<Text>It is currently displayed in {this.state.currentOrientation} mode.</Text>
<View
style={[styles.innerContainer, innerContainerTransparentStyle]}>
<Text>
This modal was presented{' '}
{this.state.animationType === 'none' ? 'without' : 'with'}{' '}
animation.
</Text>
<Text>
It is currently displayed in {this.state.currentOrientation}{' '}
mode.
</Text>
<Button
onPress={this._setModalVisible.bind(this, false)}
style={styles.modalButton}>
@@ -134,13 +156,25 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
</Modal>
<View style={styles.row}>
<Text style={styles.rowTitle}>Animation Type</Text>
<Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
<Button
onPress={this._setAnimationType.bind(this, 'none')}
style={
this.state.animationType === 'none' ? activeButtonStyle : {}
}>
none
</Button>
<Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
<Button
onPress={this._setAnimationType.bind(this, 'slide')}
style={
this.state.animationType === 'slide' ? activeButtonStyle : {}
}>
slide
</Button>
<Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
<Button
onPress={this._setAnimationType.bind(this, 'fade')}
style={
this.state.animationType === 'fade' ? activeButtonStyle : {}
}>
fade
</Button>
</View>
@@ -166,9 +200,10 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
<Text style={styles.rowTitle}>Presentation style</Text>
<Picker
selectedValue={this.state.presentationStyle}
onValueChange={(presentationStyle) => this.setState({presentationStyle})}
itemStyle={styles.pickerItem}
>
onValueChange={presentationStyle =>
this.setState({presentationStyle})
}
itemStyle={styles.pickerItem}>
<Item label="Full Screen" value="fullScreen" />
<Item label="Page Sheet" value="pageSheet" />
<Item label="Form Sheet" value="formSheet" />
@@ -181,9 +216,10 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
<Text style={styles.rowTitle}>Supported orientations</Text>
<Picker
selectedValue={this.state.selectedSupportedOrientation}
onValueChange={(_, i) => this.setState({selectedSupportedOrientation: i})}
itemStyle={styles.pickerItem}
>
onValueChange={(_, i) =>
this.setState({selectedSupportedOrientation: i})
}
itemStyle={styles.pickerItem}>
<Item label="Portrait" value={0} />
<Item label="Landscape" value={1} />
<Item label="Landscape left" value={2} />
@@ -197,7 +233,6 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
}
}
exports.examples = [
{
title: 'Modal Presentation',