Better sized and more informative character counter

zio/stable
Paul Frazee 2022-12-05 13:59:13 -06:00
parent 39bab0bb08
commit 73c84f6f64
3 changed files with 24 additions and 28 deletions

View File

@ -15,7 +15,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view' import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
import {Autocomplete} from './Autocomplete' import {Autocomplete} from './Autocomplete'
import * as Toast from '../util/Toast' import * as Toast from '../util/Toast'
import ProgressCircle from '../util/ProgressCircle' // @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 {TextLink} from '../util/Link' import {TextLink} from '../util/Link'
import {UserAvatar} from '../util/UserAvatar' import {UserAvatar} from '../util/UserAvatar'
import {useStores} from '../../../state' import {useStores} from '../../../state'
@ -252,10 +255,26 @@ export const ComposePost = observer(function ComposePost({
{MAX_TEXT_LENGTH - text.length} {MAX_TEXT_LENGTH - text.length}
</Text> </Text>
<View> <View>
<ProgressCircle {text.length > DANGER_TEXT_LENGTH ? (
color={progressColor} <ProgressPie
progress={text.length / MAX_TEXT_LENGTH} size={30}
/> borderWidth={4}
borderColor={progressColor}
color={progressColor}
progress={Math.min(
(text.length - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH,
1,
)}
/>
) : (
<ProgressCircle
size={30}
borderWidth={1}
borderColor={colors.gray2}
color={progressColor}
progress={text.length / MAX_TEXT_LENGTH}
/>
)}
</View> </View>
</View> </View>
<Autocomplete <Autocomplete

View File

@ -1,3 +0,0 @@
// @ts-ignore no type definition -prf
import ProgressCircle from 'react-native-progress/Circle'
export default ProgressCircle

View File

@ -1,20 +0,0 @@
import {View} from 'react-native'
import {CircularProgressbar, buildStyles} from 'react-circular-progressbar'
const ProgressCircle = ({
color,
progress,
}: {
color?: string
progress: number
}) => {
return (
<View style={{width: 20, height: 20}}>
<CircularProgressbar
value={progress * 100}
styles={buildStyles({pathColor: color || '#00f'})}
/>
</View>
)
}
export default ProgressCircle