Add Hider component

src/components/moderation/Hider.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import {ModerationUI} from '@atproto/api'
+
+import {
+  ModerationCauseDescription,
+  useModerationCauseDescription,
+} from '#/lib/moderation/useModerationCauseDescription'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+type Context = {
+  isContentVisible: boolean
+  setIsContentVisible: (show: boolean) => void
+  info: ModerationCauseDescription
+  showInfoDialog: () => void
+  meta: {
+    isNoPwi: boolean
+    noOverride: boolean
+  }
+}
+
+const Context = React.createContext<Context>({
+  isContentVisible: false,
+  setIsContentVisible: () => {},
+  // @ts-ignore
+  info: {},
+  showInfoDialog: () => {},
+  meta: {
+    isNoPwi: false,
+    noOverride: false,
+  },
+})
+
+export function Outer({
+  modui,
+  children,
+}: React.PropsWithChildren<{
+  modui: ModerationUI
+}>) {
+  const control = useModerationDetailsDialogControl()
+  const blur = modui.blurs[0]
+  const [isContentVisible, setIsContentVisible] = React.useState(!blur)
+  const info = useModerationCauseDescription(blur)
+
+  const meta = React.useMemo(
+    () => ({
+      isNoPwi: !!modui.blurs.find(
+        cause =>
+          cause.type === 'label' &&
+          cause.labelDef.identifier === '!no-unauthenticated',
+      ),
+      noOverride: modui.noOverride,
+    }),
+    [modui],
+  )
+
+  const showInfoDialog = React.useCallback(() => {
+    control.open()
+  }, [control])
+
+  const onSetContentVisible = React.useCallback(
+    (show: boolean) => {
+      if (meta.noOverride) return
+      setIsContentVisible(show)
+    },
+    [setIsContentVisible, meta],
+  )
+
+  const ctx = React.useMemo(
+    () => ({
+      isContentVisible,
+      setIsContentVisible: onSetContentVisible,
+      showInfoDialog,
+      info,
+      meta,
+    }),
+    [isContentVisible, onSetContentVisible, info, meta, showInfoDialog],
+  )
+
+  return (
+    <Context.Provider value={ctx}>
+      {children}
+      <ModerationDetailsDialog control={control} modcause={blur} />
+    </Context.Provider>
+  )
+}
+
+export function Content({
+  children,
+}: {
+  children: (context: Context) => React.ReactNode
+}) {
+  const ctx = React.useContext(Context)
+  const child = React.useMemo(() => children(ctx), [ctx, children])
+  return ctx.isContentVisible ? child : null
+}
+
+export function Mask({
+  children,
+}: {
+  children: (context: Context) => React.ReactNode
+}) {
+  const ctx = React.useContext(Context)
+  const child = React.useMemo(() => children(ctx), [ctx, children])
+  return !ctx.isContentVisible ? child : null
+}

src/view/screens/ProfileList.tsx

@@ -71,7 +71,7 @@ import {CenteredView} from 'view/com/util/Views'
 import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
-import {ScreenHider} from '#/components/moderation/ScreenHider'
+import * as Hider from '#/components/moderation/Hider'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
@@ -189,92 +189,98 @@ function ProfileListScreenLoaded({
     return <Header rkey={rkey} list={list} preferences={preferences} />
   }, [rkey, list, preferences])
 
