diff --git a/src/Input.ts b/src/Input.ts index 065b1aed..3ea61d94 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -18,12 +18,15 @@ export type InputOptions = { placeholder?: string; value?: string; maxLength?: number; + secure?: boolean; align?: 'left' | 'center' | 'right'; padding?: Padding; cleanOnFocus?: boolean; nineSlicePlane?: [number, number, number, number]; }; +const SECURE_CHARACTER = '*'; + /** * Container-based component that creates an input to read the user's text. * @example @@ -43,6 +46,8 @@ export class Input extends Container protected _bg?: Container | NineSlicePlane | Graphics; protected inputMask: Container | NineSlicePlane | Graphics; protected _cursor: Sprite; + protected _value = ''; + protected _secure: boolean; protected inputField: PixiText; protected placeholder: PixiText; protected editing = false; @@ -101,6 +106,7 @@ export class Input extends Container this.options = options; this.padding = options.padding; + this._secure = options.secure ?? false; this.cursor = 'text'; this.interactive = true; @@ -305,11 +311,11 @@ export class Input extends Container protected _delete(): void { - if (!this.editing || this.value.length === 0) return; - const array = this.value.split(''); + const length = this.value.length; + + if (!this.editing || length === 0) return; - array.pop(); - this.value = array.join(''); + this.value = this.value.substring(0, length - 1); this.onChange.emit(this.value); } @@ -491,9 +497,12 @@ export class Input extends Container /** Sets the input text. */ set value(text: string) { - this.inputField.text = text; + const textLength = text.length; + + this._value = text; + this.inputField.text = this.secure ? SECURE_CHARACTER.repeat(textLength) : text; - if (text.length !== 0) + if (textLength !== 0) { this.placeholder.visible = false; } @@ -508,7 +517,20 @@ export class Input extends Container /** Return text of the input. */ get value(): string { - return this.inputField.text; + return this._value; + } + + set secure(val: boolean) + { + this._secure = val; + + // Update text based on secure state (useful for show/hide password implementations) + this.value = this._value; + } + + get secure(): boolean + { + return this._secure; } /** diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts index 56c83a45..97a10d79 100644 --- a/src/stories/input/InputGraphics.stories.ts +++ b/src/stories/input/InputGraphics.stories.ts @@ -9,6 +9,7 @@ import { getColor } from '../utils/color'; const args = { text: '', placeholder: 'Enter text', + secure: false, align: ['center', 'left', 'right'], textColor: '#000000', backgroundColor: '#F1D583', @@ -42,6 +43,7 @@ export const UseGraphics = ({ maxLength, align, placeholder, + secure, paddingTop, paddingRight, paddingBottom, @@ -72,6 +74,7 @@ export const UseGraphics = ({ }, maxLength, align, + secure, placeholder, value: text, padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], diff --git a/src/stories/input/InputNineSlicePlane.stories.ts b/src/stories/input/InputNineSlicePlane.stories.ts index 27cfaddc..a4af582d 100644 --- a/src/stories/input/InputNineSlicePlane.stories.ts +++ b/src/stories/input/InputNineSlicePlane.stories.ts @@ -8,6 +8,7 @@ import { centerElement } from '../../utils/helpers/resize'; const args = { text: '', placeholder: 'Enter text', + secure: false, align: ['center', 'left', 'right'], textColor: '#000000', maxLength: 100, @@ -34,6 +35,7 @@ export const UseNineSlicePlane = ({ maxLength, align, placeholder, + secure, width, height, onChange @@ -62,6 +64,7 @@ export const UseNineSlicePlane = ({ maxLength, align, placeholder, + secure, value: text, }); diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts index cf0ac92c..6fbf563d 100644 --- a/src/stories/input/InputSprite.stories.ts +++ b/src/stories/input/InputSprite.stories.ts @@ -9,6 +9,7 @@ import { centerElement } from '../../utils/helpers/resize'; const args = { text: '', placeholder: 'Enter text', + secure: false, align: ['center', 'left', 'right'], textColor: '#000000', maxLength: 100, @@ -33,6 +34,7 @@ export const UseSprite = ({ maxLength, align, placeholder, + secure, onChange }: any) => { @@ -56,6 +58,7 @@ export const UseSprite = ({ maxLength, align, placeholder, + secure, value: text });