octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-01-14 22:53:01 +01:00
parent 95f500ae72
commit d39bc82909
22 changed files with 300 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,9 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { ColorDefinitions } from '@utils/styles/themes'
import React, { useMemo } from 'react'
import { Pressable, StyleSheet, Switch, Text, View } from 'react-native'
import { StyleSheet, Switch, Text, View } from 'react-native'
import { Chase } from 'react-native-animated-spinkit'
import { State, TapGestureHandler } from 'react-native-gesture-handler'
export interface Props {
iconFront?: any
@ -54,81 +55,86 @@ const MenuRow: React.FC<Props> = ({
)
return (
<Pressable
style={styles.base}
onPress={onPress}
disabled={loading}
testID='base'
>
<View style={styles.core}>
<View style={styles.front}>
{iconFront && (
<Icon
name={iconFront}
size={StyleConstants.Font.Size.L}
color={theme[iconFrontColor]}
style={styles.iconFront}
/>
)}
<View style={styles.main}>
<Text
style={[styles.title, { color: theme.primary }]}
numberOfLines={1}
>
{title}
</Text>
{description ? (
<Text style={[styles.description, { color: theme.secondary }]}>
{description}
</Text>
) : null}
</View>
</View>
{(content && content.length) ||
switchValue !== undefined ||
iconBack ? (
<View style={styles.back}>
{content && content.length ? (
<>
<Text
style={[
styles.content,
{
color: theme.secondary,
opacity: !iconBack && loading ? 0 : 1
}
]}
numberOfLines={1}
>
{content}
</Text>
{loading && !iconBack && loadingSpinkit}
</>
) : null}
{switchValue !== undefined ? (
<Switch
value={switchValue}
onValueChange={switchOnValueChange}
disabled={switchDisabled}
trackColor={{ true: theme.blue, false: theme.disabled }}
<View style={styles.base}>
<TapGestureHandler
onHandlerStateChange={({ nativeEvent }) => {
if (nativeEvent.state === State.ACTIVE) {
if (!loading) {
onPress && onPress()
}
}
}}
>
<View style={styles.core}>
<View style={styles.front}>
{iconFront && (
<Icon
name={iconFront}
size={StyleConstants.Font.Size.L}
color={theme[iconFrontColor]}
style={styles.iconFront}
/>
) : null}
{iconBack ? (
<>
<Icon
name={iconBack}
size={StyleConstants.Font.Size.L}
color={theme[iconBackColor]}
style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
/>
{loading && loadingSpinkit}
</>
) : null}
)}
<View style={styles.main}>
<Text
style={[styles.title, { color: theme.primary }]}
numberOfLines={1}
>
{title}
</Text>
{description ? (
<Text style={[styles.description, { color: theme.secondary }]}>
{description}
</Text>
) : null}
</View>
</View>
) : null}
</View>
</Pressable>
{(content && content.length) ||
switchValue !== undefined ||
iconBack ? (
<View style={styles.back}>
{content && content.length ? (
<>
<Text
style={[
styles.content,
{
color: theme.secondary,
opacity: !iconBack && loading ? 0 : 1
}
]}
numberOfLines={1}
>
{content}
</Text>
{loading && !iconBack && loadingSpinkit}
</>
) : null}
{switchValue !== undefined ? (
<Switch
value={switchValue}
onValueChange={switchOnValueChange}
disabled={switchDisabled}
trackColor={{ true: theme.blue, false: theme.disabled }}
/>
) : null}
{iconBack ? (
<>
<Icon
name={iconBack}
size={StyleConstants.Font.Size.L}
color={theme[iconBackColor]}
style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
/>
{loading && loadingSpinkit}
</>
) : null}
</View>
) : null}
</View>
</TapGestureHandler>
</View>
)
}