|
1 | 1 | import React from "react"; |
2 | 2 | import SimpleBar from "simplebar-react"; |
| 3 | +import 'simplebar-react/dist/simplebar.min.css'; |
3 | 4 | import styled from "styled-components"; |
| 5 | +import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's DebouncedFunc type |
4 | 6 |
|
5 | | -const ScrollBarWrapper = styled.div` |
| 7 | + |
| 8 | +const ScrollBarWrapper = styled.div<{ hidePlaceholder?: boolean }>` |
6 | 9 | min-height: 0; |
7 | 10 | height: 100%; |
8 | 11 | width: 100%; |
@@ -33,19 +36,39 @@ const ScrollBarWrapper = styled.div` |
33 | 36 | top: 10px; |
34 | 37 | bottom: 10px; |
35 | 38 | } |
| 39 | + |
| 40 | + ${props => props.hidePlaceholder && ` |
| 41 | + .simplebar-placeholder { |
| 42 | + display: none !important; |
| 43 | + } |
| 44 | + `} |
36 | 45 | `; |
37 | 46 |
|
38 | | -interface IProps extends SimpleBar.Props { |
| 47 | +// .simplebar-placeholder { added by Falk Wolsky to hide the placeholder - as it doubles the vertical space of a Module on a page |
| 48 | + |
| 49 | +interface IProps { |
39 | 50 | children: React.ReactNode; |
40 | 51 | className?: string; |
41 | 52 | height?: string; |
| 53 | + style?: React.CSSProperties; // Add this line to include a style prop |
| 54 | + scrollableNodeProps?: { |
| 55 | + onScroll: DebouncedFunc<(e: any) => void>; |
| 56 | + }; |
| 57 | + hidePlaceholder?: boolean; |
| 58 | + hideScrollbar?: boolean; |
42 | 59 | } |
43 | 60 |
|
44 | | -export const ScrollBar = (props: IProps) => { |
45 | | - const { height = "100%", className, children, ...otherProps } = props; |
46 | | - return ( |
| 61 | +export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar = false, ...otherProps }: IProps) => { |
| 62 | + // You can now use the style prop directly or pass it to SimpleBar |
| 63 | + const combinedStyle = { ...style, height }; // Example of combining height with passed style |
| 64 | + |
| 65 | + return hideScrollbar ? ( |
| 66 | + <ScrollBarWrapper className={className}> |
| 67 | + {children} |
| 68 | + </ScrollBarWrapper> |
| 69 | + ) : ( |
47 | 70 | <ScrollBarWrapper className={className}> |
48 | | - <SimpleBar forceVisible="y"style={{height: height}} {...otherProps}> |
| 71 | + <SimpleBar style={combinedStyle}scrollableNodeProps={scrollableNodeProps} {...otherProps}> |
49 | 72 | {children} |
50 | 73 | </SimpleBar> |
51 | 74 | </ScrollBarWrapper> |
|
0 commit comments