bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
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 {usePalette} from '#/lib/hooks/usePalette'
14import {atoms as a} from '#/alf'
15import {Text} from '../../util/text/Text'
16
17export function CharProgress({
18 count,
19 max,
20 style,
21 textStyle,
22 size,
23}: {
24 count: number
25 max?: number
26 style?: StyleProp<ViewStyle>
27 textStyle?: StyleProp<TextStyle>
28 size?: number
29}) {
30 const maxLength = max || MAX_GRAPHEME_LENGTH
31 const pal = usePalette('default')
32 const textColor = count > maxLength ? '#e60000' : pal.colors.text
33 const circleColor = count > maxLength ? '#e60000' : pal.colors.link
34 return (
35 <View
36 style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}>
37 <Text
38 style={[
39 {color: textColor, fontVariant: ['tabular-nums']},
40 a.flex_grow,
41 a.text_right,
42 textStyle,
43 ]}>
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={pal.colors.border}
59 color={circleColor}
60 progress={count / maxLength}
61 />
62 )}
63 </View>
64 )
65}