diff options
Diffstat (limited to 'src/view/com/composer/ComposePost.tsx')
| -rw-r--r-- | src/view/com/composer/ComposePost.tsx | 29 |
1 files changed, 24 insertions, 5 deletions
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 10d9f4b1c..d53d04abf 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -15,7 +15,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view' import {Autocomplete} from './Autocomplete' 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 {UserAvatar} from '../util/UserAvatar' import {useStores} from '../../../state' @@ -252,10 +255,26 @@ export const ComposePost = observer(function ComposePost({ {MAX_TEXT_LENGTH - text.length} </Text> <View> - <ProgressCircle - color={progressColor} - progress={text.length / MAX_TEXT_LENGTH} - /> + {text.length > DANGER_TEXT_LENGTH ? ( + <ProgressPie + 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> <Autocomplete |