Merge pull request #31 from rdkcentral/feat/column

feat(Column): update Column render logic
rdkcentral · May 11, 2021 · 4e60f76 · 4e60f76
2 parents 95052cb + 8b33445
commit 4e60f76
Show file tree

Hide file tree

Showing 8 changed files with 284 additions and 120 deletions.
diff --git a/components/Column/Column.mdx b/components/Column/Column.mdx
@@ -107,7 +107,15 @@ keepFullScreen|boolean|true|With scrollmount < 1 determines if we keep a full sc
 scrollMount|number|false|Value between 0 and 1, determines at what point scrolling should start.
 selected|<DocsLink id="lng.Component" />|true|component that is currently in focus
 selectedIndex|number|false|index of currently selected item
+alwaysScroll|boolean|false|determines whether the column will stop scrolling as it nears the bottom to prevent white space
+onScreenItems|array|true|contains a list of items that are currently on screen (within the bounds of the container)
 
+### Child Item Properties
+The `Column` component will utilize the following properties on each individual element in its `items` array:
+
+name|type|readonly|description
+--|--|--|--
+centerInParent|boolean|false|if set to true on an individual element in the `items` array, this will horizontally center the child
 
 ### Methods
 
@@ -145,7 +153,7 @@ Called when item focus changes. Render is responsible for the scroll behavior
 name|type|required|default|description
 --|--|--|--|--
 selected|<DocsLink id="lng.Component">lng.Component[]</DocsLink>|false|-|item to select. Required if this.plinko=true
-selected|<DocsLink id="lng.Component">lng.Component[]</DocsLink>|false|-|previously selected item. Required if this.plinko=true
+previous|<DocsLink id="lng.Component">lng.Component[]</DocsLink>|false|-|previously selected item. Required if this.plinko=true
 
 ### Events
 
@@ -154,4 +162,4 @@ selected|<DocsLink id="lng.Component">lng.Component[]</DocsLink>|false|-|previou
 Fires when all of the items have been removed from a `Column`
 
 [fm-docs]: ?path=/docs/focusmanager--rows
-[fm-api]: ?path=/docs/focusmanager--rows#api
+[fm-api]: ?path=/docs/focusmanager--rows#api
diff --git a/components/Column/Column.stories.js b/components/Column/Column.stories.js
@@ -51,7 +51,8 @@ export const Basic = args =>
           items: Array.apply(null, { length: 20 }).map((_, i) => ({
             type: Button,
             buttonText: `Button ${i + 1}`
-          }))
+          })),
+          alwaysScroll: args.alwaysScroll
         }
       };
     }
