Calculate nick width based on 8 characters

mhoran · Mar 14, 2024 · 81342b6 · 81342b6
1 parent ff43f93
commit 81342b6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/src/usecase/buffers/ui/Buffer.tsx b/src/usecase/buffers/ui/Buffer.tsx
@@ -48,7 +48,7 @@ const Header: React.FC<HeaderProps> = ({ bufferId, lines, fetchMoreLines }) => {
 };
 
 interface State {
-  letterWidth: number;
+  nickWidth: number;
 }
 
 export default class Buffer extends React.PureComponent<Props, State> {
@@ -57,7 +57,7 @@ export default class Buffer extends React.PureComponent<Props, State> {
   linesList = React.createRef<FlashList<WeechatLine>>();
 
   state = {
-    letterWidth: 0
+    nickWidth: 0
   };
 
   componentDidUpdate(prevProps: Props) {
@@ -82,7 +82,7 @@ export default class Buffer extends React.PureComponent<Props, State> {
         line={item}
         onLongPress={onLongPress}
         parseArgs={parseArgs}
-        letterWidth={this.state.letterWidth}
+        nickWidth={this.state.nickWidth}
         lastReadLine={lastReadLine}
         lastMessageDate={lastMessage?.date}
       />
@@ -92,15 +92,15 @@ export default class Buffer extends React.PureComponent<Props, State> {
   render() {
     const { bufferId, lines, fetchMoreLines } = this.props;
 
-    if (!this.state.letterWidth) {
+    if (!this.state.nickWidth) {
       return (
         <Text
           onLayout={(layout) => {
-            this.setState({ letterWidth: layout.nativeEvent.layout.width });
+            this.setState({ nickWidth: layout.nativeEvent.layout.width });
           }}
           style={[lineStyles.text, { opacity: 0, position: 'absolute' }]}
         >
-          a
+          aaaaaaaa
         </Text>
       );
     }

diff --git a/src/usecase/buffers/ui/BufferLine.tsx b/src/usecase/buffers/ui/BufferLine.tsx
@@ -10,7 +10,7 @@ interface Props {
   line: WeechatLine;
   onLongPress: (line: WeechatLine) => void;
   parseArgs: ParseShape[];
-  letterWidth: number;
+  nickWidth: number;
   lastReadLine?: string;
   lastMessageDate?: string;
 }
@@ -19,7 +19,7 @@ const BufferLine: React.FC<Props> = ({
   line,
   onLongPress,
   parseArgs,
-  letterWidth,
+  nickWidth,
   lastReadLine,
   lastMessageDate
 }) => {
@@ -42,7 +42,7 @@ const BufferLine: React.FC<Props> = ({
             line={line}
             onLongPress={onLongPress}
             parseArgs={parseArgs}
-            letterWidth={letterWidth}
+            nickWidth={nickWidth}
           />
         </>
       )}

diff --git a/src/usecase/buffers/ui/themes/Default.tsx b/src/usecase/buffers/ui/themes/Default.tsx
@@ -9,14 +9,14 @@ interface Props {
   line: WeechatLine;
   onLongPress: (line: WeechatLine) => void;
   parseArgs: ParseShape[];
-  letterWidth: number;
+  nickWidth: number;
 }
 
 const BufferLine: React.FC<Props> = ({
   line,
   onLongPress,
   parseArgs,
-  letterWidth
+  nickWidth
 }) => {
   return (
     <TouchableHighlight onLongPress={() => onLongPress(line)}>
@@ -27,8 +27,7 @@ const BufferLine: React.FC<Props> = ({
           style={[
             styles.text,
             {
-              width: letterWidth * 8,
-              paddingRight: letterWidth,
+              width: nickWidth,
               textAlign: 'right'
             }
           ]}
@@ -44,6 +43,7 @@ const BufferLine: React.FC<Props> = ({
             );
           })}
         </Text>
+        <Text style={styles.text}> </Text>
 
         <View style={[styles.messageContainer]}>
           <Text style={styles.text}>
@@ -53,9 +53,7 @@ const BufferLine: React.FC<Props> = ({
           </Text>
         </View>
 
-        <Text style={[styles.text, { paddingLeft: letterWidth }]}>
-          {formatDate(line.date)}
-        </Text>
+        <Text style={[styles.text]}> {formatDate(line.date)}</Text>
       </View>
     </TouchableHighlight>
   );