Reset link preview tooltip state when paging through stories

This commit is contained in:
Josh Perez 2022-11-23 19:07:43 -05:00 committed by GitHub
parent 9dfe3cb992
commit a827cb7c4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -20,6 +20,7 @@ import {
getHexFromNumber, getHexFromNumber,
getBackgroundColor, getBackgroundColor,
} from '../util/getStoryBackground'; } from '../util/getStoryBackground';
import { SECOND } from '../util/durations';
const renderNewLines: RenderTextCallbackType = ({ const renderNewLines: RenderTextCallbackType = ({
text: textWithNewLines, text: textWithNewLines,
@ -133,6 +134,32 @@ export function TextAttachment({
node.setSelectionRange(node.value.length, node.value.length); node.setSelectionRange(node.value.length, node.value.length);
}, [isEditingText]); }, [isEditingText]);
useEffect(() => {
setLinkPreviewOffsetTop(undefined);
}, [textAttachment.preview?.url]);
const [isHoveringOverTooltip, setIsHoveringOverTooltip] = useState(false);
function showTooltip() {
if (disableLinkPreviewPopup) {
return;
}
setIsHoveringOverTooltip(true);
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
}
useEffect(() => {
const timeout = setTimeout(() => {
if (!isHoveringOverTooltip) {
setLinkPreviewOffsetTop(undefined);
}
}, 5 * SECOND);
return () => {
clearTimeout(timeout);
};
}, [isHoveringOverTooltip]);
const storyBackgroundColor = { const storyBackgroundColor = {
background: getBackgroundColor(textAttachment), background: getBackgroundColor(textAttachment),
}; };
@ -249,16 +276,10 @@ export function TextAttachment({
), ),
})} })}
ref={linkPreview} ref={linkPreview}
onFocus={() => { onBlur={() => setIsHoveringOverTooltip(false)}
if (!disableLinkPreviewPopup) { onFocus={showTooltip}
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop); onMouseOut={() => setIsHoveringOverTooltip(false)}
} onMouseOver={showTooltip}
}}
onMouseOver={() => {
if (!disableLinkPreviewPopup) {
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
}
}}
> >
{onRemoveLinkPreview && ( {onRemoveLinkPreview && (
<div className="TextAttachment__preview__remove"> <div className="TextAttachment__preview__remove">