@@ -73,6 +74,9 @@ Basic.argTypes = {
   },
   scrollIndex: {
     control: { type: 'number', min: 0 }
+  },
+  alwaysScroll: {
+    control: { type: 'boolean' }
   }
 };
 Basic.parameters = {
@@ -83,7 +87,7 @@ Basic.parameters = {
     itemTransition: (duration, component) => {
       component.tag('Column').itemTransition = {
         duration,
-        timingFunction: component.tag('Column').itemTransition.timingFunction
+        timingFunction: component.tag('Column')._itemTransition.timingFunction
       };
     }
   }
@@ -227,7 +231,7 @@ export const ExpandableHeightItems = args =>
         Column: {
           type: Column,
           itemSpacing: args.itemSpacing,
-          items: Array.apply(null, { length: 5 }).map((_, i) => ({
+          items: Array.apply(null, { length: 15 }).map((_, i) => ({
             type: ExpandingButton,
             h: 40,
             w: 150,
@@ -250,7 +254,7 @@ export const ExpandableHeightRows = args =>
           type: Column,
           itemSpacing: args.itemSpacing,
           plinko: true,
-          items: Array.apply(null, { length: 3 }).map((_, i) => ({
+          items: Array.apply(null, { length: 15 }).map((_, i) => ({
             type: ExpandingRow,
             y: 50 * i,
             h: 40,
@@ -409,6 +413,44 @@ StickyTitle.args = {
   itemSpacing: 50
 };
 
+export const CenteredInParent = args =>
+  class CenteredInParent extends lng.Component {
+    static _template() {
+      const buttonW = 150;
+      const button = {
+        type: Button,
+        buttonText: 'Button',
+        w: buttonW
+      };
+      return {
+        Column: {
+          type: Column,
+          itemSpacing: args.itemSpacing,
+          w: buttonW * 3 + args.itemSpacing * 2,
+          items: [
+            {
+              type: Row,
+              h: 40,
+              itemSpacing: args.itemSpacing,
+              items: Array.apply(null, { length: 3 }).map(() => button)
+            },
+            {
+              type: Row,
+              h: 40,
+              itemSpacing: args.itemSpacing,
+              centerInParent: true,
+              items: Array.apply(null, { length: 1 }).map(() => button)
+            }
+          ]
+        }
+      };
+    }
+
+    _getFocused() {
+      return this.tag('Column');
+    }
+  };
+
 class ColumnHeader extends lng.Component {
   static _template() {
     return {

diff --git a/components/Column/Column.test.js b/components/Column/Column.test.js
@@ -37,6 +37,7 @@ const items = [
 const baseRow = {
   type: Row,
   h: 80,
+  debounceDelay: 0,
   items
 };
 
@@ -54,17 +55,21 @@ const Component = {
     h: 600,
     itemTransition: { duration: 0 },
     itemSpacing: 20,
-    items: rows
+    items: rows,
+    debounceDelay: 1
   }
 };
 
 describe('Column', () => {
   let testRenderer, column;
 
-  beforeEach(() => {
+  beforeEach(done => {
     testRenderer = TestRenderer.create(Component);
     column = testRenderer.getInstance();
-    return column._whenEnabled;
+    setTimeout(() => {
+      column._update.flush();
+      done();
+    }, 3);
   });
 
   it('should render', () => {
@@ -91,6 +96,7 @@ describe('Column', () => {
       let item = column.items[1];
 
       column.itemSpacing = spacing;
+      column._update.flush();
       testRenderer.update();
       column._whenEnabled.then(() => {
         expect(item.y).toBe(spacing + item.h);
@@ -156,14 +162,10 @@ describe('Column', () => {
     });
 
     describe('$columnChanged', () => {
-      it('updates column', done => {
-        //TODO come up with something better
-        const spy = jest.spyOn(column, 'render');
+      it('updates column', () => {
+        const spy = jest.spyOn(column, '_updateImmediate');
         column.$columnChanged();
-        column._whenEnabled.then(() => {
-          expect(spy).toHaveBeenCalled();
-          done();
-        });
+        expect(spy).toHaveBeenCalled();
       });
     });
   });
@@ -212,6 +214,7 @@ describe('Column', () => {
       it('should selected last item in selected row if it is closest', () => {
         let row = column.items[0];
         row.items = [...items, { ...baseItem }];
+        row._update.flush();
         row.selectedIndex = row.items.length - 1;
         testRenderer.update();
         testRenderer.keyPress('Down');
@@ -245,7 +248,7 @@ describe('Column', () => {
     describe('with column height < items', () => {
       beforeEach(() => {
         column.h = 400;
-        column.render();
+        column._update.flush();
         testRenderer.update();
       });
 
@@ -255,7 +258,7 @@ describe('Column', () => {
           testRenderer.keyPress('Down');
           column._whenEnabled.then(() => {
             testRenderer.update();
-            expect(column.Items.y).toBe(-item.y);
+            expect(column.Items.y).toBe(-100);
             done();
           });
         });
@@ -276,7 +279,7 @@ describe('Column', () => {
         beforeEach(() => {
           column.items = items.concat(items);
           column.scrollIndex = 2;
-          column.render();
+          column._update.flush();
           testRenderer.update();
         });
 
@@ -348,8 +351,8 @@ describe('Column', () => {
         beforeEach(() => {
           column.items = items.concat(items);
           column.scrollIndex = 4;
-          column.render();
           testRenderer.update();
+          return column._whenEnabled;
         });
 
         it('should render correctly', () => {
@@ -369,16 +372,15 @@ describe('Column', () => {
           });
         });
 
-        it('should scroll down', done => {
+        it('should scroll down', () => {
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
-          column._whenEnabled.then(() => {
+          return column._whenEnabled.then(() => {
             testRenderer.update();
             expect(column.Items.y).toBe(-100);
-            done();
           });
         });
 
@@ -397,34 +399,37 @@ describe('Column', () => {
           expect(item.y).toBe(0);
         });
 
-        it('should keep a full screen of items', done => {
+        it('should keep a full screen of items', () => {
           let item = column.items[1];
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
           testRenderer.keyPress('Down');
-          column._whenEnabled.then(() => {
+          return column._whenEnabled.then(() => {
             testRenderer.update();
             expect(column.Items.y + column.h).toBeGreaterThan(item.y);
-            done();
           });
         });
       });
 
-      it('should scroll to index before', () => {
-        jest.useFakeTimers();
+      it('should scroll to index before', done => {
+        column.itemTransition = { duration: 0.001 };
         column.selectedIndex = 3;
         column.scrollTo(0);
-        jest.runAllTimers();
-        expect(column.selectedIndex).toBe(0);
+        setTimeout(() => {
+          expect(column.selectedIndex).toEqual(0);
+          done();
+        }, 2);
       });
 
-      it('should scroll to index after', () => {
-        jest.useFakeTimers();
+      it('should scroll to index after', done => {
+        column.itemTransition = { duration: 0.001 };
         column.selectedIndex = 0;
         column.scrollTo(3);
-        jest.runAllTimers();
-        expect(column.selectedIndex).toBe(3);
+        setTimeout(() => {
+          expect(column.selectedIndex).toEqual(3);
+          done();
+        }, 2);
       });
     });
   });