From a62e8785285dcd3655fee670f92e267e19d92c14 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 25 Sep 2024 14:21:47 +0800 Subject: [PATCH 1/3] 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 --- components/lib/scrollpanel/ScrollPanel.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js index 77118b573e..d0880a5581 100644 --- a/components/lib/scrollpanel/ScrollPanel.js +++ b/components/lib/scrollpanel/ScrollPanel.js @@ -70,14 +70,18 @@ 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;'; + xBarRef.current.style.width = Math.max(scrollXRatio.current * 100, 10) + '%'; + xBarRef.current.style.left = (contentRef.current.scrollLeft / totalWidth) * 100 + '%'; + xBarRef.current.style.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;'; + yBarRef.current.style.height = Math.max(scrollYRatio.current * 100, 10) + '%'; + yBarRef.current.style.top = 'calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px)'; + yBarRef.current.style.right = right + 'px'; } }); }; From 1ce65eacb49fcfff1d9e9610ed07814a9202e39f Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 25 Sep 2024 14:40:47 +0800 Subject: [PATCH 2/3] Make use of `DomHandler.applyStyle`method - Fix static method to properly make use of `style` parameter - Update typing --- components/lib/scrollpanel/ScrollPanel.js | 16 ++++++++++------ components/lib/utils/DomHandler.js | 4 ++-- components/lib/utils/utils.d.ts | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js index d0880a5581..038b25df2a 100644 --- a/components/lib/scrollpanel/ScrollPanel.js +++ b/components/lib/scrollpanel/ScrollPanel.js @@ -70,18 +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.width = Math.max(scrollXRatio.current * 100, 10) + '%'; - xBarRef.current.style.left = (contentRef.current.scrollLeft / totalWidth) * 100 + '%'; - xBarRef.current.style.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.height = Math.max(scrollYRatio.current * 100, 10) + '%'; - yBarRef.current.style.top = 'calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px)'; - yBarRef.current.style.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 index cdbabce456..bcf1642b17 100644 --- 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 index 695b9b8f2d..f34e3bbfab 100644 --- 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): void; static exportCSV(csv: any, filename: string): void; static saveAs(file: { name: string; url: any }): boolean; static createInlineStyle(nonce?: string, styleContainer?: ShadowRoot | HTMLElement): HTMLStyleElement; From eb7121cc540657c396b355de59ee1d2cf5b8d0be Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 25 Sep 2024 14:43:28 +0800 Subject: [PATCH 3/3] Update typing to include `string` as an option --- components/lib/utils/utils.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index f34e3bbfab..f70e24d52f 100644 --- 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: React.CSSProperties): 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;