From 99b19a440b283e7ad8ae12a22077ed7c0bb0fc04 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 10 Jan 2023 22:01:11 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14073=20refactor:=20case/editor=E7=9A=84?= =?UTF-8?q?es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 8 + src/case/editor/editor.clear.js | 230 +++++++-------- src/case/editor/editor.defaulttext.js | 304 ++++++++++---------- src/case/editor/editor.shelter.js | 352 ++++++++++++----------- src/case/editor/editor.sign.js | 315 ++++++++++---------- src/case/editor/editor.state.js | 384 +++++++++++++------------ src/case/editor/editor.state.simple.js | 312 ++++++++++---------- src/case/editor/index.js | 6 + src/case/index.js | 3 + 9 files changed, 978 insertions(+), 936 deletions(-) create mode 100644 src/case/editor/index.js diff --git a/es6.js b/es6.js index d2be104d0..9c0b18bf4 100644 --- a/es6.js +++ b/es6.js @@ -89,6 +89,14 @@ collection.methods.forEach(el => { clzName, "createWidget", "Events", + "emptyFn", + "nextTick", + "bind", + "i18nText", + "isNotNull", + "isString", + "isNumber", + "isEmpty", ]; target.forEach(t => { diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js index e18ab9599..c536e3ec1 100644 --- a/src/case/editor/editor.clear.js +++ b/src/case/editor/editor.clear.js @@ -1,28 +1,56 @@ +import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core"; +import { Editor, IconButton } from "@/base"; + /** - * 有清楚按钮的文本框 + * 有清除按钮的文本框 * Created by GUY on 2015/9/29. - * @class BI.SmallTextEditor - * @extends BI.SearchEditor + * @class ClearEditor + * @extends Widget */ -BI.ClearEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.ClearEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +@shortcut() +export class ClearEditor extends Widget { + static xtype = "bi.clear_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() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-clear-editor", height: 24, errorText: "", watermark: "", - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn - }); - }, - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + validationChecker: emptyFn, + quitChecker: emptyFn, + }); + } + + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.ClearEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -34,150 +62,128 @@ BI.ClearEditor = BI.inherit(BI.Widget, { value: o.value, autoTrim: o.autoTrim, }); - this.clear = BI.createWidget({ + this.clear = createWidget({ type: "bi.icon_button", stopEvent: true, - invisible: !BI.isKey(o.value), - cls: "search-close-h-font" + invisible: !isKey(o.value), + cls: "search-close-h-font", }); - this.clear.on(BI.IconButton.EVENT_CHANGE, function () { - self.setValue(""); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT); - self.fireEvent(BI.ClearEditor.EVENT_CLEAR); + this.clear.on(IconButton.EVENT_CHANGE, () => { + this.setValue(""); + this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT); + this.fireEvent(ClearEditor.EVENT_CLEAR); }); - BI.createWidget({ + createWidget({ element: this, type: "bi.htape", - items: [ - { - el: this.editor - }, - { - el: this.clear, - width: 24 - } - ] - }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + items: [{ + el: this.editor, + }, + { + el: this.clear, + width: 24, + } + ], + }); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.ClearEditor.EVENT_FOCUS); + this.editor.on(Editor.EVENT_FOCUS, () => { + this.fireEvent(ClearEditor.EVENT_FOCUS); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.ClearEditor.EVENT_BLUR); + this.editor.on(Editor.EVENT_BLUR, () => { + this.fireEvent(ClearEditor.EVENT_BLUR); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.ClearEditor.EVENT_CLICK); + this.editor.on(Editor.EVENT_CLICK, () => { + this.fireEvent(ClearEditor.EVENT_CLICK); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self._checkClear(); - self.fireEvent(BI.ClearEditor.EVENT_CHANGE); + this.editor.on(Editor.EVENT_CHANGE, () => { + this._checkClear(); + this.fireEvent(ClearEditor.EVENT_CHANGE); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.ClearEditor.EVENT_KEY_DOWN, v); + this.editor.on(Editor.EVENT_KEY_DOWN, v => { + this.fireEvent(ClearEditor.EVENT_KEY_DOWN, v); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.ClearEditor.EVENT_SPACE); + this.editor.on(Editor.EVENT_SPACE, () => { + this.fireEvent(ClearEditor.EVENT_SPACE); }); - this.editor.on(BI.Editor.EVENT_BACKSPACE, function () { - self.fireEvent(BI.ClearEditor.EVENT_BACKSPACE); + this.editor.on(Editor.EVENT_BACKSPACE, () => { + this.fireEvent(ClearEditor.EVENT_BACKSPACE); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.ClearEditor.EVENT_VALID); + this.editor.on(Editor.EVENT_VALID, () => { + this.fireEvent(ClearEditor.EVENT_VALID); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.ClearEditor.EVENT_ERROR); + this.editor.on(Editor.EVENT_ERROR, () => { + this.fireEvent(ClearEditor.EVENT_ERROR); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.ClearEditor.EVENT_ENTER); + this.editor.on(Editor.EVENT_ENTER, () => { + this.fireEvent(ClearEditor.EVENT_ENTER); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.ClearEditor.EVENT_RESTRICT); + this.editor.on(Editor.EVENT_RESTRICT, () => { + this.fireEvent(ClearEditor.EVENT_RESTRICT); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self._checkClear(); - self.fireEvent(BI.ClearEditor.EVENT_EMPTY); + this.editor.on(Editor.EVENT_EMPTY, () => { + this._checkClear(); + this.fireEvent(ClearEditor.EVENT_EMPTY); }); - this.editor.on(BI.Editor.EVENT_REMOVE, function () { - self.fireEvent(BI.ClearEditor.EVENT_REMOVE); + this.editor.on(Editor.EVENT_REMOVE, () => { + this.fireEvent(ClearEditor.EVENT_REMOVE); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self.fireEvent(BI.ClearEditor.EVENT_CONFIRM); + this.editor.on(Editor.EVENT_CONFIRM, () => { + this.fireEvent(ClearEditor.EVENT_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self.fireEvent(BI.ClearEditor.EVENT_CHANGE_CONFIRM); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => { + this.fireEvent(ClearEditor.EVENT_CHANGE_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.ClearEditor.EVENT_START); + this.editor.on(Editor.EVENT_START, () => { + this.fireEvent(ClearEditor.EVENT_START); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.ClearEditor.EVENT_PAUSE); + this.editor.on(Editor.EVENT_PAUSE, () => { + this.fireEvent(ClearEditor.EVENT_PAUSE); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.ClearEditor.EVENT_STOP); + this.editor.on(Editor.EVENT_STOP, () => { + this.fireEvent(ClearEditor.EVENT_STOP); }); - }, + } - _checkClear: function () { + _checkClear() { if (!this.getValue()) { this.clear.invisible(); } else { this.clear.visible(); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - getValue: function () { + getValue() { if (this.isValid()) { return this.editor.getValue(); } - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - if (BI.isKey(v)) { + if (isKey(v)) { this.clear.visible(); } - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); } -}); -BI.ClearEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.ClearEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ClearEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.ClearEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.ClearEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.ClearEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.ClearEditor.EVENT_BACKSPACE = "EVENT_BACKSPACE"; -BI.ClearEditor.EVENT_CLEAR = "EVENT_CLEAR"; - -BI.ClearEditor.EVENT_START = "EVENT_START"; -BI.ClearEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.ClearEditor.EVENT_STOP = "EVENT_STOP"; -BI.ClearEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.ClearEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.ClearEditor.EVENT_VALID = "EVENT_VALID"; -BI.ClearEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.ClearEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.ClearEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.ClearEditor.EVENT_REMOVE = "EVENT_REMOVE"; -BI.ClearEditor.EVENT_EMPTY = "EVENT_EMPTY"; -BI.shortcut("bi.clear_editor", BI.ClearEditor); +} diff --git a/src/case/editor/editor.defaulttext.js b/src/case/editor/editor.defaulttext.js index fe88d27bb..7597347d7 100644 --- a/src/case/editor/editor.defaulttext.js +++ b/src/case/editor/editor.defaulttext.js @@ -1,11 +1,36 @@ + +import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * dailer * 有默认提示文字的输入框 - * @class BI.DefaultTextEditor - * @extends BI.Widget + * @class DefaultTextEditor + * @extends Widget */ -BI.DefaultTextEditor = BI.inherit(BI.Widget, { - props: function () { +@shortcut() +export class DefaultTextEditor extends Widget { + static xtype = "bi.default_text_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" + + props() { return { baseCls: "bi-default-text-editor", hgap: 4, @@ -14,21 +39,21 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, defaultText: "", // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 text: "", // 显示值 - el: {} + el: {}, }; - }, + } - render: function () { - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + render() { + const o = this.options; + this.editor = createWidget(o.el, { type: "bi.editor", simple: o.simple, height: o.height, @@ -48,239 +73,218 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { autoTrim: o.autoTrim, }); - var showText = BI.isFunction(o.text) ? o.text() : o.text; + const showText = isFunction(o.text) ? o.text() : o.text; - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", - cls: BI.isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", + cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", textAlign: "left", height: o.height, text: showText || o.defaultText, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); }, title: o.title, warningTitle: o.warningTitle, - tipType: o.tipType + tipType: o.tipType, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(DefaultTextEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.DefaultTextEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.DefaultTextEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(DefaultTextEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(DefaultTextEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_EMPTY, ...args); }); return { type: "bi.absolute", - items: [ - { - el: this.editor, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - } - ] + items: [{ + el: this.editor, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], }; - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - _setText: function (v) { + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { - var o = this.options; - if (BI.isKey(v)) { + setState(v) { + const o = this.options; + if (isKey(v)) { this.text.setText(v); this.text.element.removeClass("bi-water-mark"); + return; } this.text.setText(o.defaultText); this.text.element.addClass("bi-water-mark"); - }, + } - setTipType: function (v) { + setTipType(v) { this.text.options.tipType = v; - }, + } - getText: function () { + getText() { return this.text.getText(); } -}); -BI.DefaultTextEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DefaultTextEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DefaultTextEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.DefaultTextEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.DefaultTextEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DefaultTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.DefaultTextEditor.EVENT_START = "EVENT_START"; -BI.DefaultTextEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.DefaultTextEditor.EVENT_STOP = "EVENT_STOP"; -BI.DefaultTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.DefaultTextEditor.EVENT_VALID = "EVENT_VALID"; -BI.DefaultTextEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.DefaultTextEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.DefaultTextEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.DefaultTextEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.DefaultTextEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.default_text_editor", BI.DefaultTextEditor); +} diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js index 4cb8e4d75..7517c6320 100644 --- a/src/case/editor/editor.shelter.js +++ b/src/case/editor/editor.shelter.js @@ -1,37 +1,62 @@ +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 BI.ShelterEditor - * @extends BI.Widget + * @class ShelterEditor + * @extends Widget */ -BI.ShelterEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.ShelterEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-shelter-editor", +@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: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, - textAlign: "left" + textAlign: "left", }); - }, - - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + } + + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.ShelterEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -49,7 +74,7 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "shelter-editor-text", title: o.title, @@ -57,92 +82,90 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { tipType: o.tipType, textAlign: o.textAlign, height: o.height, - hgap: o.hgap + 2 + hgap: o.hgap + 2, }); - this.text.on(BI.Controller.EVENT_CHANGE, function () { - arguments[2] = self; - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.text.on(Controller.EVENT_CHANGE, (...args) => { + args[2] = this; + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + this.fireEvent(ShelterEditor.EVENT_CLICK_LABEL); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.ShelterEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(ShelterEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.ShelterEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(ShelterEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(ShelterEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.ShelterEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(ShelterEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.ShelterEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(ShelterEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.ShelterEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(ShelterEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.ShelterEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(ShelterEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.ShelterEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(ShelterEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.ShelterEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(ShelterEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.ShelterEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - self._checkText(); - }, - - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { + 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"); @@ -150,130 +173,109 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { this.text.setValue(this.editor.getValue()); this.text.element.removeClass("bi-water-mark"); } - BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); + isKey(o.keyword) && this.text.doRedMark(o.keyword); }, this)); - }, - - _showInput: function () { + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, - - _showHint: function () { + } + + _showHint() { this.editor.invisible(); this.text.visible(); - }, - - setWaterMark: function (v) { + } + + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, - - setTitle: function (title) { + } + + setTitle(title) { this.text.setTitle(title); - }, - - setWarningTitle: function (title) { + } + + setWarningTitle(title) { this.text.setWarningTitle(title); - }, - - focus: function () { + } + + focus() { this._showInput(); this.editor.focus(); - }, - - blur: function () { + } + + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, - - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + } + + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, - - isValid: function () { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } + + isValid() { return this.editor.isValid(); - }, - - setErrorText: function (text) { + } + + setErrorText(text) { this.editor.setErrorText(text); - }, - - getErrorText: function () { + } + + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, - - getLastValidValue: function () { + } + + getLastValidValue() { return this.editor.getLastValidValue(); - }, - - getLastChangedValue: function () { + } + + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, - - setTextStyle: function (style) { + } + + setTextStyle(style) { this.text.setStyle(style); - }, - - setValue: function (k) { - var o = this.options; + } + + setValue(k) { this.editor.setValue(k); this._checkText(); - }, - - getValue: function () { + } + + getValue() { return this.editor.getValue(); - }, - - getState: function () { + } + + getState() { return this.text.getValue(); - }, - - setState: function (v) { + } + + setState(v) { this._showHint(); this.text.setValue(v); } -}); -BI.ShelterEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.ShelterEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ShelterEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.ShelterEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.ShelterEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.ShelterEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.ShelterEditor.EVENT_START = "EVENT_START"; -BI.ShelterEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.ShelterEditor.EVENT_STOP = "EVENT_STOP"; -BI.ShelterEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.ShelterEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.ShelterEditor.EVENT_VALID = "EVENT_VALID"; -BI.ShelterEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.ShelterEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.ShelterEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.ShelterEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.ShelterEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.shelter_editor", BI.ShelterEditor); +} diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js index a624d78a2..08feca088 100644 --- a/src/case/editor/editor.sign.js +++ b/src/case/editor/editor.sign.js @@ -1,37 +1,63 @@ +import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * 带标记的文本框 * Created by GUY on 2015/8/28. - * @class BI.SignEditor - * @extends BI.Widget + * @class SignEditor + * @extends Widget */ -BI.SignEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SignEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-sign-editor", +@shortcut() +export class SignEditor extends Widget { + static xtype = "bi.sign_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_QUICK_DOWN = "EVENT_QUICK_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-sign-editor`, hgap: 4, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", textAlign: "left", - height: 24 + height: 24, }); - }, + } - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.SignEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -49,7 +75,7 @@ BI.SignEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "sign-editor-text", title: o.title, @@ -58,229 +84,206 @@ BI.SignEditor = BI.inherit(BI.Widget, { textAlign: o.textAlign, height: o.height, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.selectAll(); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.selectAll(); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SignEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SignEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SignEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(SignEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SignEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(SignEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SignEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(SignEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.SignEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(SignEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SignEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(SignEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_QUICK_DOWN, function () { - self.fireEvent(BI.SignEditor.EVENT_QUICK_DOWN, arguments); + this.editor.on(Editor.EVENT_QUICK_DOWN, (...args) => { + this.fireEvent(SignEditor.EVENT_QUICK_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SignEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(SignEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SignEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(SignEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SignEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(SignEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SignEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(SignEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SignEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(SignEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this._checkText(); + this.fireEvent(SignEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SignEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(SignEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SignEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(SignEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.SignEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(SignEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - self._checkText(); - }, + this._checkText(); + } - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { + _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"); - BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); + isKey(o.keyword) && this.text.doRedMark(o.keyword); } }, this)); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setTipType: function (v) { + setTipType(v) { this.text.setTipType(v); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this._checkText(); this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); this._checkText(); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { + setState(v) { this._showHint(); this.text.setValue(v); } -}); -BI.SignEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SignEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SignEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.SignEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.SignEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.SignEditor.EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; -BI.SignEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.SignEditor.EVENT_START = "EVENT_START"; -BI.SignEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SignEditor.EVENT_STOP = "EVENT_STOP"; -BI.SignEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SignEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SignEditor.EVENT_VALID = "EVENT_VALID"; -BI.SignEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.SignEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.SignEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.SignEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.SignEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.sign_editor", BI.SignEditor); +} diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js index 9c3f340f9..d11dc059d 100644 --- a/src/case/editor/editor.state.js +++ b/src/case/editor/editor.state.js @@ -1,36 +1,61 @@ +import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core"; +import { TextButton, Editor } from "@/base"; + /** * guy * 记录状态的输入框 - * @class BI.StateEditor - * @extends BI.Single + * @class StateEditor + * @extends Single */ -BI.StateEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.StateEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-state-editor", +@shortcut() +export class StateEditor extends Widget { + static xtype = "bi.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-state-editor`, hgap: 4, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, - defaultText: BI.i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 + defaultText: i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 text: "", // 显示值 - el: {} + el: {}, }); - }, - - _init: function () { - BI.StateEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + } + + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.el, { type: "bi.editor", simple: o.simple, height: o.height, @@ -48,262 +73,243 @@ BI.StateEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "bi-water-mark tip-text-style", textAlign: "left", height: o.height, text: o.text, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); }, - title: BI.isNotNull(o.tipText) ? o.tipText : function () { - var title = ""; - if (BI.isString(self.stateValue)) { - title = self.stateValue; + title: isNotNull(o.tipText) ? o.tipText : () => { + let title = ""; + if (isString(this.stateValue)) { + title = this.stateValue; } - if (BI.isArray(self.stateValue) && self.stateValue.length === 1) { - title = self.stateValue[0]; + if (isArray(this.stateValue) && this.stateValue.length === 1) { + title = this.stateValue[0]; } + return title; }, warningTitle: o.warningTitle, - tipType: o.tipType + tipType: o.tipType, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.StateEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(StateEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.StateEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(StateEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.StateEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(StateEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.StateEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(StateEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.StateEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(StateEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.StateEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(StateEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.StateEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(StateEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.StateEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(StateEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.StateEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(StateEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.StateEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(StateEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.StateEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(StateEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.StateEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(StateEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.StateEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(StateEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.StateEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(StateEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.StateEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(StateEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.StateEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(StateEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.StateEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(StateEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - if (BI.isNotNull(o.text)) { + if (isNotNull(o.text)) { this.setState(o.text); } - }, - - setWaterMark: function (v) { + } + + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, - - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + } + + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, - - focus: function () { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } + + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } - }, - - blur: function () { + } + + blur() { this.editor.blur(); this._showHint(); - }, - - _showInput: function () { + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, - - _showHint: function () { + } + + _showHint() { this.editor.invisible(); this.text.visible(); - }, - - _setText: function (v) { + } + + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, - - isValid: function () { + } + + isValid() { return this.editor.isValid(); - }, - - setErrorText: function (text) { + } + + setErrorText(text) { this.editor.setErrorText(text); - }, - - getErrorText: function () { + } + + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, - - getLastValidValue: function () { + } + + getLastValidValue() { return this.editor.getLastValidValue(); - }, - - getLastChangedValue: function () { + } + + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, - - setValue: function (k) { + } + + setValue(k) { this.editor.setValue(k); - }, - - getValue: function () { + } + + getValue() { return this.editor.getValue(); - }, - - getState: function () { + } + + getState() { return this.editor.getValue().match(/[^\s]+/g); - }, - - setState: function (v) { - var o = this.options; - var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - BI.StateEditor.superclass.setValue.apply(this, arguments); + } + + setState(v) { + const o = this.options; + const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; + super.setValue(...arguments); this.stateValue = v; - if (BI.isNumber(v)) { - if (v === BI.Selection.All) { - this._setText(BI.i18nText("BI-Select_All")); + if (isNumber(v)) { + if (v === Selection.All) { + this._setText(i18nText("BI-Select_All")); this.text.element.removeClass("bi-water-mark"); - } else if (v === BI.Selection.Multi) { - this._setText(BI.i18nText("BI-Select_Part")); + } else if (v === Selection.Multi) { + this._setText(i18nText("BI-Select_Part")); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); - BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + this._setText(isKey(defaultText) ? defaultText : o.text); + isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); } + return; } - if (BI.isString(v)) { + if (isString(v)) { this._setText(v); // 配置了defaultText才判断标灰，其他情况不标灰 - (BI.isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + (isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + return; } - if (BI.isArray(v)) { - if (BI.isEmpty(v)) { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); - BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + if (isArray(v)) { + if (isEmpty(v)) { + this._setText(isKey(defaultText) ? defaultText : o.text); + isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); } else if (v.length === 1) { this._setText(v[0]); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.i18nText("BI-Select_Part")); + this._setText(i18nText("BI-Select_Part")); this.text.element.removeClass("bi-water-mark"); } } - }, - - setTipType: function (v) { + } + + setTipType(v) { this.text.options.tipType = v; - }, - - getText: function () { + } + + getText() { return this.text.getText(); } -}); -BI.StateEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.StateEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.StateEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.StateEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.StateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.StateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.StateEditor.EVENT_START = "EVENT_START"; -BI.StateEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.StateEditor.EVENT_STOP = "EVENT_STOP"; -BI.StateEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.StateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.StateEditor.EVENT_VALID = "EVENT_VALID"; -BI.StateEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.StateEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.StateEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.StateEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.StateEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.state_editor", BI.StateEditor); +} diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js index 96be87aa1..807a8c158 100644 --- a/src/case/editor/editor.state.simple.js +++ b/src/case/editor/editor.state.simple.js @@ -1,36 +1,61 @@ +import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * 无限制-已选择状态输入框 * Created by GUY on 2016/5/18. - * @class BI.SimpleStateEditor - * @extends BI.Single + * @class SimpleStateEditor + * @extends Single */ -BI.SimpleStateEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SimpleStateEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-simple-state-editor", +@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: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, mouseOut: false, allowBlank: true, watermark: "", errorText: "", height: 24, text: "", - defaultText: BI.i18nText("BI-Basic_Unrestricted"), + defaultText: i18nText("BI-Basic_Unrestricted"), }); - }, + } - _init: function () { - BI.SimpleStateEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -48,241 +73,220 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "bi-water-mark", textAlign: "left", text: o.text, height: o.height, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SimpleStateEditor.EVENT_CLICK_LABEL); }); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - } - ] + items: [{ + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SimpleStateEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.SimpleStateEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(SimpleStateEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(SimpleStateEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.vertical", scrolly: false, element: this, - items: [this.editor] + items: [this.editor], }); this._showHint(); - if (BI.isNotNull(o.text)) { + if (isNotNull(o.text)) { this.setState(o.text); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - _setText: function (v) { + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.editor.getValue().match(/[^\s]+/g); - }, + } - setState: function (v) { - var o = this.options; - BI.SimpleStateEditor.superclass.setValue.apply(this, arguments); - var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - if (BI.isNumber(v)) { - if (v === BI.Selection.All) { - this._setText(BI.i18nText("BI-Already_Selected")); + 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 === BI.Selection.Multi) { - this._setText(BI.i18nText("BI-Already_Selected")); + } else if (v === Selection.Multi) { + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); + this._setText(isKey(defaultText) ? defaultText : o.text); this.text.element.addClass("bi-water-mark"); } + return; } - if (!BI.isArray(v) || v.length === 1) { + if (!isArray(v) || v.length === 1) { this._setText(v); this.text.element.removeClass("bi-water-mark"); - } else if (BI.isEmpty(v)) { + } else if (isEmpty(v)) { this._setText(o.text); this.text.element.addClass("bi-water-mark"); } else { - this._setText(BI.i18nText("BI-Already_Selected")); + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); } - }, + } - getText: function () { + getText() { return this.text.getText(); } -}); -BI.SimpleStateEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SimpleStateEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SimpleStateEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.SimpleStateEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.SimpleStateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.SimpleStateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.SimpleStateEditor.EVENT_START = "EVENT_START"; -BI.SimpleStateEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SimpleStateEditor.EVENT_STOP = "EVENT_STOP"; -BI.SimpleStateEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SimpleStateEditor.EVENT_VALID = "EVENT_VALID"; -BI.SimpleStateEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.SimpleStateEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.SimpleStateEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.SimpleStateEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.SimpleStateEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.simple_state_editor", BI.SimpleStateEditor); +} diff --git a/src/case/editor/index.js b/src/case/editor/index.js new file mode 100644 index 000000000..487c0f3f6 --- /dev/null +++ b/src/case/editor/index.js @@ -0,0 +1,6 @@ +export { ClearEditor } from "./editor.clear"; +export { DefaultTextEditor } from "./editor.defaulttext"; +export { ShelterEditor } from "./editor.shelter"; +export { SignEditor } from "./editor.sign"; +export { StateEditor } from "./editor.state"; +export { SimpleStateEditor } from "./editor.state.simple"; diff --git a/src/case/index.js b/src/case/index.js index 5e8b11baf..33f250645 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -1,7 +1,10 @@ import * as button from "./button"; +import * as editor from "./editor"; Object.assign(BI, { ...button, + ...editor, }); export * from "./button"; +export * from "./editor";