fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

Pull request #3313: KERNEL-13901 refactor: label、editor、input文件夹ES6化 

Merge in VISUAL/fineui from ~IMPACT/fine_ui:es6 to es6

* commit '63ab82f65ff5ffcc80e44281afdc246078fbcb6d':
  KERNEL-13901 refactor: label、editor、input文件夹ES6化
es6
Impact-吴家豪 2 years ago
parent
6118935451 63ab82f65f
commit
02229a41fe
18 changed files with 1685 additions and 1626 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/base/foundation/message.js
  2. 2
      src/base/index.js
  3. 371
      src/base/single/editor/editor.js
  4. 112
      src/base/single/editor/editor.multifile.js
  5. 250
      src/base/single/editor/editor.textarea.js
  6. 3
      src/base/single/editor/index.js
  7. 105
      src/base/single/html/html.js
  8. 23
      src/base/single/icon/icon.js
  9. 6
      src/base/single/index.js
  10. 358
      src/base/single/input/file.js
  11. 2
      src/base/single/input/index.js
  12. 341
      src/base/single/input/input.js
  13. 391
      src/base/single/label/abstract.label.js
  14. 32
      src/base/single/label/html.label.js
  15. 62
      src/base/single/label/icon.label.js
  16. 4
      src/base/single/label/index.js
  17. 36
      src/base/single/label/label.js
  18. 59
      src/base/single/text.pure.js

2
src/base/foundation/message.js
Unescape View File

@ -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) { each(toastStack, function (i, element) {
height += element.outerHeight() + 10; height += element.outerHeight() + 10;
}); });

2
src/base/index.js
Unescape View File

