Fix primefaces#6476: Improve changeTheme logic and javadoc

melloware · Jul 21, 2024 · ee319be · ee319be
1 parent 38c5d1d
commit ee319be
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
@@ -40,19 +40,23 @@ export default class PrimeReact {
 
     static changeTheme = function (currentTheme, newTheme, linkElementId, callback) {
         const linkElement = document.getElementById(linkElementId);
-        const cloneLinkElement = linkElement.cloneNode(true);
-        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
 
-        cloneLinkElement.setAttribute('id', linkElementId + '-clone');
-        cloneLinkElement.setAttribute('href', newThemeUrl);
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', linkElementId);
+        if (!linkElement) {
+            throw Error(`Element with id ${linkElementId} not found.`);
+        }
+
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        const newLinkElement = document.createElement('link');
 
+        newLinkElement.setAttribute('rel', 'stylesheet');
+        newLinkElement.setAttribute('id', linkElementId);
+        newLinkElement.setAttribute('href', newThemeUrl);
+        newLinkElement.addEventListener('load', () => {
             if (callback) {
                 callback();
             }
         });
-        linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+        linkElement.parentNode?.replaceChild(newLinkElement, linkElement);
     };
 }
diff --git a/components/lib/api/PrimeReactContext.js b/components/lib/api/PrimeReactContext.js
@@ -44,20 +44,24 @@ export const PrimeReactProvider = (props) => {
 
     const changeTheme = (currentTheme, newTheme, linkElementId, callback) => {
         const linkElement = document.getElementById(linkElementId);
-        const cloneLinkElement = linkElement.cloneNode(true);
-        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
 
-        cloneLinkElement.setAttribute('id', linkElementId + '-clone');
-        cloneLinkElement.setAttribute('href', newThemeUrl);
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', linkElementId);
+        if (!linkElement) {
+            throw Error(`Element with id ${linkElementId} not found.`);
+        }
 
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        const newLinkElement = document.createElement('link');
+
+        newLinkElement.setAttribute('rel', 'stylesheet');
+        newLinkElement.setAttribute('id', linkElementId);
+        newLinkElement.setAttribute('href', newThemeUrl);
+        newLinkElement.addEventListener('load', () => {
             if (callback) {
                 callback();
             }
         });
-        linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+        linkElement.parentNode?.replaceChild(newLinkElement, linkElement);
     };
 
     /**

diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
@@ -227,10 +227,10 @@ export interface APIOptions {
     unstyled?: boolean;
     /**
      * This method is used to change the theme dynamically.
-     * @param {string} theme - The name of the theme to be applied.
-     * @param {string} newTheme - The name of the new theme to be applied.
+     * @param {string} currentTheme - The name of the current theme. Example 'lara-light-blue'
+     * @param {string} newTheme - The name of the new theme to be applied. Example 'md-dark-deeppurple'
      * @param {string} linkElementId - The id of the link element to be updated.
-     * @param callback - Callback to invoke when the theme change is completed.
+     * @param {() => void} [callback] - Callback to invoke when the theme change is completed.
      */
     changeTheme?(theme?: string, newTheme?: string, linkElementId?: string, callback?: () => void): void;
     /**