octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve menu row when content are long/short

This commit is contained in:
Zhiyuan Zheng 2022-06-15 00:20:29 +02:00
parent df80135226
commit e396953ac8
1 changed files with 28 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/Menu/Row.tsx
View File

@ -5,7 +5,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import { ColorDefinitions } from '@utils/styles/themes' import { ColorDefinitions } from '@utils/styles/themes'
import React, { useMemo } from 'react' import React, { useMemo } from 'react'
import { StyleSheet, Text, View } from 'react-native' import { View } from 'react-native'
import { Flow } from 'react-native-animated-spinkit' import { Flow } from 'react-native-animated-spinkit'
import { State, Switch, TapGestureHandler } from 'react-native-gesture-handler' import { State, Switch, TapGestureHandler } from 'react-native-gesture-handler'
@ -61,7 +61,7 @@ const MenuRow: React.FC<Props> = ({
return ( return (
<View <View
style={styles.base} style={{ minHeight: 50 }}
accessible accessible
accessibilityRole={switchValue ? 'switch' : 'button'} accessibilityRole={switchValue ? 'switch' : 'button'}
accessibilityState={switchValue ? { checked: switchValue } : undefined} accessibilityState={switchValue ? { checked: switchValue } : undefined}
@ -78,14 +78,26 @@ const MenuRow: React.FC<Props> = ({
}} }}
> >
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View style={styles.core}> <View
<View style={styles.front}> style={{
flex: 1,
flexDirection: 'row',
paddingTop: StyleConstants.Spacing.S
}}
>
<View
style={{
flex: 3,
flexDirection: 'row',
alignItems: 'center'
}}
>
{iconFront && ( {iconFront && (
<Icon <Icon
name={iconFront} name={iconFront}
size={StyleConstants.Font.Size.L} size={StyleConstants.Font.Size.L}
color={colors[iconFrontColor]} color={colors[iconFrontColor]}
style={styles.iconFront} style={{ marginRight: StyleConstants.Spacing.S }}
/> />
)} )}
{badge ? ( {badge ? (
@ -99,7 +111,7 @@ const MenuRow: React.FC<Props> = ({
}} }}
/> />
) : null} ) : null}
<View style={styles.main}> <View style={{ flex: 1 }}>
<CustomText <CustomText
fontStyle='M' fontStyle='M'
style={{ color: colors.primaryDefault }} style={{ color: colors.primaryDefault }}
@ -111,7 +123,15 @@ const MenuRow: React.FC<Props> = ({
</View> </View>
{content || switchValue !== undefined || iconBack ? ( {content || switchValue !== undefined || iconBack ? (
<View style={styles.back}> <View
style={{
flexShrink: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginLeft: StyleConstants.Spacing.M
}}
>
{content ? ( {content ? (
typeof content === 'string' ? ( typeof content === 'string' ? (
<CustomText <CustomText
@ -141,7 +161,7 @@ const MenuRow: React.FC<Props> = ({
name={iconBack} name={iconBack}
size={StyleConstants.Font.Size.L} size={StyleConstants.Font.Size.L}
color={colors[iconBackColor]} color={colors[iconBackColor]}
style={[styles.iconBack, { opacity: loading ? 0 : 1 }]} style={{ marginLeft: 8, opacity: loading ? 0 : 1 }}
/> />
) : null} ) : null}
{loading && loadingSpinkit} {loading && loadingSpinkit}
@ -159,42 +179,4 @@ const MenuRow: React.FC<Props> = ({
) )
} }
const styles = StyleSheet.create({
base: {
minHeight: 50
},
core: {
flex: 1,
flexDirection: 'row',
paddingTop: StyleConstants.Spacing.S
},
front: {
flex: 2,
flexDirection: 'row',
alignItems: 'center'
},
back: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginLeft: StyleConstants.Spacing.M
},
iconFront: {
marginRight: StyleConstants.Spacing.S
},
main: {
flex: 1
},
description: {
...StyleConstants.FontStyle.S
},
content: {
...StyleConstants.FontStyle.M
},
iconBack: {
marginLeft: 8
}
})
export default MenuRow export default MenuRow