|
1 | 1 | importReactfrom"react"; |
2 | 2 | importSimpleBarfrom"simplebar-react"; |
| 3 | +import'simplebar-react/dist/simplebar.min.css'; |
3 | 4 | importstyledfrom"styled-components"; |
| 5 | +import{DebouncedFunc}from'lodash';// Assuming you're using lodash's DebouncedFunc type |
4 | 6 |
|
5 | | -constScrollBarWrapper=styled.div` |
| 7 | + |
| 8 | +constScrollBarWrapper=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 | | -interfaceIPropsextendsSimpleBar.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 | +interfaceIProps{ |
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 | | -exportconstScrollBar=(props:IProps)=>{ |
45 | | -const{ height="100%", className, children, ...otherProps}=props; |
46 | | -return( |
| 61 | +exportconstScrollBar=({ 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 | +constcombinedStyle={ ...style, height};// Example of combining height with passed style |
| 64 | + |
| 65 | +returnhideScrollbar ?( |
| 66 | +<ScrollBarWrapperclassName={className}> |
| 67 | +{children} |
| 68 | +</ScrollBarWrapper> |
| 69 | +) :( |
47 | 70 | <ScrollBarWrapperclassName={className}> |
48 | | -<SimpleBarforceVisible="y"style={{height:height}}{...otherProps}> |
| 71 | +<SimpleBarstyle={combinedStyle}scrollableNodeProps={scrollableNodeProps}{...otherProps}> |
49 | 72 | {children} |
50 | 73 | </SimpleBar> |
51 | 74 | </ScrollBarWrapper> |
|