migrate tooltips of file_preview_modal_main_actions.tsx to WithTooltip (#27243)

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_actions/file_preview_modal_main_actions.tsx

@@ -12,10 +12,9 @@ import {getFilePublicLink as selectFilePublicLink} from 'mattermost-redux/select
 
 import CopyButton from 'components/copy_button';
 import ExternalLink from 'components/external_link';
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
 
-import Constants, {FileTypes} from 'utils/constants';
+import {FileTypes} from 'utils/constants';
 import {copyToClipboard, getFileType} from 'utils/utils';
 
 import type {GlobalState} from 'types/store';
@@ -63,15 +62,11 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
         defaultMessage: 'Close',
     });
     const closeButton = (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+            id='close-icon-tooltip'
-            key='publicLink'
+            title={closeMessage}
             placement={tooltipPlacement}
-            overlay={
+            key='publicLink'
-                <Tooltip id='close-icon-tooltip'>
-                    {closeMessage}
-                </Tooltip>
-            }
         >
             <button
                 className='file-preview-modal-main-actions__action-item'
@@ -80,7 +75,7 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-close'/>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 
     let publicTooltipMessage;
@@ -96,17 +91,13 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
         });
     }
     const publicLink = (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+            id='link-variant-icon-tooltip.text'
             key='filePreviewPublicLink'
             placement={tooltipPlacement}
+            title={publicTooltipMessage}
             shouldUpdatePosition={true}
             onExit={() => setPublicLinkCopied(false)}
-            overlay={
-                <Tooltip id='link-variant-icon-tooltip'>
-                    {publicTooltipMessage}
-                </Tooltip>
-            }
         >
             <a
                 href='#'
@@ -116,7 +107,7 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-link-variant'/>
             </a>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 
     const downloadMessage = intl.formatMessage({
@@ -124,15 +115,11 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
         defaultMessage: 'Download',
     });
     const download = (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+            id='download-icon-tooltip.text'
             key='download'
             placement={tooltipPlacement}
-            overlay={
+            title={downloadMessage}
-                <Tooltip id='download-icon-tooltip'>
-                    {downloadMessage}
-                </Tooltip>
-            }
         >
             <ExternalLink
                 href={props.fileURL}
@@ -143,7 +130,7 @@ const FilePreviewModalMainActions: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-download-outline'/>
             </ExternalLink>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 
     const copy = (

webapp/channels/src/components/with_tooltip/create_tooltip.tsx

@@ -20,6 +20,7 @@ export type CommonTooltipProps = {
     shortcut?: ShortcutDefinition;
     emoji?: string;
     emojiStyle?: EmojiStyle;
+    shouldUpdatePosition?: boolean;
 }
 
 export function createTooltip(commonTooltipProps: CommonTooltipProps) {

webapp/channels/src/components/with_tooltip/index.tsx

@@ -17,6 +17,7 @@ type WithTooltipProps = {
     children: OverlayTriggerProps['children'];
     placement: OverlayTriggerProps['placement'];
     onShow?: () => void;
+    onExit?: () => void;
 } & CommonTooltipProps;
 const WithTooltip = ({
     id,
@@ -28,6 +29,8 @@ const WithTooltip = ({
     placement,
     onShow,
     children,
+    onExit,
+    shouldUpdatePosition,
 }: WithTooltipProps) => {
     const ThisTooltip = useMemo(() => createTooltip({
         id,
@@ -44,6 +47,8 @@ const WithTooltip = ({
             overlay={<ThisTooltip/>}
             placement={placement}
             onEnter={onShow}
+            onExit={onExit}
+            shouldUpdatePosition={shouldUpdatePosition}
         >
             {children}
         </OverlayTrigger>