acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add Hider component (#4960)

Browse Source 
Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
Eric Bailey
2024-08-20 11:08:27 -05:00
committed by GitHub
parent 23b010feb4
commit 14e308d06a
2 changed files with 144 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/moderation/Hider.tsx
+83
View File
@@ -0,0 +1,83 @@
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>({} as Context)
export const useScreenHider = () => React.useContext(Context)
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 = {
isNoPwi: Boolean(
modui.blurs.find(
cause =>
cause.type === 'label' &&
cause.labelDef.identifier === '!no-unauthenticated',
),
),
noOverride: modui.noOverride,
}
const showInfoDialog = () => {
control.open()
}
const onSetContentVisible = (show: boolean) => {
if (meta.noOverride) return
setIsContentVisible(show)
}
const ctx = {
isContentVisible,
setIsContentVisible: onSetContentVisible,
showInfoDialog,
info,
meta,
}
return (
<Context.Provider value={ctx}>
{children}
<ModerationDetailsDialog control={control} modcause={blur} />
</Context.Provider>
)
}
export function Content({children}: {children: React.ReactNode}) {
const ctx = useScreenHider()
return ctx.isContentVisible ? children : null
}
export function Mask({children}: {children: React.ReactNode}) {
const ctx = useScreenHider()
return ctx.isContentVisible ? null : children
}
src/view/screens/ProfileList.tsx
+61 -59
View File
@@ -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,35 +189,72 @@ 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')}>
<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=""
/>
</View>
</Hider.Content>
</Hider.Outer>
)
}
return (
<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}
items={SECTION_TITLES_MOD}
isHeaderReady={true}
renderHeader={renderHeader}
onCurrentPageSelected={onCurrentPageSelected}>
{({headerHeight, scrollElRef, isFocused}) => (
<FeedSection
ref={feedSectionRef}
feed={`list|${uri}`}
scrollElRef={scrollElRef as ListRef}
headerHeight={headerHeight}
isFocused={isScreenFocused && isFocused}
/>
)}
renderHeader={renderHeader}>
{({headerHeight, scrollElRef}) => (
<AboutSection
ref={aboutSectionRef}
scrollElRef={scrollElRef as ListRef}
list={list}
scrollElRef={scrollElRef as ListRef}
onPressAddUser={onPressAddUser}
headerHeight={headerHeight}
/>
@@ -238,43 +275,8 @@ function ProfileListScreenLoaded({
accessibilityHint=""
/>
</View>
</ScreenHider>
)
}
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}
/>
)}
</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>
</Hider.Content>
</Hider.Outer>
)
}