Skip to content

Commit

Permalink
fix: scroll overflow on child screens (#65)
Browse files Browse the repository at this point in the history 
* fix: scroll overflow on child screens

* fix: move class name to list header

* refactor: remove hacks for screen sizing
  • Loading branch information
@believer
believer committed Feb 10, 2021
1 parent df63a6b commit a05e3c4
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 116 deletions.
223 changes: 114 additions & 109 deletions packages/app/components/child.component.js
View file
@@ -1,12 +1,10 @@
import React from 'react'
import {StyleSheet, Linking} from 'react-native'
import {StyleSheet} from 'react-native'
import {
TopNavigation,
TopNavigationAction,
Tab,
TabView,
OverflowMenu,
MenuItem,
TabBar,
Layout,
Text,
Icon,
Expand All @@ -24,140 +22,147 @@ import {
useCalendar,
useSchedule,
} from '@skolplattformen/api-hooks'
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'

export const Child = ({route, navigation}) => {
const {child, color, selectedTab} = route.params
const [selectedIndex, setSelectedIndex] = React.useState(selectedTab || 0)
const {Navigator, Screen} = createMaterialTopTabNavigator()

const ChildContext = React.createContext({})
const useChild = () => React.useContext(ChildContext)

const NewsScreen = () => {
const child = useChild()
const {data: news} = useNews(child)

return (
<Layout>
<NewsList news={news} />
</Layout>
)
}

const NotificationsScreen = () => {
const child = useChild()
const {data: notifications, status: notificationsStatus} = useNotifications(
child,
)
const {data: news, status: newsStatus} = useNews(child)
const {data: classmates, status: classmatesStatus} = useClassmates(child)
const {data: calendar, status: calendarStatus} = useCalendar(child)
const {data: schedule, status: scheduleStatus} = useSchedule(

return (
<Layout>
<NotificationsList
notifications={notifications}
status={notificationsStatus}
/>
</Layout>
)
}

const CalendarScreen = () => {
const child = useChild()
const {data: calendar} = useCalendar(child)
const {data: schedule} = useSchedule(
child,
DateTime.local(),
DateTime.local().plus({days: 7}),
)
const [menuVisible, setMenuVisible] = React.useState(false)

const NewsIcon = (props) => <Icon {...props} name="activity-outline" />
const NotificationsIcon = (props) => (
<Icon {...props} name="alert-circle-outline" />
return (
<Layout>
<Calendar calendar={[...(calendar ?? []), ...(schedule ?? [])]} />
</Layout>
)
const CalendarIcon = (props) => <Icon {...props} name="calendar-outline" />
const ClassIcon = (props) => <Icon {...props} name="people-outline" />
const EditIcon = (props) => <Icon {...props} name="edit" />
const SettingsIcon = (props) => <Icon {...props} name="options-2-outline" />
const BackIcon = (props) => <Icon {...props} name="arrow-back" />
}

const MenuIcon = (props) => <Icon {...props} name="more-vertical" />
const ClassmatesScreen = () => {
const child = useChild()
const {data: classmates} = useClassmates(child)

const BackAction = () => (
<TopNavigationAction icon={BackIcon} onPress={navigateBack} />
return (
<Layout>
<Classmates classmates={classmates} />
</Layout>
)
}

const TabTitle = ({style, children}) => (
<Text adjustsFontSizeToFit numberOfLines={1} style={style}>
{children}
</Text>
)
const TabTitle = ({style, children}) => (
<Text adjustsFontSizeToFit numberOfLines={1} style={style}>
{children}
</Text>
)

const navigateBack = () => {
navigation.goBack()
}
const NewsIcon = (props) => <Icon {...props} name="activity-outline" />
const NotificationsIcon = (props) => (
<Icon {...props} name="alert-circle-outline" />
)
const CalendarIcon = (props) => <Icon {...props} name="calendar-outline" />
const ClassIcon = (props) => <Icon {...props} name="people-outline" />

const toggleMenu = () => {
setMenuVisible(!menuVisible)
}
const TopTabBar = ({navigation, state}) => (
<TabBar
selectedIndex={state.index}
onSelect={(index) => navigation.navigate(state.routeNames[index])}>
<Tab
title={(props) => <TabTitle {...props}>Nyheter</TabTitle>}
icon={NewsIcon}
/>
<Tab
title={(props) => <TabTitle {...props}>Notifieringar</TabTitle>}
icon={NotificationsIcon}
/>
<Tab
title={(props) => <TabTitle {...props}>Kalender</TabTitle>}
icon={CalendarIcon}
/>
<Tab
title={(props) => <TabTitle {...props}>Klassen</TabTitle>}
icon={ClassIcon}
/>
</TabBar>
)

const renderMenuAction = () => (
<TopNavigationAction icon={MenuIcon} onPress={toggleMenu} />
)
const TabNavigator = () => (
<Navigator tabBar={(props) => <TopTabBar {...props} />}>
<Screen name="Nyheter" component={NewsScreen} />
<Screen name="Notifieringar" component={NotificationsScreen} />
<Screen name="Kalender" component={CalendarScreen} />
<Screen name="Klassen" component={ClassmatesScreen} />
</Navigator>
)

const openSms = (child) => {
console.log('child', child)
Linking.openURL(`sms:+46730121740&body=${child.pnr}`)
}
export const Child = ({route, navigation}) => {
const {child, color} = route.params

const renderRightActions = (child) => () => (
<React.Fragment>
<OverflowMenu
anchor={renderMenuAction}
visible={menuVisible}
backdropStyle={styles.backdrop}
onBackdropPress={toggleMenu}>
<MenuItem
accessoryLeft={SettingsIcon}
title="Anmäl frånvaro"
onPress={() => openSms(child)}
/>
</OverflowMenu>
</React.Fragment>
const BackIcon = (props) => <Icon {...props} name="arrow-back" />

const BackAction = () => (
<TopNavigationAction icon={BackIcon} onPress={navigateBack} />
)

const navigateBack = () => {
navigation.goBack()
}

return (
<SafeAreaView style={{flex: 1}} style={{...styles.topBar, color: color}}>
<TopNavigation
title={child.name.split('(')[0]}
alignment="center"
accessoryLeft={BackAction}
// accessoryRight={renderRightActions(child)}
style={styles.topBar}
/>
<TabView
selectedIndex={selectedIndex}
onSelect={(index) => setSelectedIndex(index)}>
<Tab
title={(props) => <TabTitle {...props}>Nyheter</TabTitle>}
icon={NewsIcon}>
<Layout style={styles.tabContainer}>
<NewsList news={news} />
</Layout>
</Tab>
<Tab
title={(props) => <TabTitle {...props}>Notifieringar</TabTitle>}
icon={NotificationsIcon}>
<Layout style={styles.tabContainer}>
<NotificationsList
notifications={notifications}
status={notificationsStatus}
/>
</Layout>
</Tab>
<Tab
title={(props) => <TabTitle {...props}>Kalender</TabTitle>}
icon={CalendarIcon}>
<Layout style={styles.tabContainer}>
<Calendar calendar={[...(calendar ?? []), ...(schedule ?? [])]} />
</Layout>
</Tab>
<Tab
title={(props) => <TabTitle {...props}>Klassen</TabTitle>}
icon={ClassIcon}>
<Layout style={styles.tabContainer}>
<Text category="h5">
Klass {classmates?.length ? classmates[0].className : ''}
</Text>
<Classmates classmates={classmates} />
</Layout>
</Tab>
</TabView>
<SafeAreaView style={{...styles.wrap, color}}>
<ChildContext.Provider value={child}>
<TopNavigation
title={child.name.split('(')[0]}
alignment="center"
accessoryLeft={BackAction}
style={styles.topBar}
/>
<TabNavigator />
</ChildContext.Provider>
</SafeAreaView>
)
}

const styles = StyleSheet.create({
topBar: {
wrap: {
backgroundColor: '#fff',
flex: 1,
},
tabContainer: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
paddingTop: 10,
paddingLeft: 10,
paddingBottom: 350,
topBar: {
backgroundColor: '#fff',
},
backdrop: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
Expand Down
12 changes: 11 additions & 1 deletion packages/app/components/classmates.component.js
View file
@@ -1,6 +1,6 @@
import React from 'react'
import {StyleSheet} from 'react-native'
import {Divider, List, ListItem, Icon} from '@ui-kitten/components'
import {Divider, List, ListItem, Icon, Text} from '@ui-kitten/components'
import {ContactMenu} from './contactMenu.component'

export const Classmates = ({classmates}) => {
Expand Down Expand Up @@ -31,6 +31,11 @@ export const Classmates = ({classmates}) => {
style={styles.container}
data={classmates}
ItemSeparatorComponent={Divider}
ListHeaderComponent={
<Text category="h5" style={styles.listHeader}>
Klass {classmates?.length ? classmates[0].className : ''}
</Text>
}
renderItem={renderItem}
/>
)
Expand All @@ -40,4 +45,9 @@ const styles = StyleSheet.create({
container: {
width: '100%',
},
listHeader: {
backgroundColor: '#fff',
paddingTop: 10,
paddingLeft: 15,
},
})
4 changes: 2 additions & 2 deletions packages/app/components/newsList.component.js
View file
Expand Up @@ -18,10 +18,10 @@ export const NewsList = ({news}) => {

const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
contentContainer: {
alignItems: 'stretch',
paddingRight: 10,
padding: 10,
},
})
7 changes: 3 additions & 4 deletions packages/app/components/notificationsList.component.js
View file
Expand Up @@ -3,7 +3,7 @@ import {StyleSheet} from 'react-native'
import {List} from '@ui-kitten/components'
import {Notification} from './notification.component'

export const NotificationsList = ({notifications, status}) => {
export const NotificationsList = ({notifications}) => {
return (
<List
style={styles.container}
Expand All @@ -18,11 +18,10 @@ export const NotificationsList = ({notifications, status}) => {

const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
contentContainer: {
alignItems: 'stretch',
paddingRight: 10,
paddingBottom: 330,
padding: 10,
},
})

1 comment on commit a05e3c4

@vercel
Copy link

@vercel vercel bot commented on a05e3c4 Feb 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.