feat(Keyboard): pre-load keyboards (#538)

* create/format all keyboards on _update and toggle smoothly

* remove setSmooth - not needed

* update snapshot and tests

* create keyboards once and remove unused func

* allow user to set x pos

* add number format to KeyboardNumbers story

* support theme swapping, format patching, and storybook arg updates

* fix existing prop name typo

Author: cee-money

packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.js

@@ -69,30 +69,31 @@ export default class Keyboard extends Base {
   }
 
   _update() {
-    if (!this._currentFormat) {
+    if (!this._currentFormat || this._shouldUpdateKeyboards) {
       this._currentFormat = this.defaultFormat;
     }
     if (this.centerKeyboard) {
-      this.x = (this.style.screenW - this.w) / 2 - this.style.marginX;
-    } else {
+      this.x = this.centeredXPos;
+    } else if (this.x === this.centeredXPos && !this.centerKeyboard) {
+      // if the keyboard was centered before but now should not be
       this.x = 0;
-    }
-    if (this._formatsChanged || this.shouldUpdateTheme) {
-      this._createFormat(this._currentFormat);
-      this._refocus();
-      this._formatsChanged = false;
-      this.shouldUpdateTheme = false;
     } else {
-      this._formatKeys();
+      this.x == null && (this.x = 0); // if x is undefined or null set it to 0, otherwise do not overwrite x pos
     }
+    this._shouldUpdateKeyboards && this._createKeyboardsFromFormats();
+    this._formatKeys();
   }
 
-  _createFormat(keyboard) {
-    const format = this.formats[keyboard];
-    if (format) {
-      const keyboardData = this._formatKeyboardData(format);
-      this._createKeyboard(keyboard, this._createRows(keyboardData, keyboard));
-    }
+  _createKeyboardsFromFormats() {
+    this.childList.clear(); // if new formats patched in, remove keyboards created from the previous formats
+    Object.keys(this.formats).forEach(key => {
+      const format = this.formats[key];
+      if (format) {
+        const keyboardData = this._formatKeyboardData(format);
+        this._createKeyboard(key, this._createRows(keyboardData, key));
+      }
+    });
+    this._formatsChanged = false;
   }
 
   _createKeyboard(key, rows = []) {
@@ -110,7 +111,8 @@ export default class Keyboard extends Base {
           },
           autoResizeWidth: true,
           autoResizeHeight: true,
-          neverScroll: true
+          neverScroll: true,
+          alpha: key === capitalize(this._currentFormat) ? 1 : 0.001
         }
       });
     }
@@ -199,6 +201,7 @@ export default class Keyboard extends Base {
       const element = this.tag(capitalize(format));
       if (element) {
         element.patch({
+          alpha: format === this._currentFormat ? 1 : 0.001,
           style: {
             itemSpacing: this.style.keySpacing
           }
@@ -221,11 +224,10 @@ export default class Keyboard extends Base {
   $toggleKeyboard(next) {
     const nextKeyboard = capitalize(next);
     if (next !== this._currentFormat) {
-      this._createFormat(next);
       const nextKeyboardTag = this.tag(nextKeyboard);
 
       this.selectKeyOn(nextKeyboardTag);
-      this._currentKeyboard.alpha = 0;
+      this._currentKeyboard.alpha = 0.001;
       nextKeyboardTag.alpha = 1;
       this._currentFormat = next;
     }
@@ -268,6 +270,14 @@ export default class Keyboard extends Base {
     return formats;
   }
 
+  get centeredXPos() {
+    return (this.style.screenW - this.w) / 2 - this.style.marginX;
+  }
+
+  get _shouldUpdateKeyboards() {
+    return this.shouldUpdateTheme || this._formatsChanged;
+  }
+
   set defaultFormat(format) {
     this._defaultFormat = format;
   }

packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.mdx

@@ -93,7 +93,7 @@ All of the following examples will yield the same result.
 | name          | type          | required | default   | description                                                                                                                                   |
 | ------------- | ------------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | columnCount   | number        | false    | 11        | number of columns across the keyboard if passing a flat array                                                                                 |
-| centeKeyboard | bool          | false    | false     | center the keyboard within it's set width (must set the w property of Keyboard)                                                               |
+| centerKeyboard | bool          | false    | false     | center the keyboard within it's set width (must set the w property of Keyboard)                                                               |
 | centerKeys    | bool          | false    | false     | center the keys within it's set width (must set the w property of Keyboard)                                                                   |
 | defaultFormat | string        | true     | undefined | default format of the keyboard to be shown. should be a key of `formats`.                                                                     |
 | formats       | object        | true     | undefined | object containing arrays that represent different formats that the keyboard can be presented in. These arrays can contain strings or objects. |

packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.test.js

@@ -173,7 +173,7 @@ describe('Keyboard', () => {
 
   it('should toggle to a different format', () => {
     keyboard.$toggleKeyboard('symbols');
-    expect(keyboard.tag('Lowercase').alpha).toEqual(0);
+    expect(keyboard.tag('Lowercase').alpha).toEqual(0.001);
     expect(keyboard.tag('Symbols').alpha).toEqual(1);
   });
 
@@ -187,7 +187,7 @@ describe('Keyboard', () => {
     });
     return keyboard._whenEnabled.then(() => {
       keyboard.$toggleKeyboard('num');
-      expect(keyboard.tag('Abc').alpha).toEqual(0);
+      expect(keyboard.tag('Abc').alpha).toEqual(0.001);
       expect(keyboard.tag('Num').alpha).toEqual(1);
     });
   });

packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardNumbers.stories.js

@@ -60,7 +60,7 @@ KeyboardNumbers.argTypes = {
   defaultFormat: {
     description: 'Select the format of dialpad',
     control: 'radio',
-    options: ['dialpad', 'dialpadExtended'],
+    options: ['dialpad', 'dialpadExtended', 'numbers'],
     table: {
       defaultValue: { summary: 'undefined' }
     }