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

remove useProfileTheme in favour of nesting main provider

Browse Source
This commit is contained in:
Samuel Newman
2024-11-13 16:22:10 +00:00
parent 72ecc4355c
commit 28c764e6ca
10 changed files with 60 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ function InnerApp() {
}, [_])
return (
<Alf theme={theme}>
<Alf themeName={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady && hasCheckedReferrer}>
<RootSiblingParent>
src/App.web.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ function InnerApp() {
if (!isReady || !hasCheckedReferrer) return null
return (
<Alf theme={theme}>
<Alf themeName={theme}>
<ThemeProvider theme={theme}>
<RootSiblingParent>
<VideoVolumeProvider>
src/alf/index.tsx
+12 -3
View File
@@ -63,8 +63,12 @@ export const Context = React.createContext<Alf>({
export function ThemeProvider({
children,
theme: themeName,
}: React.PropsWithChildren<{theme: ThemeName}>) {
themeName,
theme,
}: React.PropsWithChildren<{
themeName: ThemeName
theme?: ReturnType<typeof createThemes>
}>) {
const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() =>
getFontScale(),
)
@@ -74,6 +78,7 @@ export function ThemeProvider({
const setFontScaleAndPersist = React.useCallback<
Alf['fonts']['setFontScale']
>(
// eslint-disable-next-line @typescript-eslint/no-shadow
fontScale => {
setFontScale(fontScale)
persistFontScale(fontScale)
@@ -87,6 +92,7 @@ export function ThemeProvider({
const setFontFamilyAndPersist = React.useCallback<
Alf['fonts']['setFontFamily']
>(
// eslint-disable-next-line @typescript-eslint/no-shadow
fontFamily => {
setFontFamily(fontFamily)
persistFontFamily(fontFamily)
@@ -94,6 +100,9 @@ export function ThemeProvider({
[setFontFamily],
)
const themes = React.useMemo(() => {
if (theme) {
return theme
}
return createThemes({
hues: {
primary: BLUE_HUE,
@@ -101,7 +110,7 @@ export function ThemeProvider({
positive: GREEN_HUE,
},
})
}, [])
}, [theme])
const value = React.useMemo<Alf>(
() => ({
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+3 -1
View File
@@ -49,6 +49,7 @@ interface Props {
moderationOpts: ModerationOpts
hideBackButton?: boolean
isPlaceholderProfile?: boolean
backgroundColor: string
}
let ProfileHeaderLabeler = ({
@@ -168,7 +169,8 @@ let ProfileHeaderLabeler = ({
profile={profile}
moderation={moderation}
hideBackButton={hideBackButton}
isPlaceholderProfile={isPlaceholderProfile}>
isPlaceholderProfile={isPlaceholderProfile}
backgroundColor={backgroundColor}>
<View
style={[a.px_lg, a.pt_md, a.pb_sm]}
pointerEvents={isIOS ? 'auto' : 'box-none'}>
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+7 -14
View File
@@ -22,7 +22,6 @@ import {
import {useRequireAuth, useSession} from '#/state/session'
import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
import * as Toast from '#/view/com/util/Toast'
import {useProfileTheme} from '#/view/screens/Profile'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
@@ -47,6 +46,7 @@ interface Props {
moderationOpts: ModerationOpts
hideBackButton?: boolean
isPlaceholderProfile?: boolean
backgroundColor: string
}
let ProfileHeaderStandard = ({
@@ -55,6 +55,7 @@ let ProfileHeaderStandard = ({
moderationOpts,
hideBackButton = false,
isPlaceholderProfile,
backgroundColor,
}: Props): React.ReactNode => {
const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
useProfileShadow(profileUnshadowed)
@@ -149,14 +150,13 @@ let ProfileHeaderStandard = ({
[currentAccount, profile],
)
const pTheme = useProfileTheme()
return (
<ProfileHeaderShell
profile={profile}
moderation={moderation}
hideBackButton={hideBackButton}
isPlaceholderProfile={isPlaceholderProfile}>
isPlaceholderProfile={isPlaceholderProfile}
backgroundColor={backgroundColor}>
<View
style={[a.px_lg, a.pt_md, a.pb_sm, a.overflow_hidden]}
pointerEvents={isIOS ? 'auto' : 'box-none'}>
@@ -179,8 +179,7 @@ let ProfileHeaderStandard = ({
color="secondary"
variant="solid"
onPress={onPressEditProfile}
label={_(msg`Edit profile`)}
style={[{backgroundColor: pTheme.lightPalette.primary_50}]}>
label={_(msg`Edit profile`)}>
<ButtonText>
<Trans>Edit Profile</Trans>
</ButtonText>
@@ -200,10 +199,7 @@ let ProfileHeaderStandard = ({
label={_(msg`Unblock`)}
disabled={!hasSession}
onPress={() => unblockPromptControl.open()}
style={[
a.rounded_full,
{backgroundColor: pTheme.lightPalette.primary_50},
]}>
style={[a.rounded_full]}>
<ButtonText>
<Trans context="action">Unblock</Trans>
</ButtonText>
@@ -226,10 +222,7 @@ let ProfileHeaderStandard = ({
onPress={
profile.viewer?.following ? onPressUnfollow : onPressFollow
}
style={[
a.rounded_full,
{backgroundColor: pTheme.lightPalette.primary_50},
]}>
style={[a.rounded_full]}>
<ButtonIcon
position="left"
icon={profile.viewer?.following ? Check : Plus}
src/screens/Profile/Header/Shell.tsx
+4 -12
View File
@@ -19,7 +19,6 @@ import {useSession} from '#/state/session'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {UserBanner} from '#/view/com/util/UserBanner'
import {useProfileTheme} from '#/view/screens/Profile'
import {atoms as a, useTheme} from '#/alf'
import {LabelsOnMe} from '#/components/moderation/LabelsOnMe'
import {ProfileHeaderAlerts} from '#/components/moderation/ProfileHeaderAlerts'
@@ -31,6 +30,7 @@ interface Props {
moderation: ModerationDecision
hideBackButton?: boolean
isPlaceholderProfile?: boolean
backgroundColor: string
}
let ProfileHeaderShell = ({
@@ -39,6 +39,7 @@ let ProfileHeaderShell = ({
moderation,
hideBackButton = false,
isPlaceholderProfile,
backgroundColor,
}: React.PropsWithChildren<Props>): React.ReactNode => {
const t = useTheme()
const {currentAccount} = useSession()
@@ -97,20 +98,11 @@ let ProfileHeaderShell = ({
[currentAccount, profile],
)
const pTheme = useProfileTheme()
const palette = t.name === 'light' ? pTheme.lightPalette : pTheme.darkPalette
return (
<View pointerEvents={isIOS ? 'auto' : 'box-none'}>
<LinearGradient
key={t.name}
colors={[
palette.primary_200,
palette.primary_200,
t.atoms.bg.backgroundColor,
]}
colors={[t.palette.primary_200, t.palette.primary_200, backgroundColor]}
style={{
position: 'absolute',
top: 0,
@@ -184,7 +176,7 @@ let ProfileHeaderShell = ({
<View
style={[
t.atoms.bg,
{borderColor: t.atoms.bg.backgroundColor},
{borderColor: t.palette.primary_400},
styles.avi,
profile.associated?.labeler && styles.aviLabeler,
]}>
src/screens/Profile/Header/index.tsx
+1
View File
@@ -43,6 +43,7 @@ interface Props {
moderationOpts: ModerationOpts
hideBackButton?: boolean
isPlaceholderProfile?: boolean
backgroundColor: string
}
let ProfileHeader = (props: Props): React.ReactNode => {
src/view/com/profile/ProfileMenu.tsx
+1 -5
View File
@@ -20,7 +20,6 @@ import {
import {useSession} from '#/state/session'
import {EventStopper} from '#/view/com/util/EventStopper'
import * as Toast from '#/view/com/util/Toast'
import {useProfileTheme} from '#/view/screens/Profile'
import {Button, ButtonIcon} from '#/components/Button'
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
@@ -168,8 +167,6 @@ let ProfileMenu = ({
reportDialogControl.open()
}, [reportDialogControl])
const pTheme = useProfileTheme()
return (
<EventStopper onKeyDown={false}>
<Menu.Root>
@@ -184,8 +181,7 @@ let ProfileMenu = ({
variant="solid"
color="secondary"
size="small"
shape="round"
style={{backgroundColor: pTheme.lightPalette.primary_50}}>
shape="round">
<ButtonIcon icon={Ellipsis} size="sm" />
</Button>
)
src/view/screens/Profile.tsx
+27 -19
View File
@@ -44,7 +44,7 @@ import {CenteredView} from '#/view/com/util/Views'
import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
import {Palette, Theme, web} from '#/alf'
import {ThemeProvider as Alf, useTheme, web} from '#/alf'
import {createThemes} from '#/alf/themes'
import * as Layout from '#/components/Layout'
import {ScreenHider} from '#/components/moderation/ScreenHider'
@@ -52,18 +52,6 @@ import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks'
import {navigate} from '#/Navigation'
import {ExpoScrollForwarderView} from '../../../modules/expo-scroll-forwarder'
type ThemeType = {
lightPalette: Palette
darkPalette: Palette
dimPalette: Palette
light: Theme
dark: Theme
dim: Theme
}
const ProfileThemeContext = React.createContext<ThemeType>({} as ThemeType)
export const useProfileTheme = () => React.useContext(ProfileThemeContext)
interface SectionRef {
scrollToTop: () => void
}
@@ -354,18 +342,37 @@ function ProfileScreenLoaded({
// rendering
// =
const [hue, setHue] = React.useState(0)
React.useEffect(() => {
const id = setInterval(() => {
setHue(h => {
const next = h + 1
if (next >= 360) {
return 0
}
return next
})
}, 100)
return () => clearInterval(id)
}, [])
const t = useTheme()
const theme = createThemes({
hues: {
primary: 350,
primary: hue,
negative: 0,
positive: 0,
},
scales: {
// graySaturation: [30, 30, 30, 30, 30, 30, 30, 30, 34, 34, 38, 38, 38, 38],
},
})
const renderHeader = () => {
return (
<ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
<ProfileThemeContext.Provider value={theme}>
<Alf themeName={t.name} theme={theme}>
<ProfileHeader
profile={profile}
labeler={labelerInfo}
@@ -373,8 +380,9 @@ function ProfileScreenLoaded({
moderationOpts={moderationOpts}
hideBackButton={hideBackButton}
isPlaceholderProfile={showPlaceholder}
backgroundColor={t.atoms.bg.backgroundColor}
/>
</ProfileThemeContext.Provider>
</Alf>
</ExpoScrollForwarderView>
)
}
@@ -539,10 +547,10 @@ function useRichText(text: string): [RichTextAPI, boolean] {
let ignore = false
async function resolveRTFacets() {
// new each time
const resolvedRT = new RichTextAPI({text})
await resolvedRT.detectFacets(agent)
const newRT = new RichTextAPI({text})
await newRT.detectFacets(agent)
if (!ignore) {
setResolvedRT(resolvedRT)
setResolvedRT(newRT)
}
}
resolveRTFacets()
src/view/screens/Storybook/index.tsx
+3 -3
View File
@@ -104,13 +104,13 @@ function StorybookInner() {
<Settings />
<ThemeProvider theme="light">
<ThemeProvider themeName="light">
<Theming />
</ThemeProvider>
<ThemeProvider theme="dim">
<ThemeProvider themeName="dim">
<Theming />
</ThemeProvider>
<ThemeProvider theme="dark">
<ThemeProvider themeName="dark">
<Theming />
</ThemeProvider>