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