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. 373
      src/base/single/editor/editor.js
  4. 112
      src/base/single/editor/editor.multifile.js
  5. 246
      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. 1278
      src/base/single/input/file.js
  11. 2
      src/base/single/input/index.js
  12. 339
      src/base/single/input/input.js
  13. 601
      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. 73
      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";

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

246
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 && 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.adjustYOffset, adjustYOffset,
adjustXOffset: o.adjustXOffset, adjustXOffset,
offsetStyle: o.offsetStyle, 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"

1278
src/base/single/input/file.js
View File

File diff suppressed because it is too large Load Diff

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

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

339
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(BI.Input.EVENT_FOCUS); this.fireEvent(Input.EVENT_FOCUS);
}, }
_blur: function () { _blur() {
var self = this; const blur = () => {
if (self._keydown_ === true) { if (!this.isValid() && this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) {
BI.delay(blur, BI.EVENT_RESPONSE_TIME); this.element.val(this._lastValidValue ? this._lastValidValue : "");
} else { this._checkValidationOnValueChange();
blur(); this._defaultState();
}
function blur () {
if (!self.isValid() && self.options.quitChecker.apply(self, [BI.trim(self.getValue())]) !== false) {
self.element.val(self._lastValidValue ? self._lastValidValue : "");
self._checkValidationOnValueChange();
self._defaultState();
} }
self.element.removeClass("bi-input-focus"); this.element.removeClass("bi-input-focus");
self._isEditing = false; this._isEditing = false;
self._start = false; this._start = false;
if (self.isValid()) { if (this.isValid()) {
var lastValidValue = self._lastValidValue; const lastValidValue = this._lastValidValue;
self._lastValidValue = self.getValue(); this._lastValidValue = this.getValue();
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CONFIRM, self.getValue(), self); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CONFIRM, this.getValue(), this);
self.fireEvent(BI.Input.EVENT_CONFIRM); this.fireEvent(Input.EVENT_CONFIRM);
if (self._lastValidValue !== lastValidValue) { if (this._lastValidValue !== lastValidValue) {
self.fireEvent(BI.Input.EVENT_CHANGE_CONFIRM); this.fireEvent(Input.EVENT_CHANGE_CONFIRM);
} }
} }
self.fireEvent(BI.Input.EVENT_BLUR); this.fireEvent(Input.EVENT_BLUR);
} }
},
_click: function () { if (this._keydown_ === true) {
delay(blur, BI.EVENT_RESPONSE_TIME);
} else {
blur();
}
}
_click() {
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);

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

