Eric Bailey
@@ -76,7 +76,6 @@ export type ButtonProps = Pick<
|
||||
| 'onHoverOut'
|
||||
| 'onPressIn'
|
||||
| 'onPressOut'
|
||||
| 'onLayout'
|
||||
> &
|
||||
AccessibilityProps &
|
||||
VariantProps & {
|
||||
|
||||
@@ -74,7 +74,6 @@ export function Content({
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.justify_center,
|
||||
a.z_20,
|
||||
isIOS && align === 'platform' && a.align_center,
|
||||
{minHeight: HEADER_SLOT_SIZE},
|
||||
]}>
|
||||
@@ -89,7 +88,7 @@ export function Slot({children}: {children?: React.ReactNode}) {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.z_10,
|
||||
a.z_50,
|
||||
{
|
||||
width: HEADER_SLOT_SIZE,
|
||||
},
|
||||
|
||||
@@ -1,20 +1,16 @@
|
||||
import {useRef, useState} from 'react'
|
||||
import {View, Text as RNText} from 'react-native'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {msg, plural, Trans} from '@lingui/macro'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import * as Layout from '#/components/Layout'
|
||||
import {atoms as a, useTheme, useBreakpoints, web, useGutters} from '#/alf'
|
||||
import {atoms as a, useTheme, useBreakpoints, web} from '#/alf'
|
||||
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {Pin_Stroke2_Corner0_Rounded as Pin} from '#/components/icons/Pin'
|
||||
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
|
||||
import {Button, ButtonIcon} from '#/components/Button'
|
||||
import {sanitizeHandle} from '#/lib/strings/handles'
|
||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||
import * as Menu from '#/components/Menu'
|
||||
|
||||
export function ProfileSubpageHeader({
|
||||
title,
|
||||
@@ -31,167 +27,99 @@ export function ProfileSubpageHeader({
|
||||
const {gtPhone, gtMobile} = useBreakpoints()
|
||||
const {_} = useLingui()
|
||||
const {top} = useSafeAreaInsets()
|
||||
const [open, setOpen] = useState(false)
|
||||
const baseGutters = useGutters(['compact'])
|
||||
|
||||
const outerSize = useRef({width: 0, height: 0})
|
||||
const buttonSize = useRef({width: 0, height: 0})
|
||||
const outerOffset = ((outerSize.current.width - buttonSize.current.width) / 2) - baseGutters.paddingLeft
|
||||
|
||||
return (
|
||||
<>
|
||||
{open && !isWeb && (
|
||||
<View style={[
|
||||
a.fixed,
|
||||
a.inset_0,
|
||||
a.z_40,
|
||||
{ backgroundColor: t.palette.black, opacity: 0.7 },
|
||||
]} />
|
||||
)}
|
||||
<Layout.Center
|
||||
style={[t.atoms.bg, a.z_10, {paddingTop: top}, web([a.sticky, a.z_10, {top: 0}])]}
|
||||
>
|
||||
<Layout.Header.Outer>
|
||||
<Layout.Header.BackButton />
|
||||
<Layout.Header.Content align="left">
|
||||
<Button
|
||||
label={_(msg`Open feed info screen`)}
|
||||
style={[
|
||||
a.justify_start,
|
||||
{
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingRight: 12,
|
||||
},
|
||||
]}>
|
||||
{({hovered}) => (
|
||||
<>
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.inset_0,
|
||||
a.rounded_sm,
|
||||
a.transition_transform,
|
||||
t.atoms.bg_contrast_25,
|
||||
hovered && {
|
||||
transform: [{scaleX: 1.01}, {scaleY: 1.1}],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Layout.Center
|
||||
style={[t.atoms.bg, a.z_50, {paddingTop: top}, web([a.sticky, {top: 0}])]}
|
||||
onLayout={({nativeEvent}) => {
|
||||
outerSize.current = {
|
||||
width: nativeEvent.layout.width,
|
||||
height: nativeEvent.layout.height,
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Layout.Header.Outer>
|
||||
<Layout.Header.BackButton />
|
||||
<Layout.Header.Content align="left">
|
||||
<Button
|
||||
label={_(msg`Open feed info screen`)}
|
||||
style={[
|
||||
a.justify_start,
|
||||
{
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingRight: 12,
|
||||
},
|
||||
]}
|
||||
onPress={() => setOpen(!open)}
|
||||
onLayout={({nativeEvent}) => {
|
||||
buttonSize.current = {
|
||||
width: nativeEvent.layout.width,
|
||||
height: nativeEvent.layout.height,
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({hovered}) => (
|
||||
<>
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.inset_0,
|
||||
a.rounded_sm,
|
||||
a.transition_transform,
|
||||
t.atoms.bg_contrast_25,
|
||||
(hovered && !open) && {
|
||||
transform: [{scaleX: 1.01}, {scaleY: 1.1}],
|
||||
},
|
||||
]}
|
||||
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
|
||||
{avatar && (
|
||||
<UserAvatar size={32} type="algo" avatar={avatar} />
|
||||
)}
|
||||
|
||||
<View style={[a.flex_1]}>
|
||||
{/* Should roughly matchl Layout.Header.TitleText */}
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_heavy,
|
||||
a.leading_tight,
|
||||
gtMobile && a.text_lg,
|
||||
]}
|
||||
numberOfLines={2}>
|
||||
{title}
|
||||
</Text>
|
||||
{/* Should roughly matchl Layout.Header.SubtitleText */}
|
||||
<Text
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.text_xs,
|
||||
a.leading_snug,
|
||||
t.atoms.text_contrast_medium,
|
||||
gtPhone && a.text_sm,
|
||||
]}>
|
||||
<RNText numberOfLines={1}>
|
||||
<Trans>By {sanitizeHandle(creator.handle, '@')}</Trans>
|
||||
</RNText>
|
||||
{' • '}
|
||||
<RNText numberOfLines={1}>
|
||||
{plural(likeCount, {
|
||||
one: '# like',
|
||||
other: '# likes',
|
||||
})}
|
||||
</RNText>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ChevronDown
|
||||
size="md"
|
||||
fill={t.atoms.text_contrast_low.color}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.inset_0,
|
||||
a.rounded_sm,
|
||||
a.transition_transform,
|
||||
a.z_20,
|
||||
t.atoms.bg_contrast_25,
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
open && [t.atoms.shadow_lg, {
|
||||
opacity: 1,
|
||||
bottom: 'auto',
|
||||
left: outerOffset * -1,
|
||||
right: outerOffset * -1,
|
||||
}]
|
||||
]}
|
||||
>
|
||||
{open && (
|
||||
<View style={[baseGutters]}>
|
||||
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
|
||||
<UserAvatar
|
||||
type='algo'
|
||||
size={58}
|
||||
avatar={avatar}
|
||||
/>
|
||||
<View style={[
|
||||
]}>
|
||||
<Text style={[a.text_xl, a.font_heavy]}>{title}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Layout.Header.Content>
|
||||
|
||||
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm, open && {
|
||||
left: outerOffset * -1,
|
||||
}]}>
|
||||
{avatar && (
|
||||
<UserAvatar size={32} type="algo" avatar={avatar} />
|
||||
)}
|
||||
|
||||
<View style={[a.flex_1]}>
|
||||
{/* Should roughly matchl Layout.Header.TitleText */}
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_heavy,
|
||||
a.leading_tight,
|
||||
gtMobile && a.text_lg,
|
||||
]}
|
||||
numberOfLines={2}>
|
||||
{title}
|
||||
</Text>
|
||||
{/* Should roughly matchl Layout.Header.SubtitleText */}
|
||||
<Text
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.text_xs,
|
||||
a.leading_snug,
|
||||
t.atoms.text_contrast_medium,
|
||||
gtPhone && a.text_sm,
|
||||
]}>
|
||||
<RNText numberOfLines={1}>
|
||||
<Trans>By {sanitizeHandle(creator.handle, '@')}</Trans>
|
||||
</RNText>
|
||||
{' • '}
|
||||
<RNText numberOfLines={1}>
|
||||
{plural(likeCount, {
|
||||
one: '# like',
|
||||
other: '# likes',
|
||||
})}
|
||||
</RNText>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ChevronDown
|
||||
size="md"
|
||||
fill={t.atoms.text_contrast_low.color}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Layout.Header.Content>
|
||||
|
||||
<Layout.Header.Slot>
|
||||
<Button
|
||||
label={_(msg`Pin ${title} to your home screen`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
shape="square"
|
||||
color="secondary">
|
||||
<ButtonIcon icon={Pin} size="lg" />
|
||||
</Button>
|
||||
</Layout.Header.Slot>
|
||||
</Layout.Header.Outer>
|
||||
</Layout.Center>
|
||||
</>
|
||||
<Layout.Header.Slot>
|
||||
<Button
|
||||
label={_(msg`Pin ${title} to your home screen`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
shape="square"
|
||||
color="secondary">
|
||||
<ButtonIcon icon={Pin} size="lg" />
|
||||
</Button>
|
||||
</Layout.Header.Slot>
|
||||
</Layout.Header.Outer>
|
||||
</Layout.Center>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user