fix: #6682 (#7247)

* fix: #6682 - Ensure element styles set via pt merge with required `xBarRef` and `yBarRef` styles The following styles for "barX" can not be overridden: - width - left - bottom The following styles for "barY" can not be overridden: - height - top - right * Make use of `DomHandler.applyStyle`method - Fix static method to properly make use of `style` parameter - Update typing * Update typing to include `string` as an option
primefaces · Sep 25, 2024 · dfe5e9f · dfe5e9f
1 parent 96c10f8
commit dfe5e9f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
@@ -70,14 +70,22 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
                 DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
             } else {
                 DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
-                xBarRef.current.style.cssText = 'width:' + Math.max(scrollXRatio.current * 100, 10) + '%; left:' + (contentRef.current.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                DomHandler.applyStyle(xBarRef.current, {
+                    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');
-                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;';
+                DomHandler.applyStyle(yBarRef.current, {
+                    height: Math.max(scrollYRatio.current * 100, 10) + '%',
+                    top: 'calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px)',
+                    right: right + 'px'
+                });
             }
         });
     };

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -1055,9 +1055,9 @@ export default class DomHandler {
 
     static applyStyle(element, style) {
         if (typeof style === 'string') {
-            element.style.cssText = this.style;
+            element.style.cssText = style;
         } else {
-            for (let prop in this.style) {
+            for (let prop in style) {
                 element.style[prop] = style[prop];
             }
         }

diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
@@ -87,7 +87,7 @@ export declare class DomHandler {
     static getCursorOffset(el: HTMLElement, prevText?: string, nextText?: string, currentText?: string): { top: any; left: any };
     static invokeElementMethod(el: HTMLElement, methodName: string, arg: any): void;
     static isClickable(el: HTMLElement): boolean;
-    static applyStyle(el: HTMLElement, style: any): void;
+    static applyStyle(el: HTMLElement, style: React.CSSProperties | string): void;
     static exportCSV(csv: any, filename: string): void;
     static saveAs(file: { name: string; url: any }): boolean;
     static createInlineStyle(nonce?: string, styleContainer?: ShadowRoot | HTMLElement): HTMLStyleElement;