refactor: trigger re-render on components change

qlik-oss · Aug 8, 2023 · bdc0949 · bdc0949
1 parent b83fb90
commit bdc0949
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/.../ext/property-panel/data/data-panel/presentation/styling-definitions/styling-panel-def.js b/.../ext/property-panel/data/data-panel/presentation/styling-definitions/styling-panel-def.js
@@ -13,6 +13,7 @@ const stylingPanelDef = {
       items: {
         headerItems: {
           component: 'items',
+          ref: 'components',
           key: 'listBox',
           items: {
             fontWrapperItem: {
@@ -59,6 +60,7 @@ const stylingPanelDef = {
       items: {
         contentItems: {
           component: 'items',
+          ref: 'components',
           key: 'listBox',
           items: {
             contentFontWrapper: {

diff --git a/packages/sn-filter-pane/src/hooks/types/index.d.ts b/packages/sn-filter-pane/src/hooks/types/index.d.ts
@@ -48,6 +48,7 @@ export interface IFilterPaneLayout {
   layoutOptions?: {
     compactData?: boolean,
   }
+  components?: object[],
 }
 
 export interface IListboxResource {

diff --git a/packages/sn-filter-pane/src/hooks/use-render.ts b/packages/sn-filter-pane/src/hooks/use-render.ts
@@ -19,6 +19,10 @@ export default function useRender(stores: IStores) {
     });
   }
 
+  // Trigger a re-render only when components have changed in the filterpane layout.
+  // (Note that useEffect equality check is shallow and therefore requires a hash.)
+  const componentsHash = (fpLayout?.components || []).map((c: object) => JSON.stringify(c)).join(',');
+
   useEffect(() => {
     if (!fpLayout || !app || !resourcesReady) {
       return undefined;
@@ -27,5 +31,5 @@ export default function useRender(stores: IStores) {
     return (() => {
       teardown(root);
     });
-  }, [resourcesReady, fpLayout]);
+  }, [resourcesReady, componentsHash]);
 }