Browse Source

KERNEL-13901 refactor: label、editor、input文件夹ES6化

es6
impact 2 years ago
parent
commit
b092b80dd4
  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

@ -49,7 +49,7 @@ export const Msg = ((() => {
},
}],
});
const height = BI.SIZE_CONSANTS.TOAST_TOP;
let height = BI.SIZE_CONSANTS.TOAST_TOP;
each(toastStack, function (i, element) {
height += element.outerHeight() + 10;
});

2
src/base/index.js

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

373
src/base/single/editor/editor.js

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

112
src/base/single/editor/editor.multifile.js

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

246
src/base/single/editor/editor.textarea.js

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

3
src/base/single/editor/index.js

@ -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

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

23
src/base/single/icon/icon.js

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

6
src/base/single/index.js

@ -1,4 +1,10 @@
export { Single } from "./0.single";
export { Text } from "./1.text";
export { PureText } from "./text.pure";
export { Icon } from "./icon/icon";
export { Html } from "./html/html";
export { A } from "./a/a";
export * from "./tip";
export * from "./label";
export * from "./input";
export * from "./editor";

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

File diff suppressed because it is too large Load Diff

2
src/base/single/input/index.js

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

339
src/base/single/input/input.js

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

601
src/base/single/label/abstract.label.js

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

32
src/base/single/label/html.label.js

@ -1,26 +1,28 @@
/**
* Created by GUY on 2015/6/26.
*/
import { shortcut } from "../../../core";
import { AbstractLabel } from "./abstract.label"
BI.HtmlLabel = BI.inherit(BI.AbstractLabel, {
@shortcut()
export class HtmlLabel extends AbstractLabel {
static xtype = "bi.html_label";
props: {
props = {
baseCls: "bi-html-label",
},
}
_createJson: function () {
var o = this.options;
_createJson() {
const { textAlign, whiteSpace, textHeight, text, value, handler } = this.options;
return {
type: "bi.html",
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
lineHeight: o.textHeight,
text: o.text,
value: o.value,
handler: o.handler,
textAlign,
whiteSpace,
lineHeight: textHeight,
text,
value,
handler,
};
},
});
BI.shortcut("bi.html_label", BI.HtmlLabel);
}
}

62
src/base/single/label/icon.label.js

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

4
src/base/single/label/index.js

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

36
src/base/single/label/label.js

@ -1,39 +1,41 @@
/**
* Created by GUY on 2015/6/26.
*/
import { shortcut, isFunction, isNotNull } from "../../../core";
import { AbstractLabel } from "./abstract.label"
BI.Label = BI.inherit(BI.AbstractLabel, {
@shortcut()
export class Label extends AbstractLabel {
static xtype = "bi.label";
props: {
props = {
baseCls: "bi-label",
py: "",
keyword: "",
},
}
getTitle: function () {
var title = this.options.title;
var text = this.options.text;
if (BI.isFunction(title)) {
getTitle() {
const title = this.options.title;
const text = this.options.text;
if (isFunction(title)) {
return title();
}
if (BI.isNotNull(title)) {
if (isNotNull(title)) {
return title;
}
if (BI.isFunction(text)) {
if (isFunction(text)) {
return text();
}
return text;
},
}
doRedMark: function () {
doRedMark() {
this.text.doRedMark.apply(this.text, arguments);
},
}
unRedMark: function () {
unRedMark() {
this.text.unRedMark.apply(this.text, arguments);
},
});
BI.shortcut("bi.label", BI.Label);
}
}

73
src/base/single/text.pure.js

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

Loading…
Cancel
Save