FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Upgrade HideScrollbar

Browse Source
This commit is contained in:
Fat Snake
2024-01-18 14:53:28 +08:00
parent c460e2c4cf
commit 9bcf559718
1 changed files with 84 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/common/HideScrollbar.tsx
View File

@@ -52,13 +52,13 @@ export interface HideScrollbarElement {
const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>( const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
( (
{ {
isPreventScroll, isPreventScroll = false,
isPreventVerticalScroll, isPreventVerticalScroll = false,
isPreventHorizontalScroll, isPreventHorizontalScroll = false,
isShowVerticalScrollbar, isShowVerticalScrollbar = true,
isHiddenVerticalScrollbarWhenFull, isHiddenVerticalScrollbarWhenFull = true,
isShowHorizontalScrollbar, isShowHorizontalScrollbar = true,
isHiddenHorizontalScrollbarWhenFull, isHiddenHorizontalScrollbarWhenFull = true,
minWidth, minWidth,
minHeight, minHeight,
scrollbarWidth, scrollbarWidth,
@@ -536,20 +536,21 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
{children} {children}
</div> </div>
</div> </div>
{isShowVerticalScrollbar &&
(!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
<div <div
hidden={
!isShowVerticalScrollbar ||
((isHiddenVerticalScrollbarWhenFull ?? true) &&
verticalScrollbarLength >= 100)
}
className={`scrollbar vertical-scrollbar${ className={`scrollbar vertical-scrollbar${
verticalScrollbarAutoHide ? ' hide' : '' verticalScrollbarAutoHide ? ' hide' : ''
}`} }`}
style={{ style={{
height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined, height: maskRef.current
? maskRef.current?.clientHeight - 1
: undefined,
top: maskRef.current?.clientTop, top: maskRef.current?.clientTop,
left: maskRef.current left: maskRef.current
? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1 ? maskRef.current?.clientLeft +
maskRef.current?.clientWidth -
1
: undefined : undefined
}} }}
> >
@@ -575,20 +576,23 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
/> />
</div> </div>
</div> </div>
)}
{isShowHorizontalScrollbar &&
(!isHiddenHorizontalScrollbarWhenFull ||
horizontalScrollbarLength < 100) && (
<div <div
hidden={
!isShowHorizontalScrollbar ||
((isHiddenHorizontalScrollbarWhenFull ?? true) &&
horizontalScrollbarLength >= 100)
}
className={`scrollbar horizontal-scrollbar${ className={`scrollbar horizontal-scrollbar${
horizontalScrollbarAutoHide ? ' hide' : '' horizontalScrollbarAutoHide ? ' hide' : ''
}`} }`}
style={{ style={{
width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined, width: maskRef.current
? maskRef.current?.clientWidth - 1
: undefined,
left: maskRef.current?.clientLeft, left: maskRef.current?.clientLeft,
top: maskRef.current top: maskRef.current
? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1 ? maskRef.current?.clientTop +
maskRef.current?.clientHeight -
1
: undefined : undefined
}} }}
> >
@@ -614,6 +618,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
/> />
</div> </div>
</div> </div>
)}
</div> </div>
</> </>
) )