Fix toast positioning (close #9)
parent
c86ff23757
commit
0e6237e58c
|
@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react'
|
|||
import * as view from './view/index'
|
||||
import {RootStoreModel, setupState, RootStoreProvider} from './state'
|
||||
import {DesktopWebShell} from './view/shell/desktop-web'
|
||||
import Toast from './view/com/util/Toast'
|
||||
import Toast from 'react-native-root-toast'
|
||||
|
||||
function App() {
|
||||
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
|
||||
|
|
|
@ -14,7 +14,7 @@ import LinearGradient from 'react-native-linear-gradient'
|
|||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
|
||||
import {Autocomplete} from './Autocomplete'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import ProgressCircle from '../util/ProgressCircle'
|
||||
import {TextLink} from '../util/Link'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
|
@ -106,13 +106,7 @@ export const ComposePost = observer(function ComposePost({
|
|||
}
|
||||
onPost?.()
|
||||
onClose()
|
||||
Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`, {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
shadow: true,
|
||||
animation: true,
|
||||
hideOnPress: true,
|
||||
})
|
||||
Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`)
|
||||
}
|
||||
const onSelectAutocompleteItem = (item: string) => {
|
||||
setText(replaceTextAutocompletePrefix(text, item))
|
||||
|
|
|
@ -14,7 +14,7 @@ import _omit from 'lodash.omit'
|
|||
import {ErrorScreen} from '../util/ErrorScreen'
|
||||
import {Link} from '../util/Link'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {useStores} from '../../../state'
|
||||
import * as apilib from '../../../state/lib/api'
|
||||
import {
|
||||
|
@ -63,10 +63,7 @@ export const SuggestedFollows = observer(
|
|||
setFollows({[item.did]: res.uri, ...follows})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
Toast.show('An issue occurred, please try again.', {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
}
|
||||
}
|
||||
const onPressUnfollow = async (item: SuggestedActor) => {
|
||||
|
@ -75,10 +72,7 @@ export const SuggestedFollows = observer(
|
|||
setFollows(_omit(follows, [item.did]))
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
Toast.show('An issue occurred, please try again.', {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useState} from 'react'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
|
@ -71,9 +71,7 @@ export function Component({}: {}) {
|
|||
},
|
||||
)
|
||||
.catch(e => console.error(e)) // an error here is not critical
|
||||
Toast.show('Scene created', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Scene created')
|
||||
store.shell.closeModal()
|
||||
store.nav.navigate(`/profile/${fullHandle}`)
|
||||
} catch (e: any) {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useState} from 'react'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
|
||||
|
@ -52,9 +52,7 @@ export function Component({
|
|||
}
|
||||
},
|
||||
)
|
||||
Toast.show('Profile updated', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Profile updated')
|
||||
onUpdate?.()
|
||||
store.shell.closeModal()
|
||||
} catch (e: any) {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {useState, useEffect, useMemo} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
|
@ -83,10 +83,7 @@ export const Component = observer(function Component({
|
|||
follow.declaration.cid,
|
||||
)
|
||||
setCreatedInvites({[follow.did]: assertionUri, ...createdInvites})
|
||||
Toast.show('Invite sent', {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Invite sent')
|
||||
} catch (e) {
|
||||
setError('There was an issue with the invite. Please try again.')
|
||||
console.error(e)
|
||||
|
@ -119,10 +116,7 @@ export const Component = observer(function Component({
|
|||
[assertion.uri]: true,
|
||||
...deletedPendingInvites,
|
||||
})
|
||||
Toast.show('Invite removed', {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Invite removed')
|
||||
} catch (e) {
|
||||
setError('There was an issue with the invite. Please try again.')
|
||||
console.error(e)
|
||||
|
|
|
@ -7,7 +7,7 @@ import {NotificationsViewItemModel} from '../../../state/models/notifications-vi
|
|||
import {ConfirmModel} from '../../../state/models/shell-ui'
|
||||
import {useStores} from '../../../state'
|
||||
import {ProfileCard} from '../profile/ProfileCard'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {s, colors, gradients} from '../../lib/styles'
|
||||
|
||||
export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
|
||||
|
@ -46,10 +46,7 @@ export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
|
|||
},
|
||||
})
|
||||
store.me.refreshMemberships()
|
||||
Toast.show('Invite accepted', {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Invite accepted')
|
||||
setConfirmationUri(uri)
|
||||
}
|
||||
return (
|
||||
|
|
|
@ -8,7 +8,7 @@ import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
|
|||
import {Link} from '../util/Link'
|
||||
import {RichText} from '../util/RichText'
|
||||
import {PostDropdownBtn} from '../util/DropdownBtn'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {ago, pluralize} from '../../../lib/strings'
|
||||
|
@ -79,15 +79,11 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
item.delete().then(
|
||||
() => {
|
||||
setDeleted(true)
|
||||
Toast.show('Post deleted', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Post deleted')
|
||||
},
|
||||
e => {
|
||||
console.error(e)
|
||||
Toast.show('Failed to delete post, please try again', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Failed to delete post, please try again')
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ import {UserInfoText} from '../util/UserInfoText'
|
|||
import {PostMeta} from '../util/PostMeta'
|
||||
import {PostCtrls} from '../util/PostCtrls'
|
||||
import {RichText} from '../util/RichText'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {useStores} from '../../../state'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
|
@ -99,15 +99,11 @@ export const Post = observer(function Post({uri}: {uri: string}) {
|
|||
item.delete().then(
|
||||
() => {
|
||||
setDeleted(true)
|
||||
Toast.show('Post deleted', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Post deleted')
|
||||
},
|
||||
e => {
|
||||
console.error(e)
|
||||
Toast.show('Failed to delete post, please try again', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Failed to delete post, please try again')
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ import {PostMeta} from '../util/PostMeta'
|
|||
import {PostCtrls} from '../util/PostCtrls'
|
||||
import {PostEmbeds} from '../util/PostEmbeds'
|
||||
import {RichText} from '../util/RichText'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {useStores} from '../../../state'
|
||||
|
@ -70,15 +70,11 @@ export const FeedItem = observer(function FeedItem({
|
|||
item.delete().then(
|
||||
() => {
|
||||
setDeleted(true)
|
||||
Toast.show('Post deleted', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Post deleted')
|
||||
},
|
||||
e => {
|
||||
console.error(e)
|
||||
Toast.show('Failed to delete post, please try again', {
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show('Failed to delete post, please try again')
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
@ -14,9 +14,8 @@ import {
|
|||
import {pluralize} from '../../../lib/strings'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {getGradient} from '../../lib/asset-gen'
|
||||
import {MagnifyingGlassIcon} from '../../lib/icons'
|
||||
import {DropdownBtn, DropdownItem} from '../util/DropdownBtn'
|
||||
import Toast from '../util/Toast'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
|
||||
import {RichText} from '../util/RichText'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
|
@ -49,10 +48,6 @@ export const ProfileHeader = observer(function ProfileHeader({
|
|||
`${view.myState.follow ? 'Following' : 'No longer following'} ${
|
||||
view.displayName || view.handle
|
||||
}`,
|
||||
{
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
},
|
||||
)
|
||||
},
|
||||
err => console.error('Failed to toggle follow', err),
|
||||
|
@ -88,10 +83,7 @@ export const ProfileHeader = observer(function ProfileHeader({
|
|||
did: store.me.did || '',
|
||||
rkey: new AtUri(view.myState.member).rkey,
|
||||
})
|
||||
Toast.show(`Scene left`, {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show(`Scene left`)
|
||||
}
|
||||
onRefreshAll()
|
||||
}
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
import Toast from 'react-native-root-toast'
|
||||
export default Toast
|
|
@ -1,62 +1,11 @@
|
|||
/*
|
||||
* Note: the dataSet properties are used to leverage custom CSS in public/index.html
|
||||
*/
|
||||
import Toast from 'react-native-root-toast'
|
||||
|
||||
import React, {useState, useEffect} from 'react'
|
||||
// @ts-ignore no declarations available -prf
|
||||
import {Text, View} from 'react-native-web'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
|
||||
interface ActiveToast {
|
||||
text: string
|
||||
}
|
||||
type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
|
||||
|
||||
// globals
|
||||
// =
|
||||
let globalSetActiveToast: GlobalSetActiveToast | undefined
|
||||
let toastTimeout: NodeJS.Timeout | undefined
|
||||
|
||||
// components
|
||||
// =
|
||||
type ToastContainerProps = {}
|
||||
const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
|
||||
const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
|
||||
useEffect(() => {
|
||||
globalSetActiveToast = (t: ActiveToast | undefined) => {
|
||||
setActiveToast(t)
|
||||
}
|
||||
export function show(message: string) {
|
||||
Toast.show(message, {
|
||||
duration: Toast.durations.LONG,
|
||||
position: 50,
|
||||
shadow: true,
|
||||
animation: true,
|
||||
hideOnPress: true,
|
||||
})
|
||||
return (
|
||||
<>
|
||||
{activeToast && (
|
||||
<View dataSet={{'toast-container': 1}}>
|
||||
<FontAwesomeIcon icon="check" size={24} />
|
||||
<Text>{activeToast.text}</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// exports
|
||||
// =
|
||||
export default {
|
||||
show(text: string, _opts: any) {
|
||||
console.log('TODO: toast', text)
|
||||
if (toastTimeout) {
|
||||
clearTimeout(toastTimeout)
|
||||
}
|
||||
globalSetActiveToast?.({text})
|
||||
toastTimeout = setTimeout(() => {
|
||||
globalSetActiveToast?.(undefined)
|
||||
}, 2e3)
|
||||
},
|
||||
positions: {
|
||||
TOP: 0,
|
||||
},
|
||||
durations: {
|
||||
LONG: 0,
|
||||
},
|
||||
ToastContainer,
|
||||
}
|
||||
|
|
|
@ -47,6 +47,7 @@ export const Home = observer(function Home({
|
|||
if (!visible) {
|
||||
return
|
||||
}
|
||||
|
||||
if (hasSetup) {
|
||||
console.log('Updating home feed')
|
||||
defaultFeedView.update()
|
||||
|
|
|
@ -16,7 +16,7 @@ import {ErrorScreen} from '../com/util/ErrorScreen'
|
|||
import {ErrorMessage} from '../com/util/ErrorMessage'
|
||||
import {EmptyState} from '../com/util/EmptyState'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import Toast from '../com/util/Toast'
|
||||
import * as Toast from '../com/util/Toast'
|
||||
import {s, colors} from '../lib/styles'
|
||||
|
||||
const LOADING_ITEM = {_reactKey: '__loading__'}
|
||||
|
@ -78,10 +78,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
|
|||
`You'll be able to invite them again if you change your mind.`,
|
||||
async () => {
|
||||
await uiState.members.removeMember(membership.did)
|
||||
Toast.show(`User removed`, {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
})
|
||||
Toast.show(`User removed`)
|
||||
},
|
||||
),
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue