forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {
2 type StyleProp,
3 type TextStyle,
4 View,
5 type ViewStyle,
6} from 'react-native'
7// @ts-ignore no type definition -prf
8import ProgressCircle from 'react-native-progress/Circle'
9// @ts-ignore no type definition -prf
10import ProgressPie from 'react-native-progress/Pie'
11
12import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
13import {atoms as a, useTheme} from '#/alf'
14import {Text} from '#/components/Typography'
15
16export function CharProgress({
17 count,
18 max,
19 style,
20 textStyle,
21 size,
22}: {
23 count: number
24 max?: number
25 style?: StyleProp<ViewStyle>
26 textStyle?: StyleProp<TextStyle>
27 size?: number
28}) {
29 const maxLength = max || MAX_GRAPHEME_LENGTH
30 const t = useTheme()
31 const textColor = count > maxLength ? '#e60000' : t.atoms.text.color
32 const circleColor = count > maxLength ? '#e60000' : t.palette.primary_500
33 return (
34 <View
35 style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}>
36 <Text
37 style={[
38 {color: textColor, fontVariant: ['tabular-nums']},
39 a.flex_grow,
40 a.text_right,
41 textStyle,
42 ]}
43 maxFontSizeMultiplier={1}>
44 {maxLength - count}
45 </Text>
46 {count > maxLength ? (
47 <ProgressPie
48 size={size ?? 30}
49 borderWidth={4}
50 borderColor={circleColor}
51 color={circleColor}
52 progress={Math.min((count - maxLength) / maxLength, 1)}
53 />
54 ) : (
55 <ProgressCircle
56 size={size ?? 30}
57 borderWidth={1}
58 borderColor={t.atoms.border_contrast_low.borderColor}
59 color={circleColor}
60 progress={count / maxLength}
61 />
62 )}
63 </View>
64 )
65}