@ -6,6 +6,7 @@ import GridView from "./grid/grid";
import Pager from "./pager/pager"; import Pager from "./pager/pager";
import * as combination from "./combination"; import * as combination from "./combination";
import { Msg } from "./foundation/message"; import { Msg } from "./foundation/message";
import * as base from "./0.base";
Object.assign(BI, { Object.assign(BI, {
Pane, Pane,
@ -16,6 +17,7 @@ Object.assign(BI, {
Pager, Pager,
...combination, ...combination,
Msg, Msg,
...base,
}); });
export * from "./0.base"; export * from "./0.base";

371
src/base/single/editor/editor.js
Unescape View File

@ -3,11 +3,39 @@
* @class BI.Editor * @class BI.Editor
* @extends BI.Single * @extends BI.Single
*/ */
BI.Editor = BI.inherit(BI.Single, { import { shortcut, Controller, extend, createWidget, isKey, isEmptyString, isFunction, isNull, trim, } from "../../../core";
_defaultConfig: function () { import { Single } from "../0.single";
var conf = BI.Editor.superclass._defaultConfig.apply(this, arguments); import { Input } from "../input/input";
import { Bubbles } from "../../0.base";
return BI.extend(conf, {
@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", baseCls: "bi-editor bi-focus-shadow",
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
@ -25,21 +53,21 @@ BI.Editor = BI.inherit(BI.Single, {
errorText: "", errorText: "",
autoTrim: true, autoTrim: true,
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const { value, watermark, validationChecker, quitChecker, allowBlank, inputType, hgap, vgap, lgap, rgap, tgap, bgap } = this.options;
// 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码 // 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
var autocomplete = o.autocomplete ? " autocomplete=" + o.autocomplete : ""; const autocomplete = this.options.autocomplete ? " autocomplete=" + this.options.autocomplete : "";
this.editor = this.addWidget(BI.createWidget({ this.editor = this.addWidget(createWidget({
type: "bi.input", type: "bi.input",
element: "<input type='" + o.inputType + "'" + autocomplete + " />", element: "<input type='" + inputType + "'" + autocomplete + " />",
root: true, root: true,
value: o.value, value,
watermark: o.watermark, watermark,
validationChecker: o.validationChecker, validationChecker,
quitChecker: o.quitChecker, quitChecker,
allowBlank: o.allowBlank, allowBlank,
})); }));
this.editor.element.css({ this.editor.element.css({
width: "100%", width: "100%",
@ -50,12 +78,12 @@ BI.Editor = BI.inherit(BI.Single, {
margin: "0", margin: "0",
}); });
var items = [ const items = [
{ {
el: { el: {
type: "bi.absolute", type: "bi.absolute",
ref: function (_ref) { ref: (_ref) => {
self.contentWrapper = _ref; this.contentWrapper = _ref;
}, },
items: [ items: [
{ {
@ -67,190 +95,189 @@ BI.Editor = BI.inherit(BI.Single, {
} }
], ],
}, },
left: o.hgap + o.lgap, left: hgap + lgap,
right: o.hgap + o.rgap, right: hgap + rgap,
top: o.vgap + o.tgap, top: vgap + tgap,
bottom: o.vgap + o.bgap, bottom: vgap + bgap,
} }
]; ];
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: items, items,
}); });
this.setWaterMark(this.options.watermark); this.setWaterMark(this.options.watermark);
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Input.EVENT_FOCUS, function () { this.editor.on(Input.EVENT_FOCUS, (...args) => {
self._checkError(); this._checkError();
self.element.addClass("bi-editor-focus"); this.element.addClass("bi-editor-focus");
self.fireEvent(BI.Editor.EVENT_FOCUS, arguments); this.fireEvent(Editor.EVENT_FOCUS, ...args);
}); });
this.editor.on(BI.Input.EVENT_BLUR, function () { this.editor.on(Input.EVENT_BLUR, (...args) => {
self._setErrorVisible(false); this._setErrorVisible(false);
self.element.removeClass("bi-editor-focus"); this.element.removeClass("bi-editor-focus");
self.fireEvent(BI.Editor.EVENT_BLUR, arguments); this.fireEvent(Editor.EVENT_BLUR, ...args);
}); });
this.editor.on(BI.Input.EVENT_CLICK, function () { this.editor.on(Input.EVENT_CLICK, (...args) => {
self.fireEvent(BI.Editor.EVENT_CLICK, arguments); this.fireEvent(Editor.EVENT_CLICK, ...args);
}); });
this.editor.on(BI.Input.EVENT_CHANGE, function () { this.editor.on(Input.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Editor.EVENT_CHANGE, arguments); this.fireEvent(Editor.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Input.EVENT_KEY_DOWN, function (v) { this.editor.on(Input.EVENT_KEY_DOWN, (v, ...args) => {
self.fireEvent(BI.Editor.EVENT_KEY_DOWN, arguments); 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键就不要隐藏了 // tab键就不要隐藏了
if (e.keyCode !== BI.KeyCode.TAB && self.watermark) { if (e.keyCode !== BI.KeyCode.TAB && this.watermark) {
self.watermark.invisible(); this.watermark.invisible();
} }
}); });
this.editor.on(BI.Input.EVENT_VALID, function () { this.editor.on(Input.EVENT_VALID, (...args) => {
self._checkWaterMark(); this._checkWaterMark();
self._setErrorVisible(false); this._setErrorVisible(false);
self.element.removeClass("error"); this.element.removeClass("error");
self.fireEvent(BI.Editor.EVENT_VALID, arguments); this.fireEvent(Editor.EVENT_VALID, ...args);
}); });
this.editor.on(BI.Input.EVENT_ERROR, function () { this.editor.on(Input.EVENT_ERROR, (...args) => {
self._checkWaterMark(); this._checkWaterMark();
self.fireEvent(BI.Editor.EVENT_ERROR, arguments); this.fireEvent(Editor.EVENT_ERROR, ...args);
self._setErrorVisible(self.isEditing()); this._setErrorVisible(this.isEditing());
self.element.addClass("error"); this.element.addClass("error");
}); });
this.editor.on(BI.Input.EVENT_RESTRICT, function () { this.editor.on(Input.EVENT_RESTRICT, (...args) => {
self._checkWaterMark(); this._checkWaterMark();
var tip = self._setErrorVisible(true); const tip = this._setErrorVisible(true);
tip && tip.element.fadeOut(100, function () { tip && tip.element.fadeOut(100, () => {
tip.element.fadeIn(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 () { this.editor.on(Input.EVENT_EMPTY, (...args) => {
self._checkWaterMark(); this._checkWaterMark();
self.fireEvent(BI.Editor.EVENT_EMPTY, arguments); this.fireEvent(Editor.EVENT_EMPTY, ...args);
}); });
this.editor.on(BI.Input.EVENT_ENTER, function () { this.editor.on(Input.EVENT_ENTER, (...args) => {
self.fireEvent(BI.Editor.EVENT_ENTER, arguments); this.fireEvent(Editor.EVENT_ENTER, ...args);
}); });
this.editor.on(BI.Input.EVENT_SPACE, function () { this.editor.on(Input.EVENT_SPACE, (...args) => {
self.fireEvent(BI.Editor.EVENT_SPACE, arguments); this.fireEvent(Editor.EVENT_SPACE, ...args);
}); });
this.editor.on(BI.Input.EVENT_BACKSPACE, function () { this.editor.on(Input.EVENT_BACKSPACE, (...args) => {
self.fireEvent(BI.Editor.EVENT_BACKSPACE, arguments); this.fireEvent(Editor.EVENT_BACKSPACE, ...args);
}); });
this.editor.on(BI.Input.EVENT_REMOVE, function () { this.editor.on(Input.EVENT_REMOVE, (...args) => {
self.fireEvent(BI.Editor.EVENT_REMOVE, arguments); this.fireEvent(Editor.EVENT_REMOVE, ...args);
}); });
this.editor.on(BI.Input.EVENT_START, function () { this.editor.on(Input.EVENT_START, (...args) => {
self.fireEvent(BI.Editor.EVENT_START, arguments); this.fireEvent(Editor.EVENT_START, ...args);
}); });
this.editor.on(BI.Input.EVENT_PAUSE, function () { this.editor.on(Input.EVENT_PAUSE, (...args) => {
self.fireEvent(BI.Editor.EVENT_PAUSE, arguments); this.fireEvent(Editor.EVENT_PAUSE, ...args);
}); });
this.editor.on(BI.Input.EVENT_STOP, function () { this.editor.on(Input.EVENT_STOP, (...args) => {
self.fireEvent(BI.Editor.EVENT_STOP, arguments); this.fireEvent(Editor.EVENT_STOP, ...args);
}); });
this.editor.on(BI.Input.EVENT_CONFIRM, function () { this.editor.on(Input.EVENT_CONFIRM, (...args) => {
self.fireEvent(BI.Editor.EVENT_CONFIRM, arguments); this.fireEvent(Editor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Input.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Input.EVENT_CHANGE_CONFIRM, (...args) => {
self.fireEvent(BI.Editor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(Editor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.element.click(function (e) { this.element.click((e) => {
e.stopPropagation(); e.stopPropagation();
return false; 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._checkError();
this._checkWaterMark(); this._checkWaterMark();
} else { } else {
this._checkWaterMark(); this._checkWaterMark();
} }
}, }
_checkToolTip: function () { _checkToolTip() {
var o = this.options; const { errorText } = this.options;
var errorText = o.errorText; if (isFunction(errorText)) {
if (BI.isFunction(errorText)) {
errorText = errorText(this.editor.getValue()); errorText = errorText(this.editor.getValue());
} }
if (BI.isKey(errorText)) { if (isKey(errorText)) {
if (!this.isEnabled() || this.isValid() || BI.Bubbles.has(this.getName())) { if (!this.isEnabled() || this.isValid() || Bubbles.has(this.getName())) {
this.setTitle(""); this.setTitle("");
} else { } else {
this.setTitle(errorText); this.setTitle(errorText);
} }
} }
}, }
_assertWaterMark: function () { _assertWaterMark() {
var self = this, o = this.options; const { height, vgap, tgap } = this.options;
if (BI.isNull(this.watermark)) { if (isNull(this.watermark)) {
this.watermark = BI.createWidget({ this.watermark = createWidget({
type: "bi.label", type: "bi.label",
cls: "bi-water-mark", cls: "bi-water-mark",
text: this.options.watermark, text: this.options.watermark,
height: o.height - 2 * o.vgap - o.tgap, height: height - 2 * vgap - tgap,
hgap: 2, hgap: 2,
whiteSpace: "nowrap", whiteSpace: "nowrap",
textAlign: "left", textAlign: "left",
}); });
this.watermark.element.bind({ this.watermark.element.bind({
mousedown: function (e) { mousedown: (e) => {
if (self.isEnabled()) { if (this.isEnabled()) {
self.editor.isEditing() || self.editor.focus(); this.editor.isEditing() || this.editor.focus();
} else { } else {
self.editor.isEditing() && self.editor.blur(); this.editor.isEditing() && this.editor.blur();
} }
e.stopEvent(); e.stopEvent();
}, },
}); });
this.watermark.element.bind("click", function (e) { this.watermark.element.bind("click", (e) => {
if (self.isEnabled()) { if (this.isEnabled()) {
self.editor.isEditing() || self.editor.focus(); this.editor.isEditing() || this.editor.focus();
} else { } else {
self.editor.isEditing() && self.editor.blur(); this.editor.isEditing() && this.editor.blur();
} }
e.stopEvent(); e.stopEvent();
}); });
} }
}, }
_checkError: function () { _checkError() {
this._setErrorVisible(this.isEnabled() && !this.isValid()); this._setErrorVisible(this.isEnabled() && !this.isValid());
this._checkToolTip(); this._checkToolTip();
}, }
_checkWaterMark: function () { _checkWaterMark() {
var o = this.options; const { watermark } = this.options;
if (!this.disabledWaterMark && this.editor.getValue() === "" && BI.isKey(o.watermark)) { if (!this.disabledWaterMark && this.editor.getValue() === "" && isKey(watermark)) {
this.watermark && this.watermark.visible(); this.watermark && this.watermark.visible();
} else { } else {
this.watermark && this.watermark.invisible(); this.watermark && this.watermark.invisible();
} }
}, }
setErrorText: function (text) { setErrorText(text) {
this.options.errorText = text; this.options.errorText = text;
}, }
getErrorText: function () { getErrorText() {
return this.options.errorText; return this.options.errorText;
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
if (BI.isNull(this.watermark)) { if (isNull(this.watermark)) {
this._assertWaterMark(); this._assertWaterMark();
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this.contentWrapper, element: this.contentWrapper,
items: [ items: [
@ -266,113 +293,91 @@ BI.Editor = BI.inherit(BI.Single, {
} }
this.watermark.setText(v); this.watermark.setText(v);
this._checkWaterMark(); this._checkWaterMark();
}, }
_setErrorVisible: function (b) { _setErrorVisible(b) {
var o = this.options; const { errorText, autoTrim, simple } = this.options;
var errorText = o.errorText; if (isFunction(errorText)) {
if (BI.isFunction(errorText)) { errorText = errorText(autoTrim ? trim(this.editor.getValue()) : this.editor.getValue());
errorText = errorText(o.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue());
} }
if (!this.disabledError && BI.isKey(errorText)) { if (!this.disabledError && isKey(errorText)) {
BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
adjustYOffset: o.simple ? 1 : 2, adjustYOffset: simple ? 1 : 2,
}); });
this._checkToolTip(); this._checkToolTip();
} }
}, }
disableError: function () { disableError() {
this.disabledError = true; this.disabledError = true;
this._checkError(); this._checkError();
}, }
enableError: function () { enableError() {
this.disabledError = false; this.disabledError = false;
this._checkError(); this._checkError();
}, }
disableWaterMark: function () { disableWaterMark() {
this.disabledWaterMark = true; this.disabledWaterMark = true;
this._checkWaterMark(); this._checkWaterMark();
}, }
enableWaterMark: function () { enableWaterMark() {
this.disabledWaterMark = false; this.disabledWaterMark = false;
this._checkWaterMark(); this._checkWaterMark();
}, }
focus: function () { focus() {
this.element.addClass("text-editor-focus"); this.element.addClass("text-editor-focus");
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.element.removeClass("text-editor-focus"); this.element.removeClass("text-editor-focus");
this.editor.blur(); this.editor.blur();
}, }
selectAll: function () { selectAll() {
this.editor.selectAll(); this.editor.selectAll();
}, }
onKeyDown: function (k) { onKeyDown(k) {
this.editor.onKeyDown(k); this.editor.onKeyDown(k);
}, }
setValue: function (v) { setValue(v) {
BI.Editor.superclass.setValue.apply(this, arguments); super.setValue(v);
this.editor.setValue(v); this.editor.setValue(v);
this._checkError(); this._checkError();
this._checkWaterMark(); this._checkWaterMark();
}, }
getLastValidValue: function () { getLastValidValue() {
return this.editor.getLastValidValue(); return this.editor.getLastValidValue();
}, }
getLastChangedValue: function () { getLastChangedValue() {
return this.editor.getLastChangedValue(); return this.editor.getLastChangedValue();
}, }
getValue: function () { getValue() {
if (!this.isValid()) { 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(); return this.editor.isEditing();
}, }
isValid: function () { isValid() {
return this.editor.isValid(); return this.editor.isValid();
}, }
destroyed: function () { destroyed() {
BI.Bubbles.remove(this.getName()); 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);

112
src/base/single/editor/editor.multifile.js
Unescape View File

@ -6,52 +6,64 @@
* @extends BI.Single * @extends BI.Single
* @abstract * @abstract
*/ */
BI.MultifileEditor = BI.inherit(BI.Widget, { import { shortcut, Widget, createWidget, extend } from "../../../core";
_defaultConfig: function () { import { File } from "../input/file";
var conf = BI.MultifileEditor.superclass._defaultConfig.apply(this, arguments);
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", baseCls: (conf.baseCls || "") + " bi-multifile-editor",
multiple: false, multiple: false,
maxSize: -1, // 1024 * 1024 maxSize: -1, // 1024 * 1024
accept: "", accept: "",
url: "", url: "",
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const { name, url, multiple, accept, maxSize, maxLength, title, errorText } = this.options;
this.file = BI.createWidget({ this.file = createWidget({
type: "bi.file", type: "bi.file",
cls: "multifile-editor", cls: "multifile-editor",
width: "100%", width: "100%",
height: "100%", height: "100%",
name: o.name, name,
url: o.url, url,
multiple: o.multiple, multiple,
accept: o.accept, accept,
maxSize: o.maxSize, maxSize,
maxLength: o.maxLength, maxLength,
title: o.title, title,
errorText: o.errorText, errorText,
}); });
this.file.on(BI.File.EVENT_CHANGE, function () { this.file.on(File.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.MultifileEditor.EVENT_CHANGE, arguments); this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
}); });
this.file.on(BI.File.EVENT_UPLOADSTART, function () { this.file.on(File.EVENT_UPLOADSTART, (...args) => {
self.fireEvent(BI.MultifileEditor.EVENT_UPLOADSTART, arguments); this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
}); });
this.file.on(BI.File.EVENT_ERROR, function () { this.file.on(File.EVENT_ERROR, (...args) => {
self.fireEvent(BI.MultifileEditor.EVENT_ERROR, arguments); this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
}); });
this.file.on(BI.File.EVENT_PROGRESS, function () { this.file.on(File.EVENT_PROGRESS, (...args) => {
self.fireEvent(BI.MultifileEditor.EVENT_PROGRESS, arguments); this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
}); });
this.file.on(BI.File.EVENT_UPLOADED, function () { this.file.on(File.EVENT_UPLOADED, (...args) => {
self.fireEvent(BI.MultifileEditor.EVENT_UPLOADED, arguments); this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [{ items: [{
@ -66,50 +78,44 @@ BI.MultifileEditor = BI.inherit(BI.Widget, {
bottom: 0, bottom: 0,
}], }],
}); });
}, }
_reset: function () { _reset() {
this.file.reset(); this.file.reset();
}, }
setUrl: function (v) { setUrl(v) {
this.file.setUrl(v); this.file.setUrl(v);
}, }
setMaxFileLength: function (v) { setMaxFileLength(v) {
this.file.setMaxFileLength(v); this.file.setMaxFileLength(v);
}, }
select: function () { select() {
this.file.select(); this.file.select();
}, }
getQueue: function () { getQueue() {
return this.file.getQueue(); return this.file.getQueue();
}, }
getValue: function () { getValue() {
return this.file.getValue(); return this.file.getValue();
}, }
upload: function () { upload() {
this._reset(); this._reset();
this.file.upload(); this.file.upload();
}, }
sendFiles: function (files) { sendFiles(files) {
this._reset(); this._reset();
this.file.sendFiles(files); this.file.sendFiles(files);
}, }
reset: function () { reset() {
this._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);

250
src/base/single/editor/editor.textarea.js
Unescape View File

@ -4,36 +4,50 @@
* @class BI.TextAreaEditor * @class BI.TextAreaEditor
* @extends BI.Single * @extends BI.Single
*/ */
BI.TextAreaEditor = BI.inherit(BI.Single, { import { shortcut, Widget, Controller, createWidget, extend, isEmptyString, isKey, isNotEmptyString, isNotNull, trim, isFunction } from "../../../core";
_defaultConfig: function (conf) { import { Single } from "../0.single";
return BI.extend(BI.TextAreaEditor.superclass._defaultConfig.apply(), { 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", baseCls: "bi-textarea-editor",
value: "", value: "",
errorText: "", errorText: "",
adjustYOffset: conf.simple ? 0 : 2, adjustYOffset: conf.simple ? 0 : 2,
adjustXOffset: 0, adjustXOffset: 0,
offsetStyle: "left", offsetStyle: "left",
validationChecker: function () { validationChecker: () => {
return true; return true;
}, },
scrolly: true, scrolly: true,
}); });
}, }
render: function () { render() {
var o = this.options, self = this; const { scrolly, value, style } = this.options;
this.content = BI.createWidget({ this.content = createWidget({
type: "bi.layout", type: "bi.layout",
tagName: "textarea", tagName: "textarea",
width: "100%", width: "100%",
height: "100%", height: "100%",
cls: "bi-textarea textarea-editor-content display-block", cls: "bi-textarea textarea-editor-content display-block",
css: o.scrolly ? null : { css: scrolly ? null : {
overflowY: "hidden", overflowY: "hidden",
}, },
}); });
this.content.element.css({ resize: "none" }); this.content.element.css({ resize: "none" });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [{ items: [{
@ -48,90 +62,90 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
}], }],
}); });
this.content.element.on("input propertychange", function (e) { this.content.element.on("input propertychange", (e) => {
self._checkError(); this._checkError();
self._checkWaterMark(); this._checkWaterMark();
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, self.getValue(), self); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this);
self.fireEvent(BI.TextAreaEditor.EVENT_CHANGE); this.fireEvent(TextAreaEditor.EVENT_CHANGE);
if (BI.isEmptyString(self.getValue())) { if (isEmptyString(this.getValue())) {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, self.getValue(), self); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
} }
}); });
this.content.element.focus(function () { this.content.element.focus(() => {
self._checkError(); this._checkError();
self._focus(); this._focus();
self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS); this.fireEvent(TextAreaEditor.EVENT_FOCUS);
BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) { Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), (e) => {
if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) { if (BI.DOM.isExist(this) && !this.element.__isMouseInBounds__(e)) {
BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName()); Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName());
self.content.element.blur(); this.content.element.blur();
} }
}); });
}); });
this.content.element.blur(function () { this.content.element.blur(() => {
self._setErrorVisible(false); this._setErrorVisible(false);
self._blur(); this._blur();
if (!self._isError()) { if (!this._isError()) {
self.fireEvent(BI.TextAreaEditor.EVENT_CONFIRM); this.fireEvent(TextAreaEditor.EVENT_CONFIRM);
} }
self.fireEvent(BI.TextAreaEditor.EVENT_BLUR); this.fireEvent(TextAreaEditor.EVENT_BLUR);
BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName()); 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) { this.content.element.keyup((e) => {
self.fireEvent(BI.TextAreaEditor.EVENT_KEY_DOWN, e.keyCode); this.fireEvent(TextAreaEditor.EVENT_KEY_DOWN, e.keyCode);
}); });
this.content.element.click(function (e) { this.content.element.click((e) => {
e.stopPropagation(); e.stopPropagation();
}); });
if (BI.isKey(o.value)) { if (isKey(value)) {
this.setValue(o.value); this.setValue(value);
} }
if (BI.isNotNull(o.style)) { if (isNotNull(style)) {
this.setStyle(o.style); this.setStyle(style);
} }
this._checkWaterMark(); this._checkWaterMark();
}, }
_checkWaterMark: function () { _checkWaterMark() {
var self = this, o = this.options; const { watermark, scrolly, invalid, disabled, height } = this.options;
var val = this.getValue(); const val = this.getValue();
if (BI.isNotEmptyString(val)) { if (isNotEmptyString(val)) {
this.watermark && this.watermark.destroy(); this.watermark && this.watermark.destroy();
this.watermark = null; this.watermark = null;
} else { } else {
if (BI.isNotEmptyString(o.watermark)) { if (isNotEmptyString(watermark)) {
if (!this.watermark) { if (!this.watermark) {
this.watermark = BI.createWidget({ this.watermark = createWidget({
type: "bi.label", type: "bi.label",
cls: "bi-water-mark textarea-watermark", cls: "bi-water-mark textarea-watermark",
textAlign: "left", textAlign: "left",
whiteSpace: o.scrolly ? "normal" : "nowrap", whiteSpace: scrolly ? "normal" : "nowrap",
text: o.watermark, text: watermark,
invalid: o.invalid, invalid,
disabled: o.disabled, disabled,
hgap: 6, hgap: 6,
vgap: o.height > 24 ? 4 : 2, vgap: height > 24 ? 4 : 2,
height: o.height > 24 ? "" : o.height, height: height > 24 ? "" : height,
}); });
this.watermark.element.bind({ this.watermark.element.bind({
mousedown: function (e) { mousedown: (e) => {
if (self.isEnabled()) { if (this.isEnabled()) {
self.focus(); this.focus();
} else { } else {
self.blur(); this.blur();
} }
e.stopEvent(); e.stopEvent();
}, },
click: function (e) { click: (e) => {
e.stopPropagation(); e.stopPropagation();
}, },
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [{ items: [{
@ -142,112 +156,104 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
}], }],
}); });
} else { } else {
this.watermark.setText(o.watermark); this.watermark.setText(watermark);
this.watermark.setValid(!o.invalid); this.watermark.setValid(!invalid);
this.watermark.setEnable(!o.disabled); this.watermark.setEnable(!disabled);
}
} }
} }
} }
},
_isError: function () { _isError() {
return this.isEnabled() && !this.options.validationChecker(this.getValue()); return this.isEnabled() && !this.options.validationChecker(this.getValue());
}, }
_checkError: function () { _checkError() {
var isError = this._isError(); const isError = this._isError();
this._setErrorVisible(isError); this._setErrorVisible(isError);
this.element[isError ? "addClass" : "removeClass"]("error"); this.element[isError ? "addClass" : "removeClass"]("error");
}, }
_focus: function () { _focus() {
this.content.element.addClass("textarea-editor-focus"); this.content.element.addClass("textarea-editor-focus");
this._checkWaterMark(); this._checkWaterMark();
if (BI.isEmptyString(this.getValue())) { if (isEmptyString(this.getValue())) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
}
} }
},
_blur: function () { _blur() {
this.content.element.removeClass("textarea-editor-focus"); this.content.element.removeClass("textarea-editor-focus");
this._checkWaterMark(); this._checkWaterMark();
}, }
_setErrorVisible: function (b) { _setErrorVisible(b) {
var o = this.options; const { errorText, adjustYOffset, adjustXOffset, offsetStyle } = this.options;
var errorText = o.errorText; if (isFunction(errorText)) {
if (BI.isFunction(errorText)) { errorText = errorText(trim(this.getValue()));
errorText = errorText(BI.trim(this.getValue())); }
} if (!this.disabledError && isKey(errorText)) {
if (!this.disabledError && BI.isKey(errorText)) { Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { adjustYOffset,
adjustYOffset: o.adjustYOffset, adjustXOffset,
adjustXOffset: o.adjustXOffset, offsetStyle,
offsetStyle: o.offsetStyle,
}); });
} }
}, }
_defaultState: function () { _defaultState() {
if (BI.isEmptyString(this.getValue())) { if (isEmptyString(this.getValue())) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.TextAreaEditor.EVENT_EMPTY); this.fireEvent(TextAreaEditor.EVENT_EMPTY);
}
} }
},
focus: function () { focus() {
this._focus(); this._focus();
this.content.element.focus(); this.content.element.focus();
}, }
blur: function () { blur() {
this._blur(); this._blur();
this.content.element.blur(); this.content.element.blur();
}, }
getValue: function () { getValue() {
return this.content.element.val(); return this.content.element.val();
}, }
setValue: function (value) { setValue(value) {
this.content.element.val(value); this.content.element.val(value);
this._checkError(); this._checkError();
this._checkWaterMark(); this._checkWaterMark();
this._defaultState(); this._defaultState();
}, }
setStyle: function (style) { setStyle(style) {
this.style = style; this.style = style;
this.element.css(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), color: style.color || BI.DOM.getContrastColor(BI.DOM.isRGBColor(style.backgroundColor) ? BI.DOM.rgb2hex(style.backgroundColor) : style.backgroundColor),
})); }));
}, }
getStyle: function () { getStyle() {
return this.style; return this.style;
}, }
setWatermark: function (v) { setWatermark(v) {
this.options.watermark = v; this.options.watermark = v;
this._checkWaterMark(); this._checkWaterMark();
}, }
_setValid: function (b) { _setValid(b) {
BI.TextAreaEditor.superclass._setValid.apply(this, arguments); super._setValid(arguments);
// this.content.setValid(b); // this.content.setValid(b);
// this.watermark && this.watermark.setValid(b); // this.watermark && this.watermark.setValid(b);
}, }
_setEnable: function (b) { _setEnable(b) {
BI.TextAreaEditor.superclass._setEnable.apply(this, [b]); super._setEnable(b);
this.content && (this.content.element[0].disabled = !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);

3
src/base/single/editor/index.js
Unescape View File

@ -0,0 +1,3 @@
export { Editor } from "./editor";
export { MultifileEditor } from "./editor.multifile";
export { TextAreaEditor } from "./editor.textarea";

105
src/base/single/html/html.js
Unescape View File

@ -3,9 +3,14 @@
* @class BI.Html * @class BI.Html
* @extends BI.Single * @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", baseCls: "bi-html",
textAlign: "left", textAlign: "left",
whiteSpace: "normal", whiteSpace: "normal",
@ -19,57 +24,57 @@ BI.Html = BI.inherit(BI.Single, {
bgap: 0, bgap: 0,
text: "", text: "",
highLight: false, highLight: false,
}, }
render: function () { render() {
var self = this, o = this.options; const { vgap, hgap, lgap, rgap, tgap, bgap, height, lineHeight, maxWidth, textAlign, whiteSpace, handler, text, value, highLight } = this.options;
if (o.hgap + o.lgap > 0) { if (hgap + lgap > 0) {
this.element.css({ 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({ 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({ 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({ this.element.css({
"padding-bottom": BI.pixFormat(o.vgap + o.bgap), "padding-bottom": BI.pixFormat(vgap + bgap),
}); });
} }
if (BI.isNumber(o.height)) { if (isNumber(height)) {
this.element.css({ lineHeight: BI.pixFormat(o.height) }); this.element.css({ lineHeight: BI.pixFormat(height) });
} }
if (BI.isNumber(o.lineHeight)) { if (isNumber(lineHeight)) {
this.element.css({ lineHeight: BI.pixFormat(o.lineHeight) }); this.element.css({ lineHeight: BI.pixFormat(lineHeight) });
} }
if (BI.isWidthOrHeight(o.maxWidth)) { if (isWidthOrHeight(maxWidth)) {
this.element.css({ maxWidth: o.maxWidth }); this.element.css({ maxWidth });
} }
if (BI.isNumber(o.maxWidth)) { if (isNumber(maxWidth)) {
this.element.css({ maxWidth: BI.pixFormat(o.maxWidth) }) this.element.css({ maxWidth: BI.pixFormat(maxWidth) });
} }
this.element.css({ this.element.css({
textAlign: o.textAlign, textAlign,
whiteSpace: o.whiteSpace, whiteSpace,
textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "", textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "",
overflow: o.whiteSpace === "nowrap" ? "" : "auto", overflow: whiteSpace === "nowrap" ? "" : "auto",
}); });
if (o.handler) { if (handler) {
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.layout", type: "bi.layout",
tagName: "span", tagName: "span",
}); });
this.text.element.click(function () { this.text.element.click(() => {
o.handler(self.getValue()); handler(this.getValue());
}); });
BI.createWidget({ createWidget({
type: "bi.default", type: "bi.default",
element: this, element: this,
items: [this.text], items: [this.text],
@ -78,40 +83,38 @@ BI.Html = BI.inherit(BI.Single, {
this.text = this; this.text = this;
} }
if (BI.isKey(o.text)) { if (isKey(text)) {
this.setText(o.text); this.setText(text);
} else if (BI.isKey(o.value)) { } else if (isKey(value)) {
this.setText(o.value); this.setText(value);
} }
if (o.highLight) { if (highLight) {
this.doHighLight(); this.doHighLight();
} }
}, }
doHighLight: function () { doHighLight() {
this.text.element.addClass("bi-high-light"); this.text.element.addClass("bi-high-light");
}, }
unHighLight: function () { unHighLight() {
this.text.element.removeClass("bi-high-light"); this.text.element.removeClass("bi-high-light");
}, }
setValue: function (text) { setValue(text) {
BI.Html.superclass.setValue.apply(this, arguments); super.setValue(text);
if (!this.isReadOnly()) { if (!this.isReadOnly()) {
this.setText(text); this.setText(text);
} }
}, }
setStyle: function (css) { setStyle(css) {
this.text.element.css(css); this.text.element.css(css);
}, }
setText: function (text) { setText(text) {
BI.Html.superclass.setText.apply(this, arguments); super.setText(text);
this.options.text = text; this.options.text = text;
this.text.element.html(text); this.text.element.html(text);
}, }
}); }
BI.shortcut("bi.html", BI.Html);

23
src/base/single/icon/icon.js
Unescape View File

@ -3,20 +3,25 @@
* @class BI.Icon * @class BI.Icon
* @extends BI.Single * @extends BI.Single
*/ */
BI.Icon = BI.inherit(BI.Single, { import { shortcut, extend } from "../../../core";
_defaultConfig: function () { import { Single } from "../0.single";
var conf = BI.Icon.superclass._defaultConfig.apply(this, arguments);
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", tagName: "i",
baseCls: (conf.baseCls || "") + " x-icon b-font horizon-center display-block", baseCls: (conf.baseCls || "") + " x-icon b-font horizon-center display-block",
}); });
}, }
render: function () { render() {
if (BI.isIE9Below && BI.isIE9Below()) { if (BI.isIE9Below && BI.isIE9Below()) {
this.element.addClass("hack"); this.element.addClass("hack");
} }
}, }
}); }
BI.shortcut("bi.icon", BI.Icon);

6
src/base/single/index.js
Unescape View File

@ -1,5 +1,11 @@
export { Single } from "./0.single"; export { Single } from "./0.single";
export { Text } from "./1.text"; 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 { A } from "./a/a";
export * from "./tip"; export * from "./tip";
export * from "./label";
export * from "./input";
export * from "./editor";
export * from "./button" export * from "./button"

358
src/base/single/input/file.js
Unescape View File

@ -6,26 +6,29 @@
* @extends BI.Single * @extends BI.Single
* @abstract * @abstract
*/ */
((function (document) { import { shortcut, Widget, some, extend } from "../../../core";
/** import { Msg } from "../../foundation/message";
const document = _global.document || {};
/**
* @description normalize input.files. create if not present, add item method if not present * @description normalize input.files. create if not present, add item method if not present
* @param Object generated wrap object * @param Object generated wrap object
* @return Object the wrap object itself * @return Object the wrap object itself
*/ */
var F = ((function (item) { const F = (((item) => {
return function (input) { return (input) => {
var files = input.files || [input]; const files = input.files || [input];
if (!files.item) { if (!files.item) {
files.item = item; files.item = item;
} }
return files; return files;
}; };
})(function (i) { })((i) => {
return this[i]; return this[i];
})); }));
var event = { const event = {
/** /**
* @description add an event via addEventListener or attachEvent * @description add an event via addEventListener or attachEvent
@ -35,12 +38,12 @@
* @return Object noswfupload.event * @return Object noswfupload.event
*/ */
add: document.addEventListener ? add: document.addEventListener ?
function (node, name, callback) { (node, name, callback) => {
node.addEventListener(name, callback, false); node.addEventListener(name, callback, false);
return this; return this;
} : } :
function (node, name, callback) { (node, name, callback) => {
node.attachEvent("on" + name, callback); node.attachEvent("on" + name, callback);
return this; return this;
@ -54,12 +57,12 @@
* @return Object noswfupload.event * @return Object noswfupload.event
*/ */
del: document.removeEventListener ? del: document.removeEventListener ?
function (node, name, callback) { (node, name, callback) => {
node.removeEventListener(name, callback, false); node.removeEventListener(name, callback, false);
return this; return this;
} : } :
function (node, name, callback) { (node, name, callback) => {
node.detachEvent("on" + name, callback); node.detachEvent("on" + name, callback);
return this; return this;
@ -70,7 +73,7 @@
* @param void generated event or undefined * @param void generated event or undefined
* @return Boolean false * @return Boolean false
*/ */
stop: function (e) { stop(e) {
if (!e) { if (!e) {
if (self.event) { if (self.event) {
event.returnValue = !(event.cancelBubble = true); event.returnValue = !(event.cancelBubble = true);
@ -82,15 +85,15 @@
return false; return false;
}, },
}; };
var sendFile = (function (toString) { const sendFile = (((toString) => {
var split = "onabort.onerror.onloadstart.onprogress".split("."), const split = "onabort.onerror.onloadstart.onprogress".split("."),
length = split.length, length = split.length,
CRLF = "\r\n", CRLF = "\r\n";
xhr = new XMLHttpRequest, let xhr = new XMLHttpRequest,
sendFile; sendFile;
function multipart(boundary, name, file) { const multipart = (boundary, name, file) => {
return "--".concat( return "--".concat(
boundary, CRLF, boundary, CRLF,
"Content-Disposition: form-data; name=\"", name, "\"; filename=\"", _global.encodeURIComponent(file.fileName), "\"", CRLF, "Content-Disposition: form-data; name=\"", name, "\"; filename=\"", _global.encodeURIComponent(file.fileName), "\"", CRLF,
@ -100,15 +103,15 @@
"--", boundary, "--", CRLF "--", boundary, "--", CRLF
); );
} }
function isFunction (Function) { const isFunction = (Function) => {
return toString.call(Function) === "[object Function]"; return toString.call(Function) === "[object Function]";
} }
// FireFox 3+, Safari 4 beta (Chrome 2 beta file is buggy and will not work) // FireFox 3+, Safari 4 beta (Chrome 2 beta file is buggy and will not work)
if (xhr.upload || xhr.sendAsBinary) { if (xhr.upload || xhr.sendAsBinary) {
sendFile = function (handler, maxSize, width, height) { sendFile = (handler, maxSize, width, height) => {
var current = handler.current; const current = handler.current;
if (-1 < maxSize && maxSize < handler.file.fileSize) { if (-1 < maxSize && maxSize < handler.file.fileSize) {
if (isFunction(handler.onerror)) { if (isFunction(handler.onerror)) {
handler.onerror(); handler.onerror();
@ -116,46 +119,44 @@
return; return;
} }
for (var xhr = new XMLHttpRequest, const xhr = new XMLHttpRequest,
upload = xhr.upload || { upload = xhr.upload || {
addEventListener: function (event, callback) { addEventListener(event, callback) {
this["on" + event] = callback; this["on" + event] = callback;
}, },
}, };
i = 0; for (let i = 0;i < length;i++) {
i < length;
i++
) {
upload.addEventListener( upload.addEventListener(
split[i].substring(2), split[i].substring(2),
// eslint-disable-next-line no-loop-func // eslint-disable-next-line no-loop-func
(function (event) { (((event) => {
return function (rpe) { return (rpe) => {
if (isFunction(handler[event])) { if (isFunction(handler[event])) {
handler[event](rpe, xhr); handler[event](rpe, xhr);
} }
}; };
}(split[i])), })(split[i])),
false false
); );
} }
upload.addEventListener( upload.addEventListener(
"load", "load",
function (rpe) { (rpe) => {
if (handler.onreadystatechange === false) { if (handler.onreadystatechange === false) {
if (isFunction(handler.onload)) { if (isFunction(handler.onload)) {
handler.onload(rpe, xhr); handler.onload(rpe, xhr);
} }
} else { } else {
setTimeout(function () { const callback = () => {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
if (isFunction(handler.onload)) { if (isFunction(handler.onload)) {
handler.onload(rpe, xhr); handler.onload(rpe, xhr);
} }
} else { } else {
setTimeout(arguments.callee, 15); setTimeout(callback, 15);
} }
}, 15); }
setTimeout(callback, 15);
} }
}, },
false false
@ -164,21 +165,21 @@
filename: _global.encodeURIComponent(handler.file.fileName), filename: _global.encodeURIComponent(handler.file.fileName),
}), true); }), true);
if (!xhr.upload) { if (!xhr.upload) {
var rpe = { loaded: 0, total: handler.file.fileSize || handler.file.size, simulation: true }; const rpe = { loaded: 0, total: handler.file.fileSize || handler.file.size, simulation: true };
rpe.interval = setInterval(function () { rpe.interval = setInterval(() => {
rpe.loaded += 1024 / 4; rpe.loaded += 1024 / 4;
if (rpe.total <= rpe.loaded) { if (rpe.total <= rpe.loaded) {
rpe.loaded = rpe.total; rpe.loaded = rpe.total;
} }
upload.onprogress(rpe); upload.onprogress(rpe);
}, 100); }, 100);
xhr.onabort = function () { xhr.onabort = () => {
upload.onabort({}); upload.onabort({});
}; };
xhr.onerror = function () { xhr.onerror = () => {
upload.onerror({}); upload.onerror({});
}; };
xhr.onreadystatechange = function () { xhr.onreadystatechange = () => {
switch (xhr.readyState) { switch (xhr.readyState) {
case 2: case 2:
case 3: case 3:
@ -194,7 +195,7 @@
upload.onprogress(rpe); upload.onprogress(rpe);
if (199 < xhr.status && xhr.status < 400) { if (199 < xhr.status && xhr.status < 400) {
upload.onload({}); upload.onload({});
var attachO = BI.jsonDecode(xhr.responseText); const attachO = BI.jsonDecode(xhr.responseText);
attachO.filename = handler.file.fileName; attachO.filename = handler.file.fileName;
if (handler.file.type.indexOf("image") !== -1) { if (handler.file.type.indexOf("image") !== -1) {
attachO.attach_type = "image"; attachO.attach_type = "image";
@ -210,10 +211,10 @@
}; };
upload.onloadstart(rpe); upload.onloadstart(rpe);
} else { } else {
xhr.onreadystatechange = function () { xhr.onreadystatechange = () => {
switch (xhr.readyState) { switch (xhr.readyState) {
case 4: case 4:
var attachO = BI.jsonDecode(xhr.responseText); const attachO = BI.jsonDecode(xhr.responseText);
if (handler.file.type.indexOf("image") !== -1) { if (handler.file.type.indexOf("image") !== -1) {
attachO.attach_type = "image"; attachO.attach_type = "image";
} }
@ -233,7 +234,7 @@
upload.onloadstart(); upload.onloadstart();
} }
} }
var boundary = "AjaxUploadBoundary" + (new Date).getTime(); const boundary = "AjaxUploadBoundary" + (new Date).getTime();
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
if (handler.file.getAsBinary) { if (handler.file.getAsBinary) {
xhr[xhr.sendAsBinary ? "sendAsBinary" : "send"](multipart(boundary, handler.name, handler.file)); xhr[xhr.sendAsBinary ? "sendAsBinary" : "send"](multipart(boundary, handler.name, handler.file));
@ -241,7 +242,7 @@
xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("Content-Type", "multipart/form-data");
// xhr.setRequestHeader("X-Name", handler.name); // xhr.setRequestHeader("X-Name", handler.name);
// xhr.setRequestHeader("X-File-Name", handler.file.fileName); // xhr.setRequestHeader("X-File-Name", handler.file.fileName);
var form = new FormData(); const form = new FormData();
form.append("FileData", handler.file); form.append("FileData", handler.file);
xhr.send(form); xhr.send(form);
} }
@ -250,11 +251,12 @@
}; };
} else { } else {
// Internet Explorer, Opera, others // Internet Explorer, Opera, others
sendFile = function (handler, maxSize, width, height) { sendFile = (handler, maxSize, width, height) => {
var current = handler.current, iframe, form; const current = handler.current;
var url = handler.url.concat(-1 === handler.url.indexOf("?") ? "?" : "&", "AjaxUploadFrame=true"), let iframe, form;
const url = handler.url.concat(-1 === handler.url.indexOf("?") ? "?" : "&", "AjaxUploadFrame=true"),
rpe = { rpe = {
loaded: 1, total: 100, simulation: true, interval: setInterval(function () { loaded: 1, total: 100, simulation: true, interval: setInterval(() => {
if (rpe.loaded < rpe.total) { if (rpe.loaded < rpe.total) {
++rpe.loaded; ++rpe.loaded;
} }
@ -264,15 +266,15 @@
}, 100), }, 100),
}, },
target = ["AjaxUpload", (new Date).getTime(), String(Math.random()).substring(2)].join("_"); target = ["AjaxUpload", (new Date).getTime(), String(Math.random()).substring(2)].join("_");
function onload() { const onload = () => {
iframe.onreadystatechange = iframe.onload = iframe.onerror = null; iframe.onreadystatechange = iframe.onload = iframe.onerror = null;
form.parentNode.removeChild(form); form.parentNode.removeChild(form);
form = null; form = null;
clearInterval(rpe.interval); clearInterval(rpe.interval);
// rpe.loaded = rpe.total; // rpe.loaded = rpe.total;
const responseText = (iframe.contentWindow.document || iframe.contentWindow.contentDocument).body.innerHTML;
try { try {
var responseText = (iframe.contentWindow.document || iframe.contentWindow.contentDocument).body.innerHTML; const attachO = BI.jsonDecode(responseText);
var attachO = BI.jsonDecode(responseText);
if (handler.file.type.indexOf("image") !== -1) { if (handler.file.type.indexOf("image") !== -1) {
attachO.attach_type = "image"; attachO.attach_type = "image";
} }
@ -300,10 +302,10 @@
} }
try { // IE < 8 does not accept enctype attribute ... try { // IE < 8 does not accept enctype attribute ...
var form = document.createElement("<form enctype=\"multipart/form-data\"></form>"), const form = document.createElement("<form enctype=\"multipart/form-data\"></form>"),
iframe = handler.iframe || (handler.iframe = document.createElement("<iframe id=\"" + target + "\" name=\"" + target + "\" src=\"" + url + "\"></iframe>")); iframe = handler.iframe || (handler.iframe = document.createElement("<iframe id=\"" + target + "\" name=\"" + target + "\" src=\"" + url + "\"></iframe>"));
} catch (e) { } catch (e) {
var form = document.createElement("form"), const form = document.createElement("form"),
iframe = handler.iframe || (handler.iframe = document.createElement("iframe")); iframe = handler.iframe || (handler.iframe = document.createElement("iframe"));
form.setAttribute("enctype", "multipart/form-data"); form.setAttribute("enctype", "multipart/form-data");
iframe.setAttribute("name", iframe.id = target); iframe.setAttribute("name", iframe.id = target);
@ -312,12 +314,12 @@
iframe.style.position = "absolute"; iframe.style.position = "absolute";
iframe.style.left = iframe.style.top = "-10000px"; iframe.style.left = iframe.style.top = "-10000px";
iframe.onload = onload; iframe.onload = onload;
iframe.onerror = function (event) { iframe.onerror = (event) => {
if (isFunction(handler.onerror)) { if (isFunction(handler.onerror)) {
handler.onerror(rpe, event || _global.event); handler.onerror(rpe, event || _global.event);
} }
}; };
iframe.onreadystatechange = function () { iframe.onreadystatechange = () => {
if (/loaded|complete/i.test(iframe.readyState)) { if (/loaded|complete/i.test(iframe.readyState)) {
onload(); onload();
@ -344,7 +346,7 @@
if (isFunction(handler.onloadstart)) { if (isFunction(handler.onloadstart)) {
handler.onloadstart(rpe, {}); handler.onloadstart(rpe, {});
} }
var d = document.body || document.documentElement; const d = document.body || document.documentElement;
d.appendChild(iframe); d.appendChild(iframe);
d.appendChild(form); d.appendChild(form);
form.submit(); form.submit();
@ -355,10 +357,10 @@
xhr = null; xhr = null;
return sendFile; return sendFile;
}(Object.prototype.toString)); })(Object.prototype.toString));
function sendFiles(handler, maxSize, width, height) { const sendFiles = (handler, maxSize, width, height) => {
var length = handler.files.length, const length = handler.files.length,
onload = handler.onload, onload = handler.onload,
onloadstart = handler.onloadstart; onloadstart = handler.onloadstart;
handler.current = 0; handler.current = 0;
@ -371,24 +373,23 @@
handler.current = 0; handler.current = 0;
if (length && handler.files[0].fileSize !== -1) { if (length && handler.files[0].fileSize !== -1) {
handler.file = handler.files[handler.current]; handler.file = handler.files[handler.current];
const callback = (rpe, xhr) => {
sendFile(handler, maxSize, width, height).onload = function (rpe, xhr) {
handler.onloadstart = null; handler.onloadstart = null;
handler.sent += (handler.files[handler.current].fileSize || handler.files[handler.current].size); handler.sent += (handler.files[handler.current].fileSize || handler.files[handler.current].size);
if (++handler.current < length) { if (++handler.current < length) {
handler.file = handler.files[handler.current]; handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = arguments.callee; sendFile(handler, maxSize, width, height).onload = callback;
} else if (onload) { } else if (onload) {
handler.onloadstart = onloadstart; handler.onloadstart = onloadstart;
handler.onload = onload; handler.onload = onload;
handler.onload(rpe, xhr); handler.onload(rpe, xhr);
} }
}; };
sendFile(handler, maxSize, width, height).onload = callback;
} else if (length) { } else if (length) {
handler.total = length * 100; handler.total = length * 100;
handler.file = handler.files[handler.current]; handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = function (rpe, xhr) { const callback = (rpe, xhr) => {
var callee = arguments.callee;
handler.onloadstart = null; handler.onloadstart = null;
handler.sent += 100; handler.sent += 100;
if (++handler.current < length) { if (++handler.current < length) {
@ -396,12 +397,12 @@
handler.iframe.parentNode.removeChild(handler.iframe); handler.iframe.parentNode.removeChild(handler.iframe);
handler.iframe = null; handler.iframe = null;
} }
setTimeout(function () { setTimeout(() => {
handler.file = handler.files[handler.current]; handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = callee; sendFile(handler, maxSize, width, height).onload = callback;
}, 15); }, 15);
} else if (onload) { } else if (onload) {
setTimeout(function () { setTimeout(() => {
handler.iframe.parentNode.removeChild(handler.iframe); handler.iframe.parentNode.removeChild(handler.iframe);
handler.iframe = null; handler.iframe = null;
handler.onloadstart = onloadstart; handler.onloadstart = onloadstart;
@ -410,31 +411,32 @@
}, 15); }, 15);
} }
}; };
sendFile(handler, maxSize, width, height).onload = callback;
} }
return handler; return handler;
} }
var r1 = /\.([^.]+)$/; // .png const r1 = /\.([^.]+)$/; // .png
var r2 = /\/([^/]+)$/; // image/png const r2 = /\/([^/]+)$/; // image/png
/** /**
* 校验文件类型是否合法,同时兼容旧版形式 * 校验文件类型是否合法,同时兼容旧版形式
* @param fileName * @param fileName
* @param fileType * @param fileType
* @returns {boolean} * @returns {boolean}
*/ */
function fileTypeValidate(fileName, fileType) { const fileTypeValidate = (fileName, fileType) => {
if (!fileType) { if (!fileType) {
return true; return true;
} }
var mimes = fileType.split(","); const mimes = fileType.split(",");
if (mimes[0] === fileType) { if (mimes[0] === fileType) {
mimes = (fileType + "").split(";"); mimes = (fileType + "").split(";");
} }
return BI.some(mimes, function (index, mime) { return some(mimes, (index, mime) => {
var matches; let matches;
matches = mime.match(r1); matches = mime.match(r1);
if (matches) { if (matches) {
return fileName.toLowerCase().indexOf(matches[1]) > -1; return fileName.toLowerCase().indexOf(matches[1]) > -1;
@ -444,13 +446,22 @@
return matches[1] === "*" ? true : fileName.toLowerCase().indexOf(matches[1]) > -1; 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";
BI.File = BI.inherit(BI.Widget, { _defaultConfig() {
_defaultConfig: function () { const conf = super._defaultConfig(arguments);
var conf = BI.File.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { return extend(conf, {
baseCls: (conf.baseCls || "") + " bi-file display-block", baseCls: (conf.baseCls || "") + " bi-file display-block",
tagName: "input", tagName: "input",
attributes: { attributes: {
@ -464,39 +475,39 @@
maxLength: -1, // 无限制, 与multiple配合使用 maxLength: -1, // 无限制, 与multiple配合使用
errorText: BI.emptyFn, errorText: BI.emptyFn,
}); });
}, }
render: function () { render() {
var o = this.options; const { multiple, name, title, accept } = this.options;
if (o.multiple === true) { if (multiple === true) {
this.element.attr("multiple", "multiple"); this.element.attr("multiple", "multiple");
} }
this.element.attr("name", o.name || this.getName()); this.element.attr("name", name || this.getName());
this.element.attr("title", o.title || ""); this.element.attr("title", title || "");
this.element.attr("accept", o.accept); this.element.attr("accept", accept);
}, }
created: function () { created() {
var self = this, o = this.options; const { maxSize, url, accept } = this.options;
// create the noswfupload.wrap Object // create the noswfupload.wrap Object
// wrap.maxSize 文件大小限制 // wrap.maxSize 文件大小限制
// wrap.maxLength 文件个数限制 // wrap.maxLength 文件个数限制
var _wrap = this.wrap = this._wrap(this.element[0], o.maxSize); const _wrap = this.wrap = this._wrap(this.element[0], maxSize);
// fileType could contain whatever text but filter checks *.{extension} // fileType could contain whatever text but filter checks *.{extension}
// if present // if present
// handlers // handlerszhe
_wrap.onloadstart = function (rpe, xhr) { _wrap.onloadstart = (...args) => {
self.fireEvent(BI.File.EVENT_UPLOADSTART, arguments); this.fireEvent(File.EVENT_UPLOADSTART, ...args);
}; };
_wrap.onprogress = function (rpe, xhr) { _wrap.onprogress = (rpe, xhr) => {
// percent for each bar // percent for each bar
// fileSize is -1 only if browser does not support file info access // fileSize is -1 only if browser does not support file info access
// this if splits recent browsers from others // this if splits recent browsers from others
if (this.file.fileSize !== -1) { if (_wrap.file.fileSize !== -1) {
// simulation property indicates when the progress event is fake // simulation property indicates when the progress event is fake
if (rpe.simulation) { if (rpe.simulation) {
// empty // empty
@ -509,7 +520,7 @@
// files sent via Ajax (XMLHttpRequest) // files sent via Ajax (XMLHttpRequest)
// We can still show some information // We can still show some information
} }
self.fireEvent(BI.File.EVENT_PROGRESS, { this.fireEvent(File.EVENT_PROGRESS, {
file: this.file, file: this.file,
total: rpe.total, total: rpe.total,
loaded: rpe.loaded, loaded: rpe.loaded,
@ -518,79 +529,78 @@
}; };
// generated if there is something wrong during upload // generated if there is something wrong during upload
_wrap.onerror = function () { _wrap.onerror = () => {
// just inform the user something was wrong // just inform the user something was wrong
self.fireEvent(BI.File.EVENT_ERROR); this.fireEvent(File.EVENT_ERROR);
}; };
// generated when every file has been sent (one or more, it does not // generated when every file has been sent (one or more, it does not
// matter) // matter)
_wrap.onload = function (rpe, xhr) { _wrap.onload = (rpe, xhr) => {
var self_ = this;
// just show everything is fine ... // just show everything is fine ...
// ... and after a second reset the component // ... and after a second reset the component
setTimeout(function () { setTimeout(() => {
self_.clean(); // remove files from list _wrap.clean(); // remove files from list
self_.hide(); // hide progress bars and enable input file _wrap.hide(); // hide progress bars and enable input file
// enable again the submit button/element // enable again the submit button/element
}, 100); }, 100);
if (200 > xhr.status || xhr.status > 399) { if (200 > xhr.status || xhr.status > 399) {
BI.Msg.toast(BI.i18nText("BI-Upload_File_Error"), { level: "error" }); Msg.toast(BI.i18nText("BI-Upload_File_Error"), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR); this.fireEvent(File.EVENT_ERROR);
return; return;
} }
var error = BI.some(_wrap.attach_array, function (index, attach) { const error = some(_wrap.attach_array, (index, attach) => {
if (attach.errorCode) { if (attach.errorCode) {
BI.Msg.toast(BI.i18nText(attach.errorMsg), { level: "error" }); Msg.toast(BI.i18nText(attach.errorMsg), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR, attach); this.fireEvent(File.EVENT_ERROR, attach);
return true; return true;
} }
}); });
!error && self.fireEvent(BI.File.EVENT_UPLOADED); !error && this.fireEvent(File.EVENT_UPLOADED);
}; };
_wrap.url = o.url; _wrap.url = url;
_wrap.fileType = o.accept; // 文件类型限制 _wrap.fileType = accept; // 文件类型限制
_wrap.attach_array = []; _wrap.attach_array = [];
_wrap.attach_names = []; _wrap.attach_names = [];
_wrap.attachNum = 0; _wrap.attachNum = 0;
}, }
_events: function (wrap) { _events(wrap) {
var self = this, o = this.options; const { maxLength, errorText } = this.options;
event.add(wrap.dom.input, "change", function () { const callback = () => {
event.del(wrap.dom.input, "change", arguments.callee); event.del(wrap.dom.input, "change", callback);
var input = wrap.dom.input.cloneNode(true); const input = wrap.dom.input.cloneNode(true);
var files = F(wrap.dom.input); const files = F(wrap.dom.input);
if (o.maxLength !== -1 && o.maxLength < files.length) { if (maxLength !== -1 && maxLength < files.length) {
self.fireEvent(BI.File.EVENT_ERROR, { this.fireEvent(File.EVENT_ERROR, {
errorType: 2, errorType: 2,
}); });
} else { } else {
for (var i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
var item = files.item(i); const item = files.item(i);
var tempFile = item.value || item.name; const tempFile = item.value || item.name;
var value = item.fileName || (item.fileName = tempFile.split("\\").pop()), const value = item.fileName || (item.fileName = tempFile.split("\\").pop()),
size = item.fileSize || item.size; size = item.fileSize || item.size;
var validateFileType = fileTypeValidate(value, wrap.fileType); const validateFileType = fileTypeValidate(value, wrap.fileType);
if (!validateFileType) { if (!validateFileType) {
// 文件类型不支持 // 文件类型不支持
BI.Msg.toast(o.errorText({ Msg.toast(errorText({
errorType: 0, errorType: 0,
file: item, file: item,
}) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" }); }) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR, { this.fireEvent(File.EVENT_ERROR, {
errorType: 0, errorType: 0,
file: item, file: item,
}); });
} else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) { } else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) {
// 文件大小不支持 // 文件大小不支持
BI.Msg.toast(o.errorText({ Msg.toast(errorText({
errorType: 1, errorType: 1,
file: item, file: item,
}) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" }); }) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR, { this.fireEvent(File.EVENT_ERROR, {
errorType: 1, errorType: 1,
file: item, file: item,
}); });
@ -599,23 +609,24 @@
} }
} }
} }
wrap.files.length > 0 && self.fireEvent(BI.File.EVENT_CHANGE, { wrap.files.length > 0 && this.fireEvent(File.EVENT_CHANGE, {
files: wrap.files, files: wrap.files,
}); });
input.value = ""; input.value = "";
wrap.dom.input.parentNode.replaceChild(input, wrap.dom.input); wrap.dom.input.parentNode.replaceChild(input, wrap.dom.input);
wrap.dom.input = input; wrap.dom.input = input;
event.add(wrap.dom.input, "change", arguments.callee); event.add(wrap.dom.input, "change", callback);
}); }
event.add(wrap.dom.input, "change", callback);
return wrap; return wrap;
}, }
_wrap: function () { _wrap() {
var o = this.options; const { multiple, maxSize, maxLength } = this.options;
// be sure input accept multiple files // be sure input accept multiple files
var input = this.element[0]; const input = this.element[0];
if (o.multiple === true) { if (multiple === true) {
this.element.attr("multiple", "multiple"); this.element.attr("multiple", "multiple");
} }
input.value = ""; input.value = "";
@ -630,21 +641,21 @@
}, },
name: input.name, // name to send for each file ($_FILES[{name}] in the server) 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 is the maximum amount of bytes for each file
maxSize: o.maxSize ? o.maxSize >> 0 : -1, maxSize: maxSize ? maxSize >> 0 : -1,
maxLength: o.maxLength, maxLength,
files: [], // file list files: [], // file list
// remove every file from the noswfupload component // remove every file from the noswfupload component
clean: function () { clean() {
this.files = []; this.files = [];
}, },
// upload one file a time (which make progress possible rather than all files in one shot) // 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 // 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 ...} // something like {onload:function(){alert("OK")},onerror:function(){alert("Error")}, etc ...}
upload: function (handler) { upload(handler) {
if (handler) { if (handler) {
for (var key in handler) { for (let key in handler) {
this[key] = handler[key]; this[key] = handler[key];
} }
} }
@ -654,7 +665,7 @@
}, },
// hide progress bar (total + current) and enable files selection // hide progress bar (total + current) and enable files selection
hide: function () { hide() {
if (this.dom.disabled) { if (this.dom.disabled) {
this.dom.disabled = false; this.dom.disabled = false;
this.dom.input.removeAttribute("disabled"); this.dom.input.removeAttribute("disabled");
@ -664,76 +675,69 @@
// show progress bar and disable file selection (used during upload) // show progress bar and disable file selection (used during upload)
// total and current are pixels used to style bars // total and current are pixels used to style bars
// totalProp and currentProp are properties to change, "height" by default // totalProp and currentProp are properties to change, "height" by default
show: function (total, current, totalProp, currentProp) { show(total, current, totalProp, currentProp) {
if (!this.dom.disabled) { if (!this.dom.disabled) {
this.dom.disabled = true; this.dom.disabled = true;
this.dom.input.setAttribute("disabled", "disabled"); this.dom.input.setAttribute("disabled", "disabled");
} }
}, },
}); });
}, }
setUrl: function(v) { setUrl(v) {
this.options.url = v; this.options.url = v;
if (this.wrap) { if (this.wrap) {
this.wrap.url = v; this.wrap.url = v;
} }
}, }
setMaxFileLength: function (v) { setMaxFileLength(v) {
this.options.maxLength = v; this.options.maxLength = v;
if (this.wrap) { if (this.wrap) {
this.wrap.maxLength = v; this.wrap.maxLength = v;
} }
}, }
select: function () { select() {
this.wrap && BI.Widget._renderEngine.createElement(this.wrap.dom.input).click(); this.wrap && Widget._renderEngine.createElement(this.wrap.dom.input).click();
}, }
upload: function (handler) { upload(handler) {
this.wrap && this.wrap.upload(handler); this.wrap && this.wrap.upload(handler);
}, }
getValue: function () { getValue() {
return this.wrap ? this.wrap.attach_array : []; return this.wrap ? this.wrap.attach_array : [];
}, }
getQueue: function () { getQueue() {
return this.wrap.files; return this.wrap.files;
}, }
reset: function () { reset() {
if (this.wrap) { if (this.wrap) {
this.wrap.attach_array = []; this.wrap.attach_array = [];
this.wrap.attach_names = []; this.wrap.attach_names = [];
this.wrap.attachNum = 0; this.wrap.attachNum = 0;
} }
}, }
sendFiles: function (files) { sendFiles(files) {
if (!this.wrap) return; 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) { _setEnable(enable) {
BI.File.superclass._setEnable.apply(this, arguments); super._setEnable(arguments);
if (enable === true) { if (enable === true) {
this.element.removeAttr("disabled"); this.element.removeAttr("disabled");
} else { } else {
this.element.attr("disabled", "disabled"); 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 || {}));

2
src/base/single/input/index.js
Unescape View File

@ -0,0 +1,2 @@
export { Input } from "./input";
export { File } from "./file";

341
src/base/single/input/input.js
Unescape View File

@ -4,237 +4,263 @@
* @extends BI.Single * @extends BI.Single
* @type {*|void|Object} * @type {*|void|Object}
*/ */
BI.Input = BI.inherit(BI.Single, { import { shortcut, Controller, extend, debounce, bind, isNull, isEmptyString, isKey, delay, trim, isEqual, nextTick, isEndWithBlank } from "../../../core";
_defaultConfig: function () { import { Single } from "../0.single";
var conf = BI.Input.superclass._defaultConfig.apply(this, arguments);
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", baseCls: (conf.baseCls || "") + " bi-input display-block overflow-dot",
tagName: "input", tagName: "input",
validationChecker: BI.emptyFn, validationChecker: BI.emptyFn,
quitChecker: BI.emptyFn, // 按确定键能否退出编辑 quitChecker: BI.emptyFn, // 按确定键能否退出编辑
allowBlank: false, allowBlank: false,
}); });
}, }
render: function () { render() {
var self = this; let ctrlKey = false;
var ctrlKey = false; let keyCode = null;
var keyCode = null; let inputEventValid = false;
var inputEventValid = false; const _keydown = debounce((keyCode) => {
var _keydown = BI.debounce(function (keyCode) { this.onKeyDown(keyCode, ctrlKey);
self.onKeyDown(keyCode, ctrlKey); this._keydown_ = false;
self._keydown_ = false;
}, BI.EVENT_RESPONSE_TIME); }, 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, "leading": true,
"trailing": false, "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, "leading": true,
"trailing": false, "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, "leading": true,
"trailing": false, "trailing": false,
}); });
this.element this.element
.keydown(function (e) { .keydown((e) => {
inputEventValid = false; inputEventValid = false;
ctrlKey = e.ctrlKey || e.metaKey; // mac的cmd支持一下 ctrlKey = e.ctrlKey || e.metaKey; // mac的cmd支持一下
keyCode = e.keyCode; 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; keyCode = null;
if (!(inputEventValid && e.keyCode === BI.KeyCode.ENTER)) { if (!(inputEventValid && e.keyCode === BI.KeyCode.ENTER)) {
self._keydown_ = true; this._keydown_ = true;
_keydown(e.keyCode); _keydown(e.keyCode);
} }
}) })
.on("input propertychange", function (e) { .on("input propertychange", (e) => {
// 输入内容全选并直接删光，如果按键没放开就失去焦点不会触发keyup，被focusout覆盖了 // 输入内容全选并直接删光，如果按键没放开就失去焦点不会触发keyup，被focusout覆盖了
// 其中propertychange在元素属性发生改变的时候就会触发 是为了兼容IE8 // 其中propertychange在元素属性发生改变的时候就会触发 是为了兼容IE8
// 通过keyCode判断会漏掉输入法点击输入(右键粘贴暂缓) // 通过keyCode判断会漏掉输入法点击输入(右键粘贴暂缓)
var originalEvent = e.originalEvent; const originalEvent = e.originalEvent;
if (BI.isNull(originalEvent.propertyName) || originalEvent.propertyName === "value") { if (isNull(originalEvent.propertyName) || originalEvent.propertyName === "value") {
inputEventValid = true; inputEventValid = true;
self._keydown_ = true; this._keydown_ = true;
_keydown(keyCode); _keydown(keyCode);
keyCode = null; keyCode = null;
} }
}) })
.click(function (e) { .click((e) => {
e.stopPropagation(); e.stopPropagation();
_clk(); _clk();
}) })
.mousedown(function (e) { .mousedown((e) => {
self.element.val(self.element.val()); this.element.val(this.element.val());
}) })
.focus(function (e) { // 可以不用冒泡 .focus((e) => { // 可以不用冒泡
self._focusDebounce(); this._focusDebounce();
}) })
.blur(function (e) { .blur((e) => {
// DEC-14919 IE11在浏览器重新获得焦点之后会先触发focusout再触发focus,要保持先获得焦点再失去焦点的顺序不变,因此采用blur // 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); this.setValue(this.options.value);
} }
}, }
_focus: function () { _focus() {
this.element.addClass("bi-input-focus"); this.element.addClass("bi-input-focus");
this._checkValidationOnValueChange(); this._checkValidationOnValueChange();
this._isEditing = true; this._isEditing = true;
if (this.getValue() === "") { if (this.getValue() === "") {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_EMPTY); this.fireEvent(Input.EVENT_EMPTY);
}
this.fireEvent(Input.EVENT_FOCUS);
}
_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();
}
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);
}
}
this.fireEvent(Input.EVENT_BLUR);
} }
this.fireEvent(BI.Input.EVENT_FOCUS);
},
_blur: function () { if (this._keydown_ === true) {
var self = this; delay(blur, BI.EVENT_RESPONSE_TIME);
if (self._keydown_ === true) {
BI.delay(blur, BI.EVENT_RESPONSE_TIME);
} else { } else {
blur(); blur();
} }
}
function blur () { _click() {
if (!self.isValid() && self.options.quitChecker.apply(self, [BI.trim(self.getValue())]) !== false) {
self.element.val(self._lastValidValue ? self._lastValidValue : "");
self._checkValidationOnValueChange();
self._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);
}
}
self.fireEvent(BI.Input.EVENT_BLUR);
}
},
_click: function () {
if (this._isEditing !== true) { if (this._isEditing !== true) {
this.selectAll(); this.selectAll();
this.fireEvent(BI.Input.EVENT_CLICK); this.fireEvent(Input.EVENT_CLICK);
}
} }
},
onClick: function () { onClick() {
this._click(); this._click();
}, }
onKeyDown: function (keyCode, ctrlKey) { onKeyDown(keyCode, ctrlKey) {
if (!this.isValid() || BI.trim(this._lastChangedValue) !== BI.trim(this.getValue())) { if (!this.isValid() || trim(this._lastChangedValue) !== trim(this.getValue())) {
this._checkValidationOnValueChange(); this._checkValidationOnValueChange();
} }
if (this.isValid() && BI.trim(this.getValue()) !== "") { if (this.isValid() && trim(this.getValue()) !== "") {
if (BI.trim(this.getValue()) !== this._lastValue && (!this._start || BI.isNull(this._lastValue) || this._lastValue === "") if (trim(this.getValue()) !== this._lastValue && (!this._start || isNull(this._lastValue) || this._lastValue === "")
|| (this._pause === true && !/(\s|\u00A0)$/.test(this.getValue()))) { || (this._pause === true && !/(\s|\u00A0)$/.test(this.getValue()))) {
this._start = true; this._start = true;
this._pause = false; this._pause = false;
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_START); this.fireEvent(Input.EVENT_START);
} }
} }
if (BI.isEqual(keyCode, BI.KeyCode.ENTER)) { if (isEqual(keyCode, BI.KeyCode.ENTER)) {
if (this.isValid() || this.options.quitChecker.apply(this, [BI.trim(this.getValue())]) !== false) { if (this.isValid() || this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) {
this.blur(); this.blur();
this.fireEvent(BI.Input.EVENT_ENTER); this.fireEvent(Input.EVENT_ENTER);
} else { } else {
this.fireEvent(BI.Input.EVENT_RESTRICT); this.fireEvent(Input.EVENT_RESTRICT);
} }
} }
if (BI.isEqual(keyCode, BI.KeyCode.SPACE)) { if (isEqual(keyCode, BI.KeyCode.SPACE)) {
this.fireEvent(BI.Input.EVENT_SPACE); this.fireEvent(Input.EVENT_SPACE);
} }
if (BI.isEqual(keyCode, BI.KeyCode.BACKSPACE) && this._lastValue === "") { if (isEqual(keyCode, BI.KeyCode.BACKSPACE) && this._lastValue === "") {
this.fireEvent(BI.Input.EVENT_REMOVE); this.fireEvent(Input.EVENT_REMOVE);
} }
if (BI.isEqual(keyCode, BI.KeyCode.BACKSPACE) || BI.isEqual(keyCode, BI.KeyCode.DELETE)) { if (isEqual(keyCode, BI.KeyCode.BACKSPACE) || isEqual(keyCode, BI.KeyCode.DELETE)) {
this.fireEvent(BI.Input.EVENT_BACKSPACE); this.fireEvent(Input.EVENT_BACKSPACE);
} }
this.fireEvent(BI.Input.EVENT_KEY_DOWN, arguments); this.fireEvent(Input.EVENT_KEY_DOWN, arguments);
// _valueChange中会更新_lastValue, 这边缓存用以后续STOP事件服务 // _valueChange中会更新_lastValue, 这边缓存用以后续STOP事件服务
var lastValue = this._lastValue; const lastValue = this._lastValue;
if (BI.trim(this.getValue()) !== BI.trim(this._lastValue || "")) { if (trim(this.getValue()) !== trim(this._lastValue || "")) {
this._valueChange(); this._valueChange();
} }
if (BI.isEndWithBlank(this.getValue())) { if (isEndWithBlank(this.getValue())) {
this._pause = true; this._pause = true;
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this);
this.fireEvent(BI.Input.EVENT_PAUSE); this.fireEvent(Input.EVENT_PAUSE);
this._defaultState(); this._defaultState();
} else if ((keyCode === BI.KeyCode.BACKSPACE || keyCode === BI.KeyCode.DELETE) && } else if ((keyCode === BI.KeyCode.BACKSPACE || keyCode === BI.KeyCode.DELETE) &&
BI.trim(this.getValue()) === "" && (lastValue !== null && BI.trim(lastValue) !== "")) { trim(this.getValue()) === "" && (lastValue !== null && trim(lastValue) !== "")) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.STOPEDIT, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_STOP); this.fireEvent(Input.EVENT_STOP);
}
} }
},
// 初始状态 // 初始状态
_defaultState: function () { _defaultState() {
if (this.getValue() === "") { if (this.getValue() === "") {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_EMPTY); this.fireEvent(Input.EVENT_EMPTY);
} }
this._lastValue = this.getValue(); this._lastValue = this.getValue();
this._lastSubmitValue = null; this._lastSubmitValue = null;
}, }
_valueChange: function () { _valueChange() {
if (this.isValid() && BI.trim(this.getValue()) !== this._lastSubmitValue) { if (this.isValid() && trim(this.getValue()) !== this._lastSubmitValue) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_CHANGE); this.fireEvent(Input.EVENT_CHANGE);
this._lastSubmitValue = BI.trim(this.getValue()); this._lastSubmitValue = trim(this.getValue());
} }
if (this.getValue() === "") { if (this.getValue() === "") {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_EMPTY); this.fireEvent(Input.EVENT_EMPTY);
} }
this._lastValue = this.getValue(); this._lastValue = this.getValue();
}, }
_checkValidationOnValueChange: function (callback) { _checkValidationOnValueChange(callback) {
var self = this, o = this.options; const { allowBlank, validationChecker } = this.options;
var v = this.getValue(); const v = this.getValue();
if (o.allowBlank === true && BI.trim(v) === "") { if (allowBlank === true && trim(v) === "") {
this.setValid(true); this.setValid(true);
callback && callback(); callback && callback();
return; return;
} }
if (BI.trim(v) === "") { if (trim(v) === "") {
this.setValid(false); this.setValid(false);
callback && callback(); callback && callback();
return; return;
} }
var checker = o.validationChecker.apply(this, [BI.trim(v)]); const checker = validationChecker.apply(this, [trim(v)]);
if (checker instanceof Promise) { if (checker instanceof Promise) {
checker.then(function (validate) { checker.then((validate) => {
self.setValid(validate !== false); this.setValid(validate !== false);
callback && callback(); callback && callback();
}); });
} else { } else {
this.setValid(checker !== false); this.setValid(checker !== false);
callback && callback(); callback && callback();
} }
}, }
focus: function () { focus() {
if (!this.element.is(":visible")) { if (!this.element.is(":visible")) {
throw new Error("input输入框在不可见下不能focus"); throw new Error("input输入框在不可见下不能focus");
} }
@ -242,9 +268,9 @@ BI.Input = BI.inherit(BI.Single, {
this.element.focus(); this.element.focus();
this.selectAll(); this.selectAll();
} }
}, }
blur: function () { blur() {
if (!this.element.is(":visible")) { if (!this.element.is(":visible")) {
throw new Error("input输入框在不可见下不能blur"); throw new Error("input输入框在不可见下不能blur");
} }
@ -252,84 +278,61 @@ BI.Input = BI.inherit(BI.Single, {
this.element.blur(); this.element.blur();
this._blurDebounce(); this._blurDebounce();
} }
}, }
selectAll: function () { selectAll() {
if (!this.element.is(":visible")) { if (!this.element.is(":visible")) {
throw new Error("input输入框在不可见下不能select"); throw new Error("input输入框在不可见下不能select");
} }
this.element.select(); this.element.select();
this._isEditing = true; this._isEditing = true;
}, }
setValue: function (textValue) { setValue(textValue) {
var self = this;
this.element.val(textValue); this.element.val(textValue);
BI.nextTick(function () { nextTick(() => {
self._checkValidationOnValueChange(function () { this._checkValidationOnValueChange(() => {
self._defaultState(); this._defaultState();
if (self.isValid()) { if (this.isValid()) {
self._lastValidValue = self._lastSubmitValue = self.getValue(); this._lastValidValue = this._lastSubmitValue = this.getValue();
} }
}); });
}); });
}, }
getValue: function () { getValue() {
return this.element.val() || ""; return this.element.val() || "";
}, }
isEditing: function () { isEditing() {
return this._isEditing; return this._isEditing;
}, }
getLastValidValue: function () { getLastValidValue() {
return this._lastValidValue; return this._lastValidValue;
}, }
getLastChangedValue: function () { getLastChangedValue() {
return this._lastChangedValue; return this._lastChangedValue;
}, }
_setValid: function () { _setValid() {
BI.Input.superclass._setValid.apply(this, arguments); super._setValid(arguments);
if (this.isValid()) { if (this.isValid()) {
this._lastChangedValue = this.getValue(); this._lastChangedValue = this.getValue();
this.element.removeClass("bi-input-error"); 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 { } else {
if (this._lastChangedValue === this.getValue()) { if (this._lastChangedValue === this.getValue()) {
this._lastChangedValue = null; this._lastChangedValue = null;
} }
this.element.addClass("bi-input-error"); 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) { _setEnable(b) {
BI.Input.superclass._setEnable.apply(this, [b]); super._setEnable([b]);
this.element[0].disabled = !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);

391
src/base/single/label/abstract.label.js
Unescape View File

@ -1,13 +1,15 @@
/** /**
* Created by dailer on 2019/6/19. * Created by dailer on 2019/6/19.
*/ */
!(function () { import { isNumber, createWidget, extend } from "../../../core";
BI.AbstractLabel = BI.inherit(BI.Single, { import { Single } from "../0.single";
_defaultConfig: function (props) { export class AbstractLabel extends Single {
var conf = BI.AbstractLabel.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { _defaultConfig(props) {
const conf = super._defaultConfig(arguments);
return extend(conf, {
textAlign: "center", textAlign: "center",
whiteSpace: "nowrap", // normal or nowrap whiteSpace: "nowrap", // normal or nowrap
textWidth: null, textWidth: null,
@ -22,156 +24,156 @@
handler: null, handler: null,
enableHover: props.title !== null, enableHover: props.title !== null,
}); });
}, }
_createJson: function () { _createJson() {
var o = this.options; const { textAlign, whiteSpace, textHeight, text, value, py, keyword, highLight, handler } = this.options;
return { return {
type: "bi.text", type: "bi.text",
textAlign: o.textAlign, textAlign,
whiteSpace: o.whiteSpace, whiteSpace,
lineHeight: o.textHeight, lineHeight: textHeight,
maxWidth: "100%", maxWidth: "100%",
text: o.text, text,
value: o.value, value,
py: o.py, py,
keyword: o.keyword, keyword,
highLight: o.highLight, highLight,
handler: o.handler, handler,
}; };
}, }
render: function () { render() {
if (this.options.textAlign === "center") { if (this.options.textAlign === "center") {
this._createCenterEl(); this._createCenterEl();
} else { } else {
this._createNotCenterEl(); this._createNotCenterEl();
} }
}, }
_createCenterEl: function () { _createCenterEl() {
var o = this.options; const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options;
var json = this._createJson(); const json = this._createJson();
json.textAlign = "left"; json.textAlign = "left";
if (BI.isNumber(o.width) && o.width > 0) { if (isNumber(width) && width > 0) {
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = o.textWidth; json.maxWidth = textWidth;
if (BI.isNumber(o.height) && o.height > 0) { // 1.1 if (isNumber(height) && height > 0) { // 1.1
BI.createWidget({ createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
height: o.height, height,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
element: this, element: this,
items: [ items: [
{ {
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
} }
], ],
}); });
return; return;
} }
BI.createWidget({ // 1.2 createWidget({ // 1.2
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
element: this, element: this,
items: [ items: [
{ {
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
} }
], ],
}); });
return; return;
} }
if (o.whiteSpace === "normal") { // 1.3 if (whiteSpace === "normal") { // 1.3
BI.extend(json, { extend(json, {
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
}); });
this.text = BI.createWidget(json); this.text = createWidget(json);
BI.createWidget({ createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
element: this, element: this,
items: [this.text], items: [this.text],
}); });
return; return;
} }
if (BI.isNumber(o.height) && o.height > 0) { // 1.4 if (isNumber(height) && height > 0) { // 1.4
this.element.css({ this.element.css({
"line-height": BI.pixFormat(o.height), "line-height": BI.pixFormat(height),
}); });
json.textAlign = o.textAlign; json.textAlign = textAlign;
delete json.maxWidth; delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { this.text = createWidget(extend(json, {
element: this, element: this,
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
})); }));
return; return;
} }
BI.extend(json, { // 1.5 extend(json, { // 1.5
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
maxWidth: "100%", maxWidth: "100%",
}); });
this.text = BI.createWidget(json); this.text = createWidget(json);
BI.createWidget({ createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
element: this, element: this,
items: [this.text], items: [this.text],
}); });
return; return;
} }
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { // 1.6 if (isNumber(textWidth) && textWidth > 0) { // 1.6
json.maxWidth = o.textWidth; json.maxWidth = textWidth;
BI.createWidget({ createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
element: this, element: this,
items: [ items: [
{ {
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
} }
], ],
}); });
return; return;
} }
if (o.whiteSpace === "normal") { // 1.7 if (whiteSpace === "normal") { // 1.7
BI.extend(json, { extend(json, {
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
}); });
this.text = BI.createWidget(json); this.text = createWidget(json);
BI.createWidget({ createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: true, scrollable: true,
@ -181,219 +183,218 @@
return; return;
} }
if (BI.isNumber(o.height) && o.height > 0) { // 1.8 if (isNumber(height) && height > 0) { // 1.8
this.element.css({ this.element.css({
"line-height": BI.pixFormat(o.height), "line-height": BI.pixFormat(height),
}); });
json.textAlign = o.textAlign; json.textAlign = textAlign;
delete json.maxWidth; delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { this.text = createWidget(extend(json, {
element: this, element: this,
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
})); }));
return; return;
} }
this.text = BI.createWidget(BI.extend(json, { this.text = createWidget(extend(json, {
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
})); }));
BI.createWidget({ createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
element: this, element: this,
items: [this.text], items: [this.text],
}); });
}, }
_createNotCenterEl: function () { _createNotCenterEl() {
var o = this.options; const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options;
var adaptLayout = "bi.vertical_adapt"; const adaptLayout = "bi.vertical_adapt";
var json = this._createJson(); const json = this._createJson();
if (BI.isNumber(o.width) && o.width > 0) { if (isNumber(width) && width > 0) {
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = o.textWidth; json.maxWidth = textWidth;
if (BI.isNumber(o.height) && o.height > 0) { // 2.1 if (isNumber(height) && height > 0) { // 2.1
BI.createWidget({ createWidget({
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
height: o.height, height,
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
element: this, element: this,
items: [ items: [
{ {
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
} }
], ],
}); });
return; return;
} }
BI.createWidget({ // 2.2 createWidget({ // 2.2
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
element: this, element: this,
items: [ items: [
{ {
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
} }
], ],
}); });
return; return;
} }
if (BI.isNumber(o.height) && o.height > 0) { // 2.3 if (isNumber(height) && height > 0) { // 2.3
if (o.whiteSpace !== "normal") { if (whiteSpace !== "normal") {
this.element.css({ this.element.css({
"line-height": BI.pixFormat(o.height - (o.vgap * 2)), "line-height": BI.pixFormat(height - (vgap * 2)),
}); });
} }
delete json.maxWidth; delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { this.text = createWidget(extend(json, {
element: this, element: this,
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
})); }));
return; return;
} }
json.maxWidth = o.width - 2 * o.hgap - o.lgap - o.rgap; json.maxWidth = width - 2 * hgap - lgap - rgap;
BI.createWidget({ // 2.4 createWidget({ // 2.4
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
element: this, element: this,
items: [{ items: [{
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
}], }],
}); });
return; return;
} }
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = o.textWidth; json.maxWidth = textWidth;
BI.createWidget({ // 2.5 createWidget({ // 2.5
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
element: this, element: this,
items: [ items: [
{ {
el: (this.text = BI.createWidget(json)), el: (this.text = createWidget(json)),
} }
], ],
}); });
return; return;
} }
if (BI.isNumber(o.height) && o.height > 0) { if (isNumber(height) && height > 0) {
if (o.whiteSpace !== "normal") { if (whiteSpace !== "normal") {
this.element.css({ this.element.css({
"line-height": BI.pixFormat(o.height - (o.vgap * 2)), "line-height": BI.pixFormat(height - (vgap * 2)),
}); });
} }
delete json.maxWidth; delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { // 2.6 this.text = createWidget(extend(json, { // 2.6
element: this, element: this,
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
})); }));
return; return;
} }
this.text = BI.createWidget(BI.extend(json, { this.text = createWidget(extend(json, {
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
})); }));
BI.createWidget({ createWidget({
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
element: this, element: this,
scrollable: o.whiteSpace === "normal", scrollable: whiteSpace === "normal",
items: [this.text], items: [this.text],
}); });
}, }
doRedMark: function () { doRedMark() {
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark.apply(this.text, arguments);
}, }
doHighLight: function () { doHighLight() {
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight.apply(this.text, arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight.apply(this.text, arguments);
}, }
setText: function (v) { setText(v) {
this.options.text = v; this.options.text = v;
this.text.setText(v); this.text.setText(v);
}, }
getText: function () { getText() {
return this.options.text; return this.options.text;
}, }
setStyle: function (css) { setStyle(css) {
this.text.setStyle(css); this.text.setStyle(css);
}, }
setValue: function (v) { setValue(v) {
BI.AbstractLabel.superclass.setValue.apply(this, arguments); super.setValue(v);
if (!this.isReadOnly()) { if (!this.isReadOnly()) {
this.options.text = v; this.options.text = v;
this.text.setValue(v); this.text.setValue(v);
} }
}, }
}); }
}());

