style: overlay scroller

src/components/overlay-scroller/index.tsx

@@ -1,4 +1,6 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import useOverlayScroller, {
+  OverlayScrollerOptions
+} from '@/hooks/use-overlay-scroller';
 import { Tooltip, TooltipProps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
@@ -10,16 +12,18 @@ const Wrapper = styled.div<{ $maxHeight?: number }>`
   width: 100%;
 `;
 
-const OverlayScroller: React.FC<any> = ({
-  children,
-  maxHeight,
-  theme,
-  style
-}) => {
+export const OverlayScroller: React.FC<
+  OverlayScrollerOptions & {
+    maxHeight?: number;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+  }
+> = ({ children, maxHeight, scrollbars, oppositeTheme, style }) => {
   const scroller = React.useRef<any>(null);
   const { initialize } = useOverlayScroller({
     options: {
-      theme: theme || 'os-theme-light'
+      scrollbars,
+      oppositeTheme
     }
   });
 
@@ -36,7 +40,6 @@ const OverlayScroller: React.FC<any> = ({
       className="overlay-scroller-wrapper"
       $maxHeight={maxHeight || 200}
       hidden={false}
-      as="div"
       style={{
         paddingInlineStart: 8,
         paddingInlineEnd: 8,
@@ -48,17 +51,43 @@ const OverlayScroller: React.FC<any> = ({
   );
 };
 
+/**
+ *
+ * @param maxHeight: use for scrollbars
+ * @param theme: because this component is used for tooltip, so the default theme always is light
+ * @returns
+ */
 export const TooltipOverlayScroller: React.FC<
-  TooltipProps & { maxHeight?: number }
-> = ({ children, maxHeight, title, ...rest }) => {
+  OverlayScrollerOptions & {
+    maxHeight?: number;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    toolTipProps?: TooltipProps;
+  }
+> = ({
+  children,
+  maxHeight,
+  title,
+  toolTipProps,
+  scrollbars,
+  oppositeTheme
+}) => {
+  const { overlayInnerStyle, ...rest } = toolTipProps || {};
   return (
     <Tooltip
       overlayInnerStyle={{
-        paddingInline: 0
+        paddingInline: 0,
+        ...overlayInnerStyle
       }}
       title={
         title && (
-          <OverlayScroller maxHeight={maxHeight}>{title}</OverlayScroller>
+          <OverlayScroller
+            scrollbars={{ ...scrollbars, theme: 'os-theme-light' }}
+            maxHeight={maxHeight}
+            oppositeTheme={oppositeTheme}
+          >
+            {title}
+          </OverlayScroller>
         )
       }
       {...rest}