diff --git a/package-lock.json b/package-lock.json
index a20999f..e0e83c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3958,7 +3958,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -4373,7 +4374,8 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4429,6 +4431,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4472,12 +4475,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
diff --git a/src/components/ConfirmModal/index.js b/src/components/ConfirmModal/index.js
new file mode 100644
index 0000000..47f275f
--- /dev/null
+++ b/src/components/ConfirmModal/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Modal, View, Text} from 'react-native';
+
+import Button from '../Button';
+import styles from './styles';
+
+const ConfirmModal = ({onAccept, onDismiss, text}) => (
+
+
+
+
+ {text}
+
+
+
+
+
+
+
+
+);
+
+ConfirmModal.propTypes = {
+ onAccept: PropTypes.func.isRequired,
+ onDismiss: PropTypes.func.isRequired,
+ text: PropTypes.string.isRequired
+};
+
+export default ConfirmModal;
diff --git a/src/components/ConfirmModal/styles.js b/src/components/ConfirmModal/styles.js
new file mode 100644
index 0000000..a3ca341
--- /dev/null
+++ b/src/components/ConfirmModal/styles.js
@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ messageContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ footer: {
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'center'
+ }
+});
diff --git a/src/components/Header/Brand.js b/src/components/Header/Brand.js
new file mode 100755
index 0000000..051bf39
--- /dev/null
+++ b/src/components/Header/Brand.js
@@ -0,0 +1,44 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {Image, Text, View} from 'react-native';
+
+import styles from './styles';
+import {stylePropType} from '../../util';
+import brandImageDefault from '../../images/brand.png';
+
+const Brand = ({
+ text, version, rightImage, brandImage, style
+}) => (
+
+
+ {text && (
+
+
+ {text}
+
+ {version && ({version})}
+
+ )}
+ {rightImage && (
+
+ )}
+
+);
+
+Brand.propTypes = {
+ text: PropTypes.string,
+ version: PropTypes.string,
+ brandImage: PropTypes.string,
+ rightImage: PropTypes.string,
+ style: stylePropType
+};
+
+Brand.defaultProps = {
+ brandImage: brandImageDefault,
+ style: {},
+ rightImage: null,
+ text: null,
+ version: null
+};
+
+export default Brand;
diff --git a/src/components/Header/NavItem.js b/src/components/Header/NavItem.js
index f243501..1664bf6 100644
--- a/src/components/Header/NavItem.js
+++ b/src/components/Header/NavItem.js
@@ -1,54 +1,34 @@
-import React, {Component} from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
import {Text} from 'react-native';
import {Icon} from 'react-native-elements';
import {Link} from 'react-router-native';
-import {requestFetchToken} from '../../actions/session';
-import Col from '../Col';
-import Row from '../Row';
import getFontAwesome from '../../util/getFontAwesome';
import routePropType from '../../util/routePropType';
-import SessionService from '../../services/session';
+import Col from '../Col';
+import Row from '../Row';
import styles from './styles';
-class NavItem extends Component {
- static propTypes = {
- requestFetchToken: PropTypes.func.isRequired,
- route: routePropType.isRequired
- };
-
- async signOut(closeSession) {
- if (closeSession) {
- await SessionService.clearSession();
- this.props.requestFetchToken();
- }
- }
+const NavItem = ({onLogout, route}) => (
+
+
+
+ onLogout(route)}>
+
+ {route.text}
+
+
+
+
+);
- render() {
- const {route} = this.props;
- return (
-
-
-
- this.signOut(route.closeSession)}>
-
- {route.text}
-
-
-
-
- );
- }
-}
+NavItem.propTypes = {
+ onLogout: PropTypes.func.isRequired,
+ route: routePropType.isRequired
+};
-export default connect(
- null,
- dispatch => ({
- requestFetchToken: () => dispatch(requestFetchToken())
- })
-)(NavItem);
+export default NavItem;
diff --git a/src/components/Header/Routes.js b/src/components/Header/Routes.js
new file mode 100644
index 0000000..9164c72
--- /dev/null
+++ b/src/components/Header/Routes.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+
+import routePropType from '../../util/routePropType';
+import NavItem from './NavItem';
+import styles from './styles';
+
+const Routes = ({onLogout, routes}) => (
+
+ {routes.map(route => (
+
+ ))}
+
+);
+
+Routes.propTypes = {
+ onLogout: PropTypes.func.isRequired,
+ routes: PropTypes.arrayOf(routePropType)
+};
+
+Routes.defaultProps = {
+ routes: []
+};
+
+export default Routes;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index a89709a..ec85b69 100755
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,77 +1,92 @@
-import React, {Fragment} from 'react';
+import React, {PureComponent, Fragment} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
-import {Image, Text, View} from 'react-native';
-import {isEmpty} from 'lodash';
+import {find, get, isEmpty} from 'lodash';
+import {requestFetchToken} from '../../actions/session';
+import {CONFIRM_LOGOUT_MESSAGE} from '../../constants';
+import SessionService from '../../services/session';
import stylePropType from '../../util/stylePropType';
import routePropType from '../../util/routePropType';
-import NavItem from './NavItem';
-import styles from './styles';
+import ConfirmModal from '../ConfirmModal';
+import Brand from './Brand';
+import Routes from './Routes';
+
+const getLogoutMessage = routes => get(
+ find(routes, route => route.logoutMessage), 'logoutMessage'
+) || CONFIRM_LOGOUT_MESSAGE;
const brandImageDefault = require('../../images/brand.png');
-const Header = ({
- routes, text, brandImage, style, token, rightImage, version
-}) => (
-
-
-
-
-
- {text && (
-
-
- {text}
-
- {version && (
-
- {version}
-
- )}
-
- )}
- {rightImage && (
-
-
-
- )}
-
- {token && !isEmpty(routes) && (
-
- {routes.map(route => (
-
- ))}
-
- )}
-
-);
+class Header extends PureComponent {
+ static propTypes = {
+ brandImage: PropTypes.string,
+ rightImage: PropTypes.string,
+ style: stylePropType,
+ text: PropTypes.string,
+ routes: PropTypes.arrayOf(routePropType),
+ version: PropTypes.string,
+ requestFetchToken: PropTypes.func.isRequired
+ };
+
+ static defaultProps = {
+ brandImage: brandImageDefault,
+ style: {},
+ routes: [],
+ text: null,
+ rightImage: null,
+ version: null
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ showModal: false
+ };
+ }
+
+ handleShowModal(route) {
+ if (route.closeSession) {
+ this.setState(() => ({showModal: true}));
+ }
+ }
+
+ async signOut() {
+ this.setState(() => ({showModal: false}));
+ await SessionService.clearSession();
+ this.props.requestFetchToken();
+ }
-Header.propTypes = {
- brandImage: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string
- ]),
- rightImage: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string
- ]),
- style: stylePropType,
- text: PropTypes.string,
- routes: PropTypes.arrayOf(routePropType).isRequired,
- token: PropTypes.string,
- version: PropTypes.string
-};
+ handleCloseModal() {
+ this.setState(() => ({showModal: false}));
+ }
-Header.defaultProps = {
- brandImage: brandImageDefault,
- style: {},
- token: null,
- text: null,
- rightImage: null,
- version: null
-};
+ render() {
+ const {
+ routes, text, brandImage, style, rightImage, version
+ } = this.props;
+ const {showModal} = this.state;
+ return (
+
+
+ {!isEmpty(routes) && this.handleShowModal(route)} routes={routes}/>}
+ {showModal && (
+ this.handleCloseModal()}
+ onAccept={() => this.signOut()}
+ text={getLogoutMessage(routes)}
+ />
+ )}
+
+ );
+ }
+}
-export default connect(
- state => ({token: state.session.token})
+export default connect(null,
+ dispatch => ({
+ requestFetchToken: () => dispatch(requestFetchToken())
+ })
)(Header);
diff --git a/src/components/Header/index.web.js b/src/components/Header/index.web.js
new file mode 100755
index 0000000..ce9434b
--- /dev/null
+++ b/src/components/Header/index.web.js
@@ -0,0 +1,62 @@
+import React, {PureComponent, Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {isEmpty} from 'lodash';
+
+import {requestFetchToken} from '../../actions/session';
+import stylePropType from '../../util/stylePropType';
+import routePropType from '../../util/routePropType';
+import SessionService from '../../services/session';
+import Brand from './Brand';
+import Routes from './Routes';
+
+const brandImageDefault = require('../../images/brand.png');
+
+class Header extends PureComponent {
+ static propTypes = {
+ brandImage: PropTypes.string,
+ rightImage: PropTypes.string,
+ style: stylePropType,
+ text: PropTypes.string,
+ routes: PropTypes.arrayOf(routePropType),
+ version: PropTypes.string,
+ requestFetchToken: PropTypes.func.isRequired
+ };
+
+ static defaultProps = {
+ brandImage: brandImageDefault,
+ style: {},
+ routes: [],
+ text: null,
+ rightImage: null,
+ version: null
+ };
+
+ async signOut(route) {
+ if (route.closeSession) {
+ await SessionService.clearSession();
+ this.props.requestFetchToken();
+ }
+ }
+
+ render() {
+ const {
+ routes, text, brandImage, style, rightImage, version
+ } = this.props;
+ return (
+
+
+ {!isEmpty(routes) && this.signOut(route)} routes={routes}/>}
+
+ );
+ }
+}
+
+export default connect(null,
+ dispatch => ({
+ requestFetchToken: () => dispatch(requestFetchToken())
+ })
+)(Header);
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index b442e26..cc2b117 100755
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -42,7 +42,7 @@ export default StyleSheet.create({
navIcon: {
marginRight: 10
},
- versionStyle: {
+ version: {
fontSize: 15,
color: '#fff',
textAlign: 'right'
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 0000000..e14b30d
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1,4 @@
+const CONFIRM_LOGOUT_MESSAGE = 'Desea salir de la aplicacion?';
+
+// eslint-disable-next-line
+export {CONFIRM_LOGOUT_MESSAGE};