style: overlay scroller

src/components/auto-tooltip/index.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState
 } from 'react';
-import TitleTip from './title-tip';
+import { TooltipOverlayScroller } from '../overlay-scroller';
 
 // type TagProps = React.ComponentProps<typeof Tag>;
 
@@ -91,23 +91,12 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 
   return (
-    <Tooltip
-      overlayInnerStyle={{ paddingInline: 0 }}
-      destroyTooltipOnHide={false}
-      title={
-        isOverflowing || showTitle ? (
-          <TitleTip
-            isOverflowing={isOverflowing}
-            title={title}
-            showTitle={showTitle}
-          >
-            {children}
-          </TitleTip>
-        ) : (
-          false
-        )
-      }
-      {...tooltipProps}
+    <TooltipOverlayScroller
+      toolTipProps={{
+        ...tooltipProps,
+        destroyTooltipOnHide: false
+      }}
+      title={isOverflowing || showTitle ? children : false}
     >
       {ghost ? (
         <div ref={contentRef} style={tagStyle} data-overflow={isOverflowing}>
@@ -139,7 +128,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
           {children}
         </Tag>
       )}
-    </Tooltip>
+    </TooltipOverlayScroller>
   );
 };
 

src/components/auto-tooltip/title-tip.tsx

@@ -1,4 +1,4 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { OverlayScroller } from '@/components/overlay-scroller';
 import React from 'react';
 
 interface TitleTipProps {
@@ -10,27 +10,18 @@ interface TitleTipProps {
 
 const TitleTip: React.FC<TitleTipProps> = (props) => {
   const { isOverflowing, showTitle, title, children } = props;
-  const { initialize } = useOverlayScroller();
-  const scrollRef = React.useRef<any>(null);
-
-  React.useEffect(() => {
-    if (scrollRef.current) {
-      initialize(scrollRef.current);
-    }
-  }, [initialize, scrollRef.current]);
 
   return (
-    <div style={{ maxHeight: 200, overflowY: 'auto' }} ref={scrollRef}>
+    <OverlayScroller maxHeight={200}>
       <div
         style={{
           width: 'fit-content',
-          maxWidth: 'var(--width-tooltip-max)',
-          paddingInline: 8
+          maxWidth: 'var(--width-tooltip-max)'
         }}
       >
         {isOverflowing || showTitle ? title || children : ''}
       </div>
-    </div>
+    </OverlayScroller>
   );
 };