Skip to content

S
safetcut-app
Commit 7bf59c85 by Tonk
Options

add share email screen

parent 4a4d2f97
Showing with 193 additions and 5 deletions
AppNavigation.js
...@@ -21,6 +21,7 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen'; ...@@ -21,6 +21,7 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
// Setting // Setting
import SettingScreen from './screens/Private/SettingScreen/SettingScreen'; import SettingScreen from './screens/Private/SettingScreen/SettingScreen';
import Setting from './screens/Private/SettingScreen/Setting'; import Setting from './screens/Private/SettingScreen/Setting';
import ShareEmailScreen from './screens/Private/SettingScreen/ShareEmailScreen';
// Notification // Notification
import NotificationScreen from './screens/Private/NotificationScreen/NotificationScreen'; import NotificationScreen from './screens/Private/NotificationScreen/NotificationScreen';
...@@ -114,6 +115,7 @@ const SettingStack = createStackNavigator( ...@@ -114,6 +115,7 @@ const SettingStack = createStackNavigator(
{ {
Setting: SettingScreen, Setting: SettingScreen,
SettingData: Setting, SettingData: Setting,
ShareEmail: ShareEmailScreen,
}, },
{ {
headerLayoutPreset: 'center', headerLayoutPreset: 'center',
......
components/Form/EmailForm.js 0 → 100644
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { KeyboardAvoidingView } from 'react-native';
import { List, ListItem, Body, Text, View, Button } from 'native-base';
import Input from './Input';
import { theme, color } from '../../constants/Styles';
import { width } from '../../constants/Layout';
// validation
const required = value => (value ? undefined : 'This is a required field.');
const email = value =>
value &&
!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i.test(
value
)
? 'Invalid E-mail'
: undefined;
class Email extends Component {
render() {
return (
<>
<List style={[{ backgroundColor: color.white }, theme.mt2]}>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Email Account</Text>
<View
style={{
marginHorizontal: 10,
}}
>
<KeyboardAvoidingView style={theme.containerWithVerticalMargin} behavior="position">
<Field
forwardRef
ref={c => (this.email = c)}
refField="email"
returnKeyType="next"
onSubmitEditing={() =>
this.password.getRenderedComponent().refs.password.focus()
}
name="email"
keyboardType="email-address"
component={Input}
validate={[required, email]}
placeholder="E-mail"
/>
</KeyboardAvoidingView>
</View>
</Body>
</ListItem>
</List>
<Button
full
style={{
backgroundColor: color.primary,
width: width * 0.75,
alignSelf: 'center',
borderRadius: 100,
marginTop: 40,
}}
onPress={this.props.handleSubmit}
>
<Text style={[theme.normalText, theme.textWhite]}>SHARE</Text>
</Button>
</>
);
}
}
const EmailForm = reduxForm({
form: 'email',
})(Email);
export default EmailForm;
screens/Private/NotificationScreen/NotificationScreen.js
import React from 'react'; import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base'; import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base';
import { View, StyleSheet, ScrollView, Modal } from 'react-native'; import { View, StyleSheet, ScrollView, Modal, TouchableOpacity } from 'react-native';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements'; import { SearchBar } from 'react-native-elements';
import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns'; import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns';
...@@ -19,6 +19,13 @@ const dt2 = require('./notification.json'); ...@@ -19,6 +19,13 @@ const dt2 = require('./notification.json');
export default class NotificationScreen extends React.Component { export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
title: 'Notifications', title: 'Notifications',
headerLeft: (
<TouchableOpacity onPress={() => console.log('Home')}>
<View style={{ marginLeft: 17 }}>
<Icon name="home" type="SimpleLineIcons" style={{ color: color.white, fontSize: 16 }} />
</View>
</TouchableOpacity>
),
}); });
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -152,7 +159,13 @@ export default class NotificationScreen extends React.Component { ...@@ -152,7 +159,13 @@ export default class NotificationScreen extends React.Component {
// render component ----------------------------------------------- // render component -----------------------------------------------
renderActionCard(data) { renderActionCard(data) {
return ( return (
<View style={[theme.rowContainer, styles.actionContainer]}> <View
style={[
theme.rowContainer,
styles.actionContainer,
// { backgroundColor: unread ? 'rgba(238, 84, 84, 0.15)' : color.white },
]}
>
{data.type === 'log' ? ( {data.type === 'log' ? (
<Icon <Icon
name="info" name="info"
...@@ -288,9 +301,9 @@ export default class NotificationScreen extends React.Component { ...@@ -288,9 +301,9 @@ export default class NotificationScreen extends React.Component {
render() { render() {
const TabStyle = { const TabStyle = {
textStyle: theme.description, textStyle: theme.description,
activeTextStyle: [theme.description, theme.textDark], activeTextStyle: [theme.description, theme.textWhite],
tabStyle: { backgroundColor: 'transparent', borderRadius: 100, margin: 10 }, tabStyle: { backgroundColor: 'transparent', borderRadius: 100, margin: 10 },
activeTabStyle: { backgroundColor: 'rgba(238, 84, 84, 0.15)', borderRadius: 100, margin: 10 }, activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg }, style: { backgroundColor: color.defaultBg },
}; };
return ( return (
......
screens/Private/SettingScreen/SettingScreen.js
...@@ -165,7 +165,10 @@ class SettingScreen extends React.Component { ...@@ -165,7 +165,10 @@ class SettingScreen extends React.Component {
underlayColor="transparent" underlayColor="transparent"
onHideUnderlay={() => this.setState({ pressMail: false })} onHideUnderlay={() => this.setState({ pressMail: false })}
onShowUnderlay={() => this.setState({ pressMail: true })} onShowUnderlay={() => this.setState({ pressMail: true })}
onPress={() => console.log('press')} onPress={() => {
this.props.navigation.navigate('ShareEmail');
this.setState({ isVisible: false, pressMail: false });
}}
> >
<View <View
style={[ style={[
......
screens/Private/SettingScreen/ShareEmailScreen.js 0 → 100644
import React, { Component } from 'react';
import { Text, List, ListItem, Body, Button } from 'native-base';
import { color, theme } from '../../../constants/Styles';
import { View, StyleSheet, TextInput } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { width } from '../../../constants/Layout';
import { Overlay } from 'react-native-elements';
import EmailForm from '../../../components/Form/EmailForm';
export default class ShareEmailScreen extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Setting',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} />
</HeaderButtons>
),
};
};
state = {
isVisible: false,
email: '',
};
toggleModal(visible) {
this.setState({
isVisible: visible,
});
}
submitSuccess() {
console.log('Submit Success!');
this.toggleModal(true);
}
submit = values => {
this.submitSuccess();
this.setState({ email: values.email });
};
render() {
const { email, isVisible } = this.state;
return (
<View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>SHARE</Text>
<EmailForm onSubmit={this.submit} />
<Overlay
borderRadius={20}
height={'25%'}
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={isVisible}
onBackdropPress={() => {
this.toggleModal(!isVisible);
}}
>
<>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Are you sure to share this device with {email}?
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button
transparent
style={{ width: '40%' }}
onPress={() => {
this.toggleModal(!isVisible);
}}
>
<Text style={{ color: color.grey }}>CANCEL</Text>
</Button>
<Button style={styles.saveBtn} onPress={this.save} rounded>
<Text>CONFIRM</Text>
</Button>
</View>
</>
</Overlay>
</View>
);
}
}
const styles = StyleSheet.create({
overlayStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'space-around',
},
saveBtn: {
width: '40%',
backgroundColor: color.primary,
color: color.white,
justifyContent: 'center',
borderRadius: 100,
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment