zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Fix problems with BottomSheet and the report dialog (#3297)

Browse source 
* use @discord/bottom-sheet

* add @types/invariant

* some progress on keyboard dialog

* rework

rework

add a comment

use discord bottom sheet

* remove `@gorhom/bottom-sheet`

* remove android specific code

* organize imports
This commit is contained in:
Hailey 2024-03-20 17:26:38 -07:00 • committed by GitHub
parent c649ee1afa
commit ad3dd9f6dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 138 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/ReportDialog/index.tsx
View file

@ -1,22 +1,24 @@
import React from 'react'
import {View, Pressable} from 'react-native'
import {Pressable, View} from 'react-native'
import {Trans} from '@lingui/macro'
import {useMyLabelersQuery} from '#/state/queries/preferences'
import {ReportOption} from '#/lib/moderation/useReportOptions'
import {useMyLabelersQuery} from '#/state/queries/preferences'
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
import {atoms as a} from '#/alf'
import {Loader} from '#/components/Loader'
import * as Dialog from '#/components/Dialog'
import {Text} from '#/components/Typography'
import {AppBskyLabelerDefs} from '@atproto/api'
import {BottomSheetScrollViewMethods} from '@discord/bottom-sheet/src'
import {ReportDialogProps} from './types'
import {atoms as a} from '#/alf'
import * as Dialog from '#/components/Dialog'
import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
import {useOnKeyboardDidShow} from '#/components/hooks/useOnKeyboard'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
import {SelectLabelerView} from './SelectLabelerView'
import {SelectReportOptionView} from './SelectReportOptionView'
import {SubmitView} from './SubmitView'
import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
import {AppBskyLabelerDefs} from '@atproto/api'
import {ReportDialogProps} from './types'
export function ReportDialog(props: ReportDialogProps) {
return (
@ -36,10 +38,13 @@ function ReportDialogInner(props: ReportDialogProps) {
} = useMyLabelersQuery()
const isLoading = useDelayedLoading(500, isLabelerLoading)
const ref = React.useRef<BottomSheetScrollViewMethods>(null)
useOnKeyboardDidShow(() => {
ref.current?.scrollToEnd({animated: true})
})
return (
<Dialog.ScrollableInner
label="Report Dialog"
keyboardDismissMode="interactive">
<Dialog.ScrollableInner label="Report Dialog" ref={ref}>
{isLoading ? (
<View style={[a.align_center, {height: 100}]}>
<Loader size="xl" />
@ -55,8 +60,6 @@ function ReportDialogInner(props: ReportDialogProps) {
) : (
<ReportDialogLoaded labelers={labelers} {...props} />
)}
<Dialog.Close />
</Dialog.ScrollableInner>
)
}