Update ModerationDetailsDialog

src/components/ModerationDetailsDialog.tsx

@@ -7,29 +7,39 @@ import {ModerationCause} from '@atproto/api'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
-import {GlobalDialogProps} from '#/components/dialogs'
 import {Button} from '#/components/Button'
 import {InlineLink} from '#/components/Link'
 import {useLabelStrings} from '#/lib/moderation/useLabelStrings'
 import {listUriToHref} from '#/lib/strings/url-helpers'
 
+export {useDialogControl as useModerationDetailsDialogControl} from '#/components/Dialog'
+
 export interface ModerationDetailsDialogProps {
+  control: Dialog.DialogOuterProps['control']
   context: 'account' | 'content'
   modcause: ModerationCause
 }
 
-export function ModerationDetailsDialog({
+export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
-  params,
+  return (
-  cleanup,
+    <Dialog.Outer control={props.control}>
-}: GlobalDialogProps<ModerationDetailsDialogProps>) {
+      <Dialog.Handle />
+
+      <ModerationDetailsDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function ModerationDetailsDialogInner({
+  context,
+  modcause,
+}: ModerationDetailsDialogProps & {
+  control: Dialog.DialogOuterProps['control']
+}) {
   const {_} = useLingui()
   const labelStrings = useLabelStrings()
   const control = Dialog.useDialogControl()
   const {gtMobile} = useBreakpoints()
-  const {context, modcause} = params
-
-  // REQUIRED CLEANUP
-  const onClose = React.useCallback(() => cleanup(), [cleanup])
 
   let name
   let description
@@ -99,9 +109,6 @@ export function ModerationDetailsDialog({
   }
 
   return (
-    <Dialog.Outer defaultOpen control={control} onClose={onClose}>
-      <Dialog.Handle />
-
     <Dialog.ScrollableInner
       accessibilityDescribedBy="dialog-description"
       accessibilityLabelledBy="dialog-title">
@@ -123,6 +130,5 @@ export function ModerationDetailsDialog({
         </Button>
       </View>
     </Dialog.ScrollableInner>
-    </Dialog.Outer>
   )
 }

src/components/dialogs/Context.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import * as Dialog from '#/components/Dialog'
+
+type Control = Dialog.DialogOuterProps['control']
+
+type ControlsContext = {
+  mutedWordsDialogControl: Control
+}
+
+const ControlsContext = React.createContext({
+  mutedWordsDialogControl: {} as Control,
+})
+
+export function useGlobalDialogsControlContext() {
+  return React.useContext(ControlsContext)
+}
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const mutedWordsDialogControl = Dialog.useDialogControl()
+  const ctx = React.useMemo<ControlsContext>(
+    () => ({mutedWordsDialogControl}),
+    [mutedWordsDialogControl],
+  )
+
+  return (
+    <ControlsContext.Provider value={ctx}>{children}</ControlsContext.Provider>
+  )
+}

src/state/dialogs/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {DialogControlProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs'
+import {Provider as GlobalDialogsProviderV2} from '#/components/dialogs/Context'
 
 const DialogContext = React.createContext<{
   activeDialogs: React.MutableRefObject<
@@ -28,7 +29,7 @@ export function useDialogStateControlContext() {
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const activeDialogs = React.useRef<
-    Map<string, React.MutableRefObject<DialogControlProps<{}>>>
+    Map<string, React.MutableRefObject<DialogControlProps>>
   >(new Map())
   const closeAllDialogs = React.useCallback(() => {
     activeDialogs.current.forEach(dialog => dialog.current.close())
@@ -38,7 +39,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
     <DialogContext.Provider value={context}>
       <DialogControlContext.Provider value={controls}>
-        <GlobalDialogsProvider>{children}</GlobalDialogsProvider>
+        <GlobalDialogsProvider>
+          <GlobalDialogsProviderV2>{children}</GlobalDialogsProviderV2>
+        </GlobalDialogsProvider>
       </DialogControlContext.Provider>
     </DialogContext.Provider>
   )

src/view/com/util/moderation/ContentHider.tsx

@@ -11,8 +11,10 @@ import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Shield_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Text} from '#/components/Typography'
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function ContentHider({
   testID,
@@ -32,7 +34,7 @@ export function ContentHider({
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
   const {gtMobile} = useBreakpoints()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
 
   const blur = modui?.blurs[0]
   const desc = useModerationCauseDescription(blur, 'content')
@@ -47,6 +49,12 @@ export function ContentHider({
 
   return (
     <View testID={testID} style={[a.overflow_hidden, style]}>
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={blur}
+      />
+
       <View style={[a.flex_col, a.gap_xs]}>
         <Button
           variant="solid"
@@ -57,10 +65,7 @@ export function ContentHider({
             if (!modui.noOverride) {
               setOverride(v => !v)
             } else {
-              openDialog(ModerationDetailsDialog, {
+              control.open()
-                context: 'content',
-                modcause: blur,
-              })
             }
           }}
           label={desc.name}
@@ -83,10 +88,7 @@ export function ContentHider({
             variant="ghost"
             size="tiny"
             onPress={() => {
-              openDialog(ModerationDetailsDialog, {
+              control.open()
-                context: 'content',
-                modcause: blur,
-              })
             }}
             label={_(msg`Learn more`)}>
             <ButtonText

src/view/com/util/moderation/PostAlerts.tsx

@@ -11,8 +11,10 @@ import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Shield_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function PostAlerts({
   modui,
@@ -43,10 +45,11 @@ export function PostAlerts({
 }
 
 function PostInform({cause}: {cause: ModerationCause}) {
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'content')
 
   return (
+    <>
       <Button
         label={desc.name}
         variant="solid"
@@ -54,10 +57,7 @@ function PostInform({cause}: {cause: ModerationCause}) {
         size="tiny"
         shape="default"
         onPress={() => {
-        openDialog(ModerationDetailsDialog, {
+          control.open()
-          context: 'content',
-          modcause: cause,
-        })
         }}>
         <ButtonIcon
           icon={cause.type === 'muted' ? EyeSlash : CircleInfo}
@@ -65,15 +65,23 @@ function PostInform({cause}: {cause: ModerationCause}) {
         />{' '}
         <ButtonText>{desc.name}</ButtonText>
       </Button>
+
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={cause}
+      />
+    </>
   )
 }
 
 function PostAlert({cause}: {cause: ModerationCause}) {
   const t = useTheme()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'content')
 
   return (
+    <>
       <Button
         label={desc.name}
         variant="solid"
@@ -81,10 +89,7 @@ function PostAlert({cause}: {cause: ModerationCause}) {
         size="small"
         shape="default"
         onPress={() => {
-        openDialog(ModerationDetailsDialog, {
+          control.open()
-          context: 'content',
-          modcause: cause,
-        })
         }}>
         <ButtonIcon icon={Shield} position="left" />
         <ButtonText style={[a.flex_1, a.text_left]}>
@@ -95,5 +100,12 @@ function PostAlert({cause}: {cause: ModerationCause}) {
           </Text>
         </ButtonText>
       </Button>
+
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={cause}
+      />
+    </>
   )
 }

src/view/com/util/moderation/PostHider.tsx

@@ -11,8 +11,10 @@ import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 interface Props extends ComponentProps<typeof Link> {
   iconSize: number
@@ -33,7 +35,7 @@ export function PostHider({
   const pal = usePalette('default')
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const blur = modui.blurs[0]
   const desc = useModerationCauseDescription(blur, 'content')
 
@@ -69,12 +71,14 @@ export function PostHider({
         override ? {paddingBottom: 0} : undefined,
         pal.view,
       ]}>
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={blur}
+      />
       <Pressable
         onPress={() => {
-          openDialog(ModerationDetailsDialog, {
+          control.open()
-            context: 'content',
-            modcause: blur,
-          })
         }}
         accessibilityRole="button"
         accessibilityLabel={_(msg`Learn more about this warning`)}

src/view/com/util/moderation/ProfileHeaderAlerts.tsx

@@ -11,8 +11,10 @@ import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Shield_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function ProfileHeaderAlerts({
   moderation,
@@ -43,10 +45,11 @@ export function ProfileHeaderAlerts({
 }
 
 function ProfileInform({cause}: {cause: ModerationCause}) {
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'account')
 
   return (
+    <>
       <Button
         label={desc.name}
         variant="solid"
@@ -54,10 +57,7 @@ function ProfileInform({cause}: {cause: ModerationCause}) {
         size="tiny"
         shape="default"
         onPress={() => {
-        openDialog(ModerationDetailsDialog, {
+          control.open()
-          context: 'account',
-          modcause: cause,
-        })
         }}>
         <ButtonIcon
           icon={cause.type === 'muted' ? EyeSlash : CircleInfo}
@@ -65,15 +65,23 @@ function ProfileInform({cause}: {cause: ModerationCause}) {
         />{' '}
         <ButtonText>{desc.name}</ButtonText>
       </Button>
+
+      <ModerationDetailsDialog
+        control={control}
+        context="account"
+        modcause={cause}
+      />
+    </>
   )
 }
 
 function ProfileAlert({cause}: {cause: ModerationCause}) {
   const t = useTheme()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'account')
 
   return (
+    <>
       <Button
         label={desc.name}
         variant="solid"
@@ -81,10 +89,7 @@ function ProfileAlert({cause}: {cause: ModerationCause}) {
         size="small"
         shape="default"
         onPress={() => {
-        openDialog(ModerationDetailsDialog, {
+          control.open()
-          context: 'account',
-          modcause: cause,
-        })
         }}>
         <ButtonIcon icon={Shield} position="left" />
         <ButtonText style={[a.flex_1, a.text_left]}>
@@ -95,5 +100,11 @@ function ProfileAlert({cause}: {cause: ModerationCause}) {
           </Text>
         </ButtonText>
       </Button>
+      <ModerationDetailsDialog
+        control={control}
+        context="account"
+        modcause={cause}
+      />
+    </>
   )
 }

src/view/com/util/moderation/ScreenHider.tsx

@@ -23,8 +23,10 @@ import {useModerationCauseDescription} from '#/lib/moderation/useModerationCause
 import {s} from '#/lib/styles'
 import {CenteredView} from '../Views'
 
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function ScreenHider({
   testID,
@@ -46,7 +48,7 @@ export function ScreenHider({
   const [override, setOverride] = React.useState(false)
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const blur = modui.blurs[0]
   const desc = useModerationCauseDescription(blur, 'content')
 
@@ -95,10 +97,7 @@ export function ScreenHider({
             </Text>
             <TouchableWithoutFeedback
               onPress={() => {
-                openDialog(ModerationDetailsDialog, {
+                control.open()
-                  context: 'account',
-                  modcause: blur,
-                })
               }}
               accessibilityRole="button"
               accessibilityLabel={_(msg`Learn more about this warning`)}
@@ -107,6 +106,12 @@ export function ScreenHider({
                 <Trans>Learn More</Trans>
               </Text>
             </TouchableWithoutFeedback>
+
+            <ModerationDetailsDialog
+              control={control}
+              context="account"
+              modcause={blur}
+            />
           </>
         )}{' '}
       </Text>