fineui/src/case/editor/editor.shelter.js

import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core";
import { Editor, TextButton } from "@/base";

/**
 * 带标记的文本框
 * Created by GUY on 2016/1/25.
 * @class ShelterEditor
 * @extends Widget
 */
@shortcut()
export class ShelterEditor extends Widget {
    static xtype = "bi.shelter_editor"

    static EVENT_CHANGE = "EVENT_CHANGE"
    static EVENT_FOCUS = "EVENT_FOCUS"
    static EVENT_BLUR = "EVENT_BLUR"
    static EVENT_CLICK = "EVENT_CLICK"
    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
    static EVENT_START = "EVENT_START"
    static EVENT_PAUSE = "EVENT_PAUSE"
    static EVENT_STOP = "EVENT_STOP"
    static EVENT_CONFIRM = "EVENT_CONFIRM"
    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
    static EVENT_VALID = "EVENT_VALID"
    static EVENT_ERROR = "EVENT_ERROR"
    static EVENT_ENTER = "EVENT_ENTER"
    static EVENT_RESTRICT = "EVENT_RESTRICT"
    static EVENT_SPACE = "EVENT_SPACE"
    static EVENT_EMPTY = "EVENT_EMPTY"

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);
        
        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-shelter-editor`,
            hgap: 4,
            vgap: 2,
            lgap: 0,
            rgap: 0,
            tgap: 0,
            bgap: 0,
            validationChecker: emptyFn,
            quitChecker: emptyFn,
            allowBlank: true,
            watermark: "",
            errorText: "",
            height: 24,
            textAlign: "left",
        });
    }
    
    _init() {
        const o = this.options;
        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
            this.setValue(newValue);
        }) : o.value;
        super._init(...arguments);
        this.editor = createWidget({
            type: "bi.editor",
            simple: o.simple,
            height: o.height,
            hgap: o.hgap,
            vgap: o.vgap,
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
            bgap: o.bgap,
            value: o.value,
            validationChecker: o.validationChecker,
            quitChecker: o.quitChecker,
            allowBlank: o.allowBlank,
            watermark: o.watermark,
            errorText: o.errorText,
            autoTrim: o.autoTrim,
        });
        this.text = createWidget({
            type: "bi.text_button",
            cls: "shelter-editor-text",
            title: o.title,
            warningTitle: o.warningTitle,
            tipType: o.tipType,
            textAlign: o.textAlign,
            height: o.height,
            hgap: o.hgap + 2,
        });
        this.text.on(Controller.EVENT_CHANGE, (...args) => {
            args[2] = this;
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });
        this.text.on(TextButton.EVENT_CHANGE, () => {
            this.fireEvent(ShelterEditor.EVENT_CLICK_LABEL);
        });
        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });
        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_FOCUS, ...args);
        });
        this.editor.on(Editor.EVENT_BLUR, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_BLUR, ...args);
        });
        this.editor.on(Editor.EVENT_CLICK, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_CLICK, ...args);
        });
        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_CHANGE, ...args);
        });
        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_KEY_DOWN, ...args);
        });

        this.editor.on(Editor.EVENT_VALID, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_VALID, ...args);
        });
        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
            this._showHint();
            this._checkText();
            this.fireEvent(ShelterEditor.EVENT_CONFIRM, ...args);
        });
        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
            this._showHint();
            this._checkText();
            this.fireEvent(ShelterEditor.EVENT_CHANGE_CONFIRM, ...args);
        });
        this.editor.on(Editor.EVENT_START, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_START, ...args);
        });
        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_PAUSE, ...args);
        });
        this.editor.on(Editor.EVENT_STOP, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_STOP, ...args);
        });
        this.editor.on(Editor.EVENT_SPACE, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_SPACE, ...args);
        });
        this.editor.on(Editor.EVENT_ERROR, (...args) => {
            this._checkText();
            this.fireEvent(ShelterEditor.EVENT_ERROR, ...args);
        });
        this.editor.on(Editor.EVENT_ENTER, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_ENTER, ...args);
        });
        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_RESTRICT, ...args);
        });
        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
            this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args);
        });
        createWidget({
            type: "bi.absolute",
            element: this,
            items: [{
                el: this.text,
                inset: 0,
            }, {
                el: this.editor,
                inset: 0,
            }],
        });
        this._showHint();
        this._checkText();
    }
    
    _checkText() {
        const o = this.options;
        nextTick(bind(function () {
            if (this.editor.getValue() === "") {
                this.text.setValue(o.watermark || "");
                this.text.element.addClass("bi-water-mark");
            } else {
                this.text.setValue(this.editor.getValue());
                this.text.element.removeClass("bi-water-mark");
            }
            isKey(o.keyword) && this.text.doRedMark(o.keyword);
        }, this));
    }
    
    _showInput() {
        this.editor.visible();
        this.text.invisible();
    }
    
    _showHint() {
        this.editor.invisible();
        this.text.visible();
    }
    
    setWaterMark(v) {
        this.options.watermark = v;
        this.editor.setWaterMark(v);
    }
    
    setTitle(title) {
        this.text.setTitle(title);
    }
    
    setWarningTitle(title) {
        this.text.setWarningTitle(title);
    }
    
    focus() {
        this._showInput();
        this.editor.focus();
    }
    
    blur() {
        this.editor.blur();
        this._showHint();
        this._checkText();
    }
    
    doRedMark() {
        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
            return;
        }
        this.text.doRedMark(...arguments);
    }
    
    unRedMark() {
        this.text.unRedMark(...arguments);
    }
    
    doHighLight() {
        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
            return;
        }
        this.text.doHighLight(...arguments);
    }
    
    unHighLight() {
        this.text.unHighLight(...arguments);
    }
    
    isValid() {
        return this.editor.isValid();
    }
    
    setErrorText(text) {
        this.editor.setErrorText(text);
    }
    
    getErrorText() {
        return this.editor.getErrorText();
    }
    
    isEditing() {
        return this.editor.isEditing();
    }
    
    getLastValidValue() {
        return this.editor.getLastValidValue();
    }
    
    getLastChangedValue() {
        return this.editor.getLastChangedValue();
    }
    
    setTextStyle(style) {
        this.text.setStyle(style);
    }
    
    setValue(k) {
        this.editor.setValue(k);
        this._checkText();
    }
    
    getValue() {
        return this.editor.getValue();
    }
    
    getState() {
        return this.text.getValue();
    }
    
    setState(v) {
        this._showHint();
        this.text.setValue(v);
    }
}