ascii-ui/widgets/Input.js

Graphic terminal emulator for HTML canvas elements

import { Widget } from '../Widget';
import { coalesce } from '../util/coalesce';
import { deepAssign } from '../util/deepAssign';
export class Input extends Widget {
    constructor(terminal, options, parent) {
        super(terminal, deepAssign({}, Input.defaultOptions, options), parent);
        this.value = '';
        this.offset = 0;
    }
    render() {
        if (typeof this.value === 'undefined') {
            return;
        }
        const length = Math.min(this.options.width, this.value.length);
        const displayedText = (this.options.password
            ? this.options.passwordCharacter.repeat(length)
            : this.value.substr(this.offset, length))
            + ' '.repeat(this.options.width - length);
        this.terminal.setText(displayedText, this.options.col, this.options.line);
        this.terminal.setCursor(this.options.col + length - (this.offset > 0 ? 1 : 0), this.options.line);
    }
    getValue(showPassword) {
        return !this.options.password || showPassword
            ? this.value
            : this.options.passwordCharacter.repeat(this.value.length);
    }
    setValue(value) {
        if (value !== undefined) {
            this.value = this.options.maxLength > 0 ? value.substr(0, this.options.maxLength) : value;
            this.offset = Math.max(0, this.value.length - this.options.width + 1);
            this.render();
        }
    }
    focus() {
        const changed = super.focus();
        if (changed) {
            this.terminalCursor = this.terminal.isCursorEnabled();
            this.terminal.setOptions({ cursor: true });
        }
        return changed;
    }
    blur() {
        const changed = super.blur();
        if (changed) {
            this.terminal.setOptions({ cursor: this.terminalCursor });
        }
        return changed;
    }
    updateOptions(changes) {
        if (this.options.height !== 1) {
            this.options.height = 1;
        }
        if (changes.passwordCharacter) {
            this.options.passwordCharacter = changes.passwordCharacter.charAt(0);
        }
        if (coalesce(changes.line, changes.col, changes.password, changes.passwordCharacter, changes.maxLength) !== undefined) {
            if (changes.maxLength !== undefined) {
                this.setValue(this.value);
            }
            this.render();
        }
    }
}
Input.defaultOptions = {
    maxLength: 0,
    password: false,
    passwordCharacter: '*',
};
//# sourceMappingURL=Input.js.map