status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[react_native] JS files from D2127018: [react_native] Add uiexplorer app

This commit is contained in:
Andrei Coman 2015-06-08 04:28:27 -07:00
parent c2fb21b322
commit 8e3c02e4f0
4 changed files with 247 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
Examples/UIExplorer/UIExplorerApp.android.js Normal file
View File

@ -0,0 +1,125 @@
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @providesModule UIExplorerApp
* @flow
*/
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var DrawerLayoutAndroid = require('DrawerLayoutAndroid');
var ToolbarAndroid = require('ToolbarAndroid');
var UIExplorerList = require('./UIExplorerList');
var {
StyleSheet,
View,
} = React;
var DRAWER_WIDTH_LEFT = 56;
var UIExplorerApp = React.createClass({
getInitialState: function() {
return {
example: {
title: 'UIExplorer',
component: this._renderHome(),
},
};
},
render: function() {
return (
<DrawerLayoutAndroid
drawerPosition={DrawerLayoutAndroid.positions.Left}
drawerWidth={Dimensions.get('window').width - DRAWER_WIDTH_LEFT}
ref={(drawer) => { this.drawer = drawer; }}
renderNavigationView={this._renderNavigationView}>
{this._renderNavigation()}
</DrawerLayoutAndroid>
);
},
_renderNavigationView: function() {
return (
<UIExplorerList
onSelectExample={this.onSelectExample}
isInDrawer={true}
/>
);
},
onSelectExample: function(example) {
this.drawer.closeDrawer();
if (example.title === 'UIExplorer') {
example.component = this._renderHome();
}
this.setState({
example: {
title: example.title,
component: example.component,
},
});
},
_renderHome: function() {
var onSelectExample = this.onSelectExample;
return React.createClass({
render: function() {
return (
<UIExplorerList
onSelectExample={onSelectExample}
isInDrawer={false}
/>
);
}
});
},
_renderNavigation: function() {
var Component = this.state.example.component;
return (
<View style={styles.container}>
<ToolbarAndroid
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
onIconClicked={() => this.drawer.openDrawer()}
style={styles.toolbar}
title={this.state.example.title}
/>
<Component />
</View>
);
},
});
var styles = StyleSheet.create({
messageText: {
fontSize: 17,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
container: {
flex: 1,
},
toolbar: {
backgroundColor: '#E9EAED',
height: 56,
},
});
module.exports = UIExplorerApp;

32
Examples/UIExplorer/UIExplorerApp.js → Examples/UIExplorer/UIExplorerApp.ios.js
View File

@ -43,22 +43,22 @@ var UIExplorerApp = React.createClass({
/>
);
}
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'UIExplorer',
component: UIExplorerList,
passProps: {
onExternalExampleRequested: (example) => {
this.setState({ openExternalExample: example, });
},
}
}}
itemWrapperStyle={styles.itemWrapper}
tintColor='#008888'
/>
);
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'UIExplorer',
component: UIExplorerList,
passProps: {
onExternalExampleRequested: (example) => {
this.setState({ openExternalExample: example, });
},
}
}}
itemWrapperStyle={styles.itemWrapper}
tintColor="#008888"
/>
);
}
});

158
Examples/UIExplorer/UIExplorerList.js
View File

