jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

hot fix for dinamic size of font for buttonBox component

Browse source
This commit is contained in:
anovazzi1 2023-05-23 16:31:20 -03:00
commit 3f854a88ae
1 changed files with 41 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,4 +1,4 @@
import React, { ReactNode, useEffect } from "react"; import React, { ReactNode, useEffect, useRef, useState } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid"; import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent"; import Tooltip from "../../../components/TooltipComponent";
@ -24,7 +24,7 @@ export default function ButtonBox({
}) { }) {
let bigCircle: string; let bigCircle: string;
let smallCircle: string; let smallCircle: string;
let titleFontSize: string; let titleFontSize: number;
let descriptionFontSize: string; let descriptionFontSize: string;
let padding: string; let padding: string;
let marginTop: string; let marginTop: string;
@ -36,19 +36,19 @@ export default function ButtonBox({
case "small": case "small":
bigCircle = "h-12 w-12"; bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8"; smallCircle = "h-8 w-8";
titleFontSize = "text-sm"; titleFontSize = 14;
descriptionFontSize = "text-xs"; descriptionFontSize = "text-xs";
padding = "p-2 py-3"; padding = "p-2 py-3";
marginTop = "mt-2"; marginTop = "mt-2";
height = "h-36"; height = "h-36";
textHeight = 70; textHeight = 70;
textWidth = 80; textWidth = 40;
width = "w-32"; width = "w-32";
break; break;
case "medium": case "medium":
bigCircle = "h-16 w-16"; bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12"; smallCircle = "h-12 w-12";
titleFontSize = "text-base"; titleFontSize = 16;
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-4 py-5"; padding = "p-4 py-5";
marginTop = "mt-3"; marginTop = "mt-3";
@ -60,7 +60,7 @@ export default function ButtonBox({
case "big": case "big":
bigCircle = "h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize = "text-lg"; titleFontSize = 18;
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-8 py-10"; padding = "p-8 py-10";
marginTop = "mt-6"; marginTop = "mt-6";
@ -70,7 +70,7 @@ export default function ButtonBox({
default: default:
bigCircle = "h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize = "text-lg"; titleFontSize = 18;
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-8 py-10"; padding = "p-8 py-10";
marginTop = "mt-6"; marginTop = "mt-6";
@ -79,43 +79,36 @@ export default function ButtonBox({
break; break;
} }
const titleRef = React.useRef<HTMLHeadingElement>(null); const [fontSize, setFontSize] = useState<number>(16); // Initial font size value
const titleRef = useRef<HTMLHeadingElement>(null);
const parentDivRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
const resizeFont = () => { const textElement = titleRef.current;
const titleElement = titleRef.current; const parentDivElement = parentDivRef.current;
if (titleElement) {
const containerWidth = titleElement.offsetWidth;
const containerHeight = titleElement.offsetHeight;
const titleComputedStyle = window.getComputedStyle(titleElement); if (!textElement || !parentDivElement) return;
const titleWidth = titleElement.getBoundingClientRect().width;
const currentFontSize = parseFloat(titleComputedStyle.fontSize); const parentDivHeight = parentDivElement.offsetHeight;
const parentDivWidth = parentDivElement.offsetWidth;
let textElementHeight = textElement.scrollHeight;
let textElementWidth = textElement.scrollWidth;
const desiredWidth = textWidth - 10; // Subtracting the desired padding if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
let newFontSize = fontSize;
// Calculate the desired font size based on the adjusted width while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
let desiredFontSize = currentFontSize * (desiredWidth / titleWidth); newFontSize -= 1;
textElement.style.fontSize = `${newFontSize}px`;
textElementHeight = textElement.scrollHeight;
textElementWidth = textElement.scrollWidth;
}
// Adjust the desired font size to fit within the container height, if needed setFontSize(newFontSize);
const maxHeight = containerHeight - 10; // Subtracting the desired top padding }
const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed }, [title, size, fontSize]);
desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
// Apply the desired font size and padding to the title element
titleElement.style.fontSize = `${desiredFontSize}px`;
titleElement.style.paddingLeft = "5px";
titleElement.style.paddingRight = "5px";
}
};
resizeFont();
window.addEventListener("resize", resizeFont);
return () => {
window.removeEventListener("resize", resizeFont);
};
}, []);
return ( return (
<button disabled={deactivate} onClick={onClick}> <button disabled={deactivate} onClick={onClick}>
@ -129,7 +122,7 @@ export default function ButtonBox({
)} )}
> >
<div <div
className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`} className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
> >
<div <div
className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`} className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
@ -137,16 +130,16 @@ export default function ButtonBox({
<div className={textColor}>{icon}</div> <div className={textColor}>{icon}</div>
</div> </div>
</div> </div>
<h3 <div ref={parentDivRef} className="w-full h-1/2 mt-auto">
<div
ref={titleRef} ref={titleRef}
className={classNames( className={classNames(
" font-semibold text-white dark:text-white/80", " font-semibold text-white h-full dark:text-white/80",
marginTop
)} )}
> >
{title} {title}
</h3> </div>
</div>
</div> </div>
</button> </button>
); );