101 lines
2.2 KiB
TypeScript
101 lines
2.2 KiB
TypeScript
import useOverlayScroller, {
|
|
OverlayScrollerOptions
|
|
} from '@/hooks/use-overlay-scroller';
|
|
import { Tooltip, TooltipProps } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
const Wrapper = styled.div<{ $maxHeight?: number }>`
|
|
max-height: ${({ $maxHeight }) =>
|
|
typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
`;
|
|
|
|
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: {
|
|
scrollbars,
|
|
oppositeTheme
|
|
}
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
if (scroller.current) {
|
|
initialize(scroller.current);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<Wrapper
|
|
ref={scroller}
|
|
data-overlayscrollbars-initialize
|
|
className="overlay-scroller-wrapper"
|
|
$maxHeight={maxHeight || 200}
|
|
hidden={false}
|
|
style={{
|
|
paddingInlineStart: 8,
|
|
paddingInlineEnd: 8,
|
|
...style
|
|
}}
|
|
>
|
|
{children}
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
/**
|
|
*
|
|
* @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<
|
|
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,
|
|
...overlayInnerStyle
|
|
}}
|
|
title={
|
|
title && (
|
|
<OverlayScroller
|
|
scrollbars={{ ...scrollbars, theme: 'os-theme-light' }}
|
|
maxHeight={maxHeight}
|
|
oppositeTheme={oppositeTheme}
|
|
>
|
|
{title}
|
|
</OverlayScroller>
|
|
)
|
|
}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default OverlayScroller;
|