Use flash message instead of toast

This commit is contained in:
Zhiyuan Zheng 2021-02-28 22:49:55 +01:00
parent 78898059cb
commit b20b75f22e
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
13 changed files with 154 additions and 199 deletions

View File

@ -69,6 +69,7 @@
"react-native-blurhash": "^1.0.29",
"react-native-fast-image": "^8.3.4",
"react-native-feather": "^1.0.2",
"react-native-flash-message": "^0.1.23",
"react-native-gesture-handler": "~1.9.0",
"react-native-htmlview": "^0.16.0",
"react-native-reanimated": "^2.0.0-rc.2",
@ -78,7 +79,6 @@
"react-native-swipe-list-view": "^3.2.6",
"react-native-tab-view": "^2.15.2",
"react-native-tab-view-viewpager-adapter": "^1.1.0",
"react-native-toast-message": "^1.4.3",
"react-native-unimodules": "~0.12.0",
"react-query": "^3.12.0",
"react-redux": "^7.2.2",

View File

@ -1,4 +1,4 @@
import { toast, toastConfig } from '@components/toast'
import { displayMessage, Message } from '@components/Message'
import {
NavigationContainer,
NavigationContainerRef
@ -20,7 +20,6 @@ import React, { createRef, useCallback, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Alert, Platform, StatusBar } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import Toast from 'react-native-toast-message'
import { useDispatch, useSelector } from 'react-redux'
import * as Sentry from 'sentry-expo'
@ -77,11 +76,12 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
useEffect(() => {
const showLocalCorrect = () => {
if (localCorrupt) {
toast({
type: 'error',
displayMessage({
autoHide: false,
message: t('index.localCorrupt'),
description: localCorrupt.length ? localCorrupt : undefined,
autoHide: false
type: 'error',
mode
})
navigationRef.current?.navigate('Screen-Tabs', {
screen: 'Tab-Me'
@ -178,9 +178,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
/>
</Stack.Navigator>
{Platform.select({
ios: <Toast ref={Toast.setRef} config={toastConfig} />
})}
<Message />
</NavigationContainer>
</>
)

100
src/components/Message.tsx Normal file
View File

@ -0,0 +1,100 @@
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 FlashMessage, { showMessage } from 'react-native-flash-message'
import haptics from './haptics'
const displayMessage = ({
autoHide = true,
message,
description,
onPress,
mode,
type
}:
| {
autoHide?: boolean
message: string
description?: string
onPress?: () => void
mode?: undefined
type?: undefined
}
| {
autoHide?: boolean
message: string
description?: string
onPress?: () => void
mode: 'light' | 'dark'
type: 'success' | 'error' | 'warning'
}) => {
enum iconMapping {
success = 'CheckCircle',
error = 'XCircle',
warning = 'AlertCircle'
}
enum colorMapping {
success = 'blue',
error = 'red',
warning = 'secondary'
}
if (type && type === 'error') {
haptics('Error')
}
showMessage({
autoHide,
message,
description,
onPress,
...(mode &&
type && {
renderFlashMessageIcon: props => {
console.log(props)
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
}
})
})
}
const Message = React.memo(
() => {
const { mode, theme } = useTheme()
return (
<FlashMessage
icon='auto'
position='top'
floating
style={{
backgroundColor: theme.background,
shadowColor: theme.primary,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.32,
shadowRadius: 4
}}
titleStyle={{
color: theme.primary,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{ color: theme.primary, ...StyleConstants.FontStyle.M }}
// @ts-ignore
textProps={{ numberOfLines: 2 }}
/>
)
},
() => true
)
export { Message, displayMessage }

View File

@ -1,13 +1,14 @@
import analytics from '@components/analytics'
import Button from '@components/Button'
import haptics from '@components/haptics'
import { toast } from '@components/toast'
import { displayMessage } from '@components/Message'
import {
QueryKeyRelationship,
useRelationshipMutation
} from '@utils/queryHooks/relationship'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, View } from 'react-native'
@ -18,6 +19,7 @@ export interface Props {
}
const RelationshipIncoming: React.FC<Props> = ({ id }) => {
const { mode } = useTheme()
const { t } = useTranslation()
const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
@ -36,8 +38,9 @@ const RelationshipIncoming: React.FC<Props> = ({ id }) => {
},
onError: (err: any, { type }) => {
haptics('Error')
toast({
displayMessage({
type: 'error',
mode,
message: t('common:toastMessage.error.message', {
function: t(`relationship:${type}.function`)
}),

View File

@ -1,13 +1,14 @@
import analytics from '@components/analytics'
import Button from '@components/Button'
import haptics from '@components/haptics'
import { toast } from '@components/toast'
import { displayMessage } from '@components/Message'
import {
QueryKeyRelationship,
useRelationshipMutation,
useRelationshipQuery
} from '@utils/queryHooks/relationship'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useQueryClient } from 'react-query'
@ -18,6 +19,7 @@ export interface Props {
const RelationshipOutgoing = React.memo(
({ id }: Props) => {
const { mode } = useTheme()
const { t } = useTranslation('componentRelationship')
const query = useRelationshipQuery({ id })
@ -37,8 +39,8 @@ const RelationshipOutgoing = React.memo(
}
},
onError: (err: any, { payload: { action } }) => {
haptics('Error')
toast({
displayMessage({
mode,
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(`${action}.function`)

View File

@ -1,7 +1,6 @@
import analytics from '@components/analytics'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { toast } from '@components/toast'
import { displayMessage } from '@components/Message'
import { useNavigation } from '@react-navigation/native'
import {
MutationVarsTimelineUpdateStatusProperty,
@ -32,7 +31,7 @@ const TimelineActions: React.FC<Props> = ({
}) => {
const navigation = useNavigation()
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { mode, theme } = useTheme()
const iconColor = theme.secondary
const iconColorAction = (state: boolean) =>
state ? theme.primary : theme.secondary
@ -84,8 +83,8 @@ const TimelineActions: React.FC<Props> = ({
},
onError: (err: any, params, oldData) => {
const correctParam = params as MutationVarsTimelineUpdateStatusProperty
haptics('Error')
toast({
displayMessage({
mode,
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(

View File

@ -1,8 +1,7 @@
import analytics from '@components/analytics'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { displayMessage } from '@components/Message'
import { ParseEmojis } from '@components/Parse'
import { toast } from '@components/toast'
import {
QueryKeyTimeline,
useTimelineMutation
@ -46,6 +45,7 @@ export interface Props {
const HeaderConversation = React.memo(
({ queryKey, conversation }: Props) => {
const { mode } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
@ -53,8 +53,8 @@ const HeaderConversation = React.memo(
queryClient,
onMutate: true,
onError: (err: any, _, oldData) => {
haptics('Error')
toast({
displayMessage({
mode,
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(`shared.header.conversation.delete.function`)
@ -65,8 +65,7 @@ const HeaderConversation = React.memo(
err.data.error &&
typeof err.data.error === 'string' && {
description: err.data.error
}),
autoHide: false
})
})
queryClient.setQueryData(queryKey, oldData)
}

View File

@ -2,9 +2,9 @@ import analytics from '@components/analytics'
import Button from '@components/Button'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { displayMessage } from '@components/Message'
import { ParseEmojis } from '@components/Parse'
import RelativeTime from '@components/RelativeTime'
import { toast } from '@components/toast'
import {
MutationVarsTimelineUpdateStatusProperty,
QueryKeyTimeline,
@ -61,8 +61,8 @@ const TimelinePoll: React.FC<Props> = ({
},
onError: (err: any, params) => {
const theParams = params as MutationVarsTimelineUpdateStatusProperty
haptics('Error')
toast({
displayMessage({
mode,
type: 'error',
message: t('common:toastMessage.error.message', {
// @ts-ignore

View File

@ -1,134 +0,0 @@
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { Platform, StyleSheet, Text, ToastAndroid, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import Toast from 'react-native-toast-message'
export interface Params {
type: 'success' | 'error' | 'warning'
position?: 'top' | 'bottom'
message: string
description?: string
autoHide?: boolean
onShow?: () => void
onHide?: () => void
}
type Config = {
type: Params['type']
position: Params['position']
text1: Params['message']
text2: Params['description']
}
const toast = ({
type,
position = 'top',
message,
description,
autoHide = true,
onShow,
onHide
}: Params) => {
switch (Platform.OS) {
case 'ios':
return Toast.show({
type,
position,
text1: message,
text2: description,
visibilityTime: 1500,
autoHide,
topOffset: 0,
bottomOffset: 0,
onShow: onShow,
onHide: onHide
})
case 'android':
return ToastAndroid.show(message, ToastAndroid.SHORT)
}
}
const ToastBase = ({ config }: { config: Config }) => {
const { theme } = useTheme()
const iconSet = {
success: 'CheckCircle',
error: 'XCircle',
warning: 'AlertCircle'
}
enum colorMapping {
success = 'blue',
error = 'red',
warning = 'secondary'
}
return (
<SafeAreaView
style={[
styles.base,
{ backgroundColor: theme.background, borderBottomColor: theme.primary }
]}
>
<View style={styles.container}>
<Icon
name={iconSet[config.type]}
size={StyleConstants.Font.Size.M}
color={theme[colorMapping[config.type]]}
/>
<View style={styles.texts}>
<Text
style={[styles.text1, { color: theme.primary }]}
numberOfLines={2}
>
{config.text1}
</Text>
{config.text2 && (
<Text
style={[styles.text2, { color: theme.secondary }]}
numberOfLines={2}
>
{config.text2}
</Text>
)}
</View>
</View>
</SafeAreaView>
)
}
const toastConfig = {
success: (config: Config) => <ToastBase config={config} />,
warning: (config: Config) => <ToastBase config={config} />,
error: (config: Config) => {
// Sentry.Native.captureException([config.text1, config.text2])
return <ToastBase config={config} />
}
}
const styles = StyleSheet.create({
base: {
width: '100%',
borderBottomWidth: 1
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: StyleConstants.Spacing.M
},
texts: {
marginLeft: StyleConstants.Spacing.S
},
text1: {
...StyleConstants.FontStyle.M
},
text2: {
...StyleConstants.FontStyle.S,
marginTop: StyleConstants.Spacing.XS
}
})
export { toast, toastConfig }

View File

@ -1,12 +1,12 @@
import analytics from '@components/analytics'
import haptics from '@components/haptics'
import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
import { toast } from '@components/toast'
import { displayMessage } from '@components/Message'
import {
MutationVarsTimelineUpdateAccountProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useQueryClient } from 'react-query'
@ -24,6 +24,7 @@ const ActionsAccount: React.FC<Props> = ({
account,
dismiss
}) => {
const { mode } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
@ -31,8 +32,8 @@ const ActionsAccount: React.FC<Props> = ({
queryClient,
onSuccess: (_, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
haptics('Success')
toast({
displayMessage({
mode,
type: 'success',
message: t('common:toastMessage.success.message', {
function: t(
@ -46,8 +47,8 @@ const ActionsAccount: React.FC<Props> = ({
},
onError: (err: any, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
haptics('Error')
toast({
displayMessage({
mode,
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(

View File

@ -2,11 +2,12 @@ import analytics from '@components/analytics'
import MenuContainer from '@components/Menu/Container'
import MenuHeader from '@components/Menu/Header'
import MenuRow from '@components/Menu/Row'
import { toast } from '@components/toast'
import { displayMessage } from '@components/Message'
import {
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Alert } from 'react-native'
@ -25,12 +26,14 @@ const ActionsDomain: React.FC<Props> = ({
domain,
dismiss
}) => {
const { mode } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
queryClient,
onSettled: () => {
toast({
displayMessage({
mode,
type: 'success',
message: t('common:toastMessage.success.message', {
function: t(`shared.header.actions.domain.block.function`)

View File

@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
import { Alert } from 'react-native'
import { useQueryClient } from 'react-query'
import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
import { toast } from '@components/toast'
import {
MutationVarsTimelineUpdateStatusProperty,
QueryKeyTimeline,
@ -12,6 +11,8 @@ import {
import analytics from '@components/analytics'
import { StackNavigationProp } from '@react-navigation/stack'
import deleteItem from '@utils/queryHooks/timeline/deleteItem'
import { displayMessage } from '@components/Message'
import { useTheme } from '@utils/styles/ThemeManager'
export interface Props {
navigation: StackNavigationProp<Nav.RootStackParamList, 'Screen-Actions'>
@ -28,6 +29,7 @@ const ActionsStatus: React.FC<Props> = ({
status,
dismiss
}) => {
const { mode } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
@ -39,7 +41,8 @@ const ActionsStatus: React.FC<Props> = ({
.payload
? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
: 'delete'
toast({
displayMessage({
mode,
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(`shared.header.actions.status.${theFunction}.function`)

View File

@ -4318,13 +4318,6 @@ escodegen@^1.11.1, escodegen@^1.14.1:
optionalDependencies:
source-map "~0.6.1"
eslint-plugin-prettier@^3.2.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
dependencies:
prettier-linter-helpers "^1.0.0"
esprima@^4.0.0, esprima@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@ -4826,11 +4819,6 @@ fast-deep-equal@^3.1.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-json-stable-stringify@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@ -8448,13 +8436,6 @@ prepend-http@^2.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
pretty-format@^24.0.0, pretty-format@^24.7.0, pretty-format@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@ -8677,6 +8658,14 @@ react-native-feather@^1.0.2:
resolved "https://registry.yarnpkg.com/react-native-feather/-/react-native-feather-1.0.2.tgz#9b02a32f313088084da5ebb0130659fa582edf43"
integrity sha512-SxMCMyGQeDtZtl2mhssoFTsfFKh/eH6S11+720BPGYYXz1iaYwQ4G/xqFxWOvQOQK2qtOTvkFOBlabbKwBMuhQ==
react-native-flash-message@^0.1.23:
version "0.1.23"
resolved "https://registry.yarnpkg.com/react-native-flash-message/-/react-native-flash-message-0.1.23.tgz#50a17201a2d9d6b22a2f174a97b22c30bff15638"
integrity sha512-T++KNGpIofXRqj3fT+/zJH/su1VgIjGcwiJerSvRsvEXwai1LdUl+O0tX7dz+Lgxi7yzswXKWcUQmY0dZrbG3g==
dependencies:
prop-types "^15.7.2"
react-native-iphone-x-helper "^1.3.0"
react-native-gesture-handler@~1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.9.0.tgz#e441b1c0277c3fd4ca3e5c58fdd681e2f0ceddf0"
@ -8750,14 +8739,6 @@ react-native-tab-view@^2.15.2:
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz#4bc7832d33a119306614efee667509672a7ee64e"
integrity sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg==
react-native-toast-message@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-1.4.3.tgz#7cbbb942071bb216b760ba5bb7a9b996baf874e0"
integrity sha512-0LG3bMO3TfjntwVt7O4Dr0zzAZDbtkEe5Lg1jGR1Mevm0KGKnr57DCVZYPsu6cCc1iAk9whyc+iTKbKUz/ko7A==
dependencies:
eslint-plugin-prettier "^3.2.0"
prop-types "^15.7.2"
react-native-unimodules@~0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/react-native-unimodules/-/react-native-unimodules-0.12.0.tgz#f1c92eae92212ca44078c0991c78fa4d13fda0f8"