Clean up
This commit is contained in:
Eric Bailey
@@ -1,5 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {View} from 'react-native'
|
import {LayoutChangeEvent,ScrollView, View} from 'react-native'
|
||||||
|
import {LinearGradient} from 'expo-linear-gradient'
|
||||||
import {AppBskyEmbedExternal} from '@atproto/api'
|
import {AppBskyEmbedExternal} from '@atproto/api'
|
||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
@@ -9,8 +10,11 @@ import {shareUrl} from '#/lib/sharing'
|
|||||||
import {toNiceDomain} from '#/lib/strings/url-helpers'
|
import {toNiceDomain} from '#/lib/strings/url-helpers'
|
||||||
import {isNative} from '#/platform/detection'
|
import {isNative} from '#/platform/detection'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||||
import {Divider} from '#/components/Divider'
|
import {Divider} from '#/components/Divider'
|
||||||
import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
|
import {ChevronBottom_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
|
||||||
|
import {CodeBrackets_Stroke2_Corner0_Rounded as Code} from '#/components/icons/CodeBrackets'
|
||||||
|
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
|
||||||
import {Link} from '#/components/Link'
|
import {Link} from '#/components/Link'
|
||||||
import {Loader} from '#/components/Loader'
|
import {Loader} from '#/components/Loader'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
@@ -24,6 +28,8 @@ export function GithubGist({
|
|||||||
}) {
|
}) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
|
const [footerHeight, setFooterHeight] = React.useState(100)
|
||||||
|
const [showMore, setShowMore] = React.useState(false)
|
||||||
|
|
||||||
const {data: files, isLoading} = useQuery({
|
const {data: files, isLoading} = useQuery({
|
||||||
queryKey: ['gist', id],
|
queryKey: ['gist', id],
|
||||||
@@ -49,106 +55,199 @@ export function GithubGist({
|
|||||||
}
|
}
|
||||||
}, [info.uri])
|
}, [info.uri])
|
||||||
|
|
||||||
return (
|
const onFooterLayout = React.useCallback(
|
||||||
<Link
|
(e: LayoutChangeEvent) => {
|
||||||
label={info.title || _(msg`Open this Gist`)}
|
setFooterHeight(e.nativeEvent.layout.height)
|
||||||
to={info.uri}
|
},
|
||||||
onLongPress={onShareExternal}>
|
[setFooterHeight],
|
||||||
{({hovered}) => (
|
)
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
a.transition_color,
|
|
||||||
a.flex_col,
|
|
||||||
a.rounded_md,
|
|
||||||
a.overflow_hidden,
|
|
||||||
a.w_full,
|
|
||||||
a.border,
|
|
||||||
hovered
|
|
||||||
? t.atoms.border_contrast_high
|
|
||||||
: t.atoms.border_contrast_low,
|
|
||||||
]}>
|
|
||||||
<View style={[a.p_lg, t.atoms.bg_contrast_25]}>
|
|
||||||
{isLoading || !files ? (
|
|
||||||
<Loader />
|
|
||||||
) : (
|
|
||||||
<View>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
a.text_sm,
|
|
||||||
a.italic,
|
|
||||||
t.atoms.text_contrast_low,
|
|
||||||
a.pb_sm,
|
|
||||||
]}>
|
|
||||||
{files[0].filename}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
},
|
|
||||||
]}>
|
|
||||||
{files[0].content}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View
|
const onShowMore = React.useCallback(() => {
|
||||||
style={[
|
setShowMore(true)
|
||||||
a.flex_1,
|
}, [setShowMore])
|
||||||
a.pt_sm,
|
|
||||||
{gap: 3},
|
return (
|
||||||
a.border_t,
|
<View
|
||||||
hovered
|
style={[
|
||||||
? t.atoms.border_contrast_high
|
a.transition_color,
|
||||||
: t.atoms.border_contrast_low,
|
a.flex_col,
|
||||||
]}>
|
a.rounded_md,
|
||||||
<View style={[{gap: 3}, a.pb_xs, a.px_md]}>
|
a.overflow_hidden,
|
||||||
<Text
|
a.w_full,
|
||||||
emoji
|
a.border,
|
||||||
numberOfLines={3}
|
t.atoms.border_contrast_low,
|
||||||
style={[a.text_md, a.font_bold, a.leading_snug]}>
|
]}>
|
||||||
{info.title || info.uri}
|
<View style={[t.atoms.bg_contrast_25]}>
|
||||||
</Text>
|
{isLoading || !files ? (
|
||||||
|
<View style={[a.px_lg]}>
|
||||||
|
<Loader />
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View style={[a.relative]}>
|
||||||
|
<View style={[a.relative]}>
|
||||||
|
<ScrollView
|
||||||
|
style={[a.pt_lg, {maxHeight: showMore ? undefined : 500}]}>
|
||||||
|
<ScrollView horizontal style={[{paddingBottom: footerHeight}]}>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.flex_row,
|
||||||
|
a.align_center,
|
||||||
|
a.gap_xs,
|
||||||
|
a.px_lg,
|
||||||
|
a.pb_md,
|
||||||
|
]}>
|
||||||
|
<Code
|
||||||
|
size="xs"
|
||||||
|
style={[
|
||||||
|
a.transition_color,
|
||||||
|
{color: t.palette.primary_500},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
a.text_sm,
|
||||||
|
a.italic,
|
||||||
|
t.atoms.text_contrast_low,
|
||||||
|
]}>
|
||||||
|
{files[0].filename}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
a.px_lg,
|
||||||
|
{
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
{files[0].content}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{!showMore && <View style={[a.absolute, a.inset_0]} />}
|
||||||
</View>
|
</View>
|
||||||
<View style={[a.px_md]}>
|
|
||||||
<Divider />
|
<View
|
||||||
<View
|
style={[a.absolute, a.inset_0, a.p_lg, {top: 'auto'}]}
|
||||||
style={[
|
onLayout={onFooterLayout}>
|
||||||
a.flex_row,
|
{!showMore && (
|
||||||
a.align_center,
|
<View style={[a.absolute, a.inset_0]}>
|
||||||
a.gap_2xs,
|
<View
|
||||||
a.pb_sm,
|
style={[
|
||||||
{
|
a.absolute,
|
||||||
paddingTop: 6, // off menu
|
a.flex_row,
|
||||||
},
|
a.justify_center,
|
||||||
]}>
|
{
|
||||||
<Globe
|
left: 0,
|
||||||
size="xs"
|
right: 0,
|
||||||
style={[
|
top: 0,
|
||||||
a.transition_color,
|
transform: [{translateY: '-100%'}],
|
||||||
hovered
|
},
|
||||||
? t.atoms.text_contrast_medium
|
]}>
|
||||||
: t.atoms.text_contrast_low,
|
<Button
|
||||||
]}
|
label={_(msg`Show more`)}
|
||||||
/>
|
size="small"
|
||||||
<Text
|
variant="solid"
|
||||||
numberOfLines={1}
|
color="primary"
|
||||||
style={[
|
style={[
|
||||||
a.transition_color,
|
a.rounded_full,
|
||||||
a.text_xs,
|
{
|
||||||
a.leading_tight,
|
paddingVertical: 6,
|
||||||
hovered
|
},
|
||||||
? t.atoms.text_contrast_high
|
]}
|
||||||
: t.atoms.text_contrast_medium,
|
onPress={onShowMore}>
|
||||||
]}>
|
<ButtonText>Show more</ButtonText>
|
||||||
{toNiceDomain(info.uri)}
|
<ButtonIcon icon={Chevron} size="sm" position="right" />
|
||||||
</Text>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
<LinearGradient
|
||||||
|
colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.5)']}
|
||||||
|
locations={[0, 1]}
|
||||||
|
start={{x: 0, y: 0}}
|
||||||
|
end={{x: 0, y: 1}}
|
||||||
|
style={[a.absolute, a.inset_0]}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Link
|
||||||
|
label={info.title || _(msg`Open this Gist`)}
|
||||||
|
to={info.uri}
|
||||||
|
onLongPress={onShareExternal}>
|
||||||
|
{({hovered}) => (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.flex_1,
|
||||||
|
a.pt_sm,
|
||||||
|
a.rounded_sm,
|
||||||
|
a.border,
|
||||||
|
{gap: 3},
|
||||||
|
t.atoms.bg_contrast_100,
|
||||||
|
t.atoms.border_contrast_high,
|
||||||
|
hovered && {
|
||||||
|
borderColor: t.palette.contrast_400,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<View style={[{gap: 3}, a.pb_xs, a.px_md]}>
|
||||||
|
<Text
|
||||||
|
emoji
|
||||||
|
numberOfLines={3}
|
||||||
|
style={[a.text_md, a.font_bold, a.leading_snug]}>
|
||||||
|
{info.title || info.uri}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={[a.px_md]}>
|
||||||
|
<Divider
|
||||||
|
style={[
|
||||||
|
t.atoms.border_contrast_high,
|
||||||
|
hovered && {
|
||||||
|
borderColor: t.palette.contrast_400,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.flex_row,
|
||||||
|
a.align_center,
|
||||||
|
a.gap_xs,
|
||||||
|
a.pb_sm,
|
||||||
|
{
|
||||||
|
paddingTop: 6, // off menu
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Globe
|
||||||
|
size="xs"
|
||||||
|
style={[
|
||||||
|
a.transition_color,
|
||||||
|
hovered
|
||||||
|
? t.atoms.text_contrast_medium
|
||||||
|
: t.atoms.text_contrast_low,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={[
|
||||||
|
a.transition_color,
|
||||||
|
a.text_xs,
|
||||||
|
a.leading_tight,
|
||||||
|
hovered
|
||||||
|
? t.atoms.text_contrast_high
|
||||||
|
: t.atoms.text_contrast_medium,
|
||||||
|
]}>
|
||||||
|
{toNiceDomain(info.uri)}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
)}
|
||||||
)}
|
</View>
|
||||||
</Link>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user