zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Implement basic web composer

Browse source
This commit is contained in:
Paul Frazee 2023-01-27 00:16:07 -06:00
parent 5961c26800
commit 99360f7bd9
11 changed files with 282 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/view/com/composer/char-progress/CharProgress.tsx Normal file
View file

@ -0,0 +1,41 @@
import React from 'react'
import {View} from 'react-native'
import {Text} from '../../util/text/Text'
// @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 {s, colors} from '../../../lib/styles'
const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
export function CharProgress({count}: {count: number}) {
const progressColor = count > DANGER_TEXT_LENGTH ? '#e60000' : undefined
return (
<>
<Text style={[s.mr10, {color: progressColor}]}>
{MAX_TEXT_LENGTH - count}
</Text>
<View>
{count > DANGER_TEXT_LENGTH ? (
<ProgressPie
size={30}
borderWidth={4}
borderColor={progressColor}
color={progressColor}
progress={Math.min((count - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH, 1)}
/>
) : (
<ProgressCircle
size={30}
borderWidth={1}
borderColor={colors.gray2}
color={progressColor}
progress={count / MAX_TEXT_LENGTH}
/>
)}
</View>
</>
)
}

39
src/view/com/composer/char-progress/CharProgress.web.tsx Normal file
View file

@ -0,0 +1,39 @@
import React from 'react'
import {View} from 'react-native'
import {Text} from '../util/text/Text'
import {s} from '../../lib/styles'
const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
export function CharProgress({count}: {count: number}) {
const progressColor = count > DANGER_TEXT_LENGTH ? '#e60000' : undefined
return (
<>
<Text style={[s.mr10, {color: progressColor}]}>
{MAX_TEXT_LENGTH - count}
</Text>
<View>
{
null /* TODO count > DANGER_TEXT_LENGTH ? (
<ProgressPie
size={30}
borderWidth={4}
borderColor={progressColor}
color={progressColor}
progress={Math.min((count - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH, 1)}
/>
) : (
<ProgressCircle
size={30}
borderWidth={1}
borderColor={colors.gray2}
color={progressColor}
progress={count / MAX_TEXT_LENGTH}
/>
)*/
}
</View>
</>
)
}