diff --git a/AddressBar.js b/AddressBar.js index 5f49a8d..1bdeae5 100644 --- a/AddressBar.js +++ b/AddressBar.js @@ -1,10 +1,13 @@ 'use strict'; -import React from 'react-native'; -var { - TextInput, - View, - } = React; +import React, { + PropTypes, +} from 'react'; + +import ReactNative, { + TextInput, + View, +} from 'react-native'; import BaseComponent from './BaseComponent' import Utils from './Utils' @@ -65,6 +68,7 @@ class AddressBar extends BaseComponent { onSubmitEditing={this.onSubmitEditing} onChange={this.handleTextInputChange} clearButtonMode="while-editing" + autoCorrect={false} style={[styles.addressBarTextInput, this.props.foregroundColor && {color:this.props.foregroundColor}]} /> @@ -73,10 +77,10 @@ class AddressBar extends BaseComponent { } AddressBar.propTypes = { - url: React.PropTypes.string, - onLoad: React.PropTypes.func, - onReload: React.PropTypes.func, - foregroundColor: React.PropTypes.string + url: PropTypes.string, + onLoad: PropTypes.func, + onReload: PropTypes.func, + foregroundColor: PropTypes.string }; AddressBar.defaultProps = { @@ -86,4 +90,3 @@ AddressBar.defaultProps = { }; module.exports = AddressBar; - diff --git a/BackButton.js b/BackButton.js new file mode 100644 index 0000000..83328d8 --- /dev/null +++ b/BackButton.js @@ -0,0 +1,74 @@ +'use strict'; + +import React, { + PropTypes, +} from 'react'; + +import ReactNative, { + Image, +} from 'react-native'; + +import BaseComponent from './BaseComponent' +import styles from './styles' +import Button from './Button'; + +class BackButton extends BaseComponent { + + constructor(props) { + super(props); + + this.state = { + visible: props.visible, + }; + + this._bind( + 'onBackPress' + ); + } + + componentWillReceiveProps(nextProps) { + this.setState({ + visible: nextProps.visible + }); + } + + buttonStyle() { + return [styles.backButton, this.props.foregroundColor && {tintColor:this.props.foregroundColor}]; + } + + onBackPress() { + const { onPress } = this.props; + + onPress && onPress(); + } + + render() { + const { visible } = this.props; + + if (!visible) { + return false; + } + + return ( + + ); + } +} + +BackButton.propTypes = { + visible: PropTypes.bool, + onPress: PropTypes.func, + foregroundColor: PropTypes.string +}; + +BackButton.defaultProps = { + visible: true, +}; + +module.exports = BackButton; diff --git a/BaseComponent.js b/BaseComponent.js index 88dc15a..5d19f7d 100644 --- a/BaseComponent.js +++ b/BaseComponent.js @@ -1,9 +1,11 @@ 'use strict'; -import React from 'react-native'; +import React, { + Component +} from 'react'; -export default class BaseComponent extends React.Component { +export default class BaseComponent extends Component { _bind(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); } -} \ No newline at end of file +} diff --git a/Button.js b/Button.js index 3df08e6..68fa228 100644 --- a/Button.js +++ b/Button.js @@ -1,17 +1,19 @@ 'use strict'; -var React = require('react-native'); -var { - View, - TouchableOpacity, - StyleSheet, - PropTypes, - ActivityIndicatorIOS, - ProgressBarAndroid, - TouchableNativeFeedback, - Platform, - Component - } = React; +import React, { + Component, + PropTypes, +} from 'react'; + +import { + View, + TouchableOpacity, + StyleSheet, + Platform, + ActivityIndicatorIOS, + ProgressBarAndroid, + TouchableNativeFeedback, +} from 'react-native'; const IS_ANDROID = Platform.OS === 'android'; @@ -118,4 +120,4 @@ var styles = StyleSheet.create({ } }); -module.exports = Button; \ No newline at end of file +module.exports = Button; diff --git a/SampleApp/app.js b/SampleApp/app.js index 68f5e7a..0b24d7e 100644 --- a/SampleApp/app.js +++ b/SampleApp/app.js @@ -1,9 +1,7 @@ 'use strict'; -import React, { - Component, - View -} from 'react-native'; +import React, {Component} from 'react'; +import {View} from 'react-native'; import Webbrowser from 'react-native-webbrowser' diff --git a/StatusBar.js b/StatusBar.js index caf3cc5..5dbe42f 100644 --- a/StatusBar.js +++ b/StatusBar.js @@ -1,10 +1,13 @@ 'use strict'; -import React from 'react-native'; -var { - TextInput, - View, - } = React; +import React, { + PropTypes, +} from 'react'; + +import ReactNative, { + TextInput, + View, +} from 'react-native'; import BaseComponent from './BaseComponent' import styles from './styles' @@ -42,8 +45,8 @@ class StatusBar extends BaseComponent { } StatusBar.propTypes = { - status: React.PropTypes.string, - foregroundColor: React.PropTypes.string + status: PropTypes.string, + foregroundColor: PropTypes.string }; StatusBar.defaultProps = { @@ -51,4 +54,3 @@ StatusBar.defaultProps = { }; module.exports = StatusBar; - diff --git a/Toolbar.js b/Toolbar.js index b6d1b4e..8471f4f 100644 --- a/Toolbar.js +++ b/Toolbar.js @@ -1,10 +1,13 @@ 'use strict'; -import React from 'react-native'; -var { - View, - Image - } = React; +import React, { + PropTypes, +} from 'react'; + +import { + View, + Image, +} from 'react-native'; import BaseComponent from './BaseComponent' import Button from './Button' @@ -85,14 +88,14 @@ class Toolbar extends BaseComponent { } Toolbar.propTypes = { - backButtonEnabled: React.PropTypes.bool, - forwardButtonEnabled: React.PropTypes.bool, - homeButtonEnabled: React.PropTypes.bool, - hideHomeButton: React.PropTypes.bool, - onBack: React.PropTypes.func, - onHome: React.PropTypes.func, - onForward: React.PropTypes.func, - foregroundColor: React.PropTypes.string + backButtonEnabled: PropTypes.bool, + forwardButtonEnabled: PropTypes.bool, + homeButtonEnabled: PropTypes.bool, + hideHomeButton: PropTypes.bool, + onBack: PropTypes.func, + onHome: PropTypes.func, + onForward: PropTypes.func, + foregroundColor: PropTypes.string }; Toolbar.defaultProps = { @@ -105,4 +108,4 @@ Toolbar.defaultProps = { onForward: ()=> {} }; -module.exports = Toolbar; \ No newline at end of file +module.exports = Toolbar; diff --git a/index.js b/index.js index 4621466..252c336 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,13 @@ 'use strict'; -import React from 'react-native'; -var { - View, - WebView, - PropTypes - } = React; +import React, { + PropTypes, +} from 'react'; + +import { + View, + WebView, +} from 'react-native'; import BaseComponent from './BaseComponent' import Utils from './Utils' @@ -13,6 +15,7 @@ import Spinner from 'react-native-loading-spinner-overlay'; import styles from './styles' +import BackButton from './BackButton' import StatusBar from './StatusBar' import AddressBar from './AddressBar' import Toolbar from './Toolbar' @@ -29,7 +32,9 @@ const propTypes = { foregroundColor: PropTypes.string, backgroundColor: PropTypes.string, onNavigationStateChange: PropTypes.func, - onShouldStartLoadWithRequest: PropTypes.func + onShouldStartLoadWithRequest: PropTypes.func, + backButtonVisible: PropTypes.bool, + onBackPress: PropTypes.func } const defaultProps = { @@ -41,6 +46,7 @@ const defaultProps = { hideActivityIndicator: false, onNavigationStateChange: ()=>{}, onShouldStartLoadWithRequest: ()=>true, + backButtonVisible: true, } class Webbrowser extends BaseComponent { @@ -91,6 +97,16 @@ class Webbrowser extends BaseComponent { /> } + renderBackButton() { + return ( + + ); + } + renderStatusBar() { if (this.props.hideStatusBar) { @@ -124,7 +140,10 @@ class Webbrowser extends BaseComponent { return ( - {this.renderAddressBar()} + + {this.renderBackButton()} + {this.renderAddressBar()} + {this.renderStatusBar()}