fineui/src/case/editor/editor.state.simple.js

import { Editor, TextButton } from "@/base";
import {
    AbsoluteLayout,
    VerticalLayout,
    shortcut,
    Widget,
    extend,
    emptyFn,
    i18nText,
    Controller,
    createWidget,
    nextTick,
    isNotNull,
    isKey,
    isFunction,
    isArray,
    isNumber,
    isEmpty
} from "@/core";

/**
 * 无限制-已选择状态输入框
 * Created by GUY on 2016/5/18.
 * @class SimpleStateEditor
 * @extends Single
 */
@shortcut()
export class SimpleStateEditor extends Widget {
    static xtype = "bi.simple_state_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-simple-state-editor`,
            hgap: 4,
            vgap: 2,
            lgap: 0,
            rgap: 0,
            tgap: 0,
            bgap: 0,
            validationChecker: emptyFn,
            quitChecker: emptyFn,
            mouseOut: false,
            allowBlank: true,
            watermark: "",
            errorText: "",
            height: 24,
            text: "",
            defaultText: i18nText("BI-Basic_Unrestricted"),
        });
    }

    _init() {
        super._init(...arguments);
        const o = this.options;
        this.editor = createWidget({
            type: Editor.xtype,
            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: TextButton.xtype,
            cls: "bi-water-mark",
            textAlign: "left",
            text: o.text,
            height: o.height,
            hgap: o.hgap + 2,
            handler: () => {
                this._showInput();
                this.editor.focus();
                this.editor.setValue("");
            },
        });
        this.text.on(TextButton.EVENT_CHANGE, () => {
            nextTick(() => {
                this.fireEvent(SimpleStateEditor.EVENT_CLICK_LABEL);
            });
        });
        createWidget({
            type: AbsoluteLayout.xtype,
            element: this,
            items: [
                {
                    el: this.text,
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                }
            ],
        });
        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });
        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_FOCUS, ...args);
        });
        this.editor.on(Editor.EVENT_BLUR, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_BLUR, ...args);
        });
        this.editor.on(Editor.EVENT_CLICK, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_CLICK, ...args);
        });
        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_CHANGE, ...args);
        });
        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_KEY_DOWN, ...args);
        });

        this.editor.on(Editor.EVENT_VALID, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_VALID, ...args);
        });
        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
            this._showHint();
            this.fireEvent(SimpleStateEditor.EVENT_CONFIRM, ...args);
        });
        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
            this._showHint();
            this.fireEvent(SimpleStateEditor.EVENT_CHANGE_CONFIRM, ...args);
        });
        this.editor.on(Editor.EVENT_START, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_START, ...args);
        });
        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_PAUSE, ...args);
        });
        this.editor.on(Editor.EVENT_STOP, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_STOP, ...args);
        });
        this.editor.on(Editor.EVENT_SPACE, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_SPACE, ...args);
        });
        this.editor.on(Editor.EVENT_ERROR, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_ERROR, ...args);
        });
        this.editor.on(Editor.EVENT_ENTER, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_ENTER, ...args);
        });
        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_RESTRICT, ...args);
        });
        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
            this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args);
        });
        createWidget({
            type: VerticalLayout.xtype,
            scrolly: false,
            element: this,
            items: [this.editor],
        });
        this._showHint();
        if (isNotNull(o.text)) {
            this.setState(o.text);
        }
    }

    setWaterMark(v) {
        this.options.watermark = v;
        this.editor.setWaterMark(v);
    }

    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);
    }

    focus() {
        this._showInput();
        this.editor.focus();
    }

    blur() {
        this.editor.blur();
        this._showHint();
    }

    _showInput() {
        this.editor.visible();
        this.text.invisible();
    }

    _showHint() {
        this.editor.invisible();
        this.text.visible();
    }

    _setText(v) {
        this.text.setText(v);
        this.text.setTitle(v);
    }

    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();
    }

    setValue(k) {
        this.editor.setValue(k);
    }

    getValue() {
        return this.editor.getValue();
    }

    getState() {
        return this.editor.getValue().match(/[^\s]+/g);
    }

    setState(v) {
        const o = this.options;
        super.setValue(...arguments);
        const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
        if (isNumber(v)) {
            if (v === Selection.All) {
                this._setText(i18nText("BI-Already_Selected"));
                this.text.element.removeClass("bi-water-mark");
            } else if (v === Selection.Multi) {
                this._setText(i18nText("BI-Already_Selected"));
                this.text.element.removeClass("bi-water-mark");
            } else {
                this._setText(isKey(defaultText) ? defaultText : o.text);
                this.text.element.addClass("bi-water-mark");
            }

            return;
        }
        if (!isArray(v) || v.length === 1) {
            this._setText(v);
            this.text.element.removeClass("bi-water-mark");
        } else if (isEmpty(v)) {
            this._setText(o.text);
            this.text.element.addClass("bi-water-mark");
        } else {
            this._setText(i18nText("BI-Already_Selected"));
            this.text.element.removeClass("bi-water-mark");
        }
    }

    getText() {
        return this.text.getText();
    }
}