From e1686986990d9a6b612e70da529a2a05d2cb475b Mon Sep 17 00:00:00 2001 From: chelseasimek Date: Mon, 10 May 2021 16:44:14 -0400 Subject: [PATCH 1/2] feat(column): update column to new render logic --- components/Column/Column.mdx | 12 +- components/Column/Column.stories.js | 50 +- components/Column/Column.test.js | 61 +- .../Column/__snapshots__/Column.test.js.snap | 1290 ----------------- components/Column/index.js | 191 ++- 5 files changed, 239 insertions(+), 1365 deletions(-) delete mode 100644 components/Column/__snapshots__/Column.test.js.snap diff --git a/components/Column/Column.mdx b/components/Column/Column.mdx index 66ebc3e62..383b4ac2d 100644 --- 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||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|lng.Component[]|false|-|item to select. Required if this.plinko=true -selected|lng.Component[]|false|-|previously selected item. Required if this.plinko=true +previous|lng.Component[]|false|-|previously selected item. Required if this.plinko=true ### Events @@ -154,4 +162,4 @@ selected|lng.Component[]|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 \ No newline at end of file diff --git a/components/Column/Column.stories.js b/components/Column/Column.stories.js index c2bf9227a..7d8dd60ef 100644 --- 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 index 5f30cb858..cffa359e2 100644 --- 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); }); }); }); diff --git a/components/Column/__snapshots__/Column.test.js.snap b/components/Column/__snapshots__/Column.test.js.snap deleted file mode 100644 index 1b8ef78cd..000000000 --- a/components/Column/__snapshots__/Column.test.js.snap +++ /dev/null @@ -1,1290 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Column should render 1`] = ` -Object { - "Component": Object { - "Items": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Element-11": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Items": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Element-13": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 0, - "y": 0, - "zIndex": 0, - }, - "Element-14": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 80, - "y": 0, - "zIndex": 0, - }, - "Element-15": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 160, - "y": 0, - "zIndex": 0, - }, - "Element-16": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 240, - "y": 0, - "zIndex": 0, - }, - "Element-17": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 320, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 0, - "isComponent": undefined, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": "Items", - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": undefined, - "tag": [Function], - "tags": Array [ - "Items", - ], - "visible": true, - "w": 0, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "Row", - "tag": [Function], - "type": "Row", - "visible": true, - "w": 1920, - "x": 0, - "y": 100, - "zIndex": 0, - }, - "Element-18": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Items": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Element-20": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 0, - "y": 0, - "zIndex": 0, - }, - "Element-21": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 80, - "y": 0, - "zIndex": 0, - }, - "Element-22": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 160, - "y": 0, - "zIndex": 0, - }, - "Element-23": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 240, - "y": 0, - "zIndex": 0, - }, - "Element-24": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 320, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 0, - "isComponent": undefined, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": "Items", - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": undefined, - "tag": [Function], - "tags": Array [ - "Items", - ], - "visible": true, - "w": 0, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "Row", - "tag": [Function], - "type": "Row", - "visible": true, - "w": 1920, - "x": 0, - "y": 200, - "zIndex": 0, - }, - "Element-25": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Items": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Element-27": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 0, - "y": 0, - "zIndex": 0, - }, - "Element-28": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 80, - "y": 0, - "zIndex": 0, - }, - "Element-29": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 160, - "y": 0, - "zIndex": 0, - }, - "Element-30": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 240, - "y": 0, - "zIndex": 0, - }, - "Element-31": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 320, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 0, - "isComponent": undefined, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": "Items", - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": undefined, - "tag": [Function], - "tags": Array [ - "Items", - ], - "visible": true, - "w": 0, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "Row", - "tag": [Function], - "type": "Row", - "visible": true, - "w": 1920, - "x": 0, - "y": 300, - "zIndex": 0, - }, - "Element-32": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Items": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Element-34": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 0, - "y": 0, - "zIndex": 0, - }, - "Element-35": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 80, - "y": 0, - "zIndex": 0, - }, - "Element-36": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 160, - "y": 0, - "zIndex": 0, - }, - "Element-37": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 240, - "y": 0, - "zIndex": 0, - }, - "Element-38": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 320, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 0, - "isComponent": undefined, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": "Items", - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": undefined, - "tag": [Function], - "tags": Array [ - "Items", - ], - "visible": true, - "w": 0, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "Row", - "tag": [Function], - "type": "Row", - "visible": true, - "w": 1920, - "x": 0, - "y": 400, - "zIndex": 0, - }, - "Element-4": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Items": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "children": Object { - "Element-10": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 320, - "y": 0, - "zIndex": 0, - }, - "Element-6": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": true, - "hasFocus": true, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 0, - "y": 0, - "zIndex": 0, - }, - "Element-7": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 80, - "y": 0, - "zIndex": 0, - }, - "Element-8": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 160, - "y": 0, - "zIndex": 0, - }, - "Element-9": Object { - "active": false, - "alpha": 1, - "attached": true, - "boundsMargin": null, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": false, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "", - "tag": [Function], - "type": "Component", - "visible": true, - "w": 80, - "x": 240, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 0, - "isComponent": undefined, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": "Items", - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": undefined, - "tag": [Function], - "tags": Array [ - "Items", - ], - "visible": true, - "w": 0, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 80, - "hasFinalFocus": false, - "hasFocus": true, - "isComponent": true, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": null, - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": "Row", - "tag": [Function], - "type": "Row", - "visible": true, - "w": 1920, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, - "clipping": false, - "color": 4294967295, - "enabled": true, - "flex": false, - "flexItem": false, - "h": 0, - "isComponent": undefined, - "mount": 0, - "mountX": 0, - "mountY": 0, - "pivot": 0.5, - "pivotX": 0.5, - "pivotY": 0.5, - "ref": "Items", - "renderOfScreen": undefined, - "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, - "state": undefined, - "tag": [Function], - "tags": Array [ - "Items", - ], - "visible": true, - "w": 0, - "x": 0, - "y": 0, - "zIndex": 0, - }, - }, -} -`; diff --git a/components/Column/index.js b/components/Column/index.js index d3f6fa29c..b8df99533 100644 --- a/components/Column/index.js +++ b/components/Column/index.js @@ -17,15 +17,11 @@ */ import FocusManager from '../FocusManager'; import { getY, getW } from '../../utils'; - +import { debounce } from 'debounce'; export default class Column extends FocusManager { static _template() { return { - direction: 'column', - itemTransition: { - duration: 0.4, - timingFunction: 'cubic-bezier(0.20, 1.00, 0.30, 1.00)' - } + direction: 'column' }; } @@ -36,10 +32,24 @@ export default class Column extends FocusManager { this._scrollIndex = 0; this._whenEnabled = new Promise(resolve => (this._firstEnable = resolve)); this._h = this.stage.h; + this.debounceDelay = Number.isInteger(this.debounceDelay) + ? this.debounceDelay + : 30; + this._update = debounce(this._updateLayout, this.debounceDelay); + this._updateImmediate = debounce( + this._updateLayout, + this.debounceDelay, + true + ); } - _init() { - this._updateLayout(); + get _itemTransition() { + return ( + this.itemTransition || { + duration: 0.4, + timingFunction: 'cubic-bezier(0.20, 1.00, 0.30, 1.00)' + } + ); } _focus() { @@ -62,12 +72,21 @@ export default class Column extends FocusManager { // TODO: can be documented in API when lastScrollIndex is made public shouldScrollUp() { - return ( - this._itemsY < 0 && - (this._lastScrollIndex - ? this.selectedIndex < this._lastScrollIndex - : this.selectedIndex >= this._scrollIndex) - ); + let shouldScroll = false; + + if (this._lastScrollIndex) { + shouldScroll = this.selectedIndex < this._lastScrollIndex; + if ( + this._prevLastScrollIndex !== undefined && + this._prevLastScrollIndex !== this._lastScrollIndex + ) { + shouldScroll = true; + } + } else { + shouldScroll = this.selectedIndex >= this._scrollIndex; + } + + return this._itemsY < 0 && shouldScroll; } // TODO: can be documented in API when lastScrollIndex is made public @@ -82,16 +101,29 @@ export default class Column extends FocusManager { } render(next, prev) { + this._prevLastScrollIndex = this._lastScrollIndex; + if (this.plinko && prev && (prev.currentItem || prev.selected)) { next.selectedIndex = this._getIndexOfItemNear(next, prev); } + // Rows are changing height, so we'll render via updateLayout + if (this.itemsChangeable) { + return; + } + + this._performRender(); + } + + _performRender() { this._whenEnabled.then(() => { const scrollOffset = (this.Items.children[this._scrollIndex] || { y: 0 }) .y; + const firstChild = this.Items.childList.first; const lastChild = this.Items.childList.last; const shouldScroll = - lastChild && (this.shouldScrollUp() || this.shouldScrollDown()); + this.alwaysScroll || + (lastChild && (this.shouldScrollUp() || this.shouldScrollDown())); if (shouldScroll) { const scrollItem = @@ -101,9 +133,9 @@ export default class Column extends FocusManager { if (this._smooth) { this.Items.smooth = { y: [ - -scrollItem.transition('y').targetValue + + -(scrollItem || firstChild).transition('y').targetValue + (scrollItem === this.selected ? scrollOffset : 0), - this.itemTransition + this._itemTransition ] }; } else { @@ -113,19 +145,22 @@ export default class Column extends FocusManager { } } - this.onScreenEffect( - this.Items.children.filter((child, index) => { - const y = getY(child); - const { h } = child; - const withinLowerBounds = y + h + this._itemsY > 0; - const withinUpperBounds = y + this._itemsY < this.h; - - return withinLowerBounds && withinUpperBounds; - }) - ); + this.onScreenEffect(this.onScreenItems); }); } + get onScreenItems() { + return this.Items.children.filter(child => this._isOnScreen(child)); + } + + _isOnScreen(child) { + const y = getY(child); + const { h } = child; + const withinLowerBounds = y + h + this._itemsY > 0; + const withinUpperBounds = y + this._itemsY < this.h; + return withinLowerBounds && withinUpperBounds; + } + _updateLayout() { this._whenEnabled.then(() => { let nextY = 0; @@ -135,13 +170,25 @@ export default class Column extends FocusManager { const child = this.Items.children[i]; nextW = Math.max(nextW, getW(child)); if (this._smooth) { - child.smooth = { y: [nextY, this.itemTransition] }; + child.smooth = { y: [nextY, this._itemTransition] }; } else { child.patch({ y: nextY }); } - nextY += this.itemSpacing + child.h; + nextY += child.h; + if (i < this.Items.children.length - 1) { + nextY += this.itemSpacing; + } + + if (child.centerInParent) { + // if the child is another focus manager, check the width of the item container + const childWidth = (child.Items && child.Items.w) || child.w; + // only center the child if it is within the bounds of this focus manager + if (childWidth < this.w) { + child.x = (this.w - childWidth) / 2; + } + } } - this.patch({ w: nextW }); + this.Items.patch({ w: nextW, h: nextY }); const lastChild = this.Items.childList.last; const endOfLastChild = lastChild ? getY(lastChild) + lastChild.h : 0; @@ -149,7 +196,9 @@ export default class Column extends FocusManager { .y; // determine when to stop scrolling down - if (endOfLastChild > this.h) { + if (this.alwaysScroll) { + this._lastScrollIndex = this.Items.children.length - 1; + } else if (endOfLastChild > this.h) { for (let i = this.Items.children.length - 1; i >= 0; i--) { const child = this.Items.children[i]; const childY = getY(child); @@ -159,8 +208,11 @@ export default class Column extends FocusManager { break; } } + } else if (this._lastScrollIndex > this.items.length) { + this._lastScrollIndex = this.items.length - 1; } - this.render(this.selected, null); + + this._performRender(); }); } @@ -180,6 +232,11 @@ export default class Column extends FocusManager { // start at the 2nd item for (let i = 1; i < selected.items.length; i++) { + // for some reason here !!/!.. evals returning number + if (selected.items[i].skipFocus === true) { + continue; + } + const item = selected.items[i]; const middle = item.core.getAbsoluteCoords(0, 0)[0] + item.w / 2; @@ -190,14 +247,63 @@ export default class Column extends FocusManager { closest = item; closestMiddle = middle; } else { - // previous index is the closest, return it - return i - 1; + if (!closest.skipFocus) { + // weve already found closest return its index + return selected.items.indexOf(closest); + } else if (!selected.items[i - 1].skipFocus) { + // previous item is focusable return it + return i - 1; + } else { + // return closest left or right of index + const prevIndex = prev.items.indexOf(prevItem); + return this._getIndexofClosestFocusable( + prevIndex, + selected, + prevMiddle + ); + } } } - // last index is the closest + // if last index is focusable return return selected.items.length - 1; } + _getIndexofClosestFocusable(selectedIndex, selected, prevMiddle) { + // dont want to mutate the original selected.items using spread for copy + // get first focusable item before and after the current focused item's index + const prevIndex = [...selected.items] + .slice(0, selectedIndex) + .map(item => !!item.skipFocus) + .lastIndexOf(false); + const nextIndex = + [...selected.items] + .slice(selectedIndex + 1) + .map(item => !!item.skipFocus) + .indexOf(false) + + selectedIndex + + 1; + + const prevItem = selected.items[prevIndex]; + const nextItem = selected.items[nextIndex]; + + // Check if the items exist if not return the other + // covers case where at 0 idx, previous would not exist + // and opposite for last index next would not exist + if (prevIndex === -1 || !prevItem) { + return nextIndex; + } + if (nextIndex === -1 || !nextItem) { + return prevIndex; + } + + // If both items compare coordinates to determine which direction of plinko + const next = nextItem.core.getAbsoluteCoords(0, 0)[0] + nextItem.w / 2; + const prev = prevItem.core.getAbsoluteCoords(0, 0)[0] + prevItem.w / 2; + return Math.abs(prev - prevMiddle) < Math.abs(next - prevMiddle) + ? prevIndex + : nextIndex; + } + get itemSpacing() { return this._itemSpacing; } @@ -205,7 +311,7 @@ export default class Column extends FocusManager { set itemSpacing(itemSpacing) { if (itemSpacing !== this._itemSpacing) { this._itemSpacing = itemSpacing; - this._updateLayout(); + this._update(); } } @@ -216,7 +322,7 @@ export default class Column extends FocusManager { set scrollIndex(scrollIndex) { if (scrollIndex !== this._scrollIndex) { this._scrollIndex = scrollIndex; - this._updateLayout(); + this._update(); } } @@ -234,9 +340,11 @@ export default class Column extends FocusManager { }); this.stage.update(); this._updateLayout(); + this._update.clear(); + this._refocus(); } - scrollTo(index, duration = this.itemTransition.duration * 100) { + scrollTo(index, duration = this._itemTransition.duration * 100) { if (duration === 0) this.selectedIndex = index; for (let i = 0; i !== Math.abs(this.selectedIndex - index); i++) { @@ -248,14 +356,15 @@ export default class Column extends FocusManager { } $itemChanged() { - this._updateLayout(); + this.itemsChangeable = true; + this._updateImmediate(); } $removeItem(item) { if (item) { let wasSelected = item === this.selected; this.Items.childList.remove(item); - this._updateLayout(); + this._updateImmediate(); if (wasSelected || this.selectedIndex >= this.items.length) { // eslint-disable-next-line no-self-assign @@ -269,7 +378,7 @@ export default class Column extends FocusManager { } $columnChanged() { - this._updateLayout(); + this._updateImmediate(); } // can be overridden From 5eaee5e6773ec00794ef18e6a2a8ac3245d3ab4c Mon Sep 17 00:00:00 2001 From: chelseasimek Date: Mon, 10 May 2021 16:51:21 -0400 Subject: [PATCH 2/2] feat(column): update snapshots --- .../Column/__snapshots__/Column.test.js.snap | 1290 +++++++++++++++++ .../__snapshots__/Keyboard.test.js.snap | 6 +- package-lock.json | 6 +- package.json | 2 +- 4 files changed, 1297 insertions(+), 7 deletions(-) create mode 100644 components/Column/__snapshots__/Column.test.js.snap diff --git a/components/Column/__snapshots__/Column.test.js.snap b/components/Column/__snapshots__/Column.test.js.snap new file mode 100644 index 000000000..bb0c44eee --- /dev/null +++ b/components/Column/__snapshots__/Column.test.js.snap @@ -0,0 +1,1290 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Column should render 1`] = ` +Object { + "Component": Object { + "Items": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Element-11": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Items": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Element-13": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "Element-14": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 80, + "y": 0, + "zIndex": 0, + }, + "Element-15": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 160, + "y": 0, + "zIndex": 0, + }, + "Element-16": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 240, + "y": 0, + "zIndex": 0, + }, + "Element-17": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 320, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 0, + "isComponent": undefined, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": "Items", + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": undefined, + "tag": [Function], + "tags": Array [ + "Items", + ], + "visible": true, + "w": 0, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "Row", + "tag": [Function], + "type": "Row", + "visible": true, + "w": 1920, + "x": 0, + "y": 100, + "zIndex": 0, + }, + "Element-18": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Items": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Element-20": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "Element-21": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 80, + "y": 0, + "zIndex": 0, + }, + "Element-22": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 160, + "y": 0, + "zIndex": 0, + }, + "Element-23": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 240, + "y": 0, + "zIndex": 0, + }, + "Element-24": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 320, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 0, + "isComponent": undefined, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": "Items", + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": undefined, + "tag": [Function], + "tags": Array [ + "Items", + ], + "visible": true, + "w": 0, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "Row", + "tag": [Function], + "type": "Row", + "visible": true, + "w": 1920, + "x": 0, + "y": 200, + "zIndex": 0, + }, + "Element-25": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Items": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Element-27": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "Element-28": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 80, + "y": 0, + "zIndex": 0, + }, + "Element-29": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 160, + "y": 0, + "zIndex": 0, + }, + "Element-30": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 240, + "y": 0, + "zIndex": 0, + }, + "Element-31": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 320, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 0, + "isComponent": undefined, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": "Items", + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": undefined, + "tag": [Function], + "tags": Array [ + "Items", + ], + "visible": true, + "w": 0, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "Row", + "tag": [Function], + "type": "Row", + "visible": true, + "w": 1920, + "x": 0, + "y": 300, + "zIndex": 0, + }, + "Element-32": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Items": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Element-34": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "Element-35": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 80, + "y": 0, + "zIndex": 0, + }, + "Element-36": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 160, + "y": 0, + "zIndex": 0, + }, + "Element-37": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 240, + "y": 0, + "zIndex": 0, + }, + "Element-38": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 320, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 0, + "isComponent": undefined, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": "Items", + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": undefined, + "tag": [Function], + "tags": Array [ + "Items", + ], + "visible": true, + "w": 0, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "Row", + "tag": [Function], + "type": "Row", + "visible": true, + "w": 1920, + "x": 0, + "y": 400, + "zIndex": 0, + }, + "Element-4": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Items": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "children": Object { + "Element-10": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 320, + "y": 0, + "zIndex": 0, + }, + "Element-6": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": true, + "hasFocus": true, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "Element-7": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 80, + "y": 0, + "zIndex": 0, + }, + "Element-8": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 160, + "y": 0, + "zIndex": 0, + }, + "Element-9": Object { + "active": true, + "alpha": 1, + "attached": true, + "boundsMargin": null, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": false, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "", + "tag": [Function], + "type": "Component", + "visible": true, + "w": 80, + "x": 240, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 0, + "isComponent": undefined, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": "Items", + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": undefined, + "tag": [Function], + "tags": Array [ + "Items", + ], + "visible": true, + "w": 0, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 80, + "hasFinalFocus": false, + "hasFocus": true, + "isComponent": true, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": null, + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": "Row", + "tag": [Function], + "type": "Row", + "visible": true, + "w": 1920, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, + "clipping": false, + "color": 4294967295, + "enabled": true, + "flex": false, + "flexItem": false, + "h": 480, + "isComponent": undefined, + "mount": 0, + "mountX": 0, + "mountY": 0, + "pivot": 0.5, + "pivotX": 0.5, + "pivotY": 0.5, + "ref": "Items", + "renderOfScreen": undefined, + "renderToTexture": false, + "scale": 1, + "scaleX": 1, + "scaleY": 1, + "state": undefined, + "tag": [Function], + "tags": Array [ + "Items", + ], + "visible": true, + "w": 1920, + "x": 0, + "y": 0, + "zIndex": 0, + }, + }, +} +`; diff --git a/components/Keyboard/__snapshots__/Keyboard.test.js.snap b/components/Keyboard/__snapshots__/Keyboard.test.js.snap index f736b3521..5f4cd5fef 100644 --- a/components/Keyboard/__snapshots__/Keyboard.test.js.snap +++ b/components/Keyboard/__snapshots__/Keyboard.test.js.snap @@ -18479,7 +18479,7 @@ Object { "enabled": true, "flex": false, "flexItem": false, - "h": 0, + "h": 332, "isComponent": undefined, "mount": 0, "mountX": 0, @@ -18499,7 +18499,7 @@ Object { "Items", ], "visible": true, - "w": 0, + "w": 1920, "x": 0, "y": 0, "zIndex": 0, @@ -18533,7 +18533,7 @@ Object { ], "type": "Column", "visible": true, - "w": 1920, + "w": 0, "x": 0, "y": 0, "zIndex": 0, diff --git a/package-lock.json b/package-lock.json index 7b7421da0..844c13571 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10756,9 +10756,9 @@ "dev": true }, "debounce": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", - "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", + "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" }, "debug": { "version": "2.6.9", diff --git a/package.json b/package.json index 89de476e3..e2cc8e408 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@lightningjs/ui-components", "version": "0.0.1", "dependencies": { - "debounce": "^1.2.0" + "debounce": "^1.2.1" }, "sideEffects": false, "peerDependencies": {