added textWidth option to Info Bubble

actualbudget · Oct 13, 2024 · b43180d · b43180d
1 parent fb97969
commit b43180d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/desktop-client/src/components/common/InfoBubble.tsx b/packages/desktop-client/src/components/common/InfoBubble.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { getTextWidth } from 'loot-core/shared/text-width';
-
 import { SvgInformationCircle } from '../../icons/v2';
 import { theme } from '../../style';
 
@@ -11,14 +9,14 @@ import { View } from './View';
 
 type InfoBubbleProps = {
   label: string;
+  textWidth?: number;
 };
 
-export function InfoBubble({ label }: InfoBubbleProps) {
+export function InfoBubble({ label, textWidth }: InfoBubbleProps) {
   const location = useLocation();
   const [visible, setVisible] = useState(location.hash === '#info');
 
-  const bubbleWidth = getTextWidth(label, 500);
-  console.log(bubbleWidth);
+  const width = textWidth || getStringWidth(label);
 
   return visible ? (
     <View style={{ userSelect: 'none' }}>
@@ -43,7 +41,7 @@ export function InfoBubble({ label }: InfoBubbleProps) {
       >
         <Text
           style={{
-            width: bubbleWidth,
+            width,
           }}
         >
           {label}
@@ -60,3 +58,11 @@ export function InfoBubble({ label }: InfoBubbleProps) {
     </View>
   );
 }
+
+function getStringWidth(text: string): number {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  context.font = getComputedStyle(document.body).font;
+
+  return Math.ceil(context.measureText(text).width);
+}
diff --git a/packages/desktop-client/src/components/settings/Upcoming.tsx b/packages/desktop-client/src/components/settings/Upcoming.tsx
@@ -57,7 +57,7 @@ export function UpcomingLengthSettings() {
                   style={selectButtonStyle}
                 />
               </View>
-              <InfoBubble label="Only the first i i i i i i i i i i i i  instance of a recurring transaction will be shown." />
+              <InfoBubble label="Only the first instance of a recurring transaction will be shown." />
             </View>
           </Column>
         </View>