@ -1,399 +1,400 @@
/** /**
* 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) {
textAlign: "center", const conf = super._defaultConfig(arguments);
whiteSpace: "nowrap", // normal or nowrap
textWidth: null,
textHeight: null,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
highLight: false,
handler: null,
enableHover: props.title !== null,
});
},
_createJson: function () { return extend(conf, {
var o = this.options; textAlign: "center",
whiteSpace: "nowrap", // normal or nowrap
textWidth: null,
textHeight: null,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
highLight: false,
handler: null,
enableHover: props.title !== null,
});
}
return { _createJson() {
type: "bi.text", const { textAlign, whiteSpace, textHeight, text, value, py, keyword, highLight, handler } = this.options;
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
lineHeight: o.textHeight,
maxWidth: "100%",
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
highLight: o.highLight,
handler: o.handler,
};
},
render: function () { return {
if (this.options.textAlign === "center") { type: "bi.text",
this._createCenterEl(); textAlign,
} else { whiteSpace,
this._createNotCenterEl(); lineHeight: textHeight,
} maxWidth: "100%",
}, text,
value,
py,
keyword,
highLight,
handler,
};
}
_createCenterEl: function () { render() {
var o = this.options; if (this.options.textAlign === "center") {
var json = this._createJson(); this._createCenterEl();
json.textAlign = "left"; } else {
if (BI.isNumber(o.width) && o.width > 0) { this._createNotCenterEl();
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { }
json.maxWidth = o.textWidth; }
if (BI.isNumber(o.height) && o.height > 0) { // 1.1
BI.createWidget({
type: "bi.center_adapt",
height: o.height,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
}
],
});
return; _createCenterEl() {
} const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options;
BI.createWidget({ // 1.2 const json = this._createJson();
json.textAlign = "left";
if (isNumber(width) && width > 0) {
if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = textWidth;
if (isNumber(height) && height > 0) { // 1.1
createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
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;
} }
if (o.whiteSpace === "normal") { // 1.3 createWidget({ // 1.2
BI.extend(json, {
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
});
this.text = BI.createWidget(json);
BI.createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
element: this,
items: [this.text],
});
return;
}
if (BI.isNumber(o.height) && o.height > 0) { // 1.4
this.element.css({
"line-height": BI.pixFormat(o.height),
});
json.textAlign = o.textAlign;
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
}));
return;
}
BI.extend(json, { // 1.5
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
maxWidth: "100%",
});
this.text = BI.createWidget(json);
BI.createWidget({
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,
items: [this.text],
});
return;
}
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { // 1.6
json.maxWidth = o.textWidth;
BI.createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
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.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: true, scrollable: whiteSpace === "normal",
element: this, element: this,
items: [this.text], items: [this.text],
}); });
return; return;
} }
if (BI.isNumber(o.height) && o.height > 0) { // 1.8 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;
} }
this.text = BI.createWidget(BI.extend(json, { 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%",
BI.createWidget({ });
this.text = createWidget(json);
createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: whiteSpace === "normal",
element: this, element: this,
items: [this.text], items: [this.text],
}); });
},
_createNotCenterEl: function () { return;
var o = this.options; }
var adaptLayout = "bi.vertical_adapt"; if (isNumber(textWidth) && textWidth > 0) { // 1.6
var json = this._createJson(); json.maxWidth = textWidth;
if (BI.isNumber(o.width) && o.width > 0) { createWidget({
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { type: "bi.center_adapt",
json.maxWidth = o.textWidth; columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
if (BI.isNumber(o.height) && o.height > 0) { // 2.1 scrollable: whiteSpace === "normal",
BI.createWidget({ element: this,
type: adaptLayout, items: [
horizontalAlign: o.textAlign, {
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 el: (this.text = createWidget(json)),
height: o.height,
scrollable: o.whiteSpace === "normal",
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
}
],
});
return;
} }
BI.createWidget({ // 2.2 ],
});
return;
}
if (whiteSpace === "normal") { // 1.7
extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
});
this.text = createWidget(json);
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: true,
element: this,
items: [this.text],
});
return;
}
if (isNumber(height) && height > 0) { // 1.8
this.element.css({
"line-height": BI.pixFormat(height),
});
json.textAlign = textAlign;
delete json.maxWidth;
this.text = createWidget(extend(json, {
element: this,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
return;
}
this.text = createWidget(extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
element: this,
items: [this.text],
});
}
_createNotCenterEl() {
const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options;
const adaptLayout = "bi.vertical_adapt";
const json = this._createJson();
if (isNumber(width) && width > 0) {
if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = textWidth;
if (isNumber(height) && height > 0) { // 2.1
createWidget({
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal", height,
hgap: o.hgap, scrollable: whiteSpace === "normal",
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.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 createWidget({ // 2.2
if (o.whiteSpace !== "normal") {
this.element.css({
"line-height": BI.pixFormat(o.height - (o.vgap * 2)),
});
}
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
}));
return;
}
json.maxWidth = o.width - 2 * o.hgap - o.lgap - o.rgap;
BI.createWidget({ // 2.4
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,
items: [{
el: (this.text = BI.createWidget(json)),
}],
});
return;
}
if (BI.isNumber(o.textWidth) && o.textWidth > 0) {
json.maxWidth = o.textWidth;
BI.createWidget({ // 2.5
type: adaptLayout,
horizontalAlign: o.textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
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) { // 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, { // 2.6 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, { json.maxWidth = width - 2 * hgap - lgap - rgap;
hgap: o.hgap, createWidget({ // 2.4
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
}));
BI.createWidget({
type: adaptLayout, type: adaptLayout,
horizontalAlign: o.textAlign, horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1 columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: whiteSpace === "normal",
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
element: this, element: this,
scrollable: o.whiteSpace === "normal", items: [{
items: [this.text], el: (this.text = createWidget(json)),
}],
}); });
},
doRedMark: function () { return;
this.text.doRedMark.apply(this.text, arguments); }
}, if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = textWidth;
createWidget({ // 2.5
type: adaptLayout,
horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
scrollable: whiteSpace === "normal",
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
element: this,
items: [
{
el: (this.text = createWidget(json)),
}
],
});
unRedMark: function () { return;
this.text.unRedMark.apply(this.text, arguments); }
}, if (isNumber(height) && height > 0) {
if (whiteSpace !== "normal") {
this.element.css({
"line-height": BI.pixFormat(height - (vgap * 2)),
});
}
delete json.maxWidth;
this.text = createWidget(extend(json, { // 2.6
element: this,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
doHighLight: function () { return;
this.text.doHighLight.apply(this.text, arguments); }
}, this.text = createWidget(extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
createWidget({
type: adaptLayout,
horizontalAlign: textAlign,
columnSize: ["auto"], // important！ 让文字在flex布局下shrink为1
element: this,
scrollable: whiteSpace === "normal",
items: [this.text],
});
}
unHighLight: function () { doRedMark() {
this.text.unHighLight.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, }
setText: function (v) { unRedMark() {
this.options.text = v; this.text.unRedMark.apply(this.text, arguments);
this.text.setText(v); }
},
getText: function () { doHighLight() {
return this.options.text; this.text.doHighLight.apply(this.text, arguments);
}, }
setStyle: function (css) { unHighLight() {
this.text.setStyle(css); this.text.unHighLight.apply(this.text, arguments);
}, }
setValue: function (v) { setText(v) {
BI.AbstractLabel.superclass.setValue.apply(this, arguments); this.options.text = v;
if (!this.isReadOnly()) { this.text.setText(v);
this.options.text = v; }
this.text.setValue(v);
} getText() {
}, return this.options.text;
}); }
}());
setStyle(css) {
this.text.setStyle(css);
}
setValue(v) {
super.setValue(v);
if (!this.isReadOnly()) {
this.options.text = v;
this.text.setValue(v);
}
}
}

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

73
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()
tagName: null, export class PureText extends Widget {
}, static xtype = "bi.pure_text";
render: function () { props = {
var self = this, o = this.options; tagName: null,
var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) { }
self.setText(newValue);
}) : o.text;
if (BI.isKey(text)) {
this.setText(text);
} else if (BI.isKey(o.value)) {
this.setText(o.value);
}
},
_getShowText: function () { render() {
var o = this.options; const { text: optionsText, value } = this.options;
var text = BI.isFunction(o.text) ? o.text() : o.text; const text = isFunction(optionsText) ? this.__watch(optionsText, (context, newValue) => {
text = BI.isKey(text) ? text : o.value; this.setText(newValue);
if (!BI.isKey(text)) { }) : optionsText;
return ""; if (isKey(text)) {
} this.setText(text);
} else if (isKey(value)) {
this.setText(value);
}
}
return BI.Text.formatText(text + ""); _getShowText() {
}, const { text: optionsText, value } = this.options;
const text = isFunction(optionsText) ? optionsText() : optionsText;
text = isKey(text) ? text : value;
if (!isKey(text)) {
return "";
}
setValue: function (value) { return Text.formatText(text + "");
this.options.value = value; }
this.setText(value);
},
setText: function (text) { setValue(value) {
this.options.text = BI.isNotNull(text) ? text : ""; this.options.value = value;
this.element.__textKeywordMarked__(this._getShowText()); this.setText(value);
}, }
});
BI.shortcut("bi.pure_text", BI.PureText);
}());
setText(text) {
this.options.text = isNotNull(text) ? text : "";
this.element.__textKeywordMarked__(this._getShowText());
}
}

Write Preview
Loading…
Cancel
Save