tooot/src/components/Menu/Row.tsx

205 lines
5.4 KiB
TypeScript
Raw Normal View History

import Icon from '@components/Icon'
2021-04-09 21:43:12 +02:00
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
2020-12-27 00:55:22 +01:00
import { StyleConstants } from '@utils/styles/constants'
2020-12-13 14:04:25 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
import { ColorDefinitions } from '@utils/styles/themes'
2020-12-27 00:55:22 +01:00
import React, { useMemo } from 'react'
2021-03-02 01:17:06 +01:00
import { StyleSheet, Text, View } from 'react-native'
2021-02-08 23:47:20 +01:00
import { Flow } from 'react-native-animated-spinkit'
2021-03-02 01:17:06 +01:00
import { State, Switch, TapGestureHandler } from 'react-native-gesture-handler'
2020-11-24 00:18:47 +01:00
2020-11-22 00:46:23 +01:00
export interface Props {
2020-12-12 12:49:29 +01:00
iconFront?: any
iconFrontColor?: ColorDefinitions
2020-12-27 00:55:22 +01:00
2020-11-22 00:46:23 +01:00
title: string
2020-12-29 16:19:04 +01:00
description?: string
2021-01-18 00:23:40 +01:00
content?: string | React.ReactNode
2021-05-09 21:59:03 +02:00
badge?: boolean
2020-12-27 00:55:22 +01:00
2020-12-29 16:19:04 +01:00
switchValue?: boolean
switchDisabled?: boolean
switchOnValueChange?: () => void
2021-01-19 01:13:45 +01:00
iconBack?: 'ChevronRight' | 'ExternalLink'
iconBackColor?: ColorDefinitions
2020-12-27 00:55:22 +01:00
loading?: boolean
onPress?: () => void
2020-11-22 00:46:23 +01:00
}
2020-12-28 00:59:57 +01:00
const MenuRow: React.FC<Props> = ({
iconFront,
iconFrontColor = 'primaryDefault',
title,
2020-12-29 16:19:04 +01:00
description,
content,
2021-05-09 21:59:03 +02:00
badge = false,
2020-12-29 16:19:04 +01:00
switchValue,
switchDisabled,
switchOnValueChange,
iconBack,
2020-12-28 00:59:57 +01:00
iconBackColor = 'secondary',
loading = false,
onPress
}) => {
2020-11-23 00:07:32 +01:00
const { theme } = useTheme()
2021-04-09 21:43:12 +02:00
const { screenReaderEnabled } = useAccessibility()
2020-11-23 00:07:32 +01:00
2020-12-27 00:55:22 +01:00
const loadingSpinkit = useMemo(
() => (
<View style={{ position: 'absolute' }}>
2021-02-08 23:47:20 +01:00
<Flow
2020-12-27 00:55:22 +01:00
size={StyleConstants.Font.Size.M * 1.25}
color={theme.secondary}
/>
</View>
),
[theme]
)
return (
2021-04-09 21:43:12 +02:00
<View
style={styles.base}
accessible
accessibilityRole={switchValue ? 'switch' : 'button'}
accessibilityState={switchValue ? { checked: switchValue } : undefined}
>
2021-01-14 22:53:01 +01:00
<TapGestureHandler
2021-04-09 21:43:12 +02:00
onHandlerStateChange={async ({ nativeEvent }) => {
if (nativeEvent.state === State.ACTIVE && !loading) {
if (screenReaderEnabled && switchOnValueChange) {
switchOnValueChange()
} else {
if (onPress) onPress()
}
}
}}
2021-01-14 22:53:01 +01:00
>
2021-05-23 22:40:42 +02:00
<View style={{ flex: 1 }}>
2021-05-17 23:09:50 +02:00
<View style={styles.core}>
<View style={styles.front}>
{iconFront && (
2021-02-27 16:33:54 +01:00
<Icon
2021-05-17 23:09:50 +02:00
name={iconFront}
2021-02-27 16:33:54 +01:00
size={StyleConstants.Font.Size.L}
2021-05-17 23:09:50 +02:00
color={theme[iconFrontColor]}
style={styles.iconFront}
/>
)}
{badge ? (
<View
style={{
width: 8,
height: 8,
backgroundColor: theme.red,
borderRadius: 8,
marginRight: StyleConstants.Spacing.S
}}
2021-02-27 16:33:54 +01:00
/>
2021-01-14 22:53:01 +01:00
) : null}
2021-05-17 23:09:50 +02:00
<View style={styles.main}>
<Text
style={[styles.title, { color: theme.primaryDefault }]}
numberOfLines={1}
>
{title}
</Text>
</View>
2021-01-14 22:53:01 +01:00
</View>
2021-05-17 23:09:50 +02:00
{content || switchValue !== undefined || iconBack ? (
<View style={styles.back}>
{content ? (
typeof content === 'string' ? (
<Text
style={[
styles.content,
{
color: theme.secondary,
opacity: !iconBack && loading ? 0 : 1
}
]}
numberOfLines={1}
>
{content}
</Text>
) : (
content
)
) : null}
{switchValue !== undefined ? (
<Switch
value={switchValue}
onValueChange={switchOnValueChange}
disabled={switchDisabled}
trackColor={{ true: theme.blue, false: theme.disabled }}
style={{ opacity: loading ? 0 : 1 }}
/>
) : null}
{iconBack ? (
<Icon
name={iconBack}
size={StyleConstants.Font.Size.L}
color={theme[iconBackColor]}
style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
/>
) : null}
{loading && loadingSpinkit}
</View>
) : null}
</View>
{description ? (
<Text style={[styles.description, { color: theme.secondary }]}>
{description}
</Text>
2021-01-14 22:53:01 +01:00
) : null}
</View>
</TapGestureHandler>
</View>
2020-11-22 00:46:23 +01:00
)
}
const styles = StyleSheet.create({
base: {
2021-05-19 23:28:01 +02:00
minHeight: 50
2020-11-22 00:46:23 +01:00
},
core: {
flex: 1,
2021-05-19 23:28:01 +02:00
flexDirection: 'row',
paddingVertical: StyleConstants.Spacing.S
2020-11-22 00:46:23 +01:00
},
front: {
2021-01-01 23:10:47 +01:00
flex: 2,
flexDirection: 'row',
alignItems: 'center'
},
back: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
2021-01-01 23:10:47 +01:00
alignItems: 'center',
marginLeft: StyleConstants.Spacing.M
},
iconFront: {
2021-05-09 21:59:03 +02:00
marginRight: StyleConstants.Spacing.S
2020-11-22 00:46:23 +01:00
},
2020-12-29 16:19:04 +01:00
main: {
flex: 1
},
title: {
...StyleConstants.FontStyle.M
},
2020-12-29 16:19:04 +01:00
description: {
2021-05-09 21:59:03 +02:00
...StyleConstants.FontStyle.S
2020-12-29 16:19:04 +01:00
},
content: {
...StyleConstants.FontStyle.M
},
iconBack: {
marginLeft: 8
2020-11-22 00:46:23 +01:00
}
})
2020-12-27 00:55:22 +01:00
export default MenuRow