diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js index add1060ba..40cbb90c5 100644 --- a/src/base/foundation/message.js +++ b/src/base/foundation/message.js @@ -49,7 +49,7 @@ export const Msg = ((() => { }, }], }); - const height = BI.SIZE_CONSANTS.TOAST_TOP; + let height = BI.SIZE_CONSANTS.TOAST_TOP; each(toastStack, function (i, element) { height += element.outerHeight() + 10; }); diff --git a/src/base/index.js b/src/base/index.js index 2c1dc228c..1db6a6206 100644 --- a/src/base/index.js +++ b/src/base/index.js @@ -6,6 +6,7 @@ import GridView from "./grid/grid"; import Pager from "./pager/pager"; import * as combination from "./combination"; import { Msg } from "./foundation/message"; +import * as base from "./0.base"; Object.assign(BI, { Pane, @@ -16,6 +17,7 @@ Object.assign(BI, { Pager, ...combination, Msg, + ...base, }); export * from "./0.base"; diff --git a/src/base/single/editor/editor.js b/src/base/single/editor/editor.js index c0a77c9f6..0cf075a39 100644 --- a/src/base/single/editor/editor.js +++ b/src/base/single/editor/editor.js @@ -3,11 +3,39 @@ * @class BI.Editor * @extends BI.Single */ -BI.Editor = BI.inherit(BI.Single, { - _defaultConfig: function () { - var conf = BI.Editor.superclass._defaultConfig.apply(this, arguments); - - return BI.extend(conf, { +import { shortcut, Controller, extend, createWidget, isKey, isEmptyString, isFunction, isNull, trim, } from "../../../core"; +import { Single } from "../0.single"; +import { Input } from "../input/input"; +import { Bubbles } from "../../0.base"; + +@shortcut() +export class Editor extends Single { + static xtype = "bi.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_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-editor bi-focus-shadow", hgap: 4, vgap: 2, @@ -25,21 +53,21 @@ BI.Editor = BI.inherit(BI.Single, { errorText: "", autoTrim: true, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const { value, watermark, validationChecker, quitChecker, allowBlank, inputType, hgap, vgap, lgap, rgap, tgap, bgap } = this.options; // 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码 - var autocomplete = o.autocomplete ? " autocomplete=" + o.autocomplete : ""; - this.editor = this.addWidget(BI.createWidget({ + const autocomplete = this.options.autocomplete ? " autocomplete=" + this.options.autocomplete : ""; + this.editor = this.addWidget(createWidget({ type: "bi.input", - element: "", + element: "", root: true, - value: o.value, - watermark: o.watermark, - validationChecker: o.validationChecker, - quitChecker: o.quitChecker, - allowBlank: o.allowBlank, + value, + watermark, + validationChecker, + quitChecker, + allowBlank, })); this.editor.element.css({ width: "100%", @@ -50,12 +78,12 @@ BI.Editor = BI.inherit(BI.Single, { margin: "0", }); - var items = [ + const items = [ { el: { type: "bi.absolute", - ref: function (_ref) { - self.contentWrapper = _ref; + ref: (_ref) => { + this.contentWrapper = _ref; }, items: [ { @@ -67,190 +95,189 @@ BI.Editor = BI.inherit(BI.Single, { } ], }, - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap, + left: hgap + lgap, + right: hgap + rgap, + top: vgap + tgap, + bottom: vgap + bgap, } ]; - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: items, + items, }); this.setWaterMark(this.options.watermark); - 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.Input.EVENT_FOCUS, function () { - self._checkError(); - self.element.addClass("bi-editor-focus"); - self.fireEvent(BI.Editor.EVENT_FOCUS, arguments); + this.editor.on(Input.EVENT_FOCUS, (...args) => { + this._checkError(); + this.element.addClass("bi-editor-focus"); + this.fireEvent(Editor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Input.EVENT_BLUR, function () { - self._setErrorVisible(false); - self.element.removeClass("bi-editor-focus"); - self.fireEvent(BI.Editor.EVENT_BLUR, arguments); + this.editor.on(Input.EVENT_BLUR, (...args) => { + this._setErrorVisible(false); + this.element.removeClass("bi-editor-focus"); + this.fireEvent(Editor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Input.EVENT_CLICK, function () { - self.fireEvent(BI.Editor.EVENT_CLICK, arguments); + this.editor.on(Input.EVENT_CLICK, (...args) => { + this.fireEvent(Editor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Input.EVENT_CHANGE, function () { - self.fireEvent(BI.Editor.EVENT_CHANGE, arguments); + this.editor.on(Input.EVENT_CHANGE, (...args) => { + this.fireEvent(Editor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Input.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.Editor.EVENT_KEY_DOWN, arguments); + this.editor.on(Input.EVENT_KEY_DOWN, (v, ...args) => { + this.fireEvent(Editor.EVENT_KEY_DOWN, v, ...args); }); - this.editor.on(BI.Input.EVENT_QUICK_DOWN, function (e) { + this.editor.on(Input.EVENT_QUICK_DOWN, (e) => { // tab键就不要隐藏了 - if (e.keyCode !== BI.KeyCode.TAB && self.watermark) { - self.watermark.invisible(); + if (e.keyCode !== BI.KeyCode.TAB && this.watermark) { + this.watermark.invisible(); } }); - this.editor.on(BI.Input.EVENT_VALID, function () { - self._checkWaterMark(); - self._setErrorVisible(false); - self.element.removeClass("error"); - self.fireEvent(BI.Editor.EVENT_VALID, arguments); + this.editor.on(Input.EVENT_VALID, (...args) => { + this._checkWaterMark(); + this._setErrorVisible(false); + this.element.removeClass("error"); + this.fireEvent(Editor.EVENT_VALID, ...args); }); - this.editor.on(BI.Input.EVENT_ERROR, function () { - self._checkWaterMark(); - self.fireEvent(BI.Editor.EVENT_ERROR, arguments); - self._setErrorVisible(self.isEditing()); - self.element.addClass("error"); + this.editor.on(Input.EVENT_ERROR, (...args) => { + this._checkWaterMark(); + this.fireEvent(Editor.EVENT_ERROR, ...args); + this._setErrorVisible(this.isEditing()); + this.element.addClass("error"); }); - this.editor.on(BI.Input.EVENT_RESTRICT, function () { - self._checkWaterMark(); - var tip = self._setErrorVisible(true); - tip && tip.element.fadeOut(100, function () { + this.editor.on(Input.EVENT_RESTRICT, (...args) => { + this._checkWaterMark(); + const tip = this._setErrorVisible(true); + tip && tip.element.fadeOut(100, () => { tip.element.fadeIn(100); }); - self.fireEvent(BI.Editor.EVENT_RESTRICT, arguments); + this.fireEvent(Editor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Input.EVENT_EMPTY, function () { - self._checkWaterMark(); - self.fireEvent(BI.Editor.EVENT_EMPTY, arguments); + this.editor.on(Input.EVENT_EMPTY, (...args) => { + this._checkWaterMark(); + this.fireEvent(Editor.EVENT_EMPTY, ...args); }); - this.editor.on(BI.Input.EVENT_ENTER, function () { - self.fireEvent(BI.Editor.EVENT_ENTER, arguments); + this.editor.on(Input.EVENT_ENTER, (...args) => { + this.fireEvent(Editor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Input.EVENT_SPACE, function () { - self.fireEvent(BI.Editor.EVENT_SPACE, arguments); + this.editor.on(Input.EVENT_SPACE, (...args) => { + this.fireEvent(Editor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Input.EVENT_BACKSPACE, function () { - self.fireEvent(BI.Editor.EVENT_BACKSPACE, arguments); + this.editor.on(Input.EVENT_BACKSPACE, (...args) => { + this.fireEvent(Editor.EVENT_BACKSPACE, ...args); }); - this.editor.on(BI.Input.EVENT_REMOVE, function () { - self.fireEvent(BI.Editor.EVENT_REMOVE, arguments); + this.editor.on(Input.EVENT_REMOVE, (...args) => { + this.fireEvent(Editor.EVENT_REMOVE, ...args); }); - this.editor.on(BI.Input.EVENT_START, function () { - self.fireEvent(BI.Editor.EVENT_START, arguments); + this.editor.on(Input.EVENT_START, (...args) => { + this.fireEvent(Editor.EVENT_START, ...args); }); - this.editor.on(BI.Input.EVENT_PAUSE, function () { - self.fireEvent(BI.Editor.EVENT_PAUSE, arguments); + this.editor.on(Input.EVENT_PAUSE, (...args) => { + this.fireEvent(Editor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Input.EVENT_STOP, function () { - self.fireEvent(BI.Editor.EVENT_STOP, arguments); + this.editor.on(Input.EVENT_STOP, (...args) => { + this.fireEvent(Editor.EVENT_STOP, ...args); }); - this.editor.on(BI.Input.EVENT_CONFIRM, function () { - self.fireEvent(BI.Editor.EVENT_CONFIRM, arguments); + this.editor.on(Input.EVENT_CONFIRM, (...args) => { + this.fireEvent(Editor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Input.EVENT_CHANGE_CONFIRM, function () { - self.fireEvent(BI.Editor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Input.EVENT_CHANGE_CONFIRM, (...args) => { + this.fireEvent(Editor.EVENT_CHANGE_CONFIRM, ...args); }); - this.element.click(function (e) { + this.element.click((e) => { e.stopPropagation(); return false; }); - if (BI.isKey(this.options.value) || BI.isEmptyString(this.options.value)) { + if (isKey(this.options.value) || isEmptyString(this.options.value)) { this._checkError(); this._checkWaterMark(); } else { this._checkWaterMark(); } - }, + } - _checkToolTip: function () { - var o = this.options; - var errorText = o.errorText; - if (BI.isFunction(errorText)) { + _checkToolTip() { + const { errorText } = this.options; + if (isFunction(errorText)) { errorText = errorText(this.editor.getValue()); } - if (BI.isKey(errorText)) { - if (!this.isEnabled() || this.isValid() || BI.Bubbles.has(this.getName())) { + if (isKey(errorText)) { + if (!this.isEnabled() || this.isValid() || Bubbles.has(this.getName())) { this.setTitle(""); } else { this.setTitle(errorText); } } - }, + } - _assertWaterMark: function () { - var self = this, o = this.options; - if (BI.isNull(this.watermark)) { - this.watermark = BI.createWidget({ + _assertWaterMark() { + const { height, vgap, tgap } = this.options; + if (isNull(this.watermark)) { + this.watermark = createWidget({ type: "bi.label", cls: "bi-water-mark", text: this.options.watermark, - height: o.height - 2 * o.vgap - o.tgap, + height: height - 2 * vgap - tgap, hgap: 2, whiteSpace: "nowrap", textAlign: "left", }); this.watermark.element.bind({ - mousedown: function (e) { - if (self.isEnabled()) { - self.editor.isEditing() || self.editor.focus(); + mousedown: (e) => { + if (this.isEnabled()) { + this.editor.isEditing() || this.editor.focus(); } else { - self.editor.isEditing() && self.editor.blur(); + this.editor.isEditing() && this.editor.blur(); } e.stopEvent(); }, }); - this.watermark.element.bind("click", function (e) { - if (self.isEnabled()) { - self.editor.isEditing() || self.editor.focus(); + this.watermark.element.bind("click", (e) => { + if (this.isEnabled()) { + this.editor.isEditing() || this.editor.focus(); } else { - self.editor.isEditing() && self.editor.blur(); + this.editor.isEditing() && this.editor.blur(); } e.stopEvent(); }); } - }, + } - _checkError: function () { + _checkError() { this._setErrorVisible(this.isEnabled() && !this.isValid()); this._checkToolTip(); - }, + } - _checkWaterMark: function () { - var o = this.options; - if (!this.disabledWaterMark && this.editor.getValue() === "" && BI.isKey(o.watermark)) { + _checkWaterMark() { + const { watermark } = this.options; + if (!this.disabledWaterMark && this.editor.getValue() === "" && isKey(watermark)) { this.watermark && this.watermark.visible(); } else { this.watermark && this.watermark.invisible(); } - }, + } - setErrorText: function (text) { + setErrorText(text) { this.options.errorText = text; - }, + } - getErrorText: function () { + getErrorText() { return this.options.errorText; - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; - if (BI.isNull(this.watermark)) { + if (isNull(this.watermark)) { this._assertWaterMark(); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this.contentWrapper, items: [ @@ -266,113 +293,91 @@ BI.Editor = BI.inherit(BI.Single, { } this.watermark.setText(v); this._checkWaterMark(); - }, + } - _setErrorVisible: function (b) { - var o = this.options; - var errorText = o.errorText; - if (BI.isFunction(errorText)) { - errorText = errorText(o.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue()); + _setErrorVisible(b) { + const { errorText, autoTrim, simple } = this.options; + if (isFunction(errorText)) { + errorText = errorText(autoTrim ? trim(this.editor.getValue()) : this.editor.getValue()); } - if (!this.disabledError && BI.isKey(errorText)) { - BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { - adjustYOffset: o.simple ? 1 : 2, + if (!this.disabledError && isKey(errorText)) { + Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { + adjustYOffset: simple ? 1 : 2, }); this._checkToolTip(); } - }, + } - disableError: function () { + disableError() { this.disabledError = true; this._checkError(); - }, + } - enableError: function () { + enableError() { this.disabledError = false; this._checkError(); - }, + } - disableWaterMark: function () { + disableWaterMark() { this.disabledWaterMark = true; this._checkWaterMark(); - }, + } - enableWaterMark: function () { + enableWaterMark() { this.disabledWaterMark = false; this._checkWaterMark(); - }, + } - focus: function () { + focus() { this.element.addClass("text-editor-focus"); this.editor.focus(); - }, + } - blur: function () { + blur() { this.element.removeClass("text-editor-focus"); this.editor.blur(); - }, + } - selectAll: function () { + selectAll() { this.editor.selectAll(); - }, + } - onKeyDown: function (k) { + onKeyDown(k) { this.editor.onKeyDown(k); - }, + } - setValue: function (v) { - BI.Editor.superclass.setValue.apply(this, arguments); + setValue(v) { + super.setValue(v); this.editor.setValue(v); this._checkError(); this._checkWaterMark(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - getValue: function () { + getValue() { if (!this.isValid()) { - return this.options.autoTrim ? BI.trim(this.editor.getLastValidValue()) : this.editor.getLastValidValue(); + return this.options.autoTrim ? trim(this.editor.getLastValidValue()) : this.editor.getLastValidValue(); } - return this.options.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue(); - }, + return this.options.autoTrim ? trim(this.editor.getValue()) : this.editor.getValue(); + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, - - destroyed: function () { - BI.Bubbles.remove(this.getName()); - }, -}); -BI.Editor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.Editor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.Editor.EVENT_BLUR = "EVENT_BLUR"; -BI.Editor.EVENT_CLICK = "EVENT_CLICK"; -BI.Editor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.Editor.EVENT_SPACE = "EVENT_SPACE"; -BI.Editor.EVENT_BACKSPACE = "EVENT_BACKSPACE"; - -BI.Editor.EVENT_START = "EVENT_START"; -BI.Editor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.Editor.EVENT_STOP = "EVENT_STOP"; -BI.Editor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.Editor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.Editor.EVENT_VALID = "EVENT_VALID"; -BI.Editor.EVENT_ERROR = "EVENT_ERROR"; -BI.Editor.EVENT_ENTER = "EVENT_ENTER"; -BI.Editor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.Editor.EVENT_REMOVE = "EVENT_REMOVE"; -BI.Editor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.editor", BI.Editor); + } + + destroyed() { + Bubbles.remove(this.getName()); + } +} diff --git a/src/base/single/editor/editor.multifile.js b/src/base/single/editor/editor.multifile.js index 21765474d..0954dcbbb 100644 --- a/src/base/single/editor/editor.multifile.js +++ b/src/base/single/editor/editor.multifile.js @@ -6,52 +6,64 @@ * @extends BI.Single * @abstract */ -BI.MultifileEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.MultifileEditor.superclass._defaultConfig.apply(this, arguments); +import { shortcut, Widget, createWidget, extend } from "../../../core"; +import { File } from "../input/file"; - return BI.extend(conf, { +@shortcut() +export class MultifileEditor extends Widget { + static xtype = "bi.multifile_editor"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_UPLOADSTART = "EVENT_UPLOADSTART"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_PROGRESS = "EVENT_PROGRESS"; + static EVENT_UPLOADED = "EVENT_UPLOADED"; + + _defaultConfig() { + const conf = super._defaultConfig(arguments); + + return extend(conf, { baseCls: (conf.baseCls || "") + " bi-multifile-editor", multiple: false, maxSize: -1, // 1024 * 1024 accept: "", url: "", }); - }, + } - render: function () { - var self = this, o = this.options; - this.file = BI.createWidget({ + render() { + const { name, url, multiple, accept, maxSize, maxLength, title, errorText } = this.options; + this.file = createWidget({ type: "bi.file", cls: "multifile-editor", width: "100%", height: "100%", - name: o.name, - url: o.url, - multiple: o.multiple, - accept: o.accept, - maxSize: o.maxSize, - maxLength: o.maxLength, - title: o.title, - errorText: o.errorText, + name, + url, + multiple, + accept, + maxSize, + maxLength, + title, + errorText, }); - this.file.on(BI.File.EVENT_CHANGE, function () { - self.fireEvent(BI.MultifileEditor.EVENT_CHANGE, arguments); + this.file.on(File.EVENT_CHANGE, (...args) => { + this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args); }); - this.file.on(BI.File.EVENT_UPLOADSTART, function () { - self.fireEvent(BI.MultifileEditor.EVENT_UPLOADSTART, arguments); + this.file.on(File.EVENT_UPLOADSTART, (...args) => { + this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args); }); - this.file.on(BI.File.EVENT_ERROR, function () { - self.fireEvent(BI.MultifileEditor.EVENT_ERROR, arguments); + this.file.on(File.EVENT_ERROR, (...args) => { + this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args); }); - this.file.on(BI.File.EVENT_PROGRESS, function () { - self.fireEvent(BI.MultifileEditor.EVENT_PROGRESS, arguments); + this.file.on(File.EVENT_PROGRESS, (...args) => { + this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args); }); - this.file.on(BI.File.EVENT_UPLOADED, function () { - self.fireEvent(BI.MultifileEditor.EVENT_UPLOADED, arguments); + this.file.on(File.EVENT_UPLOADED, (...args) => { + this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [{ @@ -66,50 +78,44 @@ BI.MultifileEditor = BI.inherit(BI.Widget, { bottom: 0, }], }); - }, + } - _reset: function () { + _reset() { this.file.reset(); - }, + } - setUrl: function (v) { + setUrl(v) { this.file.setUrl(v); - }, + } - setMaxFileLength: function (v) { + setMaxFileLength(v) { this.file.setMaxFileLength(v); - }, + } - select: function () { + select() { this.file.select(); - }, + } - getQueue: function () { + getQueue() { return this.file.getQueue(); - }, + } - getValue: function () { + getValue() { return this.file.getValue(); - }, + } - upload: function () { + upload() { this._reset(); this.file.upload(); - }, + } - sendFiles: function (files) { + sendFiles(files) { this._reset(); this.file.sendFiles(files); - }, + } - reset: function () { + reset() { this._reset(); - }, -}); -BI.MultifileEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultifileEditor.EVENT_UPLOADSTART = "EVENT_UPLOADSTART"; -BI.MultifileEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.MultifileEditor.EVENT_PROGRESS = "EVENT_PROGRESS"; -BI.MultifileEditor.EVENT_UPLOADED = "EVENT_UPLOADED"; -BI.shortcut("bi.multifile_editor", BI.MultifileEditor); + } +} diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js index d3838d29e..2ef9df43f 100644 --- a/src/base/single/editor/editor.textarea.js +++ b/src/base/single/editor/editor.textarea.js @@ -4,36 +4,50 @@ * @class BI.TextAreaEditor * @extends BI.Single */ -BI.TextAreaEditor = BI.inherit(BI.Single, { - _defaultConfig: function (conf) { - return BI.extend(BI.TextAreaEditor.superclass._defaultConfig.apply(), { +import { shortcut, Widget, Controller, createWidget, extend, isEmptyString, isKey, isNotEmptyString, isNotNull, trim, isFunction } from "../../../core"; +import { Single } from "../0.single"; +import { Bubbles } from "../../0.base"; + +@shortcut() +export class TextAreaEditor extends Single { + static xtype = "bi.textarea_editor"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_EMPTY = "EVENT_EMPTY"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + + _defaultConfig(conf) { + return extend(super._defaultConfig(), { baseCls: "bi-textarea-editor", value: "", errorText: "", adjustYOffset: conf.simple ? 0 : 2, adjustXOffset: 0, offsetStyle: "left", - validationChecker: function () { + validationChecker: () => { return true; }, scrolly: true, }); - }, + } - render: function () { - var o = this.options, self = this; - this.content = BI.createWidget({ + render() { + const { scrolly, value, style } = this.options; + this.content = createWidget({ type: "bi.layout", tagName: "textarea", width: "100%", height: "100%", cls: "bi-textarea textarea-editor-content display-block", - css: o.scrolly ? null : { + css: scrolly ? null : { overflowY: "hidden", }, }); this.content.element.css({ resize: "none" }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [{ @@ -48,90 +62,90 @@ BI.TextAreaEditor = BI.inherit(BI.Single, { }], }); - this.content.element.on("input propertychange", function (e) { - self._checkError(); - self._checkWaterMark(); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, self.getValue(), self); - self.fireEvent(BI.TextAreaEditor.EVENT_CHANGE); - if (BI.isEmptyString(self.getValue())) { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, self.getValue(), self); + this.content.element.on("input propertychange", (e) => { + this._checkError(); + this._checkWaterMark(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this); + this.fireEvent(TextAreaEditor.EVENT_CHANGE); + if (isEmptyString(this.getValue())) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); } }); - this.content.element.focus(function () { - self._checkError(); - self._focus(); - self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS); - BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) { - if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) { - BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName()); - self.content.element.blur(); + this.content.element.focus(() => { + this._checkError(); + this._focus(); + this.fireEvent(TextAreaEditor.EVENT_FOCUS); + Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), (e) => { + if (BI.DOM.isExist(this) && !this.element.__isMouseInBounds__(e)) { + Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()); + this.content.element.blur(); } }); }); - this.content.element.blur(function () { - self._setErrorVisible(false); - self._blur(); - if (!self._isError()) { - self.fireEvent(BI.TextAreaEditor.EVENT_CONFIRM); + this.content.element.blur(() => { + this._setErrorVisible(false); + this._blur(); + if (!this._isError()) { + this.fireEvent(TextAreaEditor.EVENT_CONFIRM); } - self.fireEvent(BI.TextAreaEditor.EVENT_BLUR); - BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName()); + this.fireEvent(TextAreaEditor.EVENT_BLUR); + Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()); }); - this.content.element.keydown(function () { + this.content.element.keydown(() => { // 水印快速消失 - self._checkWaterMark(); + this._checkWaterMark(); }); - this.content.element.keyup(function (e) { - self.fireEvent(BI.TextAreaEditor.EVENT_KEY_DOWN, e.keyCode); + this.content.element.keyup((e) => { + this.fireEvent(TextAreaEditor.EVENT_KEY_DOWN, e.keyCode); }); - this.content.element.click(function (e) { + this.content.element.click((e) => { e.stopPropagation(); }); - if (BI.isKey(o.value)) { - this.setValue(o.value); + if (isKey(value)) { + this.setValue(value); } - if (BI.isNotNull(o.style)) { - this.setStyle(o.style); + if (isNotNull(style)) { + this.setStyle(style); } this._checkWaterMark(); - }, + } - _checkWaterMark: function () { - var self = this, o = this.options; - var val = this.getValue(); - if (BI.isNotEmptyString(val)) { + _checkWaterMark() { + const { watermark, scrolly, invalid, disabled, height } = this.options; + const val = this.getValue(); + if (isNotEmptyString(val)) { this.watermark && this.watermark.destroy(); this.watermark = null; } else { - if (BI.isNotEmptyString(o.watermark)) { + if (isNotEmptyString(watermark)) { if (!this.watermark) { - this.watermark = BI.createWidget({ + this.watermark = createWidget({ type: "bi.label", cls: "bi-water-mark textarea-watermark", textAlign: "left", - whiteSpace: o.scrolly ? "normal" : "nowrap", - text: o.watermark, - invalid: o.invalid, - disabled: o.disabled, + whiteSpace: scrolly ? "normal" : "nowrap", + text: watermark, + invalid, + disabled, hgap: 6, - vgap: o.height > 24 ? 4 : 2, - height: o.height > 24 ? "" : o.height, + vgap: height > 24 ? 4 : 2, + height: height > 24 ? "" : height, }); this.watermark.element.bind({ - mousedown: function (e) { - if (self.isEnabled()) { - self.focus(); + mousedown: (e) => { + if (this.isEnabled()) { + this.focus(); } else { - self.blur(); + this.blur(); } e.stopEvent(); }, - click: function (e) { + click: (e) => { e.stopPropagation(); }, }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [{ @@ -142,112 +156,104 @@ BI.TextAreaEditor = BI.inherit(BI.Single, { }], }); } else { - this.watermark.setText(o.watermark); - this.watermark.setValid(!o.invalid); - this.watermark.setEnable(!o.disabled); + this.watermark.setText(watermark); + this.watermark.setValid(!invalid); + this.watermark.setEnable(!disabled); } } } - }, + } - _isError: function () { + _isError() { return this.isEnabled() && !this.options.validationChecker(this.getValue()); - }, + } - _checkError: function () { - var isError = this._isError(); + _checkError() { + const isError = this._isError(); this._setErrorVisible(isError); this.element[isError ? "addClass" : "removeClass"]("error"); - }, + } - _focus: function () { + _focus() { this.content.element.addClass("textarea-editor-focus"); this._checkWaterMark(); - if (BI.isEmptyString(this.getValue())) { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); + if (isEmptyString(this.getValue())) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); } - }, + } - _blur: function () { + _blur() { this.content.element.removeClass("textarea-editor-focus"); this._checkWaterMark(); - }, + } - _setErrorVisible: function (b) { - var o = this.options; - var errorText = o.errorText; - if (BI.isFunction(errorText)) { - errorText = errorText(BI.trim(this.getValue())); + _setErrorVisible(b) { + const { errorText, adjustYOffset, adjustXOffset, offsetStyle } = this.options; + if (isFunction(errorText)) { + errorText = errorText(trim(this.getValue())); } - if (!this.disabledError && BI.isKey(errorText)) { - BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { - adjustYOffset: o.adjustYOffset, - adjustXOffset: o.adjustXOffset, - offsetStyle: o.offsetStyle, + if (!this.disabledError && isKey(errorText)) { + Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { + adjustYOffset, + adjustXOffset, + offsetStyle, }); } - }, + } - _defaultState: function () { - if (BI.isEmptyString(this.getValue())) { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); - this.fireEvent(BI.TextAreaEditor.EVENT_EMPTY); + _defaultState() { + if (isEmptyString(this.getValue())) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); + this.fireEvent(TextAreaEditor.EVENT_EMPTY); } - }, + } - focus: function () { + focus() { this._focus(); this.content.element.focus(); - }, + } - blur: function () { + blur() { this._blur(); this.content.element.blur(); - }, + } - getValue: function () { + getValue() { return this.content.element.val(); - }, + } - setValue: function (value) { + setValue(value) { this.content.element.val(value); this._checkError(); this._checkWaterMark(); this._defaultState(); - }, + } - setStyle: function (style) { + setStyle(style) { this.style = style; this.element.css(style); - this.content.element.css(BI.extend({}, style, { + this.content.element.css(extend({}, style, { color: style.color || BI.DOM.getContrastColor(BI.DOM.isRGBColor(style.backgroundColor) ? BI.DOM.rgb2hex(style.backgroundColor) : style.backgroundColor), })); - }, + } - getStyle: function () { + getStyle() { return this.style; - }, + } - setWatermark: function (v) { + setWatermark(v) { this.options.watermark = v; this._checkWaterMark(); - }, + } - _setValid: function (b) { - BI.TextAreaEditor.superclass._setValid.apply(this, arguments); + _setValid(b) { + super._setValid(arguments); // this.content.setValid(b); // this.watermark && this.watermark.setValid(b); - }, + } - _setEnable: function (b) { - BI.TextAreaEditor.superclass._setEnable.apply(this, [b]); + _setEnable(b) { + super._setEnable(b); this.content && (this.content.element[0].disabled = !b); - }, -}); -BI.TextAreaEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.TextAreaEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.TextAreaEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.TextAreaEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.TextAreaEditor.EVENT_EMPTY = "EVENT_EMPTY"; -BI.TextAreaEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.shortcut("bi.textarea_editor", BI.TextAreaEditor); + } +} diff --git a/src/base/single/editor/index.js b/src/base/single/editor/index.js new file mode 100644 index 000000000..0bd7cdf7d --- /dev/null +++ b/src/base/single/editor/index.js @@ -0,0 +1,3 @@ +export { Editor } from "./editor"; +export { MultifileEditor } from "./editor.multifile"; +export { TextAreaEditor } from "./editor.textarea"; \ No newline at end of file diff --git a/src/base/single/html/html.js b/src/base/single/html/html.js index 84c980427..9e78c5364 100644 --- a/src/base/single/html/html.js +++ b/src/base/single/html/html.js @@ -3,9 +3,14 @@ * @class BI.Html * @extends BI.Single */ -BI.Html = BI.inherit(BI.Single, { +import { shortcut, isNumber, createWidget, isWidthOrHeight, isKey } from "../../../core"; +import { Single } from "../0.single"; - props: { +@shortcut() +export class Html extends Single { + static xtype = "bi.html"; + + props = { baseCls: "bi-html", textAlign: "left", whiteSpace: "normal", @@ -19,57 +24,57 @@ BI.Html = BI.inherit(BI.Single, { bgap: 0, text: "", highLight: false, - }, + } - render: function () { - var self = this, o = this.options; - if (o.hgap + o.lgap > 0) { + render() { + const { vgap, hgap, lgap, rgap, tgap, bgap, height, lineHeight, maxWidth, textAlign, whiteSpace, handler, text, value, highLight } = this.options; + if (hgap + lgap > 0) { this.element.css({ - "padding-left": BI.pixFormat(o.hgap + o.lgap), + "padding-left": BI.pixFormat(hgap + lgap), }); } - if (o.hgap + o.rgap > 0) { + if (hgap + rgap > 0) { this.element.css({ - "padding-right": BI.pixFormat(o.hgap + o.rgap), + "padding-right": BI.pixFormat(hgap + rgap), }); } - if (o.vgap + o.tgap > 0) { + if (vgap + tgap > 0) { this.element.css({ - "padding-top": BI.pixFormat(o.vgap + o.tgap), + "padding-top": BI.pixFormat(vgap + tgap), }); } - if (o.vgap + o.bgap > 0) { + if (vgap + bgap > 0) { this.element.css({ - "padding-bottom": BI.pixFormat(o.vgap + o.bgap), + "padding-bottom": BI.pixFormat(vgap + bgap), }); } - if (BI.isNumber(o.height)) { - this.element.css({ lineHeight: BI.pixFormat(o.height) }); + if (isNumber(height)) { + this.element.css({ lineHeight: BI.pixFormat(height) }); } - if (BI.isNumber(o.lineHeight)) { - this.element.css({ lineHeight: BI.pixFormat(o.lineHeight) }); + if (isNumber(lineHeight)) { + this.element.css({ lineHeight: BI.pixFormat(lineHeight) }); } - if (BI.isWidthOrHeight(o.maxWidth)) { - this.element.css({ maxWidth: o.maxWidth }); + if (isWidthOrHeight(maxWidth)) { + this.element.css({ maxWidth }); } - if (BI.isNumber(o.maxWidth)) { - this.element.css({ maxWidth: BI.pixFormat(o.maxWidth) }) + if (isNumber(maxWidth)) { + this.element.css({ maxWidth: BI.pixFormat(maxWidth) }); } this.element.css({ - textAlign: o.textAlign, - whiteSpace: o.whiteSpace, - textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "", - overflow: o.whiteSpace === "nowrap" ? "" : "auto", + textAlign, + whiteSpace, + textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "", + overflow: whiteSpace === "nowrap" ? "" : "auto", }); - if (o.handler) { - this.text = BI.createWidget({ + if (handler) { + this.text = createWidget({ type: "bi.layout", tagName: "span", }); - this.text.element.click(function () { - o.handler(self.getValue()); + this.text.element.click(() => { + handler(this.getValue()); }); - BI.createWidget({ + createWidget({ type: "bi.default", element: this, items: [this.text], @@ -78,40 +83,38 @@ BI.Html = BI.inherit(BI.Single, { this.text = this; } - if (BI.isKey(o.text)) { - this.setText(o.text); - } else if (BI.isKey(o.value)) { - this.setText(o.value); + if (isKey(text)) { + this.setText(text); + } else if (isKey(value)) { + this.setText(value); } - if (o.highLight) { + if (highLight) { this.doHighLight(); } - }, + } - doHighLight: function () { + doHighLight() { this.text.element.addClass("bi-high-light"); - }, + } - unHighLight: function () { + unHighLight() { this.text.element.removeClass("bi-high-light"); - }, + } - setValue: function (text) { - BI.Html.superclass.setValue.apply(this, arguments); + setValue(text) { + super.setValue(text); if (!this.isReadOnly()) { this.setText(text); } - }, + } - setStyle: function (css) { + setStyle(css) { this.text.element.css(css); - }, + } - setText: function (text) { - BI.Html.superclass.setText.apply(this, arguments); + setText(text) { + super.setText(text); this.options.text = text; this.text.element.html(text); - }, -}); - -BI.shortcut("bi.html", BI.Html); + } +} diff --git a/src/base/single/icon/icon.js b/src/base/single/icon/icon.js index 916206bbd..8dddd52b9 100644 --- a/src/base/single/icon/icon.js +++ b/src/base/single/icon/icon.js @@ -3,20 +3,25 @@ * @class BI.Icon * @extends BI.Single */ -BI.Icon = BI.inherit(BI.Single, { - _defaultConfig: function () { - var conf = BI.Icon.superclass._defaultConfig.apply(this, arguments); +import { shortcut, extend } from "../../../core"; +import { Single } from "../0.single"; - return BI.extend(conf, { +@shortcut() +export class Icon extends Single { + static xtype = "bi.icon"; + + _defaultConfig() { + const conf = super._defaultConfig(arguments); + + return extend(conf, { tagName: "i", baseCls: (conf.baseCls || "") + " x-icon b-font horizon-center display-block", }); - }, + } - render: function () { + render() { if (BI.isIE9Below && BI.isIE9Below()) { this.element.addClass("hack"); } - }, -}); -BI.shortcut("bi.icon", BI.Icon); + } +} diff --git a/src/base/single/index.js b/src/base/single/index.js index 19dbfed2d..8fe2e22cc 100644 --- a/src/base/single/index.js +++ b/src/base/single/index.js @@ -1,5 +1,11 @@ export { Single } from "./0.single"; export { Text } from "./1.text"; +export { PureText } from "./text.pure"; +export { Icon } from "./icon/icon"; +export { Html } from "./html/html"; export { A } from "./a/a"; export * from "./tip"; -export * from "./button" \ No newline at end of file +export * from "./label"; +export * from "./input"; +export * from "./editor"; +export * from "./button" diff --git a/src/base/single/input/file.js b/src/base/single/input/file.js index 290970141..8564efda7 100644 --- a/src/base/single/input/file.js +++ b/src/base/single/input/file.js @@ -6,734 +6,738 @@ * @extends BI.Single * @abstract */ -((function (document) { - /** - * @description normalize input.files. create if not present, add item method if not present - * @param Object generated wrap object - * @return Object the wrap object itself - */ - var F = ((function (item) { - return function (input) { - var files = input.files || [input]; - if (!files.item) { - files.item = item; - } +import { shortcut, Widget, some, extend } from "../../../core"; +import { Msg } from "../../foundation/message"; - return files; - }; - })(function (i) { - return this[i]; - })); - - var event = { - - /** - * @description add an event via addEventListener or attachEvent - * @param DOMElement the element to add event - * @param String event name without "on" (e.g. "mouseover") - * @param Function the callback to associate as event - * @return Object noswfupload.event - */ - add: document.addEventListener ? - function (node, name, callback) { - node.addEventListener(name, callback, false); +const document = _global.document || {}; +/** + * @description normalize input.files. create if not present, add item method if not present + * @param Object generated wrap object + * @return Object the wrap object itself + */ +const F = (((item) => { + return (input) => { + const files = input.files || [input]; + if (!files.item) { + files.item = item; + } - return this; - } : - function (node, name, callback) { - node.attachEvent("on" + name, callback); + return files; + }; +})((i) => { + return this[i]; +})); - return this; - }, +const event = { - /** - * @description remove an event via removeEventListener or detachEvent - * @param DOMElement the element to remove event - * @param String event name without "on" (e.g. "mouseover") - * @param Function the callback associated as event - * @return Object noswfupload.event - */ - del: document.removeEventListener ? - function (node, name, callback) { - node.removeEventListener(name, callback, false); - - return this; - } : - function (node, name, callback) { - node.detachEvent("on" + name, callback); + /** + * @description add an event via addEventListener or attachEvent + * @param DOMElement the element to add event + * @param String event name without "on" (e.g. "mouseover") + * @param Function the callback to associate as event + * @return Object noswfupload.event + */ + add: document.addEventListener ? + (node, name, callback) => { + node.addEventListener(name, callback, false); - return this; - }, + return this; + } : + (node, name, callback) => { + node.attachEvent("on" + name, callback); - /** - * @description to block event propagation and prevent event default - * @param void generated event or undefined - * @return Boolean false - */ - stop: function (e) { - if (!e) { - if (self.event) { - event.returnValue = !(event.cancelBubble = true); - } - } else { - e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; - e.preventDefault ? e.preventDefault() : e.returnValue = false; - } + return this; + }, - return false; + /** + * @description remove an event via removeEventListener or detachEvent + * @param DOMElement the element to remove event + * @param String event name without "on" (e.g. "mouseover") + * @param Function the callback associated as event + * @return Object noswfupload.event + */ + del: document.removeEventListener ? + (node, name, callback) => { + node.removeEventListener(name, callback, false); + + return this; + } : + (node, name, callback) => { + node.detachEvent("on" + name, callback); + + return this; }, - }; - var sendFile = (function (toString) { - var split = "onabort.onerror.onloadstart.onprogress".split("."), - length = split.length, - CRLF = "\r\n", - xhr = new XMLHttpRequest, - sendFile; - function multipart(boundary, name, file) { - return "--".concat( - boundary, CRLF, - "Content-Disposition: form-data; name=\"", name, "\"; filename=\"", _global.encodeURIComponent(file.fileName), "\"", CRLF, - "Content-Type: application/octet-stream", CRLF, - CRLF, - file.getAsBinary(), CRLF, - "--", boundary, "--", CRLF - ); - } - function isFunction (Function) { - return toString.call(Function) === "[object Function]"; + /** + * @description to block event propagation and prevent event default + * @param void generated event or undefined + * @return Boolean false + */ + stop(e) { + if (!e) { + if (self.event) { + event.returnValue = !(event.cancelBubble = true); } + } else { + e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; + e.preventDefault ? e.preventDefault() : e.returnValue = false; + } + + return false; + }, +}; + +const sendFile = (((toString) => { + const split = "onabort.onerror.onloadstart.onprogress".split("."), + length = split.length, + CRLF = "\r\n"; + let xhr = new XMLHttpRequest, + sendFile; + const multipart = (boundary, name, file) => { + return "--".concat( + boundary, CRLF, + "Content-Disposition: form-data; name=\"", name, "\"; filename=\"", _global.encodeURIComponent(file.fileName), "\"", CRLF, + "Content-Type: application/octet-stream", CRLF, + CRLF, + file.getAsBinary(), CRLF, + "--", boundary, "--", CRLF + ); + } + const isFunction = (Function) => { + return toString.call(Function) === "[object Function]"; + } - // FireFox 3+, Safari 4 beta (Chrome 2 beta file is buggy and will not work) - if (xhr.upload || xhr.sendAsBinary) { - sendFile = function (handler, maxSize, width, height) { - var current = handler.current; - if (-1 < maxSize && maxSize < handler.file.fileSize) { - if (isFunction(handler.onerror)) { - handler.onerror(); - } - - return; - } - for (var xhr = new XMLHttpRequest, - upload = xhr.upload || { - addEventListener: function (event, callback) { - this["on" + event] = callback; - }, - }, - i = 0; - i < length; - i++ - ) { - upload.addEventListener( - split[i].substring(2), - // eslint-disable-next-line no-loop-func - (function (event) { - return function (rpe) { - if (isFunction(handler[event])) { - handler[event](rpe, xhr); - } - }; - }(split[i])), - false - ); + // FireFox 3+, Safari 4 beta (Chrome 2 beta file is buggy and will not work) + if (xhr.upload || xhr.sendAsBinary) { + sendFile = (handler, maxSize, width, height) => { + const current = handler.current; + if (-1 < maxSize && maxSize < handler.file.fileSize) { + if (isFunction(handler.onerror)) { + handler.onerror(); } + + return; + } + const xhr = new XMLHttpRequest, + upload = xhr.upload || { + addEventListener(event, callback) { + this["on" + event] = callback; + }, + }; + for (let i = 0;i < length;i++) { upload.addEventListener( - "load", - function (rpe) { - if (handler.onreadystatechange === false) { - if (isFunction(handler.onload)) { - handler.onload(rpe, xhr); + split[i].substring(2), + // eslint-disable-next-line no-loop-func + (((event) => { + return (rpe) => { + if (isFunction(handler[event])) { + handler[event](rpe, xhr); } - } else { - setTimeout(function () { - if (xhr.readyState === 4) { - if (isFunction(handler.onload)) { - handler.onload(rpe, xhr); - } - } else { - setTimeout(arguments.callee, 15); - } - }, 15); - } - }, + }; + })(split[i])), false ); - xhr.open("post", BI.appendQuery(handler.url, { - filename: _global.encodeURIComponent(handler.file.fileName), - }), true); - if (!xhr.upload) { - var rpe = { loaded: 0, total: handler.file.fileSize || handler.file.size, simulation: true }; - rpe.interval = setInterval(function () { - rpe.loaded += 1024 / 4; - if (rpe.total <= rpe.loaded) { - rpe.loaded = rpe.total; + } + upload.addEventListener( + "load", + (rpe) => { + if (handler.onreadystatechange === false) { + if (isFunction(handler.onload)) { + handler.onload(rpe, xhr); } - upload.onprogress(rpe); - }, 100); - xhr.onabort = function () { - upload.onabort({}); - }; - xhr.onerror = function () { - upload.onerror({}); - }; - xhr.onreadystatechange = function () { - switch (xhr.readyState) { - case 2: - case 3: - if (rpe.total <= rpe.loaded) { - rpe.loaded = rpe.total; - } - upload.onprogress(rpe); - break; - case 4: - clearInterval(rpe.interval); - rpe.interval = 0; - rpe.loaded = rpe.total; - upload.onprogress(rpe); - if (199 < xhr.status && xhr.status < 400) { - upload.onload({}); - var attachO = BI.jsonDecode(xhr.responseText); - attachO.filename = handler.file.fileName; - if (handler.file.type.indexOf("image") !== -1) { - attachO.attach_type = "image"; - } - handler.attach_array[current] = attachO; - } else { - upload.onerror({}); + } else { + const callback = () => { + if (xhr.readyState === 4) { + if (isFunction(handler.onload)) { + handler.onload(rpe, xhr); } - break; - default: - break; + } else { + setTimeout(callback, 15); + } } - }; - upload.onloadstart(rpe); - } else { - xhr.onreadystatechange = function () { - switch (xhr.readyState) { - case 4: - var attachO = BI.jsonDecode(xhr.responseText); + setTimeout(callback, 15); + } + }, + false + ); + xhr.open("post", BI.appendQuery(handler.url, { + filename: _global.encodeURIComponent(handler.file.fileName), + }), true); + if (!xhr.upload) { + const rpe = { loaded: 0, total: handler.file.fileSize || handler.file.size, simulation: true }; + rpe.interval = setInterval(() => { + rpe.loaded += 1024 / 4; + if (rpe.total <= rpe.loaded) { + rpe.loaded = rpe.total; + } + upload.onprogress(rpe); + }, 100); + xhr.onabort = () => { + upload.onabort({}); + }; + xhr.onerror = () => { + upload.onerror({}); + }; + xhr.onreadystatechange = () => { + switch (xhr.readyState) { + case 2: + case 3: + if (rpe.total <= rpe.loaded) { + rpe.loaded = rpe.total; + } + upload.onprogress(rpe); + break; + case 4: + clearInterval(rpe.interval); + rpe.interval = 0; + rpe.loaded = rpe.total; + upload.onprogress(rpe); + if (199 < xhr.status && xhr.status < 400) { + upload.onload({}); + const attachO = BI.jsonDecode(xhr.responseText); + attachO.filename = handler.file.fileName; if (handler.file.type.indexOf("image") !== -1) { attachO.attach_type = "image"; } - attachO.filename = handler.file.fileName; - if (handler.maxLength === 1) { - handler.attach_array[0] = attachO; - // handler.attach_array.push(attachO); - } else { - handler.attach_array[current] = attachO; - } - break; - default: - break; - } - }; - if (isFunction(upload.onloadstart)) { - upload.onloadstart(); - } - } - var boundary = "AjaxUploadBoundary" + (new Date).getTime(); - xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); - if (handler.file.getAsBinary) { - xhr[xhr.sendAsBinary ? "sendAsBinary" : "send"](multipart(boundary, handler.name, handler.file)); - } else { - xhr.setRequestHeader("Content-Type", "multipart/form-data"); - // xhr.setRequestHeader("X-Name", handler.name); - // xhr.setRequestHeader("X-File-Name", handler.file.fileName); - var form = new FormData(); - form.append("FileData", handler.file); - xhr.send(form); - } - - return handler; - }; - } else { - // Internet Explorer, Opera, others - sendFile = function (handler, maxSize, width, height) { - var current = handler.current, iframe, form; - var url = handler.url.concat(-1 === handler.url.indexOf("?") ? "?" : "&", "AjaxUploadFrame=true"), - rpe = { - loaded: 1, total: 100, simulation: true, interval: setInterval(function () { - if (rpe.loaded < rpe.total) { - ++rpe.loaded; - } - if (isFunction(handler.onprogress)) { - handler.onprogress(rpe, {}); + handler.attach_array[current] = attachO; + } else { + upload.onerror({}); } - }, 100), - }, - target = ["AjaxUpload", (new Date).getTime(), String(Math.random()).substring(2)].join("_"); - function onload() { - iframe.onreadystatechange = iframe.onload = iframe.onerror = null; - form.parentNode.removeChild(form); - form = null; - clearInterval(rpe.interval); - // rpe.loaded = rpe.total; - try { - var responseText = (iframe.contentWindow.document || iframe.contentWindow.contentDocument).body.innerHTML; - var attachO = BI.jsonDecode(responseText); + break; + default: + break; + } + }; + upload.onloadstart(rpe); + } else { + xhr.onreadystatechange = () => { + switch (xhr.readyState) { + case 4: + const attachO = BI.jsonDecode(xhr.responseText); if (handler.file.type.indexOf("image") !== -1) { attachO.attach_type = "image"; } - - // attachO.fileSize = responseText.length; - try { - // decodeURIComponent特殊字符可能有问题, catch一下，保证能正常上传 - attachO.filename = _global.decodeURIComponent(handler.file.fileName); - } catch (e) { - attachO.filename = handler.file.fileName; - } + attachO.filename = handler.file.fileName; if (handler.maxLength === 1) { handler.attach_array[0] = attachO; + // handler.attach_array.push(attachO); } else { handler.attach_array[current] = attachO; } - } catch (e) { - if (isFunction(handler.onerror)) { - handler.onerror(rpe, event || _global.event); - } - } - if (isFunction(handler.onload)) { - handler.onload(rpe, { responseText: responseText }); - } - } - - try { // IE < 8 does not accept enctype attribute ... - var form = document.createElement("
"), - iframe = handler.iframe || (handler.iframe = document.createElement("")); - } catch (e) { - var form = document.createElement("form"), - iframe = handler.iframe || (handler.iframe = document.createElement("iframe")); - form.setAttribute("enctype", "multipart/form-data"); - iframe.setAttribute("name", iframe.id = target); - iframe.setAttribute("src", url); - } - iframe.style.position = "absolute"; - iframe.style.left = iframe.style.top = "-10000px"; - iframe.onload = onload; - iframe.onerror = function (event) { - if (isFunction(handler.onerror)) { - handler.onerror(rpe, event || _global.event); + break; + default: + break; } }; - iframe.onreadystatechange = function () { - if (/loaded|complete/i.test(iframe.readyState)) { - onload(); - - // wei : todo,将附件信息放到handler.attach - } else if (isFunction(handler.onloadprogress)) { + if (isFunction(upload.onloadstart)) { + upload.onloadstart(); + } + } + const boundary = "AjaxUploadBoundary" + (new Date).getTime(); + xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); + if (handler.file.getAsBinary) { + xhr[xhr.sendAsBinary ? "sendAsBinary" : "send"](multipart(boundary, handler.name, handler.file)); + } else { + xhr.setRequestHeader("Content-Type", "multipart/form-data"); + // xhr.setRequestHeader("X-Name", handler.name); + // xhr.setRequestHeader("X-File-Name", handler.file.fileName); + const form = new FormData(); + form.append("FileData", handler.file); + xhr.send(form); + } + + return handler; + }; + } else { + // Internet Explorer, Opera, others + sendFile = (handler, maxSize, width, height) => { + const current = handler.current; + let iframe, form; + const url = handler.url.concat(-1 === handler.url.indexOf("?") ? "?" : "&", "AjaxUploadFrame=true"), + rpe = { + loaded: 1, total: 100, simulation: true, interval: setInterval(() => { if (rpe.loaded < rpe.total) { ++rpe.loaded; } - handler.onloadprogress(rpe, { - readyState: { - loading: 2, - interactive: 3, - loaded: 4, - complete: 4, - }[iframe.readyState] || 1, - }); + if (isFunction(handler.onprogress)) { + handler.onprogress(rpe, {}); + } + }, 100), + }, + target = ["AjaxUpload", (new Date).getTime(), String(Math.random()).substring(2)].join("_"); + const onload = () => { + iframe.onreadystatechange = iframe.onload = iframe.onerror = null; + form.parentNode.removeChild(form); + form = null; + clearInterval(rpe.interval); + // rpe.loaded = rpe.total; + const responseText = (iframe.contentWindow.document || iframe.contentWindow.contentDocument).body.innerHTML; + try { + const attachO = BI.jsonDecode(responseText); + if (handler.file.type.indexOf("image") !== -1) { + attachO.attach_type = "image"; + } + + // attachO.fileSize = responseText.length; + try { + // decodeURIComponent特殊字符可能有问题, catch一下，保证能正常上传 + attachO.filename = _global.decodeURIComponent(handler.file.fileName); + } catch (e) { + attachO.filename = handler.file.fileName; + } + if (handler.maxLength === 1) { + handler.attach_array[0] = attachO; + } else { + handler.attach_array[current] = attachO; + } + } catch (e) { + if (isFunction(handler.onerror)) { + handler.onerror(rpe, event || _global.event); + } + } + if (isFunction(handler.onload)) { + handler.onload(rpe, { responseText: responseText }); } - }; - form.setAttribute("action", handler.url + "&filename=" + _global.encodeURIComponent(handler.file.fileName)); - form.setAttribute("target", iframe.id); - form.setAttribute("method", "post"); - form.appendChild(handler.file); - form.style.display = "none"; - if (isFunction(handler.onloadstart)) { - handler.onloadstart(rpe, {}); } - var d = document.body || document.documentElement; - d.appendChild(iframe); - d.appendChild(form); - form.submit(); - - return handler; - }; - } - xhr = null; - - return sendFile; - }(Object.prototype.toString)); - - function sendFiles(handler, maxSize, width, height) { - var length = handler.files.length, - onload = handler.onload, - onloadstart = handler.onloadstart; - handler.current = 0; - handler.total = 0; - handler.sent = 0; - while (handler.current < length) { - handler.total += (handler.files[handler.current].fileSize || handler.files[handler.current].size); - handler.current++; - } - handler.current = 0; - if (length && handler.files[0].fileSize !== -1) { - handler.file = handler.files[handler.current]; - - sendFile(handler, maxSize, width, height).onload = function (rpe, xhr) { - handler.onloadstart = null; - handler.sent += (handler.files[handler.current].fileSize || handler.files[handler.current].size); - if (++handler.current < length) { - handler.file = handler.files[handler.current]; - sendFile(handler, maxSize, width, height).onload = arguments.callee; - } else if (onload) { - handler.onloadstart = onloadstart; - handler.onload = onload; - handler.onload(rpe, xhr); + + try { // IE < 8 does not accept enctype attribute ... + const form = document.createElement("
"), + iframe = handler.iframe || (handler.iframe = document.createElement("")); + } catch (e) { + const form = document.createElement("form"), + iframe = handler.iframe || (handler.iframe = document.createElement("iframe")); + form.setAttribute("enctype", "multipart/form-data"); + iframe.setAttribute("name", iframe.id = target); + iframe.setAttribute("src", url); + } + iframe.style.position = "absolute"; + iframe.style.left = iframe.style.top = "-10000px"; + iframe.onload = onload; + iframe.onerror = (event) => { + if (isFunction(handler.onerror)) { + handler.onerror(rpe, event || _global.event); } }; - } else if (length) { - handler.total = length * 100; - handler.file = handler.files[handler.current]; - sendFile(handler, maxSize, width, height).onload = function (rpe, xhr) { - var callee = arguments.callee; - handler.onloadstart = null; - handler.sent += 100; - if (++handler.current < length) { - if (/\b(chrome|safari)\b/i.test(navigator.userAgent)) { - handler.iframe.parentNode.removeChild(handler.iframe); - handler.iframe = null; + iframe.onreadystatechange = () => { + if (/loaded|complete/i.test(iframe.readyState)) { + onload(); + + // wei : todo,将附件信息放到handler.attach + } else if (isFunction(handler.onloadprogress)) { + if (rpe.loaded < rpe.total) { + ++rpe.loaded; } - setTimeout(function () { - handler.file = handler.files[handler.current]; - sendFile(handler, maxSize, width, height).onload = callee; - }, 15); - } else if (onload) { - setTimeout(function () { - handler.iframe.parentNode.removeChild(handler.iframe); - handler.iframe = null; - handler.onloadstart = onloadstart; - handler.onload = onload; - handler.onload(rpe, xhr); - }, 15); + handler.onloadprogress(rpe, { + readyState: { + loading: 2, + interactive: 3, + loaded: 4, + complete: 4, + }[iframe.readyState] || 1, + }); } }; - } + form.setAttribute("action", handler.url + "&filename=" + _global.encodeURIComponent(handler.file.fileName)); + form.setAttribute("target", iframe.id); + form.setAttribute("method", "post"); + form.appendChild(handler.file); + form.style.display = "none"; + if (isFunction(handler.onloadstart)) { + handler.onloadstart(rpe, {}); + } + const d = document.body || document.documentElement; + d.appendChild(iframe); + d.appendChild(form); + form.submit(); - return handler; + return handler; + }; + } + xhr = null; + + return sendFile; +})(Object.prototype.toString)); + +const sendFiles = (handler, maxSize, width, height) => { + const length = handler.files.length, + onload = handler.onload, + onloadstart = handler.onloadstart; + handler.current = 0; + handler.total = 0; + handler.sent = 0; + while (handler.current < length) { + handler.total += (handler.files[handler.current].fileSize || handler.files[handler.current].size); + handler.current++; + } + handler.current = 0; + if (length && handler.files[0].fileSize !== -1) { + handler.file = handler.files[handler.current]; + const callback = (rpe, xhr) => { + handler.onloadstart = null; + handler.sent += (handler.files[handler.current].fileSize || handler.files[handler.current].size); + if (++handler.current < length) { + handler.file = handler.files[handler.current]; + sendFile(handler, maxSize, width, height).onload = callback; + } else if (onload) { + handler.onloadstart = onloadstart; + handler.onload = onload; + handler.onload(rpe, xhr); + } + }; + sendFile(handler, maxSize, width, height).onload = callback; + } else if (length) { + handler.total = length * 100; + handler.file = handler.files[handler.current]; + const callback = (rpe, xhr) => { + handler.onloadstart = null; + handler.sent += 100; + if (++handler.current < length) { + if (/\b(chrome|safari)\b/i.test(navigator.userAgent)) { + handler.iframe.parentNode.removeChild(handler.iframe); + handler.iframe = null; + } + setTimeout(() => { + handler.file = handler.files[handler.current]; + sendFile(handler, maxSize, width, height).onload = callback; + }, 15); + } else if (onload) { + setTimeout(() => { + handler.iframe.parentNode.removeChild(handler.iframe); + handler.iframe = null; + handler.onloadstart = onloadstart; + handler.onload = onload; + handler.onload(rpe, xhr); + }, 15); + } + }; + sendFile(handler, maxSize, width, height).onload = callback; } - var r1 = /\.([^.]+)$/; // .png - var r2 = /\/([^/]+)$/; // image/png + return handler; +} - /** - * 校验文件类型是否合法,同时兼容旧版形式 - * @param fileName - * @param fileType - * @returns {boolean} - */ - function fileTypeValidate(fileName, fileType) { - if (!fileType) { - return true; +const r1 = /\.([^.]+)$/; // .png +const r2 = /\/([^/]+)$/; // image/png + +/** + * 校验文件类型是否合法,同时兼容旧版形式 + * @param fileName + * @param fileType + * @returns {boolean} + */ +const fileTypeValidate = (fileName, fileType) => { + if (!fileType) { + return true; + } + const mimes = fileType.split(","); + if (mimes[0] === fileType) { + mimes = (fileType + "").split(";"); + } + + return some(mimes, (index, mime) => { + let matches; + matches = mime.match(r1); + if (matches) { + return fileName.toLowerCase().indexOf(matches[1]) > -1; } - var mimes = fileType.split(","); - if (mimes[0] === fileType) { - mimes = (fileType + "").split(";"); + matches = mime.match(r2); + if (matches) { + return matches[1] === "*" ? true : fileName.toLowerCase().indexOf(matches[1]) > -1; } - - return BI.some(mimes, function (index, mime) { - var matches; - matches = mime.match(r1); - if (matches) { - return fileName.toLowerCase().indexOf(matches[1]) > -1; - } - matches = mime.match(r2); - if (matches) { - return matches[1] === "*" ? true : fileName.toLowerCase().indexOf(matches[1]) > -1; - } + }); +} + +@shortcut() +export class File extends Widget { + static xtype = "bi.file"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_UPLOADSTART = "EVENT_UPLOADSTART"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_PROGRESS = "EVENT_PROGRESS"; + static EVENT_UPLOADED = "EVENT_UPLOADED"; + + _defaultConfig() { + const conf = super._defaultConfig(arguments); + + return extend(conf, { + baseCls: (conf.baseCls || "") + " bi-file display-block", + tagName: "input", + attributes: { + type: "file", + }, + name: "", + url: "", + multiple: true, + accept: "", // .png,.pdf,image/jpg,image/* 等 + maxSize: -1, // 1024 * 1024 单位b + maxLength: -1, // 无限制, 与multiple配合使用 + errorText: BI.emptyFn, }); } - BI.File = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.File.superclass._defaultConfig.apply(this, arguments); - - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-file display-block", - tagName: "input", - attributes: { - type: "file", - }, - name: "", - url: "", - multiple: true, - accept: "", // .png,.pdf,image/jpg,image/* 等 - maxSize: -1, // 1024 * 1024 单位b - maxLength: -1, // 无限制, 与multiple配合使用 - errorText: BI.emptyFn, - }); - }, - - render: function () { - var o = this.options; - if (o.multiple === true) { - this.element.attr("multiple", "multiple"); - } - this.element.attr("name", o.name || this.getName()); - this.element.attr("title", o.title || ""); - this.element.attr("accept", o.accept); - }, + render() { + const { multiple, name, title, accept } = this.options; + if (multiple === true) { + this.element.attr("multiple", "multiple"); + } + this.element.attr("name", name || this.getName()); + this.element.attr("title", title || ""); + this.element.attr("accept", accept); + } - created: function () { - var self = this, o = this.options; - // create the noswfupload.wrap Object - // wrap.maxSize 文件大小限制 - // wrap.maxLength 文件个数限制 - var _wrap = this.wrap = this._wrap(this.element[0], o.maxSize); - // fileType could contain whatever text but filter checks *.{extension} - // if present + created() { + const { maxSize, url, accept } = this.options; + // create the noswfupload.wrap Object + // wrap.maxSize 文件大小限制 + // wrap.maxLength 文件个数限制 + const _wrap = this.wrap = this._wrap(this.element[0], maxSize); + // fileType could contain whatever text but filter checks *.{extension} + // if present - // handlers + // handlerszhe - _wrap.onloadstart = function (rpe, xhr) { - self.fireEvent(BI.File.EVENT_UPLOADSTART, arguments); - }; + _wrap.onloadstart = (...args) => { + this.fireEvent(File.EVENT_UPLOADSTART, ...args); + }; - _wrap.onprogress = function (rpe, xhr) { - // percent for each bar + _wrap.onprogress = (rpe, xhr) => { + // percent for each bar - // fileSize is -1 only if browser does not support file info access - // this if splits recent browsers from others - if (this.file.fileSize !== -1) { - // simulation property indicates when the progress event is fake - if (rpe.simulation) { - // empty - } else { - // empty - } + // fileSize is -1 only if browser does not support file info access + // this if splits recent browsers from others + if (_wrap.file.fileSize !== -1) { + // simulation property indicates when the progress event is fake + if (rpe.simulation) { + // empty } else { - // if fileSIze is -1 browser is using an iframe because it does - // not support - // files sent via Ajax (XMLHttpRequest) - // We can still show some information + // empty } - self.fireEvent(BI.File.EVENT_PROGRESS, { - file: this.file, - total: rpe.total, - loaded: rpe.loaded, - simulation: rpe.simulation, - }); - }; + } else { + // if fileSIze is -1 browser is using an iframe because it does + // not support + // files sent via Ajax (XMLHttpRequest) + // We can still show some information + } + this.fireEvent(File.EVENT_PROGRESS, { + file: this.file, + total: rpe.total, + loaded: rpe.loaded, + simulation: rpe.simulation, + }); + }; - // generated if there is something wrong during upload - _wrap.onerror = function () { - // just inform the user something was wrong - self.fireEvent(BI.File.EVENT_ERROR); - }; + // generated if there is something wrong during upload + _wrap.onerror = () => { + // just inform the user something was wrong + this.fireEvent(File.EVENT_ERROR); + }; - // generated when every file has been sent (one or more, it does not - // matter) - _wrap.onload = function (rpe, xhr) { - var self_ = this; - // just show everything is fine ... - // ... and after a second reset the component - setTimeout(function () { - self_.clean(); // remove files from list - self_.hide(); // hide progress bars and enable input file - // enable again the submit button/element - }, 100); - if (200 > xhr.status || xhr.status > 399) { - BI.Msg.toast(BI.i18nText("BI-Upload_File_Error"), { level: "error" }); - self.fireEvent(BI.File.EVENT_ERROR); + // generated when every file has been sent (one or more, it does not + // matter) + _wrap.onload = (rpe, xhr) => { + // just show everything is fine ... + // ... and after a second reset the component + setTimeout(() => { + _wrap.clean(); // remove files from list + _wrap.hide(); // hide progress bars and enable input file + // enable again the submit button/element + }, 100); + if (200 > xhr.status || xhr.status > 399) { + Msg.toast(BI.i18nText("BI-Upload_File_Error"), { level: "error" }); + this.fireEvent(File.EVENT_ERROR); - return; + return; + } + const error = some(_wrap.attach_array, (index, attach) => { + if (attach.errorCode) { + Msg.toast(BI.i18nText(attach.errorMsg), { level: "error" }); + this.fireEvent(File.EVENT_ERROR, attach); + + return true; } - var error = BI.some(_wrap.attach_array, function (index, attach) { - if (attach.errorCode) { - BI.Msg.toast(BI.i18nText(attach.errorMsg), { level: "error" }); - self.fireEvent(BI.File.EVENT_ERROR, attach); + }); + !error && this.fireEvent(File.EVENT_UPLOADED); + }; + _wrap.url = url; + _wrap.fileType = accept; // 文件类型限制 + _wrap.attach_array = []; + _wrap.attach_names = []; + _wrap.attachNum = 0; + } - return true; - } + _events(wrap) { + const { maxLength, errorText } = this.options; + const callback = () => { + event.del(wrap.dom.input, "change", callback); + const input = wrap.dom.input.cloneNode(true); + const files = F(wrap.dom.input); + if (maxLength !== -1 && maxLength < files.length) { + this.fireEvent(File.EVENT_ERROR, { + errorType: 2, }); - !error && self.fireEvent(BI.File.EVENT_UPLOADED); - }; - _wrap.url = o.url; - _wrap.fileType = o.accept; // 文件类型限制 - _wrap.attach_array = []; - _wrap.attach_names = []; - _wrap.attachNum = 0; - }, - - _events: function (wrap) { - var self = this, o = this.options; - event.add(wrap.dom.input, "change", function () { - event.del(wrap.dom.input, "change", arguments.callee); - var input = wrap.dom.input.cloneNode(true); - var files = F(wrap.dom.input); - if (o.maxLength !== -1 && o.maxLength < files.length) { - self.fireEvent(BI.File.EVENT_ERROR, { - errorType: 2, - }); - } else { - for (var i = 0; i < files.length; i++) { - var item = files.item(i); - var tempFile = item.value || item.name; - var value = item.fileName || (item.fileName = tempFile.split("\\").pop()), - size = item.fileSize || item.size; - var validateFileType = fileTypeValidate(value, wrap.fileType); - if (!validateFileType) { - // 文件类型不支持 - BI.Msg.toast(o.errorText({ - errorType: 0, - file: item, - }) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" }); - self.fireEvent(BI.File.EVENT_ERROR, { - errorType: 0, - file: item, - }); - } else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) { - // 文件大小不支持 - BI.Msg.toast(o.errorText({ - errorType: 1, - file: item, - }) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" }); - self.fireEvent(BI.File.EVENT_ERROR, { - errorType: 1, - file: item, - }); - } else { - wrap.files.unshift(item); - } + } else { + for (let i = 0; i < files.length; i++) { + const item = files.item(i); + const tempFile = item.value || item.name; + const value = item.fileName || (item.fileName = tempFile.split("\\").pop()), + size = item.fileSize || item.size; + const validateFileType = fileTypeValidate(value, wrap.fileType); + if (!validateFileType) { + // 文件类型不支持 + Msg.toast(errorText({ + errorType: 0, + file: item, + }) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" }); + this.fireEvent(File.EVENT_ERROR, { + errorType: 0, + file: item, + }); + } else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) { + // 文件大小不支持 + Msg.toast(errorText({ + errorType: 1, + file: item, + }) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" }); + this.fireEvent(File.EVENT_ERROR, { + errorType: 1, + file: item, + }); + } else { + wrap.files.unshift(item); } } - wrap.files.length > 0 && self.fireEvent(BI.File.EVENT_CHANGE, { - files: wrap.files, - }); - input.value = ""; - wrap.dom.input.parentNode.replaceChild(input, wrap.dom.input); - wrap.dom.input = input; - event.add(wrap.dom.input, "change", arguments.callee); + } + wrap.files.length > 0 && this.fireEvent(File.EVENT_CHANGE, { + files: wrap.files, }); + input.value = ""; + wrap.dom.input.parentNode.replaceChild(input, wrap.dom.input); + wrap.dom.input = input; + event.add(wrap.dom.input, "change", callback); + } + event.add(wrap.dom.input, "change", callback); - return wrap; - }, + return wrap; + } - _wrap: function () { - var o = this.options; - // be sure input accept multiple files - var input = this.element[0]; - if (o.multiple === true) { - this.element.attr("multiple", "multiple"); - } - input.value = ""; + _wrap() { + const { multiple, maxSize, maxLength } = this.options; + // be sure input accept multiple files + const input = this.element[0]; + if (multiple === true) { + this.element.attr("multiple", "multiple"); + } + input.value = ""; - // wrap Object - return this._events({ + // wrap Object + return this._events({ - // DOM namespace - dom: { - input: input, // input file - disabled: false, // internal use, checks input file state - }, - name: input.name, // name to send for each file ($_FILES[{name}] in the server) - // maxSize is the maximum amount of bytes for each file - maxSize: o.maxSize ? o.maxSize >> 0 : -1, - maxLength: o.maxLength, - files: [], // file list - - // remove every file from the noswfupload component - clean: function () { - this.files = []; - }, + // DOM namespace + dom: { + input: input, // input file + disabled: false, // internal use, checks input file state + }, + name: input.name, // name to send for each file ($_FILES[{name}] in the server) + // maxSize is the maximum amount of bytes for each file + maxSize: maxSize ? maxSize >> 0 : -1, + maxLength, + files: [], // file list + + // remove every file from the noswfupload component + clean() { + this.files = []; + }, - // upload one file a time (which make progress possible rather than all files in one shot) - // the handler is an object injected into the wrap one, could be the wrap itself or - // something like {onload:function(){alert("OK")},onerror:function(){alert("Error")}, etc ...} - upload: function (handler) { - if (handler) { - for (var key in handler) { - this[key] = handler[key]; - } + // upload one file a time (which make progress possible rather than all files in one shot) + // the handler is an object injected into the wrap one, could be the wrap itself or + // something like {onload:function(){alert("OK")},onerror:function(){alert("Error")}, etc ...} + upload(handler) { + if (handler) { + for (let key in handler) { + this[key] = handler[key]; } - sendFiles(this, this.maxSize); + } + sendFiles(this, this.maxSize); - return this; - }, + return this; + }, - // hide progress bar (total + current) and enable files selection - hide: function () { - if (this.dom.disabled) { - this.dom.disabled = false; - this.dom.input.removeAttribute("disabled"); - } - }, + // hide progress bar (total + current) and enable files selection + hide() { + if (this.dom.disabled) { + this.dom.disabled = false; + this.dom.input.removeAttribute("disabled"); + } + }, - // show progress bar and disable file selection (used during upload) - // total and current are pixels used to style bars - // totalProp and currentProp are properties to change, "height" by default - show: function (total, current, totalProp, currentProp) { - if (!this.dom.disabled) { - this.dom.disabled = true; - this.dom.input.setAttribute("disabled", "disabled"); - } - }, - }); - }, + // show progress bar and disable file selection (used during upload) + // total and current are pixels used to style bars + // totalProp and currentProp are properties to change, "height" by default + show(total, current, totalProp, currentProp) { + if (!this.dom.disabled) { + this.dom.disabled = true; + this.dom.input.setAttribute("disabled", "disabled"); + } + }, + }); + } - setUrl: function(v) { - this.options.url = v; - if (this.wrap) { - this.wrap.url = v; - } - }, + setUrl(v) { + this.options.url = v; + if (this.wrap) { + this.wrap.url = v; + } + } - setMaxFileLength: function (v) { - this.options.maxLength = v; - if (this.wrap) { - this.wrap.maxLength = v; - } - }, + setMaxFileLength(v) { + this.options.maxLength = v; + if (this.wrap) { + this.wrap.maxLength = v; + } + } - select: function () { - this.wrap && BI.Widget._renderEngine.createElement(this.wrap.dom.input).click(); - }, + select() { + this.wrap && Widget._renderEngine.createElement(this.wrap.dom.input).click(); + } - upload: function (handler) { - this.wrap && this.wrap.upload(handler); - }, + upload(handler) { + this.wrap && this.wrap.upload(handler); + } - getValue: function () { - return this.wrap ? this.wrap.attach_array : []; - }, + getValue() { + return this.wrap ? this.wrap.attach_array : []; + } - getQueue: function () { - return this.wrap.files; - }, + getQueue() { + return this.wrap.files; + } - reset: function () { - if (this.wrap) { - this.wrap.attach_array = []; - this.wrap.attach_names = []; - this.wrap.attachNum = 0; - } - }, + reset() { + if (this.wrap) { + this.wrap.attach_array = []; + this.wrap.attach_names = []; + this.wrap.attachNum = 0; + } + } - sendFiles: function (files) { - if (!this.wrap) return; + sendFiles(files) { + if (!this.wrap) return; - this.wrap.dom.input.files = files; + this.wrap.dom.input.files = files; - var event = new CustomEvent("change"); + const event = new CustomEvent("change"); - this.wrap.dom.input.dispatchEvent(event); - }, + this.wrap.dom.input.dispatchEvent(event); + } - _setEnable: function (enable) { - BI.File.superclass._setEnable.apply(this, arguments); - if (enable === true) { - this.element.removeAttr("disabled"); - } else { - this.element.attr("disabled", "disabled"); - } - }, - }); - BI.File.EVENT_CHANGE = "EVENT_CHANGE"; - BI.File.EVENT_UPLOADSTART = "EVENT_UPLOADSTART"; - BI.File.EVENT_ERROR = "EVENT_ERROR"; - BI.File.EVENT_PROGRESS = "EVENT_PROGRESS"; - BI.File.EVENT_UPLOADED = "EVENT_UPLOADED"; - BI.shortcut("bi.file", BI.File); -})(_global.document || {})); + _setEnable(enable) { + super._setEnable(arguments); + if (enable === true) { + this.element.removeAttr("disabled"); + } else { + this.element.attr("disabled", "disabled"); + } + } +} diff --git a/src/base/single/input/index.js b/src/base/single/input/index.js new file mode 100644 index 000000000..4cd03bad2 --- /dev/null +++ b/src/base/single/input/index.js @@ -0,0 +1,2 @@ +export { Input } from "./input"; +export { File } from "./file"; \ No newline at end of file diff --git a/src/base/single/input/input.js b/src/base/single/input/input.js index 8f20bddbb..bd784b350 100644 --- a/src/base/single/input/input.js +++ b/src/base/single/input/input.js @@ -4,237 +4,263 @@ * @extends BI.Single * @type {*|void|Object} */ -BI.Input = BI.inherit(BI.Single, { - _defaultConfig: function () { - var conf = BI.Input.superclass._defaultConfig.apply(this, arguments); +import { shortcut, Controller, extend, debounce, bind, isNull, isEmptyString, isKey, delay, trim, isEqual, nextTick, isEndWithBlank } from "../../../core"; +import { Single } from "../0.single"; - return BI.extend(conf, { +@shortcut() +export class Input extends Single { + static xtype = "bi.input"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_BACKSPACE = "EVENT_BACKSPACE"; + + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_REMOVE = "EVENT_REMOVE"; + static EVENT_EMPTY = "EVENT_EMPTY"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + + _defaultConfig() { + const conf = super._defaultConfig(arguments); + + return extend(conf, { baseCls: (conf.baseCls || "") + " bi-input display-block overflow-dot", tagName: "input", validationChecker: BI.emptyFn, quitChecker: BI.emptyFn, // 按确定键能否退出编辑 allowBlank: false, }); - }, + } - render: function () { - var self = this; - var ctrlKey = false; - var keyCode = null; - var inputEventValid = false; - var _keydown = BI.debounce(function (keyCode) { - self.onKeyDown(keyCode, ctrlKey); - self._keydown_ = false; + render() { + let ctrlKey = false; + let keyCode = null; + let inputEventValid = false; + const _keydown = debounce((keyCode) => { + this.onKeyDown(keyCode, ctrlKey); + this._keydown_ = false; }, BI.EVENT_RESPONSE_TIME); - var _clk = BI.debounce(BI.bind(this._click, this), BI.EVENT_RESPONSE_TIME, { + const _clk = debounce(bind(this._click, this), BI.EVENT_RESPONSE_TIME, { "leading": true, "trailing": false, }); - this._focusDebounce = BI.debounce(BI.bind(this._focus, this), BI.EVENT_RESPONSE_TIME, { + this._focusDebounce = debounce(bind(this._focus, this), BI.EVENT_RESPONSE_TIME, { "leading": true, "trailing": false, }); - this._blurDebounce = BI.debounce(BI.bind(this._blur, this), BI.EVENT_RESPONSE_TIME, { + this._blurDebounce = debounce(bind(this._blur, this), BI.EVENT_RESPONSE_TIME, { "leading": true, "trailing": false, }); this.element - .keydown(function (e) { + .keydown((e) => { inputEventValid = false; ctrlKey = e.ctrlKey || e.metaKey; // mac的cmd支持一下 keyCode = e.keyCode; - self.fireEvent(BI.Input.EVENT_QUICK_DOWN, arguments); + this.fireEvent(Input.EVENT_QUICK_DOWN, e); }) - .keyup(function (e) { + .keyup((e) => { keyCode = null; if (!(inputEventValid && e.keyCode === BI.KeyCode.ENTER)) { - self._keydown_ = true; + this._keydown_ = true; _keydown(e.keyCode); } }) - .on("input propertychange", function (e) { + .on("input propertychange", (e) => { // 输入内容全选并直接删光，如果按键没放开就失去焦点不会触发keyup，被focusout覆盖了 // 其中propertychange在元素属性发生改变的时候就会触发 是为了兼容IE8 // 通过keyCode判断会漏掉输入法点击输入(右键粘贴暂缓) - var originalEvent = e.originalEvent; - if (BI.isNull(originalEvent.propertyName) || originalEvent.propertyName === "value") { + const originalEvent = e.originalEvent; + if (isNull(originalEvent.propertyName) || originalEvent.propertyName === "value") { inputEventValid = true; - self._keydown_ = true; + this._keydown_ = true; _keydown(keyCode); keyCode = null; } }) - .click(function (e) { + .click((e) => { e.stopPropagation(); _clk(); }) - .mousedown(function (e) { - self.element.val(self.element.val()); + .mousedown((e) => { + this.element.val(this.element.val()); }) - .focus(function (e) { // 可以不用冒泡 - self._focusDebounce(); + .focus((e) => { // 可以不用冒泡 + this._focusDebounce(); }) - .blur(function (e) { + .blur((e) => { // DEC-14919 IE11在浏览器重新获得焦点之后会先触发focusout再触发focus,要保持先获得焦点再失去焦点的顺序不变,因此采用blur - self._blurDebounce(); + this._blurDebounce(); }); - if (BI.isKey(this.options.value) || BI.isEmptyString(this.options.value)) { + if (isKey(this.options.value) || isEmptyString(this.options.value)) { this.setValue(this.options.value); } - }, + } - _focus: function () { + _focus() { this.element.addClass("bi-input-focus"); this._checkValidationOnValueChange(); this._isEditing = true; if (this.getValue() === "") { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); - this.fireEvent(BI.Input.EVENT_EMPTY); - } - this.fireEvent(BI.Input.EVENT_FOCUS); - }, - - _blur: function () { - var self = this; - if (self._keydown_ === true) { - BI.delay(blur, BI.EVENT_RESPONSE_TIME); - } else { - blur(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); + this.fireEvent(Input.EVENT_EMPTY); } + this.fireEvent(Input.EVENT_FOCUS); + } - function blur () { - if (!self.isValid() && self.options.quitChecker.apply(self, [BI.trim(self.getValue())]) !== false) { - self.element.val(self._lastValidValue ? self._lastValidValue : ""); - self._checkValidationOnValueChange(); - self._defaultState(); + _blur() { + const blur = () => { + if (!this.isValid() && this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) { + this.element.val(this._lastValidValue ? this._lastValidValue : ""); + this._checkValidationOnValueChange(); + this._defaultState(); } - self.element.removeClass("bi-input-focus"); - self._isEditing = false; - self._start = false; - if (self.isValid()) { - var lastValidValue = self._lastValidValue; - self._lastValidValue = self.getValue(); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CONFIRM, self.getValue(), self); - self.fireEvent(BI.Input.EVENT_CONFIRM); - if (self._lastValidValue !== lastValidValue) { - self.fireEvent(BI.Input.EVENT_CHANGE_CONFIRM); + this.element.removeClass("bi-input-focus"); + this._isEditing = false; + this._start = false; + if (this.isValid()) { + const lastValidValue = this._lastValidValue; + this._lastValidValue = this.getValue(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CONFIRM, this.getValue(), this); + this.fireEvent(Input.EVENT_CONFIRM); + if (this._lastValidValue !== lastValidValue) { + this.fireEvent(Input.EVENT_CHANGE_CONFIRM); } } - self.fireEvent(BI.Input.EVENT_BLUR); + this.fireEvent(Input.EVENT_BLUR); } - }, + + if (this._keydown_ === true) { + delay(blur, BI.EVENT_RESPONSE_TIME); + } else { + blur(); + } + } - _click: function () { + _click() { if (this._isEditing !== true) { this.selectAll(); - this.fireEvent(BI.Input.EVENT_CLICK); + this.fireEvent(Input.EVENT_CLICK); } - }, + } - onClick: function () { + onClick() { this._click(); - }, + } - onKeyDown: function (keyCode, ctrlKey) { - if (!this.isValid() || BI.trim(this._lastChangedValue) !== BI.trim(this.getValue())) { + onKeyDown(keyCode, ctrlKey) { + if (!this.isValid() || trim(this._lastChangedValue) !== trim(this.getValue())) { this._checkValidationOnValueChange(); } - if (this.isValid() && BI.trim(this.getValue()) !== "") { - if (BI.trim(this.getValue()) !== this._lastValue && (!this._start || BI.isNull(this._lastValue) || this._lastValue === "") + if (this.isValid() && trim(this.getValue()) !== "") { + if (trim(this.getValue()) !== this._lastValue && (!this._start || isNull(this._lastValue) || this._lastValue === "") || (this._pause === true && !/(\s|\u00A0)$/.test(this.getValue()))) { this._start = true; this._pause = false; - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this); - this.fireEvent(BI.Input.EVENT_START); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this); + this.fireEvent(Input.EVENT_START); } } - if (BI.isEqual(keyCode, BI.KeyCode.ENTER)) { - if (this.isValid() || this.options.quitChecker.apply(this, [BI.trim(this.getValue())]) !== false) { + if (isEqual(keyCode, BI.KeyCode.ENTER)) { + if (this.isValid() || this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) { this.blur(); - this.fireEvent(BI.Input.EVENT_ENTER); + this.fireEvent(Input.EVENT_ENTER); } else { - this.fireEvent(BI.Input.EVENT_RESTRICT); + this.fireEvent(Input.EVENT_RESTRICT); } } - if (BI.isEqual(keyCode, BI.KeyCode.SPACE)) { - this.fireEvent(BI.Input.EVENT_SPACE); + if (isEqual(keyCode, BI.KeyCode.SPACE)) { + this.fireEvent(Input.EVENT_SPACE); } - if (BI.isEqual(keyCode, BI.KeyCode.BACKSPACE) && this._lastValue === "") { - this.fireEvent(BI.Input.EVENT_REMOVE); + if (isEqual(keyCode, BI.KeyCode.BACKSPACE) && this._lastValue === "") { + this.fireEvent(Input.EVENT_REMOVE); } - if (BI.isEqual(keyCode, BI.KeyCode.BACKSPACE) || BI.isEqual(keyCode, BI.KeyCode.DELETE)) { - this.fireEvent(BI.Input.EVENT_BACKSPACE); + if (isEqual(keyCode, BI.KeyCode.BACKSPACE) || isEqual(keyCode, BI.KeyCode.DELETE)) { + this.fireEvent(Input.EVENT_BACKSPACE); } - this.fireEvent(BI.Input.EVENT_KEY_DOWN, arguments); + this.fireEvent(Input.EVENT_KEY_DOWN, arguments); // _valueChange中会更新_lastValue, 这边缓存用以后续STOP事件服务 - var lastValue = this._lastValue; - if (BI.trim(this.getValue()) !== BI.trim(this._lastValue || "")) { + const lastValue = this._lastValue; + if (trim(this.getValue()) !== trim(this._lastValue || "")) { this._valueChange(); } - if (BI.isEndWithBlank(this.getValue())) { + if (isEndWithBlank(this.getValue())) { this._pause = true; - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this); - this.fireEvent(BI.Input.EVENT_PAUSE); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this); + this.fireEvent(Input.EVENT_PAUSE); this._defaultState(); } else if ((keyCode === BI.KeyCode.BACKSPACE || keyCode === BI.KeyCode.DELETE) && - BI.trim(this.getValue()) === "" && (lastValue !== null && BI.trim(lastValue) !== "")) { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT, this.getValue(), this); - this.fireEvent(BI.Input.EVENT_STOP); + trim(this.getValue()) === "" && (lastValue !== null && trim(lastValue) !== "")) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.STOPEDIT, this.getValue(), this); + this.fireEvent(Input.EVENT_STOP); } - }, + } // 初始状态 - _defaultState: function () { + _defaultState() { if (this.getValue() === "") { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); - this.fireEvent(BI.Input.EVENT_EMPTY); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); + this.fireEvent(Input.EVENT_EMPTY); } this._lastValue = this.getValue(); this._lastSubmitValue = null; - }, + } - _valueChange: function () { - if (this.isValid() && BI.trim(this.getValue()) !== this._lastSubmitValue) { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this); - this.fireEvent(BI.Input.EVENT_CHANGE); - this._lastSubmitValue = BI.trim(this.getValue()); + _valueChange() { + if (this.isValid() && trim(this.getValue()) !== this._lastSubmitValue) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this); + this.fireEvent(Input.EVENT_CHANGE); + this._lastSubmitValue = trim(this.getValue()); } if (this.getValue() === "") { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); - this.fireEvent(BI.Input.EVENT_EMPTY); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); + this.fireEvent(Input.EVENT_EMPTY); } this._lastValue = this.getValue(); - }, + } - _checkValidationOnValueChange: function (callback) { - var self = this, o = this.options; - var v = this.getValue(); - if (o.allowBlank === true && BI.trim(v) === "") { + _checkValidationOnValueChange(callback) { + const { allowBlank, validationChecker } = this.options; + const v = this.getValue(); + if (allowBlank === true && trim(v) === "") { this.setValid(true); callback && callback(); return; } - if (BI.trim(v) === "") { + if (trim(v) === "") { this.setValid(false); callback && callback(); return; } - var checker = o.validationChecker.apply(this, [BI.trim(v)]); + const checker = validationChecker.apply(this, [trim(v)]); if (checker instanceof Promise) { - checker.then(function (validate) { - self.setValid(validate !== false); + checker.then((validate) => { + this.setValid(validate !== false); callback && callback(); }); } else { this.setValid(checker !== false); callback && callback(); } - }, + } - focus: function () { + focus() { if (!this.element.is(":visible")) { throw new Error("input输入框在不可见下不能focus"); } @@ -242,9 +268,9 @@ BI.Input = BI.inherit(BI.Single, { this.element.focus(); this.selectAll(); } - }, + } - blur: function () { + blur() { if (!this.element.is(":visible")) { throw new Error("input输入框在不可见下不能blur"); } @@ -252,84 +278,61 @@ BI.Input = BI.inherit(BI.Single, { this.element.blur(); this._blurDebounce(); } - }, + } - selectAll: function () { + selectAll() { if (!this.element.is(":visible")) { throw new Error("input输入框在不可见下不能select"); } this.element.select(); this._isEditing = true; - }, + } - setValue: function (textValue) { - var self = this; + setValue(textValue) { this.element.val(textValue); - BI.nextTick(function () { - self._checkValidationOnValueChange(function () { - self._defaultState(); - if (self.isValid()) { - self._lastValidValue = self._lastSubmitValue = self.getValue(); + nextTick(() => { + this._checkValidationOnValueChange(() => { + this._defaultState(); + if (this.isValid()) { + this._lastValidValue = this._lastSubmitValue = this.getValue(); } }); }); - }, + } - getValue: function () { + getValue() { return this.element.val() || ""; - }, + } - isEditing: function () { + isEditing() { return this._isEditing; - }, + } - getLastValidValue: function () { + getLastValidValue() { return this._lastValidValue; - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this._lastChangedValue; - }, + } - _setValid: function () { - BI.Input.superclass._setValid.apply(this, arguments); + _setValid() { + super._setValid(arguments); if (this.isValid()) { this._lastChangedValue = this.getValue(); this.element.removeClass("bi-input-error"); - this.fireEvent(BI.Input.EVENT_VALID, BI.trim(this.getValue()), this); + this.fireEvent(Input.EVENT_VALID, trim(this.getValue()), this); } else { if (this._lastChangedValue === this.getValue()) { this._lastChangedValue = null; } this.element.addClass("bi-input-error"); - this.fireEvent(BI.Input.EVENT_ERROR, BI.trim(this.getValue()), this); + this.fireEvent(Input.EVENT_ERROR, trim(this.getValue()), this); } - }, + } - _setEnable: function (b) { - BI.Input.superclass._setEnable.apply(this, [b]); + _setEnable(b) { + super._setEnable([b]); this.element[0].disabled = !b; - }, -}); -BI.Input.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.Input.EVENT_FOCUS = "EVENT_FOCUS"; -BI.Input.EVENT_CLICK = "EVENT_CLICK"; -BI.Input.EVENT_BLUR = "EVENT_BLUR"; -BI.Input.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.Input.EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; -BI.Input.EVENT_SPACE = "EVENT_SPACE"; -BI.Input.EVENT_BACKSPACE = "EVENT_BACKSPACE"; - -BI.Input.EVENT_START = "EVENT_START"; -BI.Input.EVENT_PAUSE = "EVENT_PAUSE"; -BI.Input.EVENT_STOP = "EVENT_STOP"; -BI.Input.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.Input.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.Input.EVENT_REMOVE = "EVENT_REMOVE"; -BI.Input.EVENT_EMPTY = "EVENT_EMPTY"; -BI.Input.EVENT_VALID = "EVENT_VALID"; -BI.Input.EVENT_ERROR = "EVENT_ERROR"; -BI.Input.EVENT_ENTER = "EVENT_ENTER"; -BI.Input.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.shortcut("bi.input", BI.Input); + } +} diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js index 19fc0322d..b794e7fc4 100644 --- a/src/base/single/label/abstract.label.js +++ b/src/base/single/label/abstract.label.js @@ -1,399 +1,400 @@ /** * Created by dailer on 2019/6/19. */ -!(function () { - BI.AbstractLabel = BI.inherit(BI.Single, { +import { isNumber, createWidget, extend } from "../../../core"; +import { Single } from "../0.single"; - _defaultConfig: function (props) { - var conf = BI.AbstractLabel.superclass._defaultConfig.apply(this, arguments); +export class AbstractLabel extends Single { - return BI.extend(conf, { - textAlign: "center", - whiteSpace: "nowrap", // normal or nowrap - textWidth: null, - textHeight: null, - hgap: 0, - vgap: 0, - lgap: 0, - rgap: 0, - tgap: 0, - bgap: 0, - highLight: false, - handler: null, - enableHover: props.title !== null, - }); - }, + _defaultConfig(props) { + const conf = super._defaultConfig(arguments); - _createJson: function () { - var o = this.options; + return extend(conf, { + textAlign: "center", + whiteSpace: "nowrap", // normal or nowrap + textWidth: null, + textHeight: null, + hgap: 0, + vgap: 0, + lgap: 0, + rgap: 0, + tgap: 0, + bgap: 0, + highLight: false, + handler: null, + enableHover: props.title !== null, + }); + } - return { - type: "bi.text", - textAlign: o.textAlign, - whiteSpace: o.whiteSpace, - lineHeight: o.textHeight, - maxWidth: "100%", - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - highLight: o.highLight, - handler: o.handler, - }; - }, + _createJson() { + const { textAlign, whiteSpace, textHeight, text, value, py, keyword, highLight, handler } = this.options; - render: function () { - if (this.options.textAlign === "center") { - this._createCenterEl(); - } else { - this._createNotCenterEl(); - } - }, + return { + type: "bi.text", + textAlign, + whiteSpace, + lineHeight: textHeight, + maxWidth: "100%", + text, + value, + py, + keyword, + highLight, + handler, + }; + } - _createCenterEl: function () { - var o = this.options; - var json = this._createJson(); - json.textAlign = "left"; - if (BI.isNumber(o.width) && o.width > 0) { - if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - json.maxWidth = o.textWidth; - if (BI.isNumber(o.height) && o.height > 0) { // 1.1 - BI.createWidget({ - type: "bi.center_adapt", - height: o.height, - columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", - element: this, - items: [ - { - el: (this.text = BI.createWidget(json)), - } - ], - }); + render() { + if (this.options.textAlign === "center") { + this._createCenterEl(); + } else { + this._createNotCenterEl(); + } + } - return; - } - BI.createWidget({ // 1.2 + _createCenterEl() { + const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options; + const json = this._createJson(); + json.textAlign = "left"; + if (isNumber(width) && width > 0) { + if (isNumber(textWidth) && textWidth > 0) { + json.maxWidth = textWidth; + if (isNumber(height) && height > 0) { // 1.1 + createWidget({ type: "bi.center_adapt", + height, columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", + scrollable: whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), + el: (this.text = createWidget(json)), } ], }); return; } - if (o.whiteSpace === "normal") { // 1.3 - BI.extend(json, { - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - }); - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.center_adapt", - columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", - element: this, - items: [this.text], - }); - - return; - } - if (BI.isNumber(o.height) && o.height > 0) { // 1.4 - this.element.css({ - "line-height": BI.pixFormat(o.height), - }); - json.textAlign = o.textAlign; - delete json.maxWidth; - this.text = BI.createWidget(BI.extend(json, { - element: this, - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - })); - - return; - } - BI.extend(json, { // 1.5 - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - maxWidth: "100%", - }); - this.text = BI.createWidget(json); - BI.createWidget({ + createWidget({ // 1.2 type: "bi.center_adapt", columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", - element: this, - items: [this.text], - }); - - return; - } - if (BI.isNumber(o.textWidth) && o.textWidth > 0) { // 1.6 - json.maxWidth = o.textWidth; - BI.createWidget({ - type: "bi.center_adapt", - columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", + scrollable: whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), + el: (this.text = createWidget(json)), } ], }); return; } - if (o.whiteSpace === "normal") { // 1.7 - BI.extend(json, { - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + if (whiteSpace === "normal") { // 1.3 + extend(json, { + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, }); - this.text = BI.createWidget(json); - BI.createWidget({ + this.text = createWidget(json); + createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: true, + scrollable: whiteSpace === "normal", element: this, items: [this.text], }); return; } - if (BI.isNumber(o.height) && o.height > 0) { // 1.8 + if (isNumber(height) && height > 0) { // 1.4 this.element.css({ - "line-height": BI.pixFormat(o.height), + "line-height": BI.pixFormat(height), }); - json.textAlign = o.textAlign; + json.textAlign = textAlign; delete json.maxWidth; - this.text = BI.createWidget(BI.extend(json, { + this.text = createWidget(extend(json, { element: this, - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, })); return; } - this.text = BI.createWidget(BI.extend(json, { - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - })); - BI.createWidget({ + extend(json, { // 1.5 + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + maxWidth: "100%", + }); + this.text = createWidget(json); + createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + scrollable: whiteSpace === "normal", element: this, items: [this.text], }); - }, - _createNotCenterEl: function () { - var o = this.options; - var adaptLayout = "bi.vertical_adapt"; - var json = this._createJson(); - if (BI.isNumber(o.width) && o.width > 0) { - if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - json.maxWidth = o.textWidth; - if (BI.isNumber(o.height) && o.height > 0) { // 2.1 - BI.createWidget({ - type: adaptLayout, - horizontalAlign: o.textAlign, - columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - height: o.height, - scrollable: o.whiteSpace === "normal", - element: this, - items: [ - { - el: (this.text = BI.createWidget(json)), - } - ], - }); - - return; + return; + } + if (isNumber(textWidth) && textWidth > 0) { // 1.6 + json.maxWidth = textWidth; + createWidget({ + type: "bi.center_adapt", + columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + scrollable: whiteSpace === "normal", + element: this, + items: [ + { + el: (this.text = createWidget(json)), } - BI.createWidget({ // 2.2 + ], + }); + + return; + } + if (whiteSpace === "normal") { // 1.7 + extend(json, { + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + }); + this.text = createWidget(json); + createWidget({ + type: "bi.center_adapt", + columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + scrollable: true, + element: this, + items: [this.text], + }); + + return; + } + if (isNumber(height) && height > 0) { // 1.8 + this.element.css({ + "line-height": BI.pixFormat(height), + }); + json.textAlign = textAlign; + delete json.maxWidth; + this.text = createWidget(extend(json, { + element: this, + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + })); + + return; + } + this.text = createWidget(extend(json, { + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + })); + createWidget({ + type: "bi.center_adapt", + columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + element: this, + items: [this.text], + }); + } + + _createNotCenterEl() { + const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options; + const adaptLayout = "bi.vertical_adapt"; + const json = this._createJson(); + if (isNumber(width) && width > 0) { + if (isNumber(textWidth) && textWidth > 0) { + json.maxWidth = textWidth; + if (isNumber(height) && height > 0) { // 2.1 + createWidget({ type: adaptLayout, - horizontalAlign: o.textAlign, + horizontalAlign: textAlign, columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + height, + scrollable: whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), + el: (this.text = createWidget(json)), } ], }); return; } - if (BI.isNumber(o.height) && o.height > 0) { // 2.3 - if (o.whiteSpace !== "normal") { - this.element.css({ - "line-height": BI.pixFormat(o.height - (o.vgap * 2)), - }); - } - delete json.maxWidth; - this.text = BI.createWidget(BI.extend(json, { - element: this, - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - })); - - return; - } - json.maxWidth = o.width - 2 * o.hgap - o.lgap - o.rgap; - BI.createWidget({ // 2.4 + createWidget({ // 2.2 type: adaptLayout, - horizontalAlign: o.textAlign, + horizontalAlign: textAlign, columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - }], - }); - - return; - } - if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - json.maxWidth = o.textWidth; - BI.createWidget({ // 2.5 - type: adaptLayout, - horizontalAlign: o.textAlign, - columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 - scrollable: o.whiteSpace === "normal", - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + scrollable: whiteSpace === "normal", + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, element: this, items: [ { - el: (this.text = BI.createWidget(json)), + el: (this.text = createWidget(json)), } ], }); return; } - if (BI.isNumber(o.height) && o.height > 0) { - if (o.whiteSpace !== "normal") { + if (isNumber(height) && height > 0) { // 2.3 + if (whiteSpace !== "normal") { this.element.css({ - "line-height": BI.pixFormat(o.height - (o.vgap * 2)), + "line-height": BI.pixFormat(height - (vgap * 2)), }); } delete json.maxWidth; - this.text = BI.createWidget(BI.extend(json, { // 2.6 + this.text = createWidget(extend(json, { element: this, - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, })); return; } - this.text = BI.createWidget(BI.extend(json, { - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - })); - BI.createWidget({ + json.maxWidth = width - 2 * hgap - lgap - rgap; + createWidget({ // 2.4 type: adaptLayout, - horizontalAlign: o.textAlign, + horizontalAlign: textAlign, columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + scrollable: whiteSpace === "normal", + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, element: this, - scrollable: o.whiteSpace === "normal", - items: [this.text], + items: [{ + el: (this.text = createWidget(json)), + }], }); - }, - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + return; + } + if (isNumber(textWidth) && textWidth > 0) { + json.maxWidth = textWidth; + createWidget({ // 2.5 + type: adaptLayout, + horizontalAlign: textAlign, + columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + scrollable: whiteSpace === "normal", + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + element: this, + items: [ + { + el: (this.text = createWidget(json)), + } + ], + }); - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + return; + } + if (isNumber(height) && height > 0) { + if (whiteSpace !== "normal") { + this.element.css({ + "line-height": BI.pixFormat(height - (vgap * 2)), + }); + } + delete json.maxWidth; + this.text = createWidget(extend(json, { // 2.6 + element: this, + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + })); - doHighLight: function () { - this.text.doHighLight.apply(this.text, arguments); - }, + return; + } + this.text = createWidget(extend(json, { + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, + })); + createWidget({ + type: adaptLayout, + horizontalAlign: textAlign, + columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 + element: this, + scrollable: whiteSpace === "normal", + items: [this.text], + }); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark.apply(this.text, arguments); + } - setText: function (v) { - this.options.text = v; - this.text.setText(v); - }, + unRedMark() { + this.text.unRedMark.apply(this.text, arguments); + } - getText: function () { - return this.options.text; - }, + doHighLight() { + this.text.doHighLight.apply(this.text, arguments); + } - setStyle: function (css) { - this.text.setStyle(css); - }, + unHighLight() { + this.text.unHighLight.apply(this.text, arguments); + } - setValue: function (v) { - BI.AbstractLabel.superclass.setValue.apply(this, arguments); - if (!this.isReadOnly()) { - this.options.text = v; - this.text.setValue(v); - } - }, - }); -}()); + setText(v) { + this.options.text = v; + this.text.setText(v); + } + + getText() { + return this.options.text; + } + + setStyle(css) { + this.text.setStyle(css); + } + + setValue(v) { + super.setValue(v); + if (!this.isReadOnly()) { + this.options.text = v; + this.text.setValue(v); + } + } +} diff --git a/src/base/single/label/html.label.js b/src/base/single/label/html.label.js index e1ac76b66..0fa4f0d14 100644 --- a/src/base/single/label/html.label.js +++ b/src/base/single/label/html.label.js @@ -1,26 +1,28 @@ /** * Created by GUY on 2015/6/26. */ +import { shortcut } from "../../../core"; +import { AbstractLabel } from "./abstract.label" -BI.HtmlLabel = BI.inherit(BI.AbstractLabel, { +@shortcut() +export class HtmlLabel extends AbstractLabel { + static xtype = "bi.html_label"; - props: { + props = { baseCls: "bi-html-label", - }, + } - _createJson: function () { - var o = this.options; + _createJson() { + const { textAlign, whiteSpace, textHeight, text, value, handler } = this.options; return { type: "bi.html", - textAlign: o.textAlign, - whiteSpace: o.whiteSpace, - lineHeight: o.textHeight, - text: o.text, - value: o.value, - handler: o.handler, + textAlign, + whiteSpace, + lineHeight: textHeight, + text, + value, + handler, }; - }, -}); - -BI.shortcut("bi.html_label", BI.HtmlLabel); + } +} diff --git a/src/base/single/label/icon.label.js b/src/base/single/label/icon.label.js index 53a400a05..0f4c1b432 100644 --- a/src/base/single/label/icon.label.js +++ b/src/base/single/label/icon.label.js @@ -1,11 +1,16 @@ /** - * @class BI.IconButton - * @extends BI.BasicButton + * @class BI.IconLabel + * @extends BI.Single * 图标标签 */ -BI.IconLabel = BI.inherit(BI.Single, { +import { shortcut, createWidget, isNumber, isNull } from "../../../core"; +import { Single } from "../0.single"; - props: { +@shortcut() +export class IconLabel extends Single { + static xtype = "bi.icon_label"; + + props = { baseCls: "bi-icon-label horizon-center", hgap: 0, vgap: 0, @@ -16,45 +21,44 @@ BI.IconLabel = BI.inherit(BI.Single, { iconWidth: null, iconHeight: null, lineHeight: null, - }, + } - render: function () { - var o = this.options; + render() { + const { iconWidth, iconHeight, height, lineHeight, hgap, vgap, lgap, rgap, tgap, bgap } = this.options; this.element.css({ textAlign: "center", }); - this.icon = BI.createWidget({ + this.icon = createWidget({ type: "bi.icon", - width: o.iconWidth, - height: o.iconHeight, + width: iconWidth, + height: iconHeight, }); - if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) { - this.element.css("lineHeight", BI.pixFormat(o.lineHeight || o.height)); - BI.createWidget({ + if (isNumber(height) && height > 0 && isNull(iconWidth) && isNull(iconHeight)) { + this.element.css("lineHeight", BI.pixFormat(lineHeight || height)); + createWidget({ type: "bi.default", element: this, - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, items: [this.icon], }); } else { this.element.css("lineHeight", "1"); - BI.createWidget({ + createWidget({ element: this, type: "bi.center_adapt", - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, + hgap, + vgap, + lgap, + rgap, + tgap, + bgap, items: [this.icon], }); } - }, -}); -BI.shortcut("bi.icon_label", BI.IconLabel); + } +} diff --git a/src/base/single/label/index.js b/src/base/single/label/index.js new file mode 100644 index 000000000..ae3d091db --- /dev/null +++ b/src/base/single/label/index.js @@ -0,0 +1,4 @@ +export { AbstractLabel } from "./abstract.label"; +export { HtmlLabel } from "./html.label"; +export { IconLabel } from "./icon.label"; +export { Label } from "./label"; \ No newline at end of file diff --git a/src/base/single/label/label.js b/src/base/single/label/label.js index 905efd29a..d5924b63b 100644 --- a/src/base/single/label/label.js +++ b/src/base/single/label/label.js @@ -1,39 +1,41 @@ /** * Created by GUY on 2015/6/26. */ +import { shortcut, isFunction, isNotNull } from "../../../core"; +import { AbstractLabel } from "./abstract.label" -BI.Label = BI.inherit(BI.AbstractLabel, { +@shortcut() +export class Label extends AbstractLabel { + static xtype = "bi.label"; - props: { + props = { baseCls: "bi-label", py: "", keyword: "", - }, + } - getTitle: function () { - var title = this.options.title; - var text = this.options.text; - if (BI.isFunction(title)) { + getTitle() { + const title = this.options.title; + const text = this.options.text; + if (isFunction(title)) { return title(); } - if (BI.isNotNull(title)) { + if (isNotNull(title)) { return title; } - if (BI.isFunction(text)) { + if (isFunction(text)) { return text(); } return text; - }, + } - doRedMark: function () { + doRedMark() { this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { + unRedMark() { this.text.unRedMark.apply(this.text, arguments); - }, -}); - -BI.shortcut("bi.label", BI.Label); + } +} diff --git a/src/base/single/text.pure.js b/src/base/single/text.pure.js index 07a201369..b6207c693 100644 --- a/src/base/single/text.pure.js +++ b/src/base/single/text.pure.js @@ -1,46 +1,47 @@ /** * 没有html标签的纯文本 */ -!(function () { - BI.PureText = BI.inherit(BI.Widget, { +import { Widget, shortcut, isFunction, isKey, isNotNull } from "../../core"; +import { Text } from "./1.text"; - props: { - tagName: null, - }, +@shortcut() +export class PureText extends Widget { + static xtype = "bi.pure_text"; + + props = { + tagName: null, + } - render: function () { - var self = this, o = this.options; - var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) { - self.setText(newValue); - }) : o.text; - if (BI.isKey(text)) { - this.setText(text); - } else if (BI.isKey(o.value)) { - this.setText(o.value); - } - }, - - _getShowText: function () { - var o = this.options; - var text = BI.isFunction(o.text) ? o.text() : o.text; - text = BI.isKey(text) ? text : o.value; - if (!BI.isKey(text)) { - return ""; - } + render() { + const { text: optionsText, value } = this.options; + const text = isFunction(optionsText) ? this.__watch(optionsText, (context, newValue) => { + this.setText(newValue); + }) : optionsText; + if (isKey(text)) { + this.setText(text); + } else if (isKey(value)) { + this.setText(value); + } + } - return BI.Text.formatText(text + ""); - }, + _getShowText() { + const { text: optionsText, value } = this.options; + const text = isFunction(optionsText) ? optionsText() : optionsText; + text = isKey(text) ? text : value; + if (!isKey(text)) { + return ""; + } - setValue: function (value) { - this.options.value = value; - this.setText(value); - }, + return Text.formatText(text + ""); + } - setText: function (text) { - this.options.text = BI.isNotNull(text) ? text : ""; - this.element.__textKeywordMarked__(this._getShowText()); - }, - }); - BI.shortcut("bi.pure_text", BI.PureText); -}()); + setValue(value) { + this.options.value = value; + this.setText(value); + } + setText(text) { + this.options.text = isNotNull(text) ? text : ""; + this.element.__textKeywordMarked__(this._getShowText()); + } +}