From 4a6812e28a8a02edcb51faf806da06ddfbdadd9f Mon Sep 17 00:00:00 2001 From: Christian Landgren Date: Wed, 16 Dec 2020 23:07:15 +0100 Subject: [PATCH] added child chooser --- packages/app/App.js | 5 +- .../{tabs.component.js => child.component.js} | 22 ++- packages/app/components/children.component.js | 129 ++++++++++++++++++ .../app/components/contactMenu.component.js | 8 +- packages/app/components/login.component.js | 20 +++ .../app/components/navigation.component.js | 22 +++ packages/app/package-lock.json | 19 +++ packages/app/package.json | 2 + 8 files changed, 216 insertions(+), 11 deletions(-) rename packages/app/components/{tabs.component.js => child.component.js} (71%) create mode 100644 packages/app/components/children.component.js create mode 100644 packages/app/components/login.component.js create mode 100644 packages/app/components/navigation.component.js diff --git a/packages/app/App.js b/packages/app/App.js index 95b3b6d7..fe06a44e 100644 --- a/packages/app/App.js +++ b/packages/app/App.js @@ -7,15 +7,14 @@ import { import { EvaIconsPack } from '@ui-kitten/eva-icons'; import * as eva from '@eva-design/eva'; import customization from './design/customization.json'; -import children from './output.json'; -import {AppNavigator} from './components/tabs.component' +import { AppNavigator } from './components/navigation.component'; export default () => ( <> - + ) \ No newline at end of file diff --git a/packages/app/components/tabs.component.js b/packages/app/components/child.component.js similarity index 71% rename from packages/app/components/tabs.component.js rename to packages/app/components/child.component.js index 3a470c93..d12c6922 100644 --- a/packages/app/components/tabs.component.js +++ b/packages/app/components/child.component.js @@ -1,14 +1,15 @@ import React from 'react' import { StyleSheet } from 'react-native'; -import { TabBar, Tab, TabView, Layout, Text, Icon } from '@ui-kitten/components' +import { TabBar, TopNavigation, TopNavigationAction, Tab, TabView, Layout, Text, Divider, Icon } from '@ui-kitten/components' import { NewsList } from './newsList.component' import { Calendar } from './calendar.component' import { Classmates } from './classmates.component' import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import moment from 'moment' -export const AppNavigator = ({child}) => { +export const Child = ({route, navigation}) => { const [selectedIndex, setSelectedIndex] = React.useState(0) + const { child } = route.params; const NewsIcon = (props) => ( @@ -24,9 +25,21 @@ export const AppNavigator = ({child}) => { const SettingsIcon = (props) => ( ) + + const BackIcon = (props) => ( + + ) + const BackAction = () => ( + + ) + const navigateBack = () => { + navigation.goBack() + } + return ( - + + setSelectedIndex(index)}> @@ -35,7 +48,7 @@ export const AppNavigator = ({child}) => { - moment(a.startDate).isAfter(moment().startOf('day')) ) }> + moment(a.startDate).isAfter(moment().startOf('day')) ) }> @@ -54,6 +67,7 @@ export const AppNavigator = ({child}) => { + ) } diff --git a/packages/app/components/children.component.js b/packages/app/components/children.component.js new file mode 100644 index 00000000..f9c63b13 --- /dev/null +++ b/packages/app/components/children.component.js @@ -0,0 +1,129 @@ +import React from 'react' +import { StyleSheet, View } from 'react-native' +import { SafeAreaView } from 'react-native' +import moment from 'moment' +import { Divider, Button, Icon, Layout, Text, TopNavigation, TopNavigationAction, List, Card, Avatar } from '@ui-kitten/components' +import children from '../output.json' + +const BackIcon = (props) => ( + +) + +const NotificationIcon = (style) => ( + +) + +const CalendarIcon = (style) => ( + +) + +const PeopleIcon = (style) => ( + +) + +export const Children = ({ navigation }) => { + + const abbrevations = { + G: 'Gymnasiet', + GR: 'Grundskolan', + F: 'Förskoleklass', + } + const navigateBack = () => { + navigation.goBack() + } + + const navigateChild = (child) => { + navigation.navigate('Child', {child}) + } + + const BackAction = () => ( + + ) + + const Header = (props, info) => ( + + + {info.item.name.split('(')[0]} + + + {`${info.item.status.split(';').map(status => abbrevations[status]).join(', ')}`} + + + ) + + const Footer = (props, info) => ( + + + + + + ) + + const renderItem = (info) => ( + Header(headerProps, info)} + footer={footerProps => Footer(footerProps, info)} + onPress={() => navigateChild(info.item)}> + {info.item.menu.map(menu => + + {`${menu.title.split(' -')[0]} - ${menu.description.split('
')[0]}`} + + )} + + ) + + return ( + + + + + + + + ) +} + +const styles = StyleSheet.create({ + topContainer: { + flexDirection: 'row', + justifyContent: 'space-between' + }, + card: { + flex: 1, + margin: 10 + }, + itemDescription: { + zIndex: 1, + marginVertical: 16 + }, + itemFooter: { + flexDirection: 'row', + paddingHorizontal: 12 + }, + iconButton: { + paddingHorizontal: 0 + } +}) diff --git a/packages/app/components/contactMenu.component.js b/packages/app/components/contactMenu.component.js index 87b84953..8163ae65 100644 --- a/packages/app/components/contactMenu.component.js +++ b/packages/app/components/contactMenu.component.js @@ -27,10 +27,10 @@ export const ContactMenu = ({contact}) => { onBackdropPress={() => setVisible(false)}> {contact.guardians.map((parent, i) => - Linking.openURL(`tel:${parent.mobile}`)}/> - Linking.openURL(`sms:${parent.mobile}`)}/> - Linking.openURL(`mailto:${parent.email}`)}/> - Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/> + Linking.openURL(`tel:${parent.mobile}`)}/> + Linking.openURL(`sms:${parent.mobile}`)}/> + Linking.openURL(`mailto:${parent.email}`)}/> + Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/> )} diff --git a/packages/app/components/login.component.js b/packages/app/components/login.component.js new file mode 100644 index 00000000..bbc2fd31 --- /dev/null +++ b/packages/app/components/login.component.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { SafeAreaView } from 'react-native'; +import { Button, Divider, Layout, TopNavigation } from '@ui-kitten/components'; + +export const Login = ({ navigation }) => { + + const navigateDetails = () => { + navigation.navigate('Children'); + }; + + return ( + + + + + + + + ); +}; \ No newline at end of file diff --git a/packages/app/components/navigation.component.js b/packages/app/components/navigation.component.js new file mode 100644 index 00000000..1fac2cfb --- /dev/null +++ b/packages/app/components/navigation.component.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import { Login } from './login.component'; +import { Children } from './children.component'; +import { Child } from './child.component'; + +const { Navigator, Screen } = createStackNavigator(); + +const HomeNavigator = () => ( + + + + + +); + +export const AppNavigator = (children) => ( + + + +); diff --git a/packages/app/package-lock.json b/packages/app/package-lock.json index 18e4a683..bc02423f 100644 --- a/packages/app/package-lock.json +++ b/packages/app/package-lock.json @@ -1591,6 +1591,11 @@ "integrity": "sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==", "dev": true }, + "@react-native-community/masked-view": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", + "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==" + }, "@react-navigation/core": { "version": "5.14.4", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.14.4.tgz", @@ -1643,6 +1648,15 @@ "nanoid": "^3.1.15" } }, + "@react-navigation/stack": { + "version": "5.12.8", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.12.8.tgz", + "integrity": "sha512-wUJFbU0v606RBXOUxHToCXJNmiwxtFYhN2TFvjxCZ3PJU+OWWx8HTmn99pT3rVH4Ax2cfO5BDUy9v+r74ZrIWw==", + "requires": { + "color": "^3.1.3", + "react-native-iphone-x-helper": "^1.3.0" + } + }, "@types/babel__core": { "version": "7.1.12", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz", @@ -8979,6 +8993,11 @@ } } }, + "react-native-iphone-x-helper": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz", + "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==" + }, "react-native-maps": { "version": "0.27.1", "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz", diff --git a/packages/app/package.json b/packages/app/package.json index fdfdeb26..aa7bceff 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -12,8 +12,10 @@ "dependencies": { "@eva-design/eva": "2.0.0", "@eva-design/material": "^2.0.0", + "@react-native-community/masked-view": "^0.1.10", "@react-navigation/material-top-tabs": "^5.3.10", "@react-navigation/native": "^5.8.10", + "@react-navigation/stack": "^5.12.8", "@ui-kitten/components": "5.0.0", "@ui-kitten/eva-icons": "5.0.0", "react": "16.11.0",