feat: add lazy layout hook (#260)

qlik-oss · Jan 17, 2020 · 990ed00 · 990ed00
1 parent 222c278
commit 990ed00
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/apis/supernova/src/__tests__/hooks.spec.js b/apis/supernova/src/__tests__/hooks.spec.js
@@ -20,6 +20,7 @@ import {
   useSelections,
   useTheme,
   useLayout,
+  useLazyLayout,
   useTranslator,
   onTakeSnapshot,
 } from '../hooks';
@@ -623,6 +624,21 @@ describe('hooks', () => {
       run(c);
       expect(value).to.equal('layout');
     });
+    it('useLazyLayout', () => {
+      let value;
+      c.context.layout = { hc: 'h' };
+      c.fn = () => {
+        value = useLazyLayout();
+      };
+      run(c);
+      c.context.layout = { hc: 'a', qSelectionInfo: { qInSelections: true } };
+      run(c);
+      expect(value).to.eql({ hc: 'h' });
+
+      c.context.layout = { hc: 'a' };
+      run(c);
+      expect(value).to.eql({ hc: 'a' });
+    });
     it('useTranslator', () => {
       let value;
       c.fn = () => {

diff --git a/apis/supernova/src/hooks.js b/apis/supernova/src/hooks.js
@@ -401,6 +401,15 @@ export function useLayout() {
   return useInternalContext('layout');
 }
 
+export function useLazyLayout() {
+  const layout = useInternalContext('layout');
+  const [ref] = useState({ current: layout });
+  if (!layout.qSelectionInfo || !layout.qSelectionInfo.qInSelections) {
+    ref.current = layout;
+  }
+  return ref.current;
+}
+
 export function useTranslator() {
   return useInternalEnv('translator');
 }

diff --git a/apis/supernova/src/index.js b/apis/supernova/src/index.js
@@ -19,6 +19,7 @@ export { useElement } from './hooks';
 export { useSelections } from './hooks';
 export { useTheme } from './hooks';
 export { useLayout } from './hooks';
+export { useLazyLayout } from './hooks';
 export { useTranslator } from './hooks';
 
 export { onTakeSnapshot } from './hooks';
diff --git a/test/component/hooks/sn.comp.js b/test/component/hooks/sn.comp.js
@@ -7,12 +7,6 @@ describe('hooks', () => {
   });
 
   it('usePromise', async () => {
-    await page.waitForFunction(
-      selector => document.querySelector(selector).getAttribute('data-render-count') === '0',
-      {},
-      `${snSelector}`
-    );
-    expect(await page.$eval(`${snSelector} .promise`, el => el.textContent)).to.equal('pending');
     await page.waitForFunction(
       selector => document.querySelector(selector).getAttribute('data-render-count') === '1',
       {},