rendering formatted text

This commit is contained in:
balzack 2022-10-06 23:09:56 -07:00
parent 446b974aed
commit f7d06e1644
3 changed files with 22 additions and 6 deletions

View File

@ -73,7 +73,7 @@ export function TopicItem({ item }) {
<AntIcons name="cloudo" size={32} color={Colors.alert} /> <AntIcons name="cloudo" size={32} color={Colors.alert} />
)} )}
{ state.message && ( { state.message && (
<Text style={styles.message}>{ state.message }</Text> <Text style={{ paddingLeft: 52, fontSize: state.fontSize, color: state.fontColor }}>{ state.message }</Text>
)} )}
</> </>
)} )}

View File

@ -22,9 +22,6 @@ export const styles = StyleSheet.create({
paddingTop: 2, paddingTop: 2,
color: Colors.grey, color: Colors.grey,
}, },
message: {
paddingLeft: 52,
},
carousel: { carousel: {
paddingLeft: 52, paddingLeft: 52,
marginTop: 4, marginTop: 4,

View File

@ -3,6 +3,7 @@ import { CardContext } from 'context/CardContext';
import { ProfileContext } from 'context/ProfileContext'; import { ProfileContext } from 'context/ProfileContext';
import moment from 'moment'; import moment from 'moment';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions } from 'react-native';
import Colors from 'constants/Colors';
export function useTopicItem(item) { export function useTopicItem(item) {
@ -17,6 +18,8 @@ export function useTopicItem(item) {
width: null, width: null,
height: null, height: null,
activeId: null, activeId: null,
fontSize: 14,
fontColor: Colors.text,
}); });
const profile = useContext(ProfileContext); const profile = useContext(ProfileContext);
@ -78,16 +81,32 @@ export function useTopicItem(item) {
} }
} }
let message, assets; let message, assets, fontSize, fontColor;
try { try {
const data = JSON.parse(item.detail.data); const data = JSON.parse(item.detail.data);
message = data.text; message = data.text;
assets = data.assets; assets = data.assets;
if (data.textSize === 'small') {
fontSize = 10;
}
else if (data.textSize === 'large') {
fontSize = 20;
}
else {
fontSize = 14;
}
if (data.textColor) {
fontColor = data.textColor;
}
else {
fontColor = Colors.text;
}
} }
catch (err) { catch (err) {
console.log("empty message"); console.log("empty message");
} }
let timestamp; let timestamp;
const date = new Date(item.detail.created * 1000); const date = new Date(item.detail.created * 1000);
const now = new Date(); const now = new Date();
@ -102,7 +121,7 @@ export function useTopicItem(item) {
timestamp = moment(date).format('M/DD/YYYY'); timestamp = moment(date).format('M/DD/YYYY');
} }
updateState({ logo, name, known, message, timestamp, transform, status, assets }); updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets });
}, [card, item]); }, [card, item]);
const actions = { const actions = {