@ -20,6 +20,7 @@ var {
AppRegistry,
ListView,
PixelRatio,
Platform,
StyleSheet,
Text,
TextInput,
@ -34,52 +35,68 @@ import type { ExampleModule } from 'ExampleTypes';
var createExamplePage = require('./createExamplePage');
var COMPONENTS = [
require('./ActivityIndicatorIOSExample'),
require('./DatePickerIOSExample'),
require('./ImageExample'),
require('./ListViewExample'),
require('./ListViewPagingExample'),
require('./MapViewExample'),
require('./Navigator/NavigatorExample'),
require('./NavigatorIOSColorsExample'),
require('./NavigatorIOSExample'),
require('./PickerIOSExample'),
require('./ProgressViewIOSExample'),
require('./ScrollViewExample'),
require('./SegmentedControlIOSExample'),
require('./SliderIOSExample'),
require('./SwitchIOSExample'),
require('./TabBarIOSExample'),
require('./TextExample.ios'),
require('./TextInputExample'),
require('./TouchableExample'),
var COMMON_COMPONENTS = [
require('./ViewExample'),
require('./WebViewExample'),
];
var APIS = [
require('./AccessibilityIOSExample'),
require('./ActionSheetIOSExample'),
require('./AdSupportIOSExample'),
require('./AlertIOSExample'),
require('./AppStateIOSExample'),
require('./AsyncStorageExample'),
require('./BorderExample'),
require('./CameraRollExample.ios'),
var COMMON_APIS = [
require('./GeolocationExample'),
require('./LayoutEventsExample'),
require('./LayoutExample'),
require('./NetInfoExample'),
require('./PanResponderExample'),
require('./PointerEventsExample'),
require('./PushNotificationIOSExample'),
require('./StatusBarIOSExample'),
require('./TimerExample'),
require('./VibrationIOSExample'),
require('./XHRExample'),
];
if (Platform.OS === 'ios') {
var COMPONENTS = COMMON_COMPONENTS.concat([
require('./ActivityIndicatorIOSExample'),
require('./DatePickerIOSExample'),
require('./ImageExample'),
require('./ListViewExample'),
require('./ListViewPagingExample'),
require('./MapViewExample'),
require('./Navigator/NavigatorExample'),
require('./NavigatorIOSColorsExample'),
require('./NavigatorIOSExample'),
require('./PickerIOSExample'),
require('./ProgressViewIOSExample'),
require('./ScrollViewExample'),
require('./SegmentedControlIOSExample'),
require('./SliderIOSExample'),
require('./SwitchIOSExample'),
require('./TabBarIOSExample'),
require('./TextExample.ios'),
require('./TextInputExample'),
require('./TouchableExample'),
]);
var APIS = COMMON_APIS.concat([
require('./AccessibilityIOSExample'),
require('./ActionSheetIOSExample'),
require('./AdSupportIOSExample'),
require('./AlertIOSExample'),
require('./AppStateIOSExample'),
require('./AsyncStorageExample'),
require('./BorderExample'),
require('./CameraRollExample.ios'),
require('./LayoutEventsExample'),
require('./NetInfoExample'),
require('./PointerEventsExample'),
require('./PushNotificationIOSExample'),
require('./StatusBarIOSExample'),
require('./TimerExample'),
require('./VibrationIOSExample'),
require('./XHRExample'),
]);
} else if (Platform.OS === 'android') {
var COMPONENTS = COMMON_COMPONENTS.concat([
require('ToolbarAndroidSampleApp'),
]);
var APIS = COMMON_APIS.concat([
]);
}
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
@ -112,12 +129,17 @@ COMPONENTS.concat(APIS).forEach((Example) => {
}
});
type Props = {
navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
onExternalExampleRequested: Function,
};
if (Platform.OS === 'ios') {
type Props = {
navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
onExternalExampleRequested: Function,
};
} else if (Platform.OS === 'android') {
type Props = {
onSelectExample: Function,
isInDrawer: bool,
};
}
class UIExplorerList extends React.Component {
props: Props;
@ -129,7 +151,7 @@ class UIExplorerList extends React.Component {
components: COMPONENTS,
apis: APIS,
}),
searchText: Settings.get('searchText'),
searchText: Platform.OS === 'ios' ? Settings.get('searchText') : '',
};
}
@ -138,8 +160,12 @@ class UIExplorerList extends React.Component {
}
render() {
return (
<View style={styles.listContainer}>
if (Platform.OS === 'ios' ||
(Platform.OS === 'android' && !this.props.isInDrawer)) {
var platformTextInputStyle =
Platform.OS === 'ios' ? styles.searchTextInputIOS :
Platform.OS === 'android' ? styles.searchTextInputAndroid : {};
var textInput = (
<View style={styles.searchRow}>
<TextInput
autoCapitalize="none"
@ -147,10 +173,24 @@ class UIExplorerList extends React.Component {
clearButtonMode="always"
onChangeText={this._search.bind(this)}
placeholder="Search..."
style={styles.searchTextInput}
style={[styles.searchTextInput, platformTextInputStyle]}
value={this.state.searchText}
/>
</View>
</View>);
}
var homePage;
if (Platform.OS === 'android' && this.props.isInDrawer) {
homePage = this._renderRow({
title: 'UIExplorer',
description: 'List of examples',
}, -1);
}
return (
<View style={styles.listContainer}>
{textInput}
{homePage}
<ListView
style={styles.list}
dataSource={this.state.dataSource}
@ -212,10 +252,17 @@ class UIExplorerList extends React.Component {
return;
}
var Component = makeRenderable(example);
this.props.navigator.push({
title: Component.title,
component: Component,
});
if (Platform.OS === 'ios') {
this.props.navigator.push({
title: Component.title,
component: Component,
});
} else if (Platform.OS === 'android') {
this.props.onSelectExample({
title: Component.title,
component: Component,
});
}
}
}
@ -268,9 +315,14 @@ var styles = StyleSheet.create({
borderColor: '#cccccc',
borderRadius: 3,
borderWidth: 1,
height: 30,
paddingLeft: 8,
},
searchTextInputIOS: {
height: 30,
},
searchTextInputAndroid: {
padding: 2,
},
});
module.exports = UIExplorerList;

1
Libraries/react-native/react-native.js vendored
View File

@ -62,6 +62,7 @@ var ReactNative = Object.assign(Object.create(require('React')), {
DeviceEventEmitter: require('RCTDeviceEventEmitter'),
NativeAppEventEmitter: require('RCTNativeAppEventEmitter'),
NativeModules: require('NativeModules'),
Platform: require('Platform'),
requireNativeComponent: require('requireNativeComponent'),
addons: {