Fix primefaces#5892: Fix Splitter resizePanel method

melloware · Feb 5, 2024 · d6d55f0 · d6d55f0
1 parent ee907a3
commit d6d55f0
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
@@ -134,11 +134,11 @@ export const Splitter = React.memo(
         }, [getStorage, props.stateKey]);
 
         const onResizeStart = (event, index, isKeyDown) => {
-            gutterRef.current = gutterRefs.current[index];
-            let pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
-            let pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
+            const pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
+            const pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
             const horizontal = props.layout === 'horizontal';
 
+            gutterRef.current = gutterRefs.current[index];
             size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
             dragging.current = true;
             startPos.current = horizontal ? pageX : pageY;
@@ -164,9 +164,9 @@ export const Splitter = React.memo(
 
         const onResize = (event, step = 0, isKeyDown = false) => {
             let newPos, newNextPanelSize, newPrevPanelSize;
-            let horizontal = props.layout === 'horizontal';
-            let pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
-            let pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
+            const horizontal = props.layout === 'horizontal';
+            const pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
+            const pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
 
             if (isKeyDown) {
                 if (horizontal) {
@@ -221,10 +221,11 @@ export const Splitter = React.memo(
 
         const onGutterKeyDown = (event, index) => {
             const minSize = (props.children[index].props && props.children[index].props.minSize) || 0;
+            const horizontal = props.layout === 'horizontal';
 
             switch (event.code) {
                 case 'ArrowLeft': {
-                    if (props.layout === 'horizontal') {
+                    if (horizontal) {
                         setTimer(event, index, props.step * -1);
                     }
 
@@ -233,7 +234,7 @@ export const Splitter = React.memo(
                 }
 
                 case 'ArrowRight': {
-                    if (props.layout === 'horizontal') {
+                    if (horizontal) {
                         setTimer(event, index, props.step);
                     }
 
@@ -242,7 +243,7 @@ export const Splitter = React.memo(
                 }
 
                 case 'ArrowDown': {
-                    if (props.layout === 'vertical') {
+                    if (!horizontal) {
                         setTimer(event, index, props.step * -1);
                     }
 
@@ -251,7 +252,7 @@ export const Splitter = React.memo(
                 }
 
                 case 'ArrowUp': {
-                    if (props.layout === 'vertical') {
+                    if (!horizontal) {
                         setTimer(event, index, props.step);
                     }
 
@@ -291,6 +292,8 @@ export const Splitter = React.memo(
         };
 
         const resizePanel = (index, newPrevPanelSize, newNextPanelSize) => {
+            const horizontal = props.layout === 'horizontal';
+
             prevPanelIndex.current = index;
             gutterRef.current = gutterRefs.current[index];
             size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
@@ -381,12 +384,13 @@ export const Splitter = React.memo(
         const createPanel = (panel, index) => {
             const panelId = getPanelProp(panel, 'id') || `${idState.current}_${index}`;
             const panelClassName = classNames(getPanelProp(panel, 'className'), cx('panel.root'));
+            const horizontal = props.layout === 'horizontal';
 
             const gutterProps = mergeProps(
                 {
                     ref: (el) => (gutterRefs.current[index] = el),
                     className: cx('gutter'),
-                    style: props.layout === 'horizontal' ? { width: props.gutterSize + 'px' } : { height: props.gutterSize + 'px' },
+                    style: horizontal ? { width: props.gutterSize + 'px' } : { height: props.gutterSize + 'px' },
                     onMouseDown: (event) => onGutterMouseDown(event, index),
                     onKeyDown: (event) => onGutterKeyDown(event, index),
                     onKeyUp: onGutterKeyUp,
@@ -403,7 +407,7 @@ export const Splitter = React.memo(
                 {
                     tabIndex: getPanelProp(panel, 'tabIndex') || 0,
                     className: cx('gutterHandler'),
-                    'aria-orientation': props.layout === 'horizontal' ? 'vertical' : 'horizontal',
+                    'aria-orientation': horizontal ? 'vertical' : 'horizontal',
                     'aria-controls': panelId,
                     'aria-label': getPanelProp(panel, 'aria-label'),
                     'aria-labelledby': getPanelProp(panel, 'aria-labelledby'),