martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 01:55:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

support editing message

Browse Source
This commit is contained in:
balzack 2025-01-04 22:31:01 -08:00
parent 9711227e9d
commit 6ddb9055c0
5 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/mobile/src/contacts/Contacts.tsx
View File

@ -40,8 +40,10 @@ export function Contacts({openRegistry, openContact}: {openRegistry: () => void;
<TextInput
dense={true}
style={styles.input}
outlineColor="transparent"
activeOutlineColor="transparent"
autoCapitalize={false}
unserlineStyle={styles.inputUnderline}
underlineStyle={styles.inputUnderline}
mode="outlined"
placeholder={state.strings.contacts}
left={<TextInput.Icon style={styles.icon} icon="magnify" />}

2
app/client/mobile/src/content/Content.tsx
View File

@ -59,6 +59,8 @@ export function Content({openConversation}: {openConversation: ()=>void}) {
style={styles.input}
autoCapitalize={false}
unserlineStyle={styles.inputUnderline}
outlineColor="transparent"
activeOutlineColor="transparent"
mode="outlined"
placeholder={state.strings.topics}
left={<TextInput.Icon style={styles.icon} icon="magnify" />}

49
app/client/mobile/src/message/Message.styled.ts
View File

@ -119,5 +119,52 @@ export const styles = StyleSheet.create({
width: 64,
height: 64,
backgroundColor: 'yellow',
}
},
message: {
width: '100%',
fontSize: 14,
padding: 0,
},
modal: {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
editArea: {
position: 'relative',
display: 'flex',
alignItem: 'center',
justifyContent: 'center',
width:'80%',
maxWidth: 400,
padding: 16,
borderRadius: 8,
},
blur: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
closeIcon: {
position: 'absolute',
top: 0,
right: 0,
backgroundColor: 'transparent',
},
title: {
fontSize: 20,
paddingLeft: 4,
paddingBottom: 4,
},
controls: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
paddingTop: 16,
gap: 8,
},
})

58
app/client/mobile/src/message/Message.tsx
View File

@ -1,7 +1,7 @@
import { useRef, useEffect, useState, useCallback } from 'react';
import { avatar } from '../constants/Icons'
import { Pressable, ScrollView, View, Image } from 'react-native';
import {Icon, Text, IconButton, Surface, Divider} from 'react-native-paper';
import { Pressable, ScrollView, View, Image, Modal } from 'react-native';
import {Icon, Text, TextInput, IconButton, Button, Surface, Divider} from 'react-native-paper';
import { Topic, Card, Profile } from 'databag-client-sdk';
import { ImageAsset } from './imageAsset/ImageAsset';
import { AudioAsset } from './audioAsset/AudioAsset';
@ -12,6 +12,7 @@ import {styles} from './Message.styled';
import { MediaAsset } from '../conversation/Conversatin';
import { Confirm } from '../confirm/Confirm';
import { Shimmer } from './shimmer/Shimmer';
import {BlurView} from '@react-native-community/blur';
export function Message({ topic, card, profile, host, select, selected }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean, select: (id: null | string)=>void, selected: string }) {
const { state, actions } = useMessage();
@ -37,6 +38,10 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
setTimeout(() => setShowAsset(true), 2000);
}, []);
useEffect(() => {
setEditText(text);
}, [text]);
const loaded = () => {
loadedCount.current += 1;
if (loadedCount.current >= assets.length) {
@ -44,6 +49,23 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
}
}
const edit = () => {
setEditing(true);
select(null);
}
const save = async () => {
setSaving(true);
try {
await actions.saveSubject(topic.topicId, topic.sealed, {...topic.data, text: editText});
} catch (err) {
console.log(err);
showError();
}
setSaving(false);
setEditing(false);
}
const block = () => {
setConfirmParams({
title: state.strings.blockMessage,
@ -175,11 +197,7 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
</View>
</Pressable>
<View style={styles.padding}>
{ !locked && status === 'confirmed' && editing && (
<View style={styles.editing}>
</View>
)}
{ !locked && status === 'confirmed' && text && !editing && (
{ !locked && status === 'confirmed' && text && (
<Text style={{ ...styles.text, ...textStyle }}>{ text }</Text>
)}
{ !locked && status !== 'confirmed' && (
@ -212,7 +230,7 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="share-variant-outline" size={24} onPress={() => {}} />
)}
{ !locked && profile && (
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="square-edit-outline" size={24} onPress={() => {}} />
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="square-edit-outline" size={24} onPress={edit} />
)}
{ (host || profile) && (
<IconButton style={styles.option} loading={removing} compact="true" mode="contained" icon="trash-can-outline" size={24} onPress={remove} />
@ -227,6 +245,30 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
)}
<Divider style={styles.border} />
<Confirm show={confirmShow} busy={removing || reporting || blocking} params={confirmParams} />
<Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={editing} onRequestClose={()=>setEditing(false)}>
<View style={styles.modal}>
<Pressable style={styles.blur} onPress={()=>setEditing(false)}>
<BlurView style={styles.blur} blurType="dark" blurAmount={6} reducedTransparencyFallbackColor="dark" />
</Pressable>
<Surface elevation={2} style={styles.editArea}>
<Text style={styles.title}>{ state.strings.edit }</Text>
<TextInput multiline={true} mode="outlined" style={styles.message}
outlineColor="transparent" activeOutlineColor="transparent" spellcheck={false}
autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage}
value={editText} onChangeText={value => setEditText(value)} />
<View style={styles.controls}>
<Button mode="outlined" onPress={()=>setEditing(false)}>
{state.strings.cancel}
</Button>
<Button mode="contained" loading={saving} onPress={save}>
{state.strings.save}
</Button>
</View>
<IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={24} onPress={()=>setEditing(false)} />
</Surface>
</View>
</Modal>
</View>
);
}

4
app/client/mobile/src/registry/Registry.tsx
View File

@ -19,6 +19,8 @@ export function Registry({close, openContact}: {close: () => void; openContact:
dense={true}
style={styles.input}
autoCapitalize={false}
outlineColor="transparent"
activeOutlineColor="transparent"
underlineStyle={styles.inputUnderline}
mode="outlined"
placeholder={state.strings.username}
@ -32,6 +34,8 @@ export function Registry({close, openContact}: {close: () => void; openContact:
dense={true}
style={styles.input}
autoCapitalize={false}
outlineColor="transparent"
activeOutlineColor="transparent"
underlineStyle={styles.inputUnderline}
mode="outlined"
placeholder={state.strings.node}