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

Move MAX_GRAPHEME_LENGTH to constants.ts (#735)

zio/stable
Ben Harris 2023-05-30 20:41:56 -04:00 committed by GitHub
parent 0239225796
commit 7458b6f600
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/constants.ts
View File

@ -4,6 +4,8 @@ export const FEEDBACK_FORM_URL =
export const MAX_DISPLAY_NAME = 64 export const MAX_DISPLAY_NAME = 64
export const MAX_DESCRIPTION = 256 export const MAX_DESCRIPTION = 256
export const MAX_GRAPHEME_LENGTH = 300
// Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html // Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html
// but increasing limit per user feedback // but increasing limit per user feedback
export const MAX_ALT_TEXT = 1000 export const MAX_ALT_TEXT = 1000

5
src/view/com/composer/Composer.tsx
View File

@ -37,8 +37,7 @@ import {useExternalLinkFetch} from './useExternalLinkFetch'
import {isDesktopWeb, isAndroid} from 'platform/detection' import {isDesktopWeb, isAndroid} from 'platform/detection'
import {GalleryModel} from 'state/models/media/gallery' import {GalleryModel} from 'state/models/media/gallery'
import {Gallery} from './photos/Gallery' import {Gallery} from './photos/Gallery'
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
const MAX_GRAPHEME_LENGTH = 300
type Props = ComposerOpts & { type Props = ComposerOpts & {
onClose: () => void onClose: () => void
@ -310,7 +309,7 @@ export const ComposePost = observer(function ComposePost({
onError={setError} onError={setError}
accessible={true} accessible={true}
accessibilityLabel="Write post" accessibilityLabel="Write post"
accessibilityHint="Compose posts up to 300 characters in length" accessibilityHint={`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`}
/> />
</View> </View>

15
src/view/com/composer/char-progress/CharProgress.tsx
View File

@ -7,9 +7,9 @@ import ProgressCircle from 'react-native-progress/Circle'
import ProgressPie from 'react-native-progress/Pie' import ProgressPie from 'react-native-progress/Pie'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
const MAX_LENGTH = 300 const DANGER_LENGTH = MAX_GRAPHEME_LENGTH
const DANGER_LENGTH = MAX_LENGTH
export function CharProgress({count}: {count: number}) { export function CharProgress({count}: {count: number}) {
const pal = usePalette('default') const pal = usePalette('default')
@ -17,7 +17,9 @@ export function CharProgress({count}: {count: number}) {
const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
return ( return (
<> <>
<Text style={[s.mr10, {color: textColor}]}>{MAX_LENGTH - count}</Text> <Text style={[s.mr10, {color: textColor}]}>
{MAX_GRAPHEME_LENGTH - count}
</Text>
<View> <View>
{count > DANGER_LENGTH ? ( {count > DANGER_LENGTH ? (
<ProgressPie <ProgressPie
@ -25,7 +27,10 @@ export function CharProgress({count}: {count: number}) {
borderWidth={4} borderWidth={4}
borderColor={circleColor} borderColor={circleColor}
color={circleColor} color={circleColor}
progress={Math.min((count - MAX_LENGTH) / MAX_LENGTH, 1)} progress={Math.min(
(count - MAX_GRAPHEME_LENGTH) / MAX_GRAPHEME_LENGTH,
1,
)}
/> />
) : ( ) : (
<ProgressCircle <ProgressCircle
@ -33,7 +38,7 @@ export function CharProgress({count}: {count: number}) {
borderWidth={1} borderWidth={1}
borderColor={pal.colors.border} borderColor={pal.colors.border}
color={circleColor} color={circleColor}
progress={count / MAX_LENGTH} progress={count / MAX_GRAPHEME_LENGTH}
/> />
)} )}
</View> </View>