Samuel Newman
0cbb03cd14
* new follow-10 progress guide * find follows dialog * wip tabs * flatlist version with search * hardcode out jake gold * lazy load followup suggestions * Update src/components/ProgressGuide/FollowDialog.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * comment out replacing, enable paging * rm autofocus * find shadow profiles in paginated search * clear search when press tabs * better tab a11y * fix label * adjust scroll indicator insets * do the same scroll indicator adjustment for searchable people list * hardcode jake to just be 'tech' * Retain state on close/reopen * only change follow btn color when not followed * add guide to inside dialog * fix task alignment * Enable contextual suggestions * WIP: show multiple suggestions * Rework so it animates well * Show more items * remove card style * move tabs to own component * split out header top * scroll active tab into view * rm log * Improve perf a bit * boost popular interests over alphabetical ones * scroll active tab into view * revert back to round buttons * Fix overrenders of the tab bar items * Fix unintended animation * Scroll initial into view if needed * Unlift state, the dialog thing breaks lifting * Persist simply * Fix empty state * Fix incorrect gate exposure * Fix another bad useGate * Nit --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import {View} from 'react-native'
|
|
import * as Progress from 'react-native-progress'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {AnimatedCheck} from '../anim/AnimatedCheck'
|
|
import {Text} from '../Typography'
|
|
|
|
export function ProgressGuideTask({
|
|
current,
|
|
total,
|
|
title,
|
|
subtitle,
|
|
tabularNumsTitle,
|
|
}: {
|
|
current: number
|
|
total: number
|
|
title: string
|
|
subtitle?: string
|
|
tabularNumsTitle?: boolean
|
|
}) {
|
|
const t = useTheme()
|
|
|
|
return (
|
|
<View style={[a.flex_row, a.gap_sm, !subtitle && a.align_center]}>
|
|
{current === total ? (
|
|
<AnimatedCheck playOnMount fill={t.palette.primary_500} width={20} />
|
|
) : (
|
|
<Progress.Circle
|
|
progress={current / total}
|
|
color={t.palette.primary_400}
|
|
size={20}
|
|
thickness={3}
|
|
borderWidth={0}
|
|
unfilledColor={t.palette.contrast_50}
|
|
/>
|
|
)}
|
|
|
|
<View style={[a.flex_col, a.gap_2xs, subtitle && {marginTop: -2}]}>
|
|
<Text
|
|
style={[
|
|
a.text_sm,
|
|
a.font_bold,
|
|
a.leading_tight,
|
|
tabularNumsTitle && {fontVariant: ['tabular-nums']},
|
|
]}>
|
|
{title}
|
|
</Text>
|
|
{subtitle && (
|
|
<Text
|
|
style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|