32
src/base/single/label/html.label.js
Unescape View File

@ -1,26 +1,28 @@
/** /**
* Created by GUY on 2015/6/26. * 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", baseCls: "bi-html-label",
}, }
_createJson: function () { _createJson() {
var o = this.options; const { textAlign, whiteSpace, textHeight, text, value, handler } = this.options;
return { return {
type: "bi.html", type: "bi.html",
textAlign: o.textAlign, textAlign,
whiteSpace: o.whiteSpace, whiteSpace,
lineHeight: o.textHeight, lineHeight: textHeight,
text: o.text, text,
value: o.value, value,
handler: o.handler, handler,
}; };
}, }
}); }
BI.shortcut("bi.html_label", BI.HtmlLabel);

62
src/base/single/label/icon.label.js
Unescape View File

@ -1,11 +1,16 @@
/** /**
* @class BI.IconButton * @class BI.IconLabel
* @extends BI.BasicButton * @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", baseCls: "bi-icon-label horizon-center",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
@ -16,45 +21,44 @@ BI.IconLabel = BI.inherit(BI.Single, {
iconWidth: null, iconWidth: null,
iconHeight: null, iconHeight: null,
lineHeight: null, lineHeight: null,
}, }
render: function () { render() {
var o = this.options; const { iconWidth, iconHeight, height, lineHeight, hgap, vgap, lgap, rgap, tgap, bgap } = this.options;
this.element.css({ this.element.css({
textAlign: "center", textAlign: "center",
}); });
this.icon = BI.createWidget({ this.icon = createWidget({
type: "bi.icon", type: "bi.icon",
width: o.iconWidth, width: iconWidth,
height: o.iconHeight, height: iconHeight,
}); });
if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) { if (isNumber(height) && height > 0 && isNull(iconWidth) && isNull(iconHeight)) {
this.element.css("lineHeight", BI.pixFormat(o.lineHeight || o.height)); this.element.css("lineHeight", BI.pixFormat(lineHeight || height));
BI.createWidget({ createWidget({
type: "bi.default", type: "bi.default",
element: this, element: this,
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
items: [this.icon], items: [this.icon],
}); });
} else { } else {
this.element.css("lineHeight", "1"); this.element.css("lineHeight", "1");
BI.createWidget({ createWidget({
element: this, element: this,
type: "bi.center_adapt", type: "bi.center_adapt",
hgap: o.hgap, hgap,
vgap: o.vgap, vgap,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
items: [this.icon], items: [this.icon],
}); });
} }
}, }
}); }
BI.shortcut("bi.icon_label", BI.IconLabel);

4
src/base/single/label/index.js
Unescape View File

@ -0,0 +1,4 @@
export { AbstractLabel } from "./abstract.label";
export { HtmlLabel } from "./html.label";
export { IconLabel } from "./icon.label";
export { Label } from "./label";

36
src/base/single/label/label.js
Unescape View File

@ -1,39 +1,41 @@
/** /**
* Created by GUY on 2015/6/26. * 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", baseCls: "bi-label",
py: "", py: "",
keyword: "", keyword: "",
}, }
getTitle: function () { getTitle() {
var title = this.options.title; const title = this.options.title;
var text = this.options.text; const text = this.options.text;
if (BI.isFunction(title)) { if (isFunction(title)) {
return title(); return title();
} }
if (BI.isNotNull(title)) { if (isNotNull(title)) {
return title; return title;
} }
if (BI.isFunction(text)) { if (isFunction(text)) {
return text(); return text();
} }
return text; return text;
}, }
doRedMark: function () { doRedMark() {
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark.apply(this.text, arguments);
}, }
}); }
BI.shortcut("bi.label", BI.Label);

59
src/base/single/text.pure.js
Unescape View File

@ -1,46 +1,47 @@
/** /**
* 没有html标签的纯文本 * 没有html标签的纯文本
*/ */
!(function () { import { Widget, shortcut, isFunction, isKey, isNotNull } from "../../core";
BI.PureText = BI.inherit(BI.Widget, { import { Text } from "./1.text";
props: { @shortcut()
export class PureText extends Widget {
static xtype = "bi.pure_text";
props = {
tagName: null, tagName: null,
}, }
render: function () { render() {
var self = this, o = this.options; const { text: optionsText, value } = this.options;
var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) { const text = isFunction(optionsText) ? this.__watch(optionsText, (context, newValue) => {
self.setText(newValue); this.setText(newValue);
}) : o.text; }) : optionsText;
if (BI.isKey(text)) { if (isKey(text)) {
this.setText(text); this.setText(text);
} else if (BI.isKey(o.value)) { } else if (isKey(value)) {
this.setText(o.value); this.setText(value);
}
} }
},
_getShowText: function () { _getShowText() {
var o = this.options; const { text: optionsText, value } = this.options;
var text = BI.isFunction(o.text) ? o.text() : o.text; const text = isFunction(optionsText) ? optionsText() : optionsText;
text = BI.isKey(text) ? text : o.value; text = isKey(text) ? text : value;
if (!BI.isKey(text)) { if (!isKey(text)) {
return ""; return "";
} }
return BI.Text.formatText(text + ""); return Text.formatText(text + "");
}, }
setValue: function (value) { setValue(value) {
this.options.value = value; this.options.value = value;
this.setText(value); this.setText(value);
}, }
setText: function (text) { setText(text) {
this.options.text = BI.isNotNull(text) ? text : ""; this.options.text = isNotNull(text) ? text : "";
this.element.__textKeywordMarked__(this._getShowText()); this.element.__textKeywordMarked__(this._getShowText());
}, }
}); }
BI.shortcut("bi.pure_text", BI.PureText);
}());

Write Preview
Loading…
Cancel
Save