Skip to content

S
safetcut-app
Commit 4ac09b8a by HaOuiha
Options

Merge remote-tracking branch 'origin/ejectedExpo' into injectedFirebase

parents d29b5f7f 4a4d2f97
Showing with 550 additions and 91 deletions
constants/Styles.js
......@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
export const color = {
white: '#fff',
defaultBg: '#f3f3f3',
defaultBg: '#fbfbfb',
lightGrey: '#cfd7db',
grey: '#9b9b9b',
darkGrey: '#4a4a4a',
......
package.json
......@@ -21,6 +21,7 @@
"react": "^16.9.0",
"react-native": "^0.60.4",
"react-native-barcode-mask": "^1.0.5",
"react-native-calendar-picker": "^6.0.1",
"react-native-camera": "^2.11.1",
"react-native-date-picker": "^2.7.0",
"react-native-elements": "^1.1.0",
......
screens/Private/NotificationScreen/NotificationScreen.js
import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView } from 'react-native';
import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base';
import { View, StyleSheet, ScrollView, Modal } from 'react-native';
import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements';
import { format, sort } from 'date-fns';
import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns';
import SlideUpModal from '../../../components/SlideUpModal';
import FadeDimBG from '../../../components/FadeDimBG';
import { width, height } from '../../../constants/Layout';
import RNPickerSelect from 'react-native-picker-select';
import CalendarPicker from 'react-native-calendar-picker';
const mockdata = [
{ time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'notification' },
{ time: 1566299471, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
{ time: 1566271564, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'log' },
{ time: 1573514603, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
const tabHeader = [
{ type: 'all', label: 'All' },
{ type: 'notification', label: 'Notifications' },
{ type: 'log', label: 'Logging' },
];
const dt2 = require('./notification.json');
export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Notifications',
});
state = { search: '' };
updateSearch = search => {
this.setState({ search });
constructor(props) {
super(props);
this.state = {
search: '',
data: [],
filterData: [],
initial: [],
isfilterVisible: false,
selectedStartDate: new Date(),
selectedEndDate: new Date(),
filterBy: null,
toggleCalendar: false,
};
this.onDateChange = this.onDateChange.bind(this);
}
componentDidMount() {
this.sortDate();
}
sortDate() {
const sortData = dt2.sort(function(a, b) {
var dateA = new Date(a.time),
dateB = new Date(b.time);
return dateB - dateA;
});
this.setState({
data: sortData,
initial: sortData,
});
}
onDateChange(date, type) {
if (type === 'END_DATE') {
this.setState({
selectedEndDate: date,
});
} else {
this.setState({
selectedStartDate: date,
selectedEndDate: null,
});
}
}
clear() {
this.setState({
selectedStartDate: null,
selectedEndDate: null,
filterBy: null,
toggleCalendar: false,
});
}
updateSearch = text => {
this.setState({ search: text });
const { filterData, initial, filterBy } = this.state;
let data = [];
if (filterBy) {
data.push(...filterData);
} else {
data.push(...initial);
}
const newData = data.filter(item => {
const itemData = `${item.user.toUpperCase()} ${item.action.toUpperCase()} ${item.device.toUpperCase()}`;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
this.setState({
data: newData,
});
};
renderActivityCard(data) {
filterByDate() {
const { filterBy, initial, selectedStartDate, selectedEndDate } = this.state;
this.setState({ isfilterVisible: false, search: '' });
if (filterBy === 'today') {
console.log('filter today');
const newData = initial.filter(x => {
return isToday(x.time * 1000);
});
this.setState({ filterData: newData });
} else if (filterBy === 'yesterday') {
console.log('filter yesterday');
const newData = initial.filter(x => {
return isYesterday(x.time * 1000);
});
this.setState({ filterData: newData });
} else if (filterBy === '7days') {
console.log('filter 7 days');
const newData = initial.filter(x => {
const today = new Date();
const startDay = startOfDay(today);
const daysRange = startDay - 7 * 24 * 60 * 60 * 1000;
return x.time * 1000 >= daysRange && x.time * 1000 <= today;
});
this.setState({ filterData: newData });
} else if (filterBy === '30days') {
console.log('filter 30 days');
const newData = initial.filter(x => {
const today = new Date();
const startDay = startOfDay(today);
const daysRange = startDay - 30 * 24 * 60 * 60 * 1000;
return x.time * 1000 >= daysRange && x.time * 1000 <= today;
});
this.setState({ filterData: newData });
} else if (filterBy === 'month') {
console.log('filter this month');
const newData = initial.filter(x => {
return isThisMonth(x.time * 1000);
});
this.setState({ filterData: newData });
} else if (filterBy === 'lastMonth') {
console.log('filter last month');
} else if (filterBy === 'custom') {
console.log('filter custom');
const start = getTime(selectedStartDate);
const end = endOfDay(getTime(selectedEndDate === null ? selectedStartDate : selectedEndDate));
const newData = initial.filter(x => {
return x.time * 1000 <= end && x.time * 1000 > start;
});
console.log('start', start, 'end', end, 'start state', selectedStartDate, 'end state', selectedEndDate);
this.setState({ filterData: newData });
} else if (filterBy === 'all') {
this.setState({ filterData: initial });
}
}
// render component -----------------------------------------------
renderActionCard(data) {
return (
<View
style={[
theme.rowContainer,
{
paddingHorizontal: 30,
paddingVertical: 10,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
},
]}
>
<View
style={{
width: 16,
height: 16,
marginRight: 10,
borderRadius: 100,
backgroundColor: color.primary,
alignItems: 'center',
justifyContent: 'center',
}}
>
{/* first letter of operate's username */}
<Text style={{ color: color.white, fontSize: 8 }}>A</Text>
</View>
<View style={[theme.rowContainer, styles.actionContainer]}>
{data.type === 'log' ? (
<Icon
name="info"
type="SimpleLineIcons"
style={{ color: color.primary, fontSize: 12.5, marginRight: 10, marginTop: 1 }}
/>
) : (
<Icon
name="ios-notifications-outline"
style={{ color: color.primary, fontSize: 16, marginRight: 10, marginTop: -1 }}
/>
)}
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
{/* operate's username */}
<Text style={[theme.smDescription]}>{data.user || 'JohnDoe'}</Text>
<Text style={[theme.smDescription, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text>
{/* operate time */}
<Text style={[theme.smDescription]}>{format(data.time, 'hh:mm A') || '00:00 AM'}</Text>
<Text style={[theme.smDescription, { color: '#b9babc' }]}>
{format(data.time * 1000, 'hh:mm A')}
</Text>
</View>
{/* operate activity. */}
<Text style={[theme.normalText, theme.textDark]}>{data.log || 'Unknown activity'}</Text>
{/* operate action. */}
<Text style={[theme.normalText, theme.textDark]}>
{data.action} {data.device}
</Text>
</View>
</View>
);
}
renderDayList(type) {
let data2render = [];
if (this.state.filterBy && !this.state.search) {
data2render.push(...this.state.filterData);
} else {
data2render.push(...this.state.data);
}
const data =
type === 'all'
? data2render
: data2render.filter(x => {
return x.type === type;
});
let view = [];
let day;
for (let i = 0; i < data.length; i++) {
if (isToday(data[i].time * 1000) && i === 0) {
view.push(
<>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>Today</Text>
{this.renderActionCard(data[i])}
</>
);
day = data[i].time * 1000;
} else if (isSameDay(day, data[i].time * 1000)) {
view.push(this.renderActionCard(data[i]));
day = data[i].time * 1000;
} else {
view.push(
<>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
{isYesterday(data[i].time * 1000) ? 'Yesterday' : format(data[i].time * 1000, 'DD/MM/YYYY')}
</Text>
{this.renderActionCard(data[i])}
</>
);
day = data[i].time * 1000;
}
}
return view;
}
renderCalendar() {
const { selectedStartDate, selectedEndDate } = this.state;
const maxDate = new Date();
const startDate = selectedStartDate ? selectedStartDate.toString() : '';
const endDate = selectedEndDate ? selectedEndDate.toString() : '';
const { toggleCalendar } = this.state;
return (
<>
<View
style={[styles.pickerContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
>
<Text style={[theme.normalText, theme.textDark]}>
{format(startDate, 'DD-MM-YYYY')}
{endDate === '' ? '' : ' - ' + format(endDate, 'DD-MM-YYYY')}
</Text>
<Icon
type="MaterialCommunityIcons"
name="calendar-range"
style={{ color: toggleCalendar ? color.primary : color.darkGrey, fontSize: 14 }}
onPress={() => this.setState({ toggleCalendar: !toggleCalendar })}
/>
</View>
{toggleCalendar && (
<View style={[theme.mt2, styles.pickerContainer]}>
<CalendarPicker
startFromMonday={true}
allowRangeSelection={true}
maxDate={maxDate}
textStyle={{ fontFamily: 'Avenir-Roman', color: color.darkGrey }}
todayBackgroundColor="rgba(238,84,84,0.45)"
selectedRangeStartStyle={[
styles.selectedRangeStyle,
{
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
},
]}
selectedRangeEndStyle={[
styles.selectedRangeStyle,
{
borderTopRightRadius: 8,
borderBottomRightRadius: 8,
},
]}
selectedRangeStyle={{
backgroundColor: 'rgba(238,84,84,0.15)',
color: color.darkGrey,
height: '90%',
}}
onDateChange={this.onDateChange}
width={width - 30}
previousTitle={<Icon type="Entypo" name="chevron-thin-left" style={{ fontSize: 14 }} />}
nextTitle={<Icon type="Entypo" name="chevron-thin-right" style={{ fontSize: 14 }} />}
/>
</View>
)}
</>
);
}
render() {
const TabStyle = {
textStyle: theme.description,
activeTextStyle: [theme.description, theme.textWhite],
tabStyle: { backgroundColor: color.white, borderRadius: 100, margin: 10 },
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
activeTextStyle: [theme.description, theme.textDark],
tabStyle: { backgroundColor: 'transparent', borderRadius: 100, margin: 10 },
activeTabStyle: { backgroundColor: 'rgba(238, 84, 84, 0.15)', borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg },
};
const today = new Date();
return (
<View style={theme.container}>
<Tabs
tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />}
>
{['All', 'Notifications', 'Logging'].map((item, index) => (
<Tab heading={item} {...TabStyle}>
{tabHeader.map((item, index) => (
<Tab heading={item.label} {...TabStyle} key={`tab${index}`}>
<View
style={{
padding: 15,
......@@ -91,37 +315,86 @@ export default class NotificationScreen extends React.Component {
round
lightTheme
placeholder="Search..."
onChangeText={this.updateSearch}
onChangeText={text => this.updateSearch(text)}
value={this.state.search}
/>
<Icon
name="md-funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
style={{ color: '#c7cad1', fontSize: 20, marginLeft: 10, marginRight: 5 }}
onPress={() => this.setState({ isfilterVisible: true })}
/>
</View>
{/* filter date length */}
<ScrollView>
{/* >date */}
<View>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
Today {/* Today/Yesterday/date.. */}
</Text>
{/* >>log list */}
<FlatList
data={mockdata}
renderItem={({ item, index }) => this.renderActivityCard(item)}
/>
</View>
<View>{this.renderDayList(item.type)}</View>
</ScrollView>
</Tab>
))}
</Tabs>
<Modal
transparent
presentationStyle={'overFullScreen'}
animationType="fade"
visible={this.state.isfilterVisible}
>
<FadeDimBG />
<SlideUpModal ending={0.3} style={styles.filterModal}>
<View style={[theme.rowContainer, styles.filterHeader]}>
<Text style={[theme.smallTitle, theme.textDark]} onPress={() => this.clear()}>
Reset
</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
<Text style={[theme.smallTitle, theme.textDanger]} onPress={() => this.filterByDate()}>
Done
</Text>
</View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text>
<View style={[theme.mt2, styles.pickerContainer]}>
<RNPickerSelect
onValueChange={value => this.setState({ filterBy: value })}
placeholder={{ label: 'All', value: 'all' }}
items={[
{ label: 'Today', value: 'today' },
{ label: 'Yesterday', value: 'yesterday' },
{ label: 'Last 7 days', value: '7days' },
{ label: 'Last 30 days', value: '30days' },
{ label: 'This month', value: 'month' },
{ label: 'Last month', value: 'lastMonth' },
{ label: 'Custom', value: 'custom' },
]}
useNativeAndroidPickerStyle={false}
value={this.state.filterBy}
style={pickerStyle}
Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
/>
</View>
{this.state.filterBy === 'custom' && this.renderCalendar()}
</SlideUpModal>
</Modal>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} />
</View>
);
}
}
// style -------------------------------------------------------
const pickerStyle = {
inputIOS: {
color: color.darkGrey,
fontFamily: 'Avenir-Roman',
},
iconContainer: {
top: Platform.OS === 'android' ? 5 : undefined,
right: 0,
},
inputAndroid: {
height: 20,
fontFamily: 'Avenir-Roman',
fontSize: 14,
paddingVertical: 0,
},
};
const styles = StyleSheet.create({
searchBarContainer: {
flex: 1,
......@@ -145,4 +418,47 @@ const styles = StyleSheet.create({
fontSize: 12,
color: color.grey,
},
actionContainer: {
paddingHorizontal: 30,
paddingVertical: 15,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
},
thumbnail: {
width: 16,
height: 16,
marginRight: 10,
borderRadius: 100,
backgroundColor: color.primary,
alignItems: 'center',
justifyContent: 'center',
},
filterModal: {
flex: 0.7,
top: height * 0.3,
paddingTop: 20,
paddingBottom: 18,
paddingHorizontal: 25,
backgroundColor: color.white,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
},
filterHeader: {
justifyContent: 'space-between',
paddingBottom: 10,
borderBottomColor: 'rgba(189, 192, 200, 0.3)',
borderBottomWidth: 1,
},
pickerContainer: {
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
selectedRangeStyle: {
backgroundColor: color.primary,
color: color.white,
height: '90%',
},
});
screens/Private/NotificationScreen/notification.json 0 → 100644
[
{ "type": "log", "user": "Sukanya161", "time": 1566370057, "action": "Switched on", "device": "sub breaker 4" },
{ "type": "log", "user": "Sukanya161", "time": 1564639200, "action": "Switched off", "device": "sub breaker 1" },
{
"type": "notification",
"user": "Sukanya161",
"time": 1566370196,
"action": "Switched on",
"device": "sub breaker 2"
},
{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" },
{ "type": "log", "user": "Sukanya161", "time": 1566374629, "action": "Switched on", "device": "sub breaker 3" },
{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Set timer", "device": "mcb link 1" },
{ "type": "notification", "user": "Tonk", "time": 1566438573, "action": "Set timer", "device": "mcb link 2" },
{ "type": "notification", "user": "Tonk", "time": 1565863930, "action": "???", "device": "???" },
{ "type": "notification", "user": "Tonk", "time": 1565777530, "action": "???", "device": "???" },
{ "type": "log", "user": "Sukanya161", "time": 1566467247, "action": "Switched on", "device": "sub breaker 4" },
{ "type": "log", "user": "Sukanya161", "time": 1564639200, "action": "Switched off", "device": "sub breaker 1" },
{
"type": "notification",
"user": "Sukanya161",
"time": 1566433810,
"action": "Switched on",
"device": "sub breaker 2"
},
{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" },
{ "type": "log", "user": "Sukanya161", "time": 1566374629, "action": "Switched on", "device": "sub breaker 3" },
{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Leaved", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1561975930, "action": "Entered", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1564481530, "action": "ง่วง", "device": "มากๆ" },
{ "type": "notification", "user": "Tonk", "time": 1563790330, "action": "หิว", "device": "ข้าว" },
{ "type": "notification", "user": "Tonk", "time": 1566528669, "action": "Sleep", "device": "" }
]
screens/Private/SettingScreen/Setting.js
import React, { Component } from 'react';
import { Text, List, ListItem, Body, Button } from 'native-base';
import { color, theme } from '../../../constants/Styles';
import { View, StyleSheet, TextInput, Modal } from 'react-native';
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';
......@@ -35,13 +35,11 @@ export default class SmartMeterDetailScreen extends Component {
const { breaker, data, field, isVisible } = this.state;
return (
<View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
{breaker.toUpperCase()}
</Text>
<List style={[{ backgroundColor: color.white }, theme.mt2]}>
<ListItem itemDivider>
<Body>
<Text style={theme.description}>{breaker.toUpperCase()}</Text>
</Body>
</ListItem>
<ListItem>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDark]}>{field}</Text>
<View
......
screens/Private/SettingScreen/SettingScreen.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base';
import { theme, color } from '../../../constants/Styles';
import { connect } from 'react-redux';
import { Overlay } from 'react-native-elements';
import { TouchableHighlight } from 'react-native-gesture-handler';
class SettingScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Setting',
headerRight: navigation.state.params ? navigation.state.params.headerRight : null,
});
constructor(props) {
super(props);
this.props.navigation.setParams({
headerRight: (
<TouchableOpacity onPress={() => this.setState({ isVisible: true })}>
<View style={{ marginRight: 17 }}>
<Icon name="share-outline" type="MaterialCommunityIcons" style={{ color: color.white }} />
</View>
</TouchableOpacity>
),
});
}
state = {
data: this.props.allMainDeviceInfo[0],
data: this.props.allDeviceInfo[0],
isVisible: false,
pressQr: false,
pressMail: false,
};
toggleModal(visible) {
this.setState({
isVisible: visible,
});
}
render() {
const { data } = this.state;
return (
<View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
{data.type.toUpperCase()}
</Text>
<List style={styles.ListItemContainer}>
<ListItem itemDivider>
<Body>
<Text style={theme.description}>{data.type.toUpperCase()}</Text>
</Body>
</ListItem>
<ListItem
onPress={() =>
this.props.navigation.navigate('SettingData', {
......@@ -29,6 +51,7 @@ class SettingScreen extends React.Component {
data: data.name,
})
}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Name</Text>
......@@ -48,6 +71,7 @@ class SettingScreen extends React.Component {
data: data.description,
})
}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Description</Text>
......@@ -67,6 +91,7 @@ class SettingScreen extends React.Component {
data: data.rcbo,
})
}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>RCBO</Text>
......@@ -78,7 +103,7 @@ class SettingScreen extends React.Component {
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Notification</Text>
</Body>
......@@ -87,13 +112,77 @@ class SettingScreen extends React.Component {
</Right>
</ListItem>
</List>
<List style={styles.ListItemContainer}>
<ListItem>
<List style={[styles.ListItemContainer, { marginTop: 30 }]}>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDanger]}>Delete</Text>
</Body>
</ListItem>
</List>
<Overlay
borderRadius={20}
height={'25%'}
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={this.state.isVisible}
onBackdropPress={() => {
this.toggleModal(!this.state.isVisible);
}}
>
<>
<Icon
name="close"
type="AntDesign"
style={{ position: 'absolute', top: 20, right: 20, fontSize: 16, color: color.lightGrey }}
onPress={() => {
this.toggleModal(!this.state.isVisible);
}}
/>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Share to these items?
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<TouchableHighlight
underlayColor="transparent"
onHideUnderlay={() => this.setState({ pressQr: false })}
onShowUnderlay={() => this.setState({ pressQr: true })}
onPress={() => console.log('press')}
>
<View
style={[
styles.shareItemStyle,
{ backgroundColor: this.state.pressQr ? 'rgba(238,84,84,0.1)' : 'transparent' },
]}
>
<Icon
name="qrcode-scan"
type="MaterialCommunityIcons"
style={{ fontSize: 50, color: color.primary }}
/>
</View>
</TouchableHighlight>
<TouchableHighlight
underlayColor="transparent"
onHideUnderlay={() => this.setState({ pressMail: false })}
onShowUnderlay={() => this.setState({ pressMail: true })}
onPress={() => console.log('press')}
>
<View
style={[
styles.shareItemStyle,
{
backgroundColor: this.state.pressMail
? 'rgba(238,84,84,0.1)'
: 'transparent',
},
]}
>
<Icon name="mail" type="AntDesign" style={{ fontSize: 50, color: color.primary }} />
</View>
</TouchableHighlight>
</View>
</>
</Overlay>
</View>
);
}
......@@ -107,6 +196,19 @@ export default connect(mapStateToProps)(SettingScreen);
const styles = StyleSheet.create({
ListItemContainer: {
backgroundColor: color.white,
marginTop: 20,
marginTop: 10,
},
overlayStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'space-around',
},
shareItemStyle: {
height: 100,
width: 100,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 6,
marginHorizontal: 15,
},
});
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -119,9 +119,8 @@ class SmartMeterDetailScreen extends Component {
state = {
mbOn: false,
sb: this.expandState(),
data: this.props.allMainDeviceInfo[0],
data: this.props.allDeviceInfo[0],
};
renderCurrent(item, index) {
return (
<Card
......@@ -172,7 +171,7 @@ class SmartMeterDetailScreen extends Component {
renderMCBLink(item, index) {
const sb = this.state.sb;
return (
<View key={`MBCLink${index}`}>
<View>
<Row
style={{ padding: 7 }}
onPress={() =>
......@@ -194,10 +193,7 @@ class SmartMeterDetailScreen extends Component {
}
renderSubbreaker(item) {
return (
<View
key={`Subbreker${item.toString()}`}
style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}
>
<View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}>
<Row>
<Left>
<View>
......@@ -240,7 +236,7 @@ class SmartMeterDetailScreen extends Component {
<Card style={[theme.containerWithPadding, { borderRadius: 10 }]}>
<Row>
<Left>
<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{`untitled`}</Text>
<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{data.name}</Text>
</Left>
<Right>
<Switch
......@@ -297,7 +293,7 @@ class SmartMeterDetailScreen extends Component {
}
const mapStateToProps = state => ({
allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
allDeviceInfo: state.allDataReducer.allDeviceInfo,
});
export default connect(mapStateToProps)(SmartMeterDetailScreen);
......
yarn.lock
......@@ -5776,7 +5776,7 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -5913,6 +5913,14 @@ react-native-barcode-mask@^1.0.5:
dependencies:
prop-types "^15.6.2"
react-native-calendar-picker@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/react-native-calendar-picker/-/react-native-calendar-picker-6.0.1.tgz#28e7fa06f7a08a35586084496950df142fa5b05a"
integrity sha512-c12Afk3i1vpdRSfI0ic/5+m2LdBLAYyiO4M67TyzEqw3tfsg2IcDkDKa/rBi6METKhd55/8IqBi8669sBCeNJA==
dependencies:
prop-types "^15.6.0"
uuid "3.2.1"
react-native-camera@^2.11.1:
version "2.11.2"
resolved "https://registry.yarnpkg.com/react-native-camera/-/react-native-camera-2.11.2.tgz#4936bb0a484e8ba7d0b3ecf28fa7c161833b1ac0"
......@@ -7364,6 +7372,11 @@ utils-merge@1.0.1:
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
uuid@3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
integrity sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==
uuid@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
......
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