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

Partially fixed #113

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-05-09 21:59:03 +02:00
parent 006edd5c87
commit 0b659913dc
62 changed files with 2308 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/Message.tsx
View File

@ -2,7 +2,7 @@ import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { getTheme } from '@utils/styles/themes'
import React from 'react'
import React, { RefObject } from 'react'
import { AccessibilityInfo } from 'react-native'
import FlashMessage, {
hideMessage,
@ -11,6 +11,7 @@ import FlashMessage, {
import haptics from './haptics'
const displayMessage = ({
ref,
duration = 'short',
autoHide = true,
message,
@ -20,6 +21,7 @@ const displayMessage = ({
type
}:
| {
ref?: RefObject<FlashMessage>
duration?: 'short' | 'long'
autoHide?: boolean
message: string
@ -29,6 +31,7 @@ const displayMessage = ({
type?: undefined
}
| {
ref?: RefObject<FlashMessage>
duration?: 'short' | 'long'
autoHide?: boolean
message: string
@ -54,63 +57,88 @@ const displayMessage = ({
haptics('Error')
}
showMessage({
duration: type === 'error' ? 5000 : duration === 'short' ? 1500 : 3000,
autoHide,
message,
description,
onPress,
...(mode &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
}
})
})
if (ref) {
ref.current?.showMessage({
duration: type === 'error' ? 5000 : duration === 'short' ? 1500 : 3000,
autoHide,
message,
description,
onPress,
...(mode &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
}
})
})
} else {
showMessage({
duration: type === 'error' ? 5000 : duration === 'short' ? 1500 : 3000,
autoHide,
message,
description,
onPress,
...(mode &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
}
})
})
}
}
const removeMessage = () => {
// if (ref) {
// ref.current?.hideMessage()
// } else {
hideMessage()
// }
}
const Message = React.memo(
() => {
const { mode, theme } = useTheme()
const Message = React.forwardRef<FlashMessage>((_, ref) => {
const { mode, theme } = useTheme()
return (
<FlashMessage
icon='auto'
position='top'
floating
style={{
backgroundColor: theme.backgroundDefault,
shadowColor: theme.primaryDefault,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.24,
shadowRadius: 4
}}
titleStyle={{
color: theme.primaryDefault,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{
color: theme.primaryDefault,
...StyleConstants.FontStyle.S
}}
// @ts-ignore
textProps={{ numberOfLines: 2 }}
/>
)
},
() => true
)
return (
<FlashMessage
ref={ref}
icon='auto'
position='top'
floating
style={{
backgroundColor: theme.backgroundDefault,
shadowColor: theme.primaryDefault,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.24,
shadowRadius: 4
}}
titleStyle={{
color: theme.primaryDefault,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{
color: theme.primaryDefault,
...StyleConstants.FontStyle.S
}}
// @ts-ignore
textProps={{ numberOfLines: 2 }}
/>
)
})
export { Message, displayMessage, removeMessage }