Default.tsx (2265B)
1 import * as React from 'react'; 2 import { StyleSheet, Text, TouchableHighlight, View } from 'react-native'; 3 4 import ParsedText, { ParseShape } from 'react-native-parsed-text'; 5 import { renderWeechatFormat } from '../../../../lib/weechat/color-formatter'; 6 import { formatDate } from '../../../../lib/helpers/date-formatter'; 7 8 interface Props { 9 line: WeechatLine; 10 onLongPress: (line: WeechatLine) => void; 11 parseArgs: ParseShape[]; 12 } 13 14 export default class BufferLine extends React.Component<Props> { 15 render(): JSX.Element { 16 const { line, onLongPress, parseArgs } = this.props; 17 return ( 18 <TouchableHighlight onLongPress={() => onLongPress(line)}> 19 <View style={[styles.container]}> 20 <View style={styles.metaContainer}> 21 <View style={styles.userContainer}> 22 <Text style={[styles.text, styles.meta]}> 23 {renderWeechatFormat(line.prefix).map((props, index) => { 24 const { style, ...rest } = props; 25 return ( 26 <Text 27 {...rest} 28 key={index} 29 style={line.highlight ? styles.highlight : style} 30 /> 31 ); 32 })} 33 </Text> 34 </View> 35 <Text style={[styles.text, styles.meta]}> 36 {formatDate(line.date)} 37 </Text> 38 </View> 39 <View style={[styles.messageContainer]}> 40 <Text style={styles.text}> 41 {renderWeechatFormat(line.message).map((props, index) => ( 42 <ParsedText {...props} key={index} parse={parseArgs} /> 43 ))} 44 </Text> 45 </View> 46 </View> 47 </TouchableHighlight> 48 ); 49 } 50 } 51 52 const styles = StyleSheet.create({ 53 container: { 54 backgroundColor: '#2e3440', 55 paddingTop: 4, 56 paddingBottom: 8, 57 paddingHorizontal: 7 58 }, 59 metaContainer: { 60 flexDirection: 'row', 61 paddingBottom: 2 62 }, 63 userContainer: { 64 flex: 1 65 }, 66 messageContainer: { 67 flex: 1, 68 paddingHorizontal: 5 69 }, 70 text: { 71 fontFamily: 'Menlo', 72 color: '#eee', 73 fontSize: 12 74 }, 75 meta: { 76 fontSize: 10 77 }, 78 highlight: { 79 backgroundColor: 'magenta', 80 color: 'yellow' 81 } 82 });