Commit ad622526 authored by Sebastian Trebunak's avatar Sebastian Trebunak
Browse files

Notification and Branches screens implemented

parent 4b49186c
import React, { PureComponent } from "react";
import { ListItem, Divider, Icon } from "react-native-elements";
import { StyleSheet } from "react-native";
import { iOSColors } from "react-native-typography";
export default class BranchListItem extends PureComponent {
render() {
const { item } = this.props;
return (
<ListItem
title={item.address}
subtitle={`${item.city}, ${item.zip}`}
leftAvatar={
<Icon
type="feather"
name="home"
color="white"
size={15}
containerStyle={styles.avatarContainer}
/>
}
subtitleStyle={styles.subtitle}
/>
);
}
}
BranchListItem.Divider = () => <Divider style={styles.divider} />;
const styles = StyleSheet.create({
divider: {
backgroundColor: "#ccc",
marginLeft: "7%",
width: "93%"
},
subtitle: { color: iOSColors.gray },
avatarContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 36,
width: 36,
borderRadius: 18,
backgroundColor: iOSColors.blue
}
});
import React, { PureComponent } from "react";
import { StyleSheet, View, Text } from "react-native";
const DANGER_RATES = {
1: "#D8D8D8",
2: "#AFAFAF",
3: "#FCBBBB",
4: "#FF8E8E",
5: "#FF5353"
};
class DangerRating extends PureComponent {
getDangerRating = () => {
const { rate } = this.props;
if (!DANGER_RATES.hasOwnProperty(rate)) {
console.log("Cannot match danger rate from: ", rate);
return false;
}
return DANGER_RATES[rate];
};
render() {
const { rate } = this.props;
const backgroundColor = this.getDangerRating();
if (!backgroundColor) return null;
return (
<View style={[styles.iconContainer, { backgroundColor }]}>
<Text style={styles.textStyle}>{rate}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
iconContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 42,
width: 42,
borderRadius: 21
},
textStyle: {
color: "white",
fontSize: 25
}
});
export default DangerRating;
import React, { PureComponent } from "react";
import { StyleSheet, View, Text } from "react-native";
import { Icon } from "react-native-elements";
import { iOSColors, systemWeights } from "react-native-typography";
export default class NotificationAVMatch extends PureComponent {
render() {
const { audioMatch, videoMatch } = this.props;
return (
<View style={styles.container}>
<View style={styles.entityContainer}>
<Icon
name="video"
type="feather"
size={16}
iconStyle={styles.iconStyle}
/>
<Text style={styles.textStyle}>{videoMatch}%</Text>
</View>
<View style={styles.entityContainer}>
<Icon
name="volume-2"
type="feather"
size={16}
iconStyle={styles.iconStyle}
/>
<Text style={styles.textStyle}>{audioMatch}%</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
marginTop: 8
},
entityContainer: {
flexDirection: "row",
justifyContent: "center",
marginRight: 17
},
iconStyle: { color: iOSColors.gray, marginRight: 7 },
textStyle: { color: iOSColors.gray, ...systemWeights.thin, fontSize: 14 }
});
import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
import { ListItem, Divider } from "react-native-elements";
import DangerRating from "../components/DangerRating";
import NotificationAVMatch from "../components/NotificationAVMatch";
import { iOSColors } from "react-native-typography";
export default class NotificationListItem extends PureComponent {
render() {
const { item } = this.props;
return (
<ListItem
title={`${item.city}, ${item.address}`}
subtitle={
<NotificationAVMatch
audioMatch={item.audioMatch}
videoMatch={item.videoMatch}
/>
}
leftAvatar={<DangerRating rate={item.rate} />}
contentContainerStyle={styles.rowMargin}
subtitleStyle={styles.subtitle}
/>
);
}
}
NotificationListItem.Divider = () => <Divider style={styles.divider} />;
const styles = StyleSheet.create({
divider: {
backgroundColor: "#ccc",
marginLeft: "7%",
width: "93%"
},
subtitle: { color: iOSColors.gray },
avatarContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 36,
width: 36,
borderRadius: 18,
backgroundColor: iOSColors.blue
},
rowMargin: { marginVertical: 7 }
});
export const BRANCHES = [
{ address: "OC Aupark", zip: "040 01", city: "Košice", id: 1 },
{ address: "Autobusova 71", zip: "040 01", city: "Košice", id: 2 },
{ address: "OC Galeria", zip: "040 01", city: "Košice", id: 3 },
{ address: "OC Optima", zip: "040 01", city: "Košice", id: 4 }
];
export const NOTIFICATIONS = [
{
address: "OC Aupark",
city: "Košice",
id: 1,
audioMatch: 82,
videoMatch: 65,
rate: 5,
timeStamp: "2019-05-01T06:50:27"
},
{
address: "OC Galeria",
city: "Košice",
id: 2,
audioMatch: 45,
videoMatch: 42,
rate: 2,
timeStamp: "2019-04-30T21:50:36"
},
{
address: "OC Aupark",
city: "Košice",
id: 3,
audioMatch: 35,
videoMatch: 40,
rate: 1,
timeStamp: "2019-04-30T20:42:41"
},
{
address: "OC Aupark",
city: "Košice",
id: 4,
audioMatch: 82,
videoMatch: 72,
rate: 1,
timeStamp: "2019-05-01T06:50:48"
},
{
address: "OC Aupark",
city: "Košice",
id: 5,
audioMatch: 55,
videoMatch: 60,
rate: 3,
timeStamp: "2019-04-30T18:49:12"
}
];
......@@ -29,7 +29,7 @@ const NotificationStack = createStackNavigator({
});
NotificationStack.navigationOptions = {
tabBarLabel: "Links",
tabBarLabel: "Notifications",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......
......@@ -16,6 +16,7 @@
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.1.0",
"react-native-typography": "^1.4.0",
"react-navigation": "^3.0.9"
},
"devDependencies": {
......
import React, { memo, PureComponent } from "react";
import { ListItem, Divider } from "react-native-elements";
import React, { PureComponent } from "react";
import { FlatList, StyleSheet } from "react-native";
const STATIC_DATA = [
{ address: "OC Aupark", zip: "040 01", city: "Kosice", id: 1 },
{ address: "Autobusova 71", zip: "040 01", city: "Kosice", id: 2 },
{ address: "OC Galeria", zip: "040 01", city: "Kosice", id: 3 },
{ address: "OC Optima", zip: "040 01", city: "Kosice", id: 4 }
];
import BranchListItem from "../components/BranchListItem";
import { BRANCHES } from "../constants/Data";
export default class BranchScreen extends PureComponent {
static navigationOptions = {
title: "Branches"
};
state = {
data: STATIC_DATA
data: BRANCHES
};
_keyExtractor = item => `bank-${item.id}`;
......@@ -24,33 +18,22 @@ export default class BranchScreen extends PureComponent {
render() {
return (
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={BranchListItemDivider}
ItemSeparatorComponent={BranchListItem.Divider}
data={this.state.data}
/>
);
}
}
const BranchListItem = memo(function ListItem({ item }) {
return (
<ListItem title={item.address} subtitle={`${item.city}, ${item.zip}`} />
);
});
function BranchListItemDivider() {
return <Divider style={styles.divider} />;
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
divider: {
backgroundColor: "#000",
marginLeft: "10%",
width: "90%"
listContainer: {
padding: 15
}
});
import React from "react";
import { ExpoConfigView } from "@expo/samples";
import React, { PureComponent } from "react";
import { View, StyleSheet, FlatList } from "react-native";
import { ButtonGroup } from "react-native-elements";
import NotificationListItem from "../components/NotificationListItem";
import { iOSColors } from "react-native-typography";
import { NOTIFICATIONS } from "../constants/Data";
export default class NotificationScreen extends React.Component {
export default class NotificationScreen extends PureComponent {
static navigationOptions = {
title: "Notifications"
};
constructor(props) {
super(props);
this.state = {
selectedIndex: 0,
data: NOTIFICATIONS
};
}
updateIndex = selectedIndex => {
this.setState({ selectedIndex });
};
_keyExtractor = item => `bank-${item.id}`;
_renderItem = ({ item }) => <NotificationListItem item={item} />;
render() {
/* Go ahead and delete ExpoConfigView and replace it with your
* content, we just wanted to give you a quick view of your config */
return <ExpoConfigView />;
const buttons = ["New", "Displayed"];
const { selectedIndex } = this.state;
return (
<View style={styles.container}>
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
buttonStyle={styles.tabButtonsStyle}
selectedButtonStyle={styles.selectedButtonStyle}
disabledButtonStyle={styles.disabledButtonStyle}
disabledTextStyle={styles.disabledTextStyle}
containerStyle={styles.buttonTabContainer}
/>
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={NotificationListItem.Divider}
data={this.state.data}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1, paddingHorizontal: 15, paddingTop: 25 },
buttonTabContainer: {},
tabButtonsStyle: {
borderColor: iOSColors.blue
},
selectedButtonStyle: {
backgroundColor: iOSColors.blue
},
disabledButtonStyle: {
backgroundColor: iOSColors.white
},
disabledTextStyle: { color: iOSColors.blue, fontWeight: "bold" }
});
......@@ -5873,7 +5873,7 @@ react-native-gesture-handler@~1.0.14:
invariant "^2.2.2"
prop-types "^15.5.10"
"react-native-maps@github:expo/react-native-maps#v0.22.1-exp.0":
react-native-maps@expo/react-native-maps#v0.22.1-exp.0:
version "0.22.1"
resolved "https://codeload.github.com/expo/react-native-maps/tar.gz/e6f98ff7272e5d0a7fe974a41f28593af2d77bb2"
......@@ -5935,6 +5935,11 @@ react-native-tab-view@^1.2.0, react-native-tab-view@^1.3.4:
dependencies:
prop-types "^15.6.1"
react-native-typography@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/react-native-typography/-/react-native-typography-1.4.0.tgz#166b79c618075882d8af07720649f5bc6523160d"
integrity sha512-3lToN3hRvPySw0PWCn1SjbDbNaqlV+FM22zSuymIc2ILGcfWbWcgZ+qdX+VKtHAewMG7Rp5yab2bmuaEYQlu3Q==
react-native-vector-icons@6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-6.0.0.tgz#3a7076dbe244ea94c6d5e92802a870e64a4283c5"
......
Supports Markdown
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