Reset link preview tooltip state when paging through stories
This commit is contained in:
parent
9dfe3cb992
commit
a827cb7c4e
1 changed files with 31 additions and 10 deletions
|
@ -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">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue