Fix jumpy modal regression (#1945)
parent
c03c744008
commit
3043b32468
|
@ -0,0 +1,23 @@
|
|||
import {useCallback, useInsertionEffect, useRef} from 'react'
|
||||
|
||||
// This should be used sparingly. It erases reactivity, i.e. when the inputs
|
||||
// change, the function itself will remain the same. This means that if you
|
||||
// use this at a higher level of your tree, and then some state you read in it
|
||||
// changes, there is no mechanism for anything below in the tree to "react"
|
||||
// to this change (e.g. by knowing to call your function again).
|
||||
//
|
||||
// Also, you should avoid calling the returned function during rendering
|
||||
// since the values captured by it are going to lag behind.
|
||||
export function useNonReactiveCallback<T extends Function>(fn: T): T {
|
||||
const ref = useRef(fn)
|
||||
useInsertionEffect(() => {
|
||||
ref.current = fn
|
||||
}, [fn])
|
||||
return useCallback(
|
||||
(...args: any) => {
|
||||
const latestFn = ref.current
|
||||
return latestFn(...args)
|
||||
},
|
||||
[ref],
|
||||
) as unknown as T
|
||||
}
|
|
@ -9,6 +9,7 @@ import {navigate} from '../../../Navigation'
|
|||
import once from 'lodash.once'
|
||||
|
||||
import {useModals, useModalControls} from '#/state/modals'
|
||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||
import * as ConfirmModal from './Confirm'
|
||||
import * as EditProfileModal from './EditProfile'
|
||||
import * as ProfilePreviewModal from './ProfilePreview'
|
||||
|
@ -50,12 +51,15 @@ export function ModalsContainer() {
|
|||
|
||||
const navigateOnce = once(navigate)
|
||||
|
||||
const onBottomSheetAnimate = (_fromIndex: number, toIndex: number) => {
|
||||
if (activeModal?.name === 'profile-preview' && toIndex === 1) {
|
||||
// begin loading the profile screen behind the scenes
|
||||
navigateOnce('Profile', {name: activeModal.did})
|
||||
}
|
||||
}
|
||||
// It seems like the bottom sheet bugs out when this callback changes.
|
||||
const onBottomSheetAnimate = useNonReactiveCallback(
|
||||
(_fromIndex: number, toIndex: number) => {
|
||||
if (activeModal?.name === 'profile-preview' && toIndex === 1) {
|
||||
// begin loading the profile screen behind the scenes
|
||||
navigateOnce('Profile', {name: activeModal.did})
|
||||
}
|
||||
},
|
||||
)
|
||||
const onBottomSheetChange = async (snapPoint: number) => {
|
||||
if (snapPoint === -1) {
|
||||
closeModal()
|
||||
|
|
Loading…
Reference in New Issue