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

Rewrite all buttons

Browse Source
This commit is contained in:
Zhiyuan Zheng
2020-12-26 23:05:17 +01:00
parent 3ea88d025b
commit da79674548
25 changed files with 497 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/Menu/Button.tsx
View File

@ -1,78 +0,0 @@
import React from 'react'
import {
Alert,
AlertButton,
AlertOptions,
Pressable,
StyleSheet,
Text,
View
} from 'react-native'
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
export interface Props {
text: string
destructive?: boolean
alertOption?: {
title: string
message?: string | undefined
buttons?: AlertButton[] | undefined
options?: AlertOptions | undefined
}
}
const Core: React.FC<Props> = ({ text, destructive = false }) => {
const { theme } = useTheme()
return (
<View style={styles.core}>
<Text
style={{
color: destructive ? theme.red : theme.primary,
fontWeight: destructive ? StyleConstants.Font.Weight.Bold : undefined
}}
>
{text}
</Text>
</View>
)
}
const MenuButton: React.FC<Props> = ({ ...props }) => {
const { theme } = useTheme()
return (
<Pressable
style={[styles.base, { borderBottomColor: theme.separator }]}
onPress={() =>
props.alertOption &&
Alert.alert(
props.alertOption.title,
props.alertOption.message,
props.alertOption.buttons,
props.alertOption.options
)
}
>
<Core {...props} />
</Pressable>
)
}
const styles = StyleSheet.create({
base: {
height: 50,
borderBottomWidth: 1
},
core: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
paddingLeft: StyleConstants.Spacing.Global.PagePadding,
paddingRight: StyleConstants.Spacing.Global.PagePadding
}
})
export default MenuButton

23
src/components/Menu/Container.tsx
View File

@ -1,6 +1,5 @@
import React, { Children } from 'react'
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
export interface Props {
@ -8,25 +7,7 @@ export interface Props {
}
const MenuContainer: React.FC<Props> = ({ children }) => {
const { theme } = useTheme()
// @ts-ignore
const firstChild = Children.toArray(children)[0].type.name
return (
<View
style={[
styles.base,
{
...(firstChild !== 'MenuHeader' && {
borderTopColor: theme.separator,
borderTopWidth: 1
})
}
]}
>
{children}
</View>
)
return <View style={styles.base}>{children}</View>
}
const styles = StyleSheet.create({

8
src/components/Menu/Header.tsx
View File

@ -11,21 +11,21 @@ const MenuHeader: React.FC<Props> = ({ heading }) => {
const { theme } = useTheme()
return (
<View style={[styles.base, { borderBottomColor: theme.separator }]}>
<Text style={[styles.text, { color: theme.primary }]}>{heading}</Text>
<View style={styles.base}>
<Text style={[styles.text, { color: theme.secondary }]}>{heading}</Text>
</View>
)
}
const styles = StyleSheet.create({
base: {
borderBottomWidth: 1,
paddingLeft: StyleConstants.Spacing.Global.PagePadding,
paddingRight: StyleConstants.Spacing.Global.PagePadding,
paddingBottom: StyleConstants.Spacing.S
},
text: {
fontSize: StyleConstants.Font.Size.S
fontSize: StyleConstants.Font.Size.S,
fontWeight: StyleConstants.Font.Weight.Bold
}
})

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

@ -71,14 +71,11 @@ const MenuRow: React.FC<Props> = ({ ...props }) => {
const { theme } = useTheme()
return props.onPress ? (
<Pressable
style={[styles.base, { borderBottomColor: theme.separator }]}
onPress={props.onPress}
>
<Pressable style={styles.base} onPress={props.onPress}>
<Core {...props} />
</Pressable>
) : (
<View style={[styles.base, { borderBottomColor: theme.separator }]}>
<View style={styles.base}>
<Core {...props} />
</View>
)
@ -86,8 +83,7 @@ const MenuRow: React.FC<Props> = ({ ...props }) => {
const styles = StyleSheet.create({
base: {
height: 50,
borderBottomWidth: 1
height: 50
},
core: {
flex: 1,