src/view/com/composer/char-progress/CharProgress.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import React from 'react'
import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
// @ts-ignore no type definition -prf
import ProgressCircle from 'react-native-progress/Circle'
// @ts-ignore no type definition -prf
import ProgressPie from 'react-native-progress/Pie'

import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {s} from '#/lib/styles'
import {Text} from '../../util/text/Text'

export function CharProgress({
  count,
  max,
  style,
  textStyle,
  size,
}: {
  count: number
  max?: number
  style?: StyleProp<ViewStyle>
  textStyle?: StyleProp<TextStyle>
  size?: number
}) {
  const maxLength = max || MAX_GRAPHEME_LENGTH
  const pal = usePalette('default')
  const textColor = count > maxLength ? '#e60000' : pal.colors.text
  const circleColor = count > maxLength ? '#e60000' : pal.colors.link
  return (
    <View style={style}>
      <Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}>
        {maxLength - count}
      </Text>
      <View>
        {count > maxLength ? (
          <ProgressPie
            size={size ?? 30}
            borderWidth={4}
            borderColor={circleColor}
            color={circleColor}
            progress={Math.min((count - maxLength) / maxLength, 1)}
          />
        ) : (
          <ProgressCircle
            size={size ?? 30}
            borderWidth={1}
            borderColor={pal.colors.border}
            color={circleColor}
            progress={count / maxLength}
          />
        )}
      </View>
    </View>
  )
}