Use non-reactive callbacks for some methods (#1948)
* Use non-reactive callbacks for some methods * Remove unnecessary state * Use non-reactive callbacks for modalszio/stable
parent
a10adf8908
commit
a8aed2c38e
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||
|
||||
interface Lightbox {
|
||||
name: string
|
||||
|
@ -42,18 +43,15 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
|
|||
null,
|
||||
)
|
||||
|
||||
const openLightbox = React.useCallback(
|
||||
(lightbox: Lightbox) => {
|
||||
setActiveLightbox(lightbox)
|
||||
},
|
||||
[setActiveLightbox],
|
||||
)
|
||||
const openLightbox = useNonReactiveCallback((lightbox: Lightbox) => {
|
||||
setActiveLightbox(lightbox)
|
||||
})
|
||||
|
||||
const closeLightbox = React.useCallback(() => {
|
||||
const closeLightbox = useNonReactiveCallback(() => {
|
||||
let wasActive = !!activeLightbox
|
||||
setActiveLightbox(null)
|
||||
return wasActive
|
||||
}, [setActiveLightbox, activeLightbox])
|
||||
})
|
||||
|
||||
const state = React.useMemo(
|
||||
() => ({
|
||||
|
|
|
@ -5,6 +5,7 @@ import {Image as RNImage} from 'react-native-image-crop-picker'
|
|||
|
||||
import {ImageModel} from '#/state/models/media/image'
|
||||
import {GalleryModel} from '#/state/models/media/gallery'
|
||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||
|
||||
export interface ConfirmModal {
|
||||
name: 'confirm'
|
||||
|
@ -236,43 +237,33 @@ export let unstable__closeModal: () => boolean = () => {
|
|||
}
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [isModalActive, setIsModalActive] = React.useState(false)
|
||||
const [activeModals, setActiveModals] = React.useState<Modal[]>([])
|
||||
|
||||
const openModal = React.useCallback(
|
||||
(modal: Modal) => {
|
||||
setActiveModals(activeModals => [...activeModals, modal])
|
||||
setIsModalActive(true)
|
||||
},
|
||||
[setIsModalActive, setActiveModals],
|
||||
)
|
||||
const openModal = useNonReactiveCallback((modal: Modal) => {
|
||||
setActiveModals(modals => [...modals, modal])
|
||||
})
|
||||
|
||||
const closeModal = React.useCallback(() => {
|
||||
let totalActiveModals = 0
|
||||
let wasActive = isModalActive
|
||||
setActiveModals(activeModals => {
|
||||
activeModals = activeModals.slice(0, -1)
|
||||
totalActiveModals = activeModals.length
|
||||
return activeModals
|
||||
const closeModal = useNonReactiveCallback(() => {
|
||||
let wasActive = activeModals.length > 0
|
||||
setActiveModals(modals => {
|
||||
return modals.slice(0, -1)
|
||||
})
|
||||
setIsModalActive(totalActiveModals > 0)
|
||||
return wasActive
|
||||
}, [setIsModalActive, setActiveModals, isModalActive])
|
||||
})
|
||||
|
||||
const closeAllModals = React.useCallback(() => {
|
||||
const closeAllModals = useNonReactiveCallback(() => {
|
||||
setActiveModals([])
|
||||
setIsModalActive(false)
|
||||
}, [setActiveModals, setIsModalActive])
|
||||
})
|
||||
|
||||
unstable__openModal = openModal
|
||||
unstable__closeModal = closeModal
|
||||
|
||||
const state = React.useMemo(
|
||||
() => ({
|
||||
isModalActive,
|
||||
isModalActive: activeModals.length > 0,
|
||||
activeModals,
|
||||
}),
|
||||
[isModalActive, activeModals],
|
||||
[activeModals],
|
||||
)
|
||||
|
||||
const methods = React.useMemo(
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import {AppBskyEmbedRecord} from '@atproto/api'
|
||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||
|
||||
export interface ComposerOptsPostRef {
|
||||
uri: string
|
||||
|
@ -47,18 +48,23 @@ const controlsContext = React.createContext<ControlsContext>({
|
|||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState<StateContext>()
|
||||
|
||||
const openComposer = useNonReactiveCallback((opts: ComposerOpts) => {
|
||||
setState(opts)
|
||||
})
|
||||
|
||||
const closeComposer = useNonReactiveCallback(() => {
|
||||
let wasOpen = !!state
|
||||
setState(undefined)
|
||||
return wasOpen
|
||||
})
|
||||
|
||||
const api = React.useMemo(
|
||||
() => ({
|
||||
openComposer(opts: ComposerOpts) {
|
||||
setState(opts)
|
||||
},
|
||||
closeComposer() {
|
||||
let wasOpen = !!state
|
||||
setState(undefined)
|
||||
return wasOpen
|
||||
},
|
||||
openComposer,
|
||||
closeComposer,
|
||||
}),
|
||||
[setState, state],
|
||||
[openComposer, closeComposer],
|
||||
)
|
||||
|
||||
return (
|
||||
|
|
Loading…
Reference in New Issue