Shared: CampaignsBanner: fix fit text
This commit is contained in:
parent
d2ebe60c5d
commit
83ed4c07ef
@ -60,16 +60,19 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
|
||||
const hasText = !!Text;
|
||||
const isButton = action?.isButton;
|
||||
|
||||
const { fontSize, ref } = useFitText(campaignBackground, body?.fontSize);
|
||||
const { fontSize, ref, wrapperRef } = useFitText(
|
||||
campaignBackground,
|
||||
body?.fontSize,
|
||||
);
|
||||
|
||||
return (
|
||||
<BannerWrapper
|
||||
ref={ref}
|
||||
ref={wrapperRef}
|
||||
data-testid="campaigns-banner"
|
||||
background={campaignBackground}
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<BannerContent>
|
||||
<BannerContent ref={ref}>
|
||||
{hasTitle && (
|
||||
<TextComponent
|
||||
className="header"
|
||||
|
@ -31,6 +31,7 @@ const useFitText = (
|
||||
currentFontSize: string = "13px",
|
||||
) => {
|
||||
const ref: React.RefObject<HTMLDivElement> = useRef(null);
|
||||
const wrapperRef: React.RefObject<HTMLDivElement> = useRef(null);
|
||||
|
||||
const [fontSize, setFontSize] = useState(parseInt(currentFontSize, 10));
|
||||
|
||||
@ -40,15 +41,17 @@ const useFitText = (
|
||||
|
||||
useEffect(() => {
|
||||
const isOverflow =
|
||||
!!ref.current && ref.current.scrollHeight > ref.current.offsetHeight;
|
||||
!!ref.current &&
|
||||
!!wrapperRef.current &&
|
||||
ref.current.scrollHeight > wrapperRef.current.offsetHeight;
|
||||
|
||||
if (isOverflow) {
|
||||
const newFontSize = fontSize - 1;
|
||||
setFontSize(newFontSize);
|
||||
}
|
||||
}, [currentFontSize, fontSize, ref?.current?.scrollHeight]);
|
||||
}, [fontSize]);
|
||||
|
||||
return { fontSize: `${fontSize}px`, ref };
|
||||
return { fontSize: `${fontSize}px`, ref, wrapperRef };
|
||||
};
|
||||
|
||||
export default useFitText;
|
||||
|
Loading…
Reference in New Issue
Block a user