Skip to content

Commit

Permalink
#5429 Refactor for ScrollPanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Dec 25, 2023
1 parent a81acac commit 60f6cfa
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 15 deletions.
137 changes: 130 additions & 7 deletions components/lib/scrollpanel/ScrollPanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import * as React from 'react';
import { PrimeReactContext } from '../api/Api';
import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
import { DomHandler, mergeProps } from '../utils/Utils';
import { DomHandler, mergeProps, UniqueComponentId } from '../utils/Utils';
import { ScrollPanelBase } from './ScrollPanelBase';
import { useHandleStyle } from '../componentbase/ComponentBase';

export const ScrollPanel = React.forwardRef((inProps, ref) => {
const context = React.useContext(PrimeReactContext);
const props = ScrollPanelBase.getProps(inProps, context);
const [idState, setIdState] = React.useState(props.id);
const [orientationState, setOrientationState] = React.useState('vertical');

const { ptm, cx, isUnstyled } = ScrollPanelBase.setMetaData({
props
Expand All @@ -29,6 +31,8 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
const scrollYRatio = React.useRef(null);
const frame = React.useRef(null);
const initialized = React.useRef(false);
const timer = React.useRef(null);
const contentId = idState + '_content';

const calculateContainerHeight = () => {
const containerStyles = getComputedStyle(containerRef.current);
Expand All @@ -45,7 +49,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
}
};

const moveBar = (event) => {
const moveBar = () => {
// horizontal scroll
const totalWidth = contentRef.current.scrollWidth;
const ownWidth = contentRef.current.clientWidth;
Expand All @@ -65,20 +69,44 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
} else {
DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
setLastScrollLeft(event.target.scrollLeft);
xBarRef.current.style.cssText = 'width:' + Math.max(scrollXRatio.current * 100, 10) + '%; left:' + (contentRef.current.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
}

if (scrollYRatio.current >= 1) {
DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
} else {
DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
setLastScrollTop(event.target.scrollTop);
yBarRef.current.style.cssText = 'height:' + Math.max(scrollYRatio.current * 100, 10) + '%; top: calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px);right:' + right + 'px;';
}
});
};

const onFocus = (event) => {
if (xBarRef.current.isSameNode(event.target)) {
setOrientationState('horizontal');
} else if (yBarRef.current.isSameNode(event.target)) {
setOrientationState('vertical');
}
};

const onBlur = () => {
if (orientationState === 'horizontal') {
setOrientationState('vertical');
}
};

const onScroll = (event) => {
if (lastScrollLeft !== event.target.scrollLeft) {
setLastScrollLeft(event.target.scrollLeft);
setOrientationState('horizontal');
} else if (lastScrollTop !== event.target.scrollTop) {
setLastScrollTop(event.target.scrollTop);
setOrientationState('vertical');
}

moveBar();
};

const onYBarMouseDown = (event) => {
isYBarClicked.current = true;
lastPageY.current = event.pageY;
Expand Down Expand Up @@ -143,11 +171,92 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
isYBarClicked.current = false;
};

const onKeyDown = (event) => {
console.log('hey?');
if (orientationState === 'vertical') {
switch (event.code) {
case 'ArrowDown': {
setTimer('scrollTop', props.step);
event.preventDefault();
break;
}

case 'ArrowUp': {
setTimer('scrollTop', props.step * -1);
event.preventDefault();
break;
}

case 'ArrowLeft':

case 'ArrowRight': {
event.preventDefault();
break;
}

default:
//no op
break;
}
} else if (orientationState === 'horizontal') {
switch (event.code) {
case 'ArrowRight': {
setTimer('scrollLeft', props.step);
event.preventDefault();
break;
}

case 'ArrowLeft': {
setTimer('scrollLeft', props.step * -1);
event.preventDefault();
break;
}

case 'ArrowDown':

case 'ArrowUp': {
event.preventDefault();
break;
}

default:
//no op
break;
}
}
};

const onKeyUp = () => {
clearTimer();
};

const repeat = (bar, step) => {
contentRef.current[bar] += step;
moveBar();
};

const setTimer = (bar, step) => {
clearTimer();
timer.current = setTimeout(() => {
repeat(bar, step);
}, 40);
};

const clearTimer = () => {
if (timer.current) {
clearTimeout(timer.current);
}
};

const refresh = () => {
moveBar();
};

useMountEffect(() => {
if (!props.id) {
setIdState(UniqueComponentId());
}

moveBar();
window.addEventListener('resize', moveBar);
calculateContainerHeight();
Expand Down Expand Up @@ -194,7 +303,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
const contentProps = mergeProps(
{
className: cx('content'),
onScroll: moveBar,
onScroll: onScroll,
onMouseEnter: moveBar
},
ptm('content')
Expand All @@ -204,8 +313,15 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
{
ref: xBarRef,
role: 'scrollbar',
'aria-valuenow': lastScrollTop,
className: cx('barx'),
tabIndex: 0,
'aria-valuenow': lastScrollTop,
'aria-controls': contentId,
'aria-orientation': 'horizontal',
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onMouseDown: onXBarMouseDown
},
ptm('barx')
Expand All @@ -215,8 +331,15 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
{
ref: yBarRef,
role: 'scrollbar',
'aria-valuenow': lastScrollLeft,
className: cx('bary'),
tabIndex: 0,
'aria-valuenow': lastScrollLeft,
'aria-controls': contentId,
'aria-orientation': 'vertical',
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onMouseDown: onYBarMouseDown
},
ptm('bary')
Expand Down
17 changes: 9 additions & 8 deletions components/lib/scrollpanel/ScrollPanelBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export const ScrollPanelBase = ComponentBase.extend({
id: null,
style: null,
className: null,
children: undefined
children: undefined,
step: 5
},
css: {
classes: {
Expand All @@ -27,7 +28,7 @@ export const ScrollPanelBase = ComponentBase.extend({
z-index: 1;
float: left;
}
.p-scrollpanel-content {
height: calc(100% + 18px);
width: calc(100% + 18px);
Expand All @@ -36,7 +37,7 @@ export const ScrollPanelBase = ComponentBase.extend({
overflow: auto;
box-sizing: border-box;
}
.p-scrollpanel-bar {
position: relative;
background: #c1c1c1;
Expand All @@ -46,26 +47,26 @@ export const ScrollPanelBase = ComponentBase.extend({
opacity: 0;
transition: opacity 0.25s linear;
}
.p-scrollpanel-bar-y {
width: 9px;
top: 0;
}
.p-scrollpanel-bar-x {
height: 9px;
bottom: 0;
}
.p-scrollpanel-hidden {
visibility: hidden;
}
.p-scrollpanel:hover .p-scrollpanel-bar,
.p-scrollpanel:active .p-scrollpanel-bar {
opacity: 1;
}
.p-scrollpanel-grabbed {
user-select: none;
}
Expand Down

0 comments on commit 60f6cfa

Please sign in to comment.