jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix textelipsis comp style computing loop

Browse source
This commit is contained in:
sylenien 2022-07-11 11:29:39 +02:00 • committed by Shekar Siri
parent cebaab689c
commit 5a8bd2cae5
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
View file

@ -46,6 +46,7 @@ class EventGroupWrapper extends React.PureComponent {
const isLocation = event.type === TYPES.LOCATION;
const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
const safeRef = String(event.referrer || '');
return (
<div
className={
@ -59,7 +60,7 @@ class EventGroupWrapper extends React.PureComponent {
{ isFirst && isLocation && event.referrer &&
<div className={ stl.referrer }>
<TextEllipsis>
Referrer: <span className={stl.url}>{ event.referrer }</span>
Referrer: <span className={stl.url}>{safeRef}</span>
</TextEllipsis>
</div>
}

32
frontend/app/components/ui/TextEllipsis/TextEllipsis.js
View file

@ -5,12 +5,12 @@ import { Popup } from 'UI';
import styles from './textEllipsis.module.css';
/** calculates text width in pixels
+ * by creating a hidden element with t
+ * ext and counting its width
+ * @param text String - text string
+ * @param fontProp String - font properties
+ * @returns width number
+ */
* by creating a hidden element with
* text and counting its width
* @param text String - text string
* @param fontProp String - font properties
* @returns width number
*/
function findTextWidth(text, fontProp) {
const tag = document.createElement('div')
@ -51,21 +51,27 @@ const TextEllipsis = ({
...props
}) => {
const [showPopup, setShowPopup] = useState(false)
const [computed, setComputed] = useState(false)
const textRef = useRef(null);
const textOrChildren = text || children;
const popupId = (Math.random() + 1).toString(36).substring(7);
const popupId = (Math.random() + 1).toString(36).substring(2);
useEffect(() => {
const element = textRef.current;
if (computed) return;
if (textRef.current) {
const element = textRef.current;
const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
const textWidth = findTextWidth(element.innerText, fontSize)
if (textWidth > element.clientWidth) setShowPopup(true)
else setShowPopup(false)
setComputed(true)
}
const textWidth = findTextWidth(element.innerText, fontSize)
if (textWidth > element.clientWidth) setShowPopup(true)
else setShowPopup(false)
}, [textRef.current])
}, [textRef.current, computed])
if (noHint || !showPopup) return (
<Trigger