fineui/src/widget/editor/editor.search.js

import {
    shortcut,
    Widget,
    extend,
    i18nText,
    emptyFn,
    createWidget,
    toPix,
    isKey,
    Controller,
    Events,
    HTapeLayout,
    isEndWithBlank
} from "@/core";
import { IconButton, Editor, IconLabel } from "@/base";

@shortcut()
export class SearchEditor extends Widget {
    static xtype = "bi.search_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_SPACE = "EVENT_SPACE";
    static EVENT_BACKSPACE = "EVENT_BACKSPACE";
    static EVENT_CLEAR = "EVENT_CLEAR";
    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_REMOVE = "EVENT_REMOVE";
    static EVENT_EMPTY = "EVENT_EMPTY";

    _defaultConfig(config) {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: `bi-search-editor bi-focus-shadow ${
                config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"
            }`,
            height: 24,
            errorText: "",
            watermark: i18nText("BI-Basic_Search"),
            validationChecker: emptyFn,
            quitChecker: emptyFn,
            value: "",
        });
    }

    _init() {
        super._init(...arguments);
        const o = this.options;
        this.editor = createWidget(o.el, {
            type: Editor.xtype,
            simple: o.simple,
            height: toPix(o.height, o.simple ? 1 : 2),
            watermark: o.watermark,
            allowBlank: true,
            hgap: 1,
            errorText: o.errorText,
            validationChecker: o.validationChecker,
            quitChecker: o.quitChecker,
            value: o.value,
            autoTrim: o.autoTrim,
        });
        this.clear = createWidget({
            type: IconButton.xtype,
            stopEvent: true,
            cls: "close-font",
            invisible: !isKey(o.value),
        });
        this.clear.on(IconButton.EVENT_CHANGE, () => {
            this.setValue("");
            this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT, this.getValue());
            // 从有内容到无内容的清空也是一次change
            this.fireEvent(SearchEditor.EVENT_CHANGE);
            this.fireEvent(SearchEditor.EVENT_CLEAR);
        });
        createWidget({
            element: this,
            height: toPix(o.height, o.simple ? 1 : 2),
            type: HTapeLayout.xtype,
            items: [
                {
                    el: {
                        type: IconLabel.xtype,
                        cls: "search-font",
                    },
                    width: 24,
                },
                {
                    el: this.editor,
                },
                {
                    el: this.clear,
                    width: 24,
                }
            ],
        });
        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });

        this.editor.on(Editor.EVENT_FOCUS, () => {
            this.fireEvent(SearchEditor.EVENT_FOCUS);
        });
        this.editor.on(Editor.EVENT_BLUR, () => {
            this.fireEvent(SearchEditor.EVENT_BLUR);
        });
        this.editor.on(Editor.EVENT_CLICK, () => {
            this.fireEvent(SearchEditor.EVENT_CLICK);
        });
        this.editor.on(Editor.EVENT_CHANGE, () => {
            this._checkClear();
            this.fireEvent(SearchEditor.EVENT_CHANGE);
        });
        this.editor.on(Editor.EVENT_KEY_DOWN, v => {
            this.fireEvent(SearchEditor.EVENT_KEY_DOWN, v);
        });
        this.editor.on(Editor.EVENT_SPACE, () => {
            this.fireEvent(SearchEditor.EVENT_SPACE);
        });
        this.editor.on(Editor.EVENT_BACKSPACE, () => {
            this.fireEvent(SearchEditor.EVENT_BACKSPACE);
        });

        this.editor.on(Editor.EVENT_VALID, () => {
            this.fireEvent(SearchEditor.EVENT_VALID);
        });
        this.editor.on(Editor.EVENT_ERROR, () => {
            this.fireEvent(SearchEditor.EVENT_ERROR);
        });
        this.editor.on(Editor.EVENT_ENTER, () => {
            this.fireEvent(SearchEditor.EVENT_ENTER);
        });
        this.editor.on(Editor.EVENT_RESTRICT, () => {
            this.fireEvent(SearchEditor.EVENT_RESTRICT);
        });
        this.editor.on(Editor.EVENT_EMPTY, () => {
            this._checkClear();
            this.fireEvent(SearchEditor.EVENT_EMPTY);
        });
        this.editor.on(Editor.EVENT_REMOVE, () => {
            this.fireEvent(SearchEditor.EVENT_REMOVE);
        });
        this.editor.on(Editor.EVENT_CONFIRM, () => {
            this.fireEvent(SearchEditor.EVENT_CONFIRM);
        });
        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => {
            this.fireEvent(SearchEditor.EVENT_CHANGE_CONFIRM);
        });
        this.editor.on(Editor.EVENT_START, () => {
            this.fireEvent(SearchEditor.EVENT_START);
        });
        this.editor.on(Editor.EVENT_PAUSE, () => {
            this.fireEvent(SearchEditor.EVENT_PAUSE);
        });
        this.editor.on(Editor.EVENT_STOP, () => {
            this.fireEvent(SearchEditor.EVENT_STOP);
        });
    }

    _checkClear() {
        if (!this.getValue()) {
            this.clear.invisible();
        } else {
            this.clear.visible();
        }
    }

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

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

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

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

    getKeywords() {
        const val = this.editor.getLastChangedValue();
        const keywords = val.match(/[\S]+/g);
        if (isEndWithBlank(val)) {
            return keywords.concat([" "]);
        }

        return keywords;
    }

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

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

    setValue(v) {
        this.editor.setValue(v);
        if (isKey(v)) {
            this.clear.visible();
        }
    }

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

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

    showClearIcon() {
        this.clear.visible();
    }

    hideClearIcon() {
        this.clear.invisible();
    }
}