@lightningjs/ui - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

docs/Keyboard/InputField.md

@@ -78,2 +78,15 @@ # Input Field
 
+## Methods
+
+### toggleCursor
+Toggles the visibility of the curser. Expected input is a `boolean`. If no input is given it flips the current visibility status.
+
+## Setters 
+
+### passwordMode
+Sets if the input should be masked or not. Expected input is a `boolean`.
+
+### autoHideCursor
+Sets if the cursor should be hidden if there is no input. Expected input is a `boolean`.
+
 ## Getters
@@ -93,3 +106,9 @@
 
+### cursorVisible
+Returns if the cursor is visible or not. Returns a `boolean`.
+
+### autoHideCursor
+Returns if the cursor should be automatically hidden.
+
 ### inputText
 Return the input label configuration as an `object`. This returns only the altered values used by the developer.

package.json

 {
   "name": "@lightningjs/ui",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Standard UI components for Lightning",
@@ -5,0 +5,0 @@ "scripts": {

src/InputField.js

@@ -20,3 +20,4 @@ /*
 
-import Lightning from "@lightningjs/core";
+import Lightning from '@lightningjs/core';
+
 import Cursor from './helpers/Cursor.js';
@@ -27,4 +28,4 @@
         return {
-            PreLabel: {},
-            PostLabel: {},
+            PreLabel: {renderOffscreen: true},
+            PostLabel: {renderOffscreen: true},
             Cursor: {type: Cursor, rect: true, w: 4, h: 54, x: 0, y: 0},
@@ -40,2 +41,4 @@ }
         this._cursorIndex = 0;
+        this._passwordMode = false;
+        this._autoHideCursor = true;
     }
@@ -64,7 +67,11 @@
 
+    toggleCursor(bool = !this._cursorVisible) {
+        this._cursorVisible = bool;
+        this.cursor[bool ? 'show' : 'hide']();
+    }
+
     _update(index = 0) {
         const hasInput = this._input.length > 0;
-        const cursor = this.tag('Cursor');
         let pre = this._description;
-        let post = '';
+        let post = ' ';
 
@@ -74,7 +81,12 @@ if(hasInput) {
             post = this._input.substring(index, this._input.length);
-            cursor.show();
+            this.toggleCursor(true);
         }
-        else {
-            cursor.hide();
+        else if(this._autoHideCursor){
+            this.toggleCursor(false);
         }
+
+        if(this._passwordMode){
+            pre = '*'.repeat(pre.length);
+            post = '*'.repeat(post.length);
+        }
         
@@ -146,2 +158,22 @@ this.patch({
     }
+
+    get cursorVisible() {
+        return this._cursorVisible;
+    }
+
+    set autoHideCursor(bool){
+        this._autoHideCursor = bool;
+    }
+
+    get autoHideCursor(){
+        return this._autoHideCursor;
+    }
+
+    set passwordMode(val){
+        this._passwordMode = val;
+    }
+
+    get passwordMode(){
+        return this._passwordMode;
+    }
 }

src/Keyboard.js

@@ -126,3 +126,3 @@ /*
             return {
-                ref: `Row-${rowIndex + 1}`, 
+                ref: `Row-${rowIndex + 1}`,
                 x: rowOffset,
@@ -213,7 +213,7 @@ mountX: rowMount,
     _changeInput(input) {
-        if(input >= this._maxCharacters) {
+        if(input.length > this._maxCharacters) {
             return;
         }
         const eventData = {
-            previousInput: this._input, 
+            previousInput: this._input,
             input: this._input = input
@@ -260,3 +260,3 @@ };
     }
-    
+
     layout(key) {
@@ -275,5 +275,11 @@ if(key === this._layout) {
         if(component && component.isComponent) {
+            this._rowIndex = 0;
+            this._columnIndex = 0;
+            this._input = component.input !== undefined? component.input : '';
             this._inputField = component;
         }
         else {
+            this._rowIndex = 0;
+            this._columnIndex = 0;
+            this._input = ''
             this._inputField = undefined;
@@ -290,3 +296,3 @@ }
         }
-        if(direction === 'column' && targetIndex > -1 && targetIndex < this.rows.length ) {    
+        if(direction === 'column' && targetIndex > -1 && targetIndex < this.rows.length ) {
             const currentRowIndex = this._rowIndex;
@@ -303,5 +309,6 @@ const currentColumnIndex = this._columnIndex;
                 const currentKey = this.currentKeyWrapper;
-                const currentX = this.rows[this._rowIndex].x + currentKey.x;
+                const currentRow = this.rows[this._rowIndex];
+                const currentX = currentRow.x - (currentRow.w * currentRow.mountX)  + currentKey.x;
                 const m = targetRow.children.map((key) => {
-                    const keyX = targetRow.x + key.x;
+                    const keyX = targetRow.x - (targetRow.w * targetRow.mountX) + key.x;
                     if(keyX <= currentX && currentX < keyX + key.w) {
@@ -308,0 +315,0 @@ return (keyX + key.w) - currentX;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129175

increased by1.27%

Lines of code

1915

increased by1.65%

No dependency changes