diff options
Diffstat (limited to 'src/view/com/modals')
| -rw-r--r-- | src/view/com/modals/ComposePost.tsx | 233 | ||||
| -rw-r--r-- | src/view/com/modals/Modal.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/modals/composer/Autocomplete.tsx | 76 |
3 files changed, 0 insertions, 317 deletions
diff --git a/src/view/com/modals/ComposePost.tsx b/src/view/com/modals/ComposePost.tsx deleted file mode 100644 index 806b5d7a0..000000000 --- a/src/view/com/modals/ComposePost.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import React, {useEffect, useMemo, useState} from 'react' -import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' -import {BottomSheetTextInput} from '@gorhom/bottom-sheet' -import LinearGradient from 'react-native-linear-gradient' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import * as GetUserFollows from '../../../third-party/api/src/types/app/bsky/getUserFollows' -import * as Post from '../../../third-party/api/src/types/app/bsky/post' -import {Autocomplete} from './composer/Autocomplete' -import Toast from '../util/Toast' -import ProgressCircle from '../util/ProgressCircle' -import {useStores} from '../../../state' -import * as apilib from '../../../state/lib/api' -import {s, colors, gradients} from '../../lib/styles' - -const MAX_TEXT_LENGTH = 256 -const WARNING_TEXT_LENGTH = 200 -const DANGER_TEXT_LENGTH = 255 -export const snapPoints = ['100%'] - -export function Component({ - replyTo, - onPost, -}: { - replyTo?: Post.PostRef - onPost?: () => void -}) { - const store = useStores() - const [error, setError] = useState('') - const [text, setText] = useState('') - const [followedUsers, setFollowedUsers] = useState< - undefined | GetUserFollows.OutputSchema['follows'] - >(undefined) - const [autocompleteOptions, setAutocompleteOptions] = useState<string[]>([]) - - useEffect(() => { - let aborted = false - store.api.app.bsky - .getUserFollows({ - user: store.me.did || '', - }) - .then(res => { - if (aborted) return - setFollowedUsers(res.data.follows) - }) - return () => { - aborted = true - } - }) - - const onChangeText = (newText: string) => { - if (newText.length > MAX_TEXT_LENGTH) { - newText = newText.slice(0, MAX_TEXT_LENGTH) - } - setText(newText) - - const prefix = extractTextAutocompletePrefix(newText) - if (typeof prefix === 'string' && followedUsers) { - setAutocompleteOptions( - [prefix].concat( - followedUsers - .filter(user => user.name.startsWith(prefix)) - .map(user => user.name), - ), - ) - } else if (autocompleteOptions) { - setAutocompleteOptions([]) - } - } - const onPressCancel = () => { - store.shell.closeModal() - } - const onPressPublish = async () => { - setError('') - if (text.trim().length === 0) { - setError('Did you want to say anything?') - return false - } - try { - await apilib.post(store, text, replyTo) - } catch (e: any) { - console.error(`Failed to create post: ${e.toString()}`) - setError( - 'Post failed to upload. Please check your Internet connection and try again.', - ) - return - } - onPost?.() - store.shell.closeModal() - Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`, { - duration: Toast.durations.LONG, - position: Toast.positions.TOP, - shadow: true, - animation: true, - hideOnPress: true, - }) - } - const onSelectAutocompleteItem = (item: string) => { - setText(replaceTextAutocompletePrefix(text, item)) - setAutocompleteOptions([]) - } - - const progressColor = - text.length > DANGER_TEXT_LENGTH - ? '#e60000' - : text.length > WARNING_TEXT_LENGTH - ? '#f7c600' - : undefined - - const textDecorated = useMemo(() => { - return (text || '').split(/(\s)/g).map((item, i) => { - if (/^@[a-zA-Z0-9\.-]+$/g.test(item)) { - return ( - <Text key={i} style={{color: colors.blue3}}> - {item} - </Text> - ) - } - return item - }) - }, [text]) - - return ( - <View style={styles.outer}> - <View style={styles.topbar}> - <TouchableOpacity onPress={onPressCancel}> - <Text style={[s.blue3, s.f16]}>Cancel</Text> - </TouchableOpacity> - <View style={s.flex1} /> - <TouchableOpacity onPress={onPressPublish}> - <LinearGradient - colors={[gradients.primary.start, gradients.primary.end]} - start={{x: 0, y: 0}} - end={{x: 1, y: 1}} - style={styles.postBtn}> - <Text style={[s.white, s.f16, s.bold]}>Post</Text> - </LinearGradient> - </TouchableOpacity> - </View> - {error !== '' && ( - <View style={styles.errorLine}> - <View style={styles.errorIcon}> - <FontAwesomeIcon - icon="exclamation" - style={{color: colors.red4}} - size={10} - /> - </View> - <Text style={s.red4}>{error}</Text> - </View> - )} - <BottomSheetTextInput - multiline - scrollEnabled - autoFocus - onChangeText={(text: string) => onChangeText(text)} - placeholder={replyTo ? 'Write your reply' : "What's new?"} - style={styles.textInput}> - {textDecorated} - </BottomSheetTextInput> - <View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}> - <View style={s.flex1} /> - <View> - <ProgressCircle - color={progressColor} - progress={text.length / MAX_TEXT_LENGTH} - /> - </View> - </View> - <Autocomplete - active={autocompleteOptions.length > 0} - items={autocompleteOptions} - onSelect={onSelectAutocompleteItem} - /> - </View> - ) -} - -const atPrefixRegex = /@([\S]*)$/i -function extractTextAutocompletePrefix(text: string) { - const match = atPrefixRegex.exec(text) - if (match) { - return match[1] - } - return undefined -} -function replaceTextAutocompletePrefix(text: string, item: string) { - return text.replace(atPrefixRegex, `@${item} `) -} - -const styles = StyleSheet.create({ - outer: { - flexDirection: 'column', - backgroundColor: '#fff', - padding: 15, - height: '100%', - }, - topbar: { - flexDirection: 'row', - alignItems: 'center', - paddingTop: 10, - paddingBottom: 5, - paddingHorizontal: 5, - }, - postBtn: { - borderRadius: 20, - paddingHorizontal: 20, - paddingVertical: 6, - }, - errorLine: { - flexDirection: 'row', - backgroundColor: colors.red1, - borderRadius: 6, - paddingHorizontal: 8, - paddingVertical: 6, - marginVertical: 6, - }, - errorIcon: { - borderWidth: 1, - borderColor: colors.red4, - color: colors.red4, - borderRadius: 30, - width: 16, - height: 16, - alignItems: 'center', - justifyContent: 'center', - marginRight: 5, - }, - textInput: { - flex: 1, - padding: 5, - fontSize: 18, - }, -}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 6282b5af1..02b65a490 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -9,7 +9,6 @@ import * as models from '../../../state/models/shell' import * as LinkActionsModal from './LinkActions' import * as SharePostModal from './SharePost.native' -import * as ComposePostModal from './ComposePost' import * as EditProfile from './EditProfile' const CLOSED_SNAPPOINTS = ['10%'] @@ -51,13 +50,6 @@ export const Modal = observer(function Modal() { {...(store.shell.activeModal as models.SharePostModel)} /> ) - } else if (store.shell.activeModal?.name === 'compose-post') { - snapPoints = ComposePostModal.snapPoints - element = ( - <ComposePostModal.Component - {...(store.shell.activeModal as models.ComposePostModel)} - /> - ) } else if (store.shell.activeModal?.name === 'edit-profile') { snapPoints = EditProfile.snapPoints element = ( diff --git a/src/view/com/modals/composer/Autocomplete.tsx b/src/view/com/modals/composer/Autocomplete.tsx deleted file mode 100644 index 4e4bdfc8e..000000000 --- a/src/view/com/modals/composer/Autocomplete.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, {useEffect} from 'react' -import { - useWindowDimensions, - Text, - TouchableOpacity, - StyleSheet, -} from 'react-native' -import Animated, { - useSharedValue, - useAnimatedStyle, - withTiming, - interpolate, -} from 'react-native-reanimated' -import {colors} from '../../../lib/styles' - -export function Autocomplete({ - active, - items, - onSelect, -}: { - active: boolean - items: string[] - onSelect: (item: string) => void -}) { - const winDim = useWindowDimensions() - const positionInterp = useSharedValue<number>(0) - - useEffect(() => { - if (active) { - positionInterp.value = withTiming(1, {duration: 250}) - } else { - positionInterp.value = withTiming(0, {duration: 250}) - } - }, [positionInterp, active]) - - const topAnimStyle = useAnimatedStyle(() => ({ - top: interpolate( - positionInterp.value, - [0, 1.0], - [winDim.height, winDim.height / 4], - ), - })) - return ( - <Animated.View style={[styles.outer, topAnimStyle]}> - {items.map((item, i) => ( - <TouchableOpacity - key={i} - style={styles.item} - onPress={() => onSelect(item)}> - <Text style={styles.itemText}>@{item}</Text> - </TouchableOpacity> - ))} - </Animated.View> - ) -} - -const styles = StyleSheet.create({ - outer: { - position: 'absolute', - left: 0, - right: 0, - bottom: 0, - backgroundColor: colors.white, - borderTopWidth: 1, - borderTopColor: colors.gray2, - }, - item: { - borderBottomWidth: 1, - borderBottomColor: colors.gray1, - paddingVertical: 16, - paddingHorizontal: 16, - }, - itemText: { - fontSize: 16, - }, -}) |