octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fine tune compose more

This commit is contained in:
Zhiyuan Zheng 2020-12-06 22:32:36 +01:00
parent e5eaf162f4
commit 37ad208f8b
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
8 changed files with 92 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/screens/Shared/Compose.tsx
View File

@ -34,10 +34,10 @@ export type PostState = {
active: boolean
total: number
options: {
'0': string | undefined
'1': string | undefined
'2': string | undefined
'3': string | undefined
'4': string | undefined
}
multiple: boolean
expire:

45
src/screens/Shared/Compose/Actions.tsx
View File

@ -96,6 +96,30 @@ const ComposeActions: React.FC<Props> = ({
postState.attachmentUploadProgress
])
const emojiColor = useMemo(() => {
if (!postState.emoji.emojis) return theme.disabled
if (postState.emoji.active) {
return theme.primary
} else {
return theme.secondary
}
}, [postState.emoji.active, postState.emoji.emojis])
const emojiOnPress = useCallback(() => {
if (postState.emoji.emojis) {
if (postState.emoji.active) {
postDispatch({
type: 'emoji',
payload: { ...postState.emoji, active: false }
})
} else {
postDispatch({
type: 'emoji',
payload: { ...postState.emoji, active: true }
})
}
}
}, [postState.emoji.active, postState.emoji.emojis])
return (
<Pressable
style={[
@ -148,25 +172,8 @@ const ComposeActions: React.FC<Props> = ({
<Feather
name='smile'
size={24}
color={
postState.emoji.emojis?.length ? theme.secondary : theme.disabled
}
{...(postState.emoji.emojis && {
onPress: () => {
if (postState.emoji.active) {
postDispatch({
type: 'emoji',
payload: { ...postState.emoji, active: false }
})
} else {
Keyboard.dismiss()
postDispatch({
type: 'emoji',
payload: { ...postState.emoji, active: true }
})
}
}
})}
color={emojiColor}
onPress={emojiOnPress}
/>
<Text
style={[

1
src/screens/Shared/Compose/Attachments.tsx
View File

@ -150,6 +150,7 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
renderItem={renderAttachment}
ListFooterComponent={listFooter}
showsHorizontalScrollIndicator={false}
keyboardShouldPersistTaps='handled'
/>
</View>
)

1
src/screens/Shared/Compose/Emojis.tsx
View File

@ -31,6 +31,7 @@ const ComposeEmojis: React.FC<Props> = ({
<View style={styles.base}>
<SectionList
horizontal
keyboardShouldPersistTaps='handled'
sections={postState.emoji.emojis!}
keyExtractor={item => item.shortcode}
renderSectionHeader={({ section: { title } }) => (

81
src/screens/Shared/Compose/Poll.tsx
View File

@ -1,12 +1,5 @@
import React, { Dispatch, useEffect, useState } from 'react'
import {
ActionSheetIOS,
Pressable,
StyleSheet,
Text,
TextInput,
View
} from 'react-native'
import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
import { Feather } from '@expo/vector-icons'
import { PostAction, PostState } from '../Compose'
@ -41,35 +34,51 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
return (
<View style={[styles.base, { borderColor: theme.border }]}>
<View style={styles.options}>
{[...Array(postState.poll.total)].map((e, i) => (
<View key={i} style={styles.option}>
<Feather
name={postState.poll.multiple ? 'square' : 'circle'}
size={StyleConstants.Font.Size.L}
color={theme.secondary}
/>
<TextInput
{...(i === 0 && firstRender && { autoFocus: true })}
style={[
styles.textInput,
{ borderColor: theme.border, color: theme.primary }
]}
placeholder={`选项 ${i}`}
placeholderTextColor={theme.secondary}
maxLength={50}
value={postState.poll.options[i]}
onChangeText={e =>
postDispatch({
type: 'poll',
payload: {
...postState.poll,
options: { ...postState.poll.options, [i]: e }
{[...Array(postState.poll.total)].map((e, i) => {
const restOptions = Object.keys(postState.poll.options).filter(
o => parseInt(o) !== i && parseInt(o) < postState.poll.total
)
let hasConflict = false
restOptions.forEach(o => {
// @ts-ignore
if (postState.poll.options[o] === postState.poll.options[i]) {
hasConflict = true
}
})
return (
<View key={i} style={styles.option}>
<Feather
name={postState.poll.multiple ? 'square' : 'circle'}
size={StyleConstants.Font.Size.L}
color={theme.secondary}
/>
<TextInput
{...(i === 0 && firstRender && { autoFocus: true })}
style={[
styles.textInput,
{
borderColor: theme.border,
color: hasConflict ? theme.error : theme.primary
}
})
}
/>
</View>
))}
]}
placeholder={`选项`}
placeholderTextColor={theme.secondary}
maxLength={50}
// @ts-ignore
value={postState.poll.options[i]}
onChangeText={e =>
postDispatch({
type: 'poll',
payload: {
...postState.poll,
options: { ...postState.poll.options, [i]: e }
}
})
}
/>
</View>
)
})}
</View>
<View style={styles.controlAmount}>
<View style={styles.firstButton}>

9
src/screens/Shared/Compose/Root.tsx
View File

@ -92,6 +92,7 @@ const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {
progressViewStyle='bar'
/>
<FlatList
keyboardShouldPersistTaps='handled'
ListHeaderComponent={
<ComposeTextInput
postState={postState}
@ -237,8 +238,8 @@ const styles = StyleSheet.create({
alignItems: 'center',
paddingTop: StyleConstants.Spacing.S,
paddingBottom: StyleConstants.Spacing.S,
paddingLeft: StyleConstants.Spacing.Global.PagePadding,
paddingRight: StyleConstants.Spacing.Global.PagePadding,
marginLeft: StyleConstants.Spacing.Global.PagePadding,
marginRight: StyleConstants.Spacing.Global.PagePadding,
borderBottomWidth: StyleSheet.hairlineWidth
},
accountAvatar: {
@ -259,8 +260,8 @@ const styles = StyleSheet.create({
flex: 1,
paddingTop: StyleConstants.Spacing.S,
paddingBottom: StyleConstants.Spacing.S,
paddingLeft: StyleConstants.Spacing.Global.PagePadding,
paddingRight: StyleConstants.Spacing.Global.PagePadding,
marginLeft: StyleConstants.Spacing.Global.PagePadding,
marginRight: StyleConstants.Spacing.Global.PagePadding,
borderBottomWidth: StyleSheet.hairlineWidth
},
hashtagText: {

2
src/screens/Shared/Compose/TextInput.tsx
View File

@ -62,7 +62,7 @@ const styles = StyleSheet.create({
paddingBottom: StyleConstants.Spacing.M,
marginLeft: StyleConstants.Spacing.Global.PagePadding,
marginRight: StyleConstants.Spacing.Global.PagePadding,
borderBottomWidth: 0.5
// borderBottomWidth: 0.5
}
})

17
src/screens/Shared/Compose/formatText.tsx
View File

@ -3,6 +3,7 @@ import React, { createElement, Dispatch } from 'react'
import { Text } from 'react-native'
import { RefetchOptions } from 'react-query/types/core/query'
import Autolinker from 'src/modules/autolinker'
import { useTheme } from 'src/utils/styles/ThemeManager'
import { PostAction, PostState } from '../Compose'
export interface Params {
@ -12,6 +13,16 @@ export interface Params {
disableDebounce?: boolean
}
const TagText = ({ text }: { text: string }) => {
const { theme } = useTheme()
return (
<Text style={{ color: theme.link }} key={Math.random()}>
{text}
</Text>
)
}
const debouncedSuggestions = debounce(
(postDispatch, tag) => {
postDispatch({ type: 'tag', payload: tag })
@ -77,11 +88,7 @@ const formatText = ({
const prevPart = parts.shift()
children.push(prevPart)
contentLength = contentLength + (prevPart ? prevPart.length : 0)
children.push(
<Text style={{ color: 'red' }} key={Math.random()}>
{tag!.text}
</Text>
)
children.push(<TagText text={tag!.text} />)
switch (tag!.type) {
case 'url':
contentLength = contentLength + 23