bsky-app/src/state/shell/composer.tsx
Hailey dda5ca27fe
add expandable context to composer when replying to post (#2419)
* add expand replyTo text with animation

* add images, quote to replyTo

* support withmedia

* adjust layout

* add embed to all needed openComposer calls

* adjust gap

* organize imports
2024-01-08 21:37:12 -08:00

87 lines
2 KiB
TypeScript

import React from 'react'
import {AppBskyEmbedRecord} from '@atproto/api'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
export interface ComposerOptsPostRef {
uri: string
cid: string
text: string
author: {
handle: string
displayName?: string
avatar?: string
}
embed?: AppBskyEmbedRecord.ViewRecord['embed']
}
export interface ComposerOptsQuote {
uri: string
cid: string
text: string
indexedAt: string
author: {
did: string
handle: string
displayName?: string
avatar?: string
}
embeds?: AppBskyEmbedRecord.ViewRecord['embeds']
}
export interface ComposerOpts {
replyTo?: ComposerOptsPostRef
onPost?: () => void
quote?: ComposerOptsQuote
mention?: string // handle of user to mention
openPicker?: (pos: DOMRect | undefined) => void
}
type StateContext = ComposerOpts | undefined
type ControlsContext = {
openComposer: (opts: ComposerOpts) => void
closeComposer: () => boolean
}
const stateContext = React.createContext<StateContext>(undefined)
const controlsContext = React.createContext<ControlsContext>({
openComposer(_opts: ComposerOpts) {},
closeComposer() {
return false
},
})
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,
closeComposer,
}),
[openComposer, closeComposer],
)
return (
<stateContext.Provider value={state}>
<controlsContext.Provider value={api}>
{children}
</controlsContext.Provider>
</stateContext.Provider>
)
}
export function useComposerState() {
return React.useContext(stateContext)
}
export function useComposerControls() {
return React.useContext(controlsContext)
}