Skip to content

S
safetcut-app
Commit 28c3802d by Tonk
Options

update search notification

parent f1b46072
Showing with 109 additions and 12 deletions
screens/Private/NotificationScreen/NotificationScreen.js
import React from 'react'; import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base'; import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView } from 'react-native'; import { View, StyleSheet, FlatList, ScrollView, Modal } 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 } from 'date-fns'; import { format, isToday, isYesterday, isSameDay } 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';
const tabHeader = [ const tabHeader = [
{ type: 'all', label: 'All' }, { type: 'all', label: 'All' },
...@@ -15,12 +19,26 @@ export default class NotificationScreen extends React.Component { ...@@ -15,12 +19,26 @@ export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
title: 'Notifications', title: 'Notifications',
}); });
state = { search: '', data: [] }; state = {
search: '',
data: [],
initial: [],
isfilterVisible: false,
};
componentDidMount() { componentDidMount() {
this.sortDate(); this.sortDate();
} }
updateSearch = search => { updateSearch = text => {
this.setState({ search }); this.setState({ search: text });
const newData = this.state.initial.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,
});
}; };
renderActionCard(data) { renderActionCard(data) {
return ( return (
...@@ -45,12 +63,14 @@ export default class NotificationScreen extends React.Component { ...@@ -45,12 +63,14 @@ export default class NotificationScreen extends React.Component {
); );
} }
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({ this.setState({
data: dt2.sort(function(a, b) { data: sortData,
var dateA = new Date(a.time), initial: sortData,
dateB = new Date(b.time);
return dateB - dateA;
}),
}); });
} }
renderDayList(type) { renderDayList(type) {
...@@ -103,7 +123,7 @@ export default class NotificationScreen extends React.Component { ...@@ -103,7 +123,7 @@ export default class NotificationScreen extends React.Component {
renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />} renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />}
> >
{tabHeader.map((item, index) => ( {tabHeader.map((item, index) => (
<Tab heading={item.label} {...TabStyle} key={index}> <Tab heading={item.label} {...TabStyle} key={`tab${index}`}>
<View <View
style={{ style={{
padding: 15, padding: 15,
...@@ -118,7 +138,7 @@ export default class NotificationScreen extends React.Component { ...@@ -118,7 +138,7 @@ export default class NotificationScreen extends React.Component {
round round
lightTheme lightTheme
placeholder="Search..." placeholder="Search..."
onChangeText={this.updateSearch} onChangeText={text => this.updateSearch(text)}
value={this.state.search} value={this.state.search}
/> />
<Icon <Icon
...@@ -133,10 +153,64 @@ export default class NotificationScreen extends React.Component { ...@@ -133,10 +153,64 @@ export default class NotificationScreen extends React.Component {
</Tab> </Tab>
))} ))}
</Tabs> </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]}>Reset</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
<Text
style={[theme.smallTitle, theme.textDanger]}
onPress={() => this.setState({ isfilterVisible: false })}
>
Done
</Text>
</View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text>
<View style={[theme.mt2, styles.pickerContainer]}>
<RNPickerSelect
onValueChange={value => console.log(value)}
items={[
{ label: 'Today', value: 'today' },
{ label: 'Yesterday', value: 'yesterday' },
{ label: 'Last 7 days', value: '7days' },
{ label: 'Last 30days', value: '30days' },
{ label: 'This month', value: 'month' },
{ label: 'Last month', value: 'lastMonth' },
{ label: 'Custom', value: 'custom' },
]}
useNativeAndroidPickerStyle={false}
style={pickerStyle}
Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
/>
</View>
</SlideUpModal>
</Modal>
</View> </View>
); );
} }
} }
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({ const styles = StyleSheet.create({
searchBarContainer: { searchBarContainer: {
...@@ -177,4 +251,26 @@ const styles = StyleSheet.create({ ...@@ -177,4 +251,26 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: '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,
},
}); });
screens/Private/NotificationScreen/notification.json
...@@ -10,5 +10,6 @@ ...@@ -10,5 +10,6 @@
}, },
{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" }, { "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": "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": 1566317460, "action": "Leaved", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1566438573, "action": "Entered", "device": "office" }
] ]
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