-  if (isHidden) {
-    return <ListHiddenScreen list={list} preferences={preferences} />
-  }
-
   if (isCurateList) {
     return (
-      <ScreenHider
-        screenDescription={'list'}
-        modui={moderation.ui('contentView')}>
-        <View style={s.hContentRegion}>
-          <PagerWithHeader
-            items={SECTION_TITLES_CURATE}
-            isHeaderReady={true}
-            renderHeader={renderHeader}
-            onCurrentPageSelected={onCurrentPageSelected}>
-            {({headerHeight, scrollElRef, isFocused}) => (
-              <FeedSection
-                ref={feedSectionRef}
-                feed={`list|${uri}`}
-                scrollElRef={scrollElRef as ListRef}
-                headerHeight={headerHeight}
-                isFocused={isScreenFocused && isFocused}
+      <Hider.Outer modui={moderation.ui('contentView')}>
+        <Hider.Mask>
+          {() => <ListHiddenScreen list={list} preferences={preferences} />}
+        </Hider.Mask>
+        <Hider.Content>
+          {() => (
+            <View style={s.hContentRegion}>
+              <PagerWithHeader
+                items={SECTION_TITLES_CURATE}
+                isHeaderReady={true}
+                renderHeader={renderHeader}
+                onCurrentPageSelected={onCurrentPageSelected}>
+                {({headerHeight, scrollElRef, isFocused}) => (
+                  <FeedSection
+                    ref={feedSectionRef}
+                    feed={`list|${uri}`}
+                    scrollElRef={scrollElRef as ListRef}
+                    headerHeight={headerHeight}
+                    isFocused={isScreenFocused && isFocused}
+                  />
+                )}
+                {({headerHeight, scrollElRef}) => (
+                  <AboutSection
+                    ref={aboutSectionRef}
+                    scrollElRef={scrollElRef as ListRef}
+                    list={list}
+                    onPressAddUser={onPressAddUser}
+                    headerHeight={headerHeight}
+                  />
+                )}
+              </PagerWithHeader>
+              <FAB
+                testID="composeFAB"
+                onPress={() => openComposer({})}
+                icon={
+                  <ComposeIcon2
+                    strokeWidth={1.5}
+                    size={29}
+                    style={{color: 'white'}}
+                  />
+                }
+                accessibilityRole="button"
+                accessibilityLabel={_(msg`New post`)}
+                accessibilityHint=""
               />
-            )}
-            {({headerHeight, scrollElRef}) => (
-              <AboutSection
-                ref={aboutSectionRef}
-                scrollElRef={scrollElRef as ListRef}
-                list={list}
-                onPressAddUser={onPressAddUser}
-                headerHeight={headerHeight}
-              />
-            )}
-          </PagerWithHeader>
-          <FAB
-            testID="composeFAB"
-            onPress={() => openComposer({})}
-            icon={
-              <ComposeIcon2
-                strokeWidth={1.5}
-                size={29}
-                style={{color: 'white'}}
-              />
-            }
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`New post`)}
-            accessibilityHint=""
-          />
-        </View>
-      </ScreenHider>
+            </View>
+          )}
+        </Hider.Content>
+      </Hider.Outer>
     )
   }
   return (
-    <ScreenHider
-      screenDescription={_(msg`list`)}
-      modui={moderation.ui('contentView')}>
-      <View style={s.hContentRegion}>
-        <PagerWithHeader
-          items={SECTION_TITLES_MOD}
-          isHeaderReady={true}
-          renderHeader={renderHeader}>
-          {({headerHeight, scrollElRef}) => (
-            <AboutSection
-              list={list}
-              scrollElRef={scrollElRef as ListRef}
-              onPressAddUser={onPressAddUser}
-              headerHeight={headerHeight}
+    <Hider.Outer modui={moderation.ui('contentView')}>
+      <Hider.Mask>
+        {() => <ListHiddenScreen list={list} preferences={preferences} />}
+      </Hider.Mask>
+      <Hider.Content>
+        {() => (
+          <View style={s.hContentRegion}>
+            <PagerWithHeader
+              items={SECTION_TITLES_MOD}
+              isHeaderReady={true}
+              renderHeader={renderHeader}>
+              {({headerHeight, scrollElRef}) => (
+                <AboutSection
+                  list={list}
+                  scrollElRef={scrollElRef as ListRef}
+                  onPressAddUser={onPressAddUser}
+                  headerHeight={headerHeight}
+                />
+              )}
+            </PagerWithHeader>
+            <FAB
+              testID="composeFAB"
+              onPress={() => openComposer({})}
+              icon={
+                <ComposeIcon2
+                  strokeWidth={1.5}
+                  size={29}
+                  style={{color: 'white'}}
+                />
+              }
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`New post`)}
+              accessibilityHint=""
             />
-          )}
-        </PagerWithHeader>
-        <FAB
-          testID="composeFAB"
-          onPress={() => openComposer({})}
-          icon={
-            <ComposeIcon2
-              strokeWidth={1.5}
-              size={29}
-              style={{color: 'white'}}
-            />
-          }
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`New post`)}
-          accessibilityHint=""
-        />
-      </View>
-    </ScreenHider>
+          </View>
+        )}
+      </Hider.Content>
+    </Hider.Outer>
   )
 }