|
import React, { useState } from 'react';
|
|
import { Scrollbar, ScrollbarProps } from 'react-scrollbars-custom';
|
|
|
|
interface ICustomScrollbarProps extends Omit<ScrollbarProps, 'ref'> {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const CustomScrollbar: React.FC<ICustomScrollbarProps> = ({ children, style, ...props }) => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
return (
|
|
<Scrollbar
|
|
style={{ width: '100%', height: '100%', backgroundColor: 'transparent', ...style }}
|
|
noScrollX
|
|
wrapperProps={{
|
|
onMouseEnter: () => setIsHovered(true),
|
|
onMouseLeave: () => setIsHovered(false),
|
|
style: { backgroundColor: 'transparent' },
|
|
}}
|
|
contentProps={{
|
|
style: { backgroundColor: 'transparent' }
|
|
}}
|
|
trackYProps={{
|
|
renderer: (props) => {
|
|
const { elementRef, ...restProps } = props;
|
|
return (
|
|
<div
|
|
{...restProps}
|
|
ref={elementRef}
|
|
className="scrollbar-track"
|
|
style={{
|
|
position: 'absolute',
|
|
width: '6px',
|
|
top: 2,
|
|
bottom: 2,
|
|
right: 2,
|
|
borderRadius: '3px',
|
|
backgroundColor: 'rgba(105, 105, 105, 0.1)',
|
|
transition: 'opacity 0.3s',
|
|
opacity: isHovered ? 1 : 0,
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
}}
|
|
thumbYProps={{
|
|
renderer: (props) => {
|
|
const { elementRef, ...restProps } = props;
|
|
return (
|
|
<div
|
|
{...restProps}
|
|
ref={elementRef}
|
|
className="scrollbar-thumb"
|
|
style={{
|
|
borderRadius: '3px',
|
|
backgroundColor: '#c9a8a3ff',
|
|
width: '100%',
|
|
cursor: 'pointer',
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
}}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Scrollbar>
|
|
);
|
|
};
|
|
|
|
export default CustomScrollbar;
|