From 0c009add2c665799a3a2c38b98b7ced980bcdb45 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 11 Jan 2023 10:31:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?KERNEL-14071=20refactor:=20case/trigger?= =?UTF-8?q?=E7=9A=84es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 7 + src/base/single/trigger/trigger.js | 2 +- src/case/index.js | 3 + src/case/trigger/index.js | 8 + src/case/trigger/trigger.editor.js | 105 ++++++------ src/case/trigger/trigger.icon.js | 33 ++-- src/case/trigger/trigger.icon.text.js | 84 ++++----- src/case/trigger/trigger.icon.text.select.js | 67 ++++---- src/case/trigger/trigger.text.js | 159 +++++++++--------- src/case/trigger/trigger.text.select.js | 102 +++++------ src/case/trigger/trigger.text.select.small.js | 66 ++++---- src/case/trigger/trigger.text.small.js | 64 +++---- 12 files changed, 374 insertions(+), 326 deletions(-) create mode 100644 src/case/trigger/index.js diff --git a/es6.js b/es6.js index 9c0b18bf4..2fa0181eb 100644 --- a/es6.js +++ b/es6.js @@ -97,6 +97,13 @@ collection.methods.forEach(el => { "isString", "isNumber", "isEmpty", + "isEmptyString", + "any", + "deepContains", + "isNotEmptyString", + "each", + "contains", + "remove", ]; target.forEach(t => { diff --git a/src/base/single/trigger/trigger.js b/src/base/single/trigger/trigger.js index 3755fc8ae..af9db4078 100644 --- a/src/base/single/trigger/trigger.js +++ b/src/base/single/trigger/trigger.js @@ -12,7 +12,7 @@ export class Trigger extends Single { const conf = super._defaultConfig(...arguments); return extend(conf, { - _baseCls: (conf._baseCls || "") + " bi-trigger cursor-pointer", + _baseCls: `${conf._baseCls || ""} bi-trigger cursor-pointer`, height: 24, }); } diff --git a/src/case/index.js b/src/case/index.js index 1b8b33c0b..515a45107 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -2,16 +2,19 @@ import * as button from "./button"; import * as calendarItem from "./calendar"; import * as pager from "./pager"; import * as editor from "./editor"; +import * as trigger from "./trigger"; Object.assign(BI, { ...button, ...calendarItem, ...pager, ...editor, + ...trigger, }); export * from "./button"; export * from "./calendar"; export * from "./pager"; export * from "./editor"; +export * from "./trigger"; diff --git a/src/case/trigger/index.js b/src/case/trigger/index.js new file mode 100644 index 000000000..df4e68ab5 --- /dev/null +++ b/src/case/trigger/index.js @@ -0,0 +1,8 @@ +export { EditorTrigger } from "./trigger.editor"; +export { IconTrigger } from "./trigger.icon"; +export { IconTextTrigger } from "./trigger.icon.text"; +export { SelectIconTextTrigger } from "./trigger.icon.text.select"; +export { TextTrigger } from "./trigger.text"; +export { SelectTextTrigger } from "./trigger.text.select"; +export { SmallSelectTextTrigger } from "./trigger.text.select.small"; +export { SmallTextTrigger } from "./trigger.text.small"; diff --git a/src/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js index 5bdcc8f56..3bb8439ac 100644 --- a/src/case/trigger/trigger.editor.js +++ b/src/case/trigger/trigger.editor.js @@ -1,93 +1,98 @@ +import { shortcut, extend, emptyFn, createWidget, toPix, Controller } from "@/core"; +import { Trigger } from "@/base"; +import { SignEditor } from "../editor"; + /** * 文本输入框trigger * * Created by GUY on 2015/9/15. - * @class BI.EditorTrigger - * @extends BI.Trigger + * @class EditorTrigger + * @extends Trigger */ -BI.EditorTrigger = BI.inherit(BI.Trigger, { - _defaultConfig: function (config) { - var conf = BI.EditorTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-editor-trigger bi-border-radius " + (config.simple ? "bi-border-bottom" : "bi-border"), +@shortcut() +export class EditorTrigger extends Trigger { + static xtype = "bi.editor_trigger"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_EMPTY = "EVENT_EMPTY"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + + _defaultConfig(config) { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-editor-trigger bi-border-radius ${config.simple ? "bi-border-bottom" : "bi-border"}`, height: 24, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: false, watermark: "", - errorText: "" + errorText: "", }); - }, + } - _init: function () { - BI.EditorTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this._const; - this.editor = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget({ type: "bi.sign_editor", - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), value: o.value, validationChecker: o.validationChecker, quitChecker: o.quitChecker, allowBlank: o.allowBlank, watermark: o.watermark, errorText: o.errorText, - title: function () { - return self.getValue(); - } + title: () => this.getValue(), }); - 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.SignEditor.EVENT_CHANGE, function () { - self.fireEvent(BI.EditorTrigger.EVENT_CHANGE, arguments); + this.editor.on(SignEditor.EVENT_CHANGE, (...args) => { + this.fireEvent(EditorTrigger.EVENT_CHANGE, ...args); }); - this.editor.on(BI.SignEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.EditorTrigger.EVENT_FOCUS, arguments); + this.editor.on(SignEditor.EVENT_FOCUS, (...args) => { + this.fireEvent(EditorTrigger.EVENT_FOCUS, ...args); }); - this.editor.on(BI.SignEditor.EVENT_EMPTY, function () { - self.fireEvent(BI.EditorTrigger.EVENT_EMPTY, arguments); + this.editor.on(SignEditor.EVENT_EMPTY, (...args) => { + this.fireEvent(EditorTrigger.EVENT_EMPTY, ...args); }); - this.editor.on(BI.SignEditor.EVENT_VALID, function () { - self.fireEvent(BI.EditorTrigger.EVENT_VALID, arguments); + this.editor.on(SignEditor.EVENT_VALID, (...args) => { + this.fireEvent(EditorTrigger.EVENT_VALID, ...args); }); - this.editor.on(BI.SignEditor.EVENT_ERROR, function () { - self.fireEvent(BI.EditorTrigger.EVENT_ERROR, arguments); + this.editor.on(SignEditor.EVENT_ERROR, (...args) => { + this.fireEvent(EditorTrigger.EVENT_ERROR, ...args); }); - BI.createWidget({ + createWidget({ element: this, type: "bi.horizontal_fill", - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), items: [ { el: this.editor, - width: "fill" + width: "fill", }, { el: { type: "bi.trigger_icon_button", - width: o.triggerWidth || BI.toPix(o.height, 2) + width: o.triggerWidth || toPix(o.height, 2), }, - width: "" + width: "", } - ] + ], }); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - setValue: function (value) { + setValue(value) { this.editor.setValue(value); - }, + } - setText: function (text) { + setText(text) { this.editor.setState(text); } -}); -BI.EditorTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.EditorTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.EditorTrigger.EVENT_EMPTY = "EVENT_EMPTY"; -BI.EditorTrigger.EVENT_VALID = "EVENT_VALID"; -BI.EditorTrigger.EVENT_ERROR = "EVENT_ERROR"; -BI.shortcut("bi.editor_trigger", BI.EditorTrigger); +} diff --git a/src/case/trigger/trigger.icon.js b/src/case/trigger/trigger.icon.js index 2da61d480..3368dd070 100644 --- a/src/case/trigger/trigger.icon.js +++ b/src/case/trigger/trigger.icon.js @@ -1,30 +1,35 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { Trigger } from "@/base"; + /** * 图标按钮trigger * * Created by GUY on 2015/10/8. - * @class BI.IconTrigger - * @extends BI.Trigger + * @class IconTrigger + * @extends Trigger */ -BI.IconTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class IconTrigger extends Trigger { + static xtype = "bi.icon_trigger" - _defaultConfig: function () { - return BI.extend(BI.IconTrigger.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-icon-trigger", extraCls: "pull-down-font", el: {}, - height: 24 + height: 24, }); - }, - _init: function () { - var o = this.options; - BI.IconTrigger.superclass._init.apply(this, arguments); - this.iconButton = BI.createWidget(o.el, { + } + + _init() { + const o = this.options; + super._init(...arguments); + this.iconButton = createWidget(o.el, { type: "bi.trigger_icon_button", element: this, width: o.width, height: o.height, - extraCls: o.extraCls + extraCls: o.extraCls, }); } -}); -BI.shortcut("bi.icon_trigger", BI.IconTrigger); \ No newline at end of file +} diff --git a/src/case/trigger/trigger.icon.text.js b/src/case/trigger/trigger.icon.text.js index a102b5d0c..b93c3181b 100644 --- a/src/case/trigger/trigger.icon.text.js +++ b/src/case/trigger/trigger.icon.text.js @@ -1,29 +1,35 @@ +import { shortcut, extend, isKey, createWidget, isEmptyString } from "@/core"; +import { Trigger } from "@/base"; + /** * 文字trigger * * Created by GUY on 2015/9/15. - * @class BI.IconTextTrigger - * @extends BI.Trigger + * @class IconTextTrigger + * @extends Trigger */ -BI.IconTextTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class IconTextTrigger extends Trigger { + static xtype = "bi.icon_text_trigger" - _defaultConfig: function () { - var conf = BI.IconTextTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-text-trigger", + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-text-trigger`, height: 24, iconHeight: null, iconWidth: null, - textCls: "" + textCls: "", }); - }, + } - _init: function () { - BI.IconTextTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.text = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.text = createWidget({ type: "bi.label", - cls: "select-text-label" + (BI.isKey(o.textCls) ? (" " + o.textCls) : ""), + cls: `select-text-label${isKey(o.textCls) ? (` ${o.textCls}`) : ""}`, textAlign: "left", height: o.height, hgap: o.textHgap, @@ -32,19 +38,19 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, { rgap: o.textRgap, tgap: o.textTgap, bgap: o.textBgap, - text: o.text + text: o.text, }); - this.trigerButton = BI.createWidget({ + this.trigerButton = createWidget({ type: "bi.trigger_icon_button", - width: o.triggerWidth || o.height + width: o.triggerWidth || o.height, }); - BI.createWidget({ + createWidget({ element: this, type: "bi.horizontal_fill", columnSize: ["", "fill", ""], - ref: function (_ref) { - self.wrapper = _ref; + ref: _ref => { + this.wrapper = _ref; }, items: [{ el: { @@ -53,41 +59,39 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, { width: o.triggerWidth || o.height, iconCls: o.iconCls, invisible: !o.iconCls, - ref: function (_ref) { - self.icon = _ref; + ref: _ref => { + this.icon = _ref; }, iconHeight: o.iconHeight, iconWidth: o.iconWidth, - disableSelected: true - } + disableSelected: true, + }, }, { el: this.text, - lgap: BI.isEmptyString(o.iconCls) ? 5 : 0 + lgap: isEmptyString(o.iconCls) ? 5 : 0, }, { - el: this.trigerButton - }] + el: this.trigerButton, + }], }); - }, + } - setValue: function (value) { + setValue(value) { this.text.setValue(value); - }, + } - setIcon: function (iconCls) { - var o = this.options; + setIcon(iconCls) { this.icon.setIcon(iconCls); this.icon.setVisible(!!iconCls); - }, + } - setTextCls: function (cls) { - var o = this.options; - var oldCls = o.textCls; + setTextCls(cls) { + const o = this.options; + const oldCls = o.textCls; o.textCls = cls; this.text.element.removeClass(oldCls).addClass(cls); - }, + } - setText: function (text) { + setText(text) { this.text.setText(text); } -}); -BI.shortcut("bi.icon_text_trigger", BI.IconTextTrigger); +} diff --git a/src/case/trigger/trigger.icon.text.select.js b/src/case/trigger/trigger.icon.text.select.js index b0142b91e..0045972a4 100644 --- a/src/case/trigger/trigger.icon.text.select.js +++ b/src/case/trigger/trigger.icon.text.select.js @@ -1,23 +1,28 @@ +import { shortcut, extend, createWidget, isFunction, isArray, isNotNull, any, deepContains, Tree } from "@/core"; +import { Trigger } from "@/base"; + /** * Created by Windy on 2017/12/12. */ -BI.SelectIconTextTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class SelectIconTextTrigger extends Trigger { + static xtype = "bi.select_icon_text_trigger" - _defaultConfig: function () { - return BI.extend(BI.SelectIconTextTrigger.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-text-trigger", height: 24, iconHeight: null, iconWidth: null, - iconCls: "" + iconCls: "", }); - }, + } - _init: function () { - BI.SelectIconTextTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options; - var obj = this._digist(o.value, o.items); - this.trigger = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + const obj = this._digist(o.value, o.items); + this.trigger = createWidget({ type: "bi.icon_text_trigger", element: this, text: obj.text, @@ -32,49 +37,49 @@ BI.SelectIconTextTrigger = BI.inherit(BI.Trigger, { height: o.height, iconHeight: o.iconHeight, iconWidth: o.iconWidth, - iconWrapperWidth: o.iconWrapperWidth + iconWrapperWidth: o.iconWrapperWidth, }); - }, + } - _digist: function (vals, items) { - var o = this.options; - vals = BI.isArray(vals) ? vals : [vals]; - var result; - var formatItems = BI.Tree.transformToArrayFormat(items); - BI.any(formatItems, function (i, item) { - if (BI.deepContains(vals, item.value)) { + _digist(vals, items) { + const o = this.options; + vals = isArray(vals) ? vals : [vals]; + let result; + const formatItems = Tree.transformToArrayFormat(items); + any(formatItems, (i, item) => { + if (deepContains(vals, item.value)) { result = { text: item.text || item.value, - iconCls: item.iconCls + iconCls: item.iconCls, }; + return true; } }); - if (BI.isNotNull(result)) { + if (isNotNull(result)) { return { text: result.text, textCls: "", - iconCls: result.iconCls + iconCls: result.iconCls, }; } else { return { - text: BI.isFunction(o.text) ? o.text() : o.text, + text: isFunction(o.text) ? o.text() : o.text, textCls: "bi-water-mark", - iconCls: o.iconCls + iconCls: o.iconCls, }; } - }, + } - setValue: function (vals) { - var obj = this._digist(vals, this.options.items); + setValue(vals) { + const obj = this._digist(vals, this.options.items); this.trigger.setText(obj.text); this.trigger.setIcon(obj.iconCls); this.trigger.setTextCls(obj.textCls); - }, + } - populate: function (items) { + populate(items) { this.options.items = items; } -}); -BI.shortcut("bi.select_icon_text_trigger", BI.SelectIconTextTrigger); +} diff --git a/src/case/trigger/trigger.text.js b/src/case/trigger/trigger.text.js index 6e7273252..f4e15110d 100644 --- a/src/case/trigger/trigger.text.js +++ b/src/case/trigger/trigger.text.js @@ -1,41 +1,45 @@ +import { shortcut, isFunction, isKey, isNotEmptyString } from "@/core"; +import { Trigger } from "@/base"; + /** * 文字trigger * * Created by GUY on 2015/9/15. - * @class BI.TextTrigger - * @extends BI.Trigger + * @class TextTrigger + * @extends Trigger */ -BI.TextTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class TextTrigger extends Trigger { + static xtype = "bi.text_trigger" + + static EVENT_CLEAR = "EVENT_CLEAR" - props: function () { - var self = this; + props() { return { baseCls: "bi-text-trigger", height: 24, textHgap: 6, textCls: "", allowClear: false, - title: function () { - return self.text.getText(); - }, + title: () => this.text.getText(), defaultText: "", text: "", }; - }, + } - render: function () { - var self = this, o = this.options, c = this._const; + render() { + const o = this.options; - var text = this.getText(); + const text = this.getText(); - var defaultText = this.getDefaultText(); + const defaultText = this.getDefaultText(); - var label = { + const label = { type: "bi.label", - ref: function (_ref) { - self.text = _ref; + ref: _ref => { + this.text = _ref; }, - cls: `select-text-label ${o.textCls} ${!BI.isNotEmptyString(text) && BI.isNotEmptyString(defaultText) ? "bi-tips" : ""}`, + cls: `select-text-label ${o.textCls} ${!isNotEmptyString(text) && isNotEmptyString(defaultText) ? "bi-tips" : ""}`, textAlign: "left", height: o.height, text: text || o.defaultText, @@ -47,98 +51,93 @@ BI.TextTrigger = BI.inherit(BI.Trigger, { rgap: o.textRgap, tgap: o.textTgap, bgap: o.textBgap, - readonly: o.readonly + readonly: o.readonly, }; - var triggerButton = { + const triggerButton = { type: "bi.trigger_icon_button", - ref: function (_ref) { - self.triggerButton = _ref; + ref: _ref => { + this.triggerButton = _ref; }, - width: o.triggerWidth || o.height + width: o.triggerWidth || o.height, }; return ({ type: "bi.horizontal_fill", columnSize: ["fill", ""], - items: [ - { - el: label, - width: "fill" - }, { - el: o.allowClear ? { - type: "bi.vertical_adapt", - width: o.triggerWidth || o.height, - height: o.height, - horizontalAlign: "left", - scrollable: false, - items: [ - { - el: { - type: "bi.icon_button", - ref: function (_ref) { - self.clearBtn = _ref; - }, - cls: "close-h-font " + (o.allowClear ? "clear-button" : ""), - stopPropagation: true, - width: o.triggerWidth || o.height, - invisible: !BI.isNotEmptyString(o.text), - handler: function () { - self.fireEvent(BI.TextTrigger.EVENT_CLEAR); - }, - }, - }, { - el: triggerButton, - } - ] - } : triggerButton, - } - ] + items: [{ + el: label, + width: "fill", + }, { + el: o.allowClear ? { + type: "bi.vertical_adapt", + width: o.triggerWidth || o.height, + height: o.height, + horizontalAlign: "left", + scrollable: false, + items: [{ + el: { + type: "bi.icon_button", + ref: _ref => { + this.clearBtn = _ref; + }, + cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, + stopPropagation: true, + width: o.triggerWidth || o.height, + invisible: !isNotEmptyString(o.text), + handler: () => { + this.fireEvent(TextTrigger.EVENT_CLEAR); + }, + }, + }, { + el: triggerButton, + }], + } : triggerButton, + }], }); - }, + } - getText: function () { - var o = this.options; - return BI.isFunction(o.text) ? o.text() : o.text; - }, + getText() { + const o = this.options; + + return isFunction(o.text) ? o.text() : o.text; + } - getDefaultText: function () { - var o = this.options; - return BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - }, + getDefaultText() { + const o = this.options; + + return isFunction(o.defaultText) ? o.defaultText() : o.defaultText; + } - getTextor: function () { + getTextor() { return this.text; - }, + } - setTextCls: function (cls) { - var o = this.options; - var oldCls = o.textCls; + setTextCls(cls) { + const o = this.options; + const oldCls = o.textCls; o.textCls = cls; this.text.element.removeClass(oldCls).addClass(cls); - }, + } - setText: function (text) { + setText(text) { if (this.options.allowClear) { - this.clearBtn.setVisible(BI.isNotEmptyString(text)); + this.clearBtn.setVisible(isNotEmptyString(text)); } - if (BI.isKey(text)) { + if (isKey(text)) { this.text.setText(text); this.text.element.removeClass("bi-tips"); - } else if (BI.isKey(this.options.defaultText)) { + } else if (isKey(this.options.defaultText)) { this.text.setText(this.options.defaultText); this.text.element.addClass("bi-tips"); } else { this.text.setText(""); this.text.element.removeClass("bi-tips"); } - }, + } - setTipType: function (v) { + setTipType(v) { this.text.options.tipType = v; this.options.tipType = v; } -}); - -BI.TextTrigger.EVENT_CLEAR = "EVENT_CLEAR"; -BI.shortcut("bi.text_trigger", BI.TextTrigger); +} diff --git a/src/case/trigger/trigger.text.select.js b/src/case/trigger/trigger.text.select.js index 005ac241b..8094a424d 100644 --- a/src/case/trigger/trigger.text.select.js +++ b/src/case/trigger/trigger.text.select.js @@ -1,32 +1,40 @@ +import { shortcut, extend, emptyFn, createWidget, isFunction, isArray, Tree, each, contains, remove } from "@/core"; +import { Trigger } from "@/base"; +import { TextTrigger } from "./trigger.text"; + /** * 选择字段trigger * * Created by GUY on 2015/9/15. - * @class BI.SelectTextTrigger - * @extends BI.Trigger + * @class SelectTextTrigger + * @extends Trigger */ -BI.SelectTextTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class SelectTextTrigger extends Trigger { + static xtype = "bi.select_text_trigger" + + static EVENT_CLEAR = "EVENT_CLEAR" - _defaultConfig: function () { - return BI.extend(BI.SelectTextTrigger.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-text-trigger", height: 24, allowClear: false, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, defaultText: "", }); - }, + } - _init: function () { - BI.SelectTextTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options; - var text = this._digest(o.value, o.items); - this.trigger = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + const text = this._digest(o.value, o.items); + this.trigger = createWidget({ type: "bi.text_trigger", element: this, height: o.height, readonly: o.readonly, - text: text, + text, defaultText: o.defaultText, textHgap: o.textHgap, textVgap: o.textVgap, @@ -37,71 +45,67 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, { tipType: o.tipType, title: null, allowClear: o.allowClear, - listeners: [ - { - eventName: BI.TextTrigger.EVENT_CLEAR, - action: function () { - self.setText(""); - self.fireEvent(BI.SelectTextTrigger.EVENT_CLEAR); - } - } - ] + listeners: [{ + eventName: TextTrigger.EVENT_CLEAR, + action: () => { + this.setText(""); + this.fireEvent(SelectTextTrigger.EVENT_CLEAR); + }, + }], }); - }, + } - _digest: function (val, items) { - var o = this.options; + _digest(val, items) { + const o = this.options; - val = BI.isArray(val) ? val.slice() : [val]; + val = isArray(val) ? val.slice() : [val]; - var result = []; + const result = []; // 提升valueFormatter的优先级 - if (o.valueFormatter !== BI.emptyFn && BI.isFunction(o.valueFormatter)) { - BI.each(val, function (index, v) { + if (o.valueFormatter !== emptyFn && isFunction(o.valueFormatter)) { + each(val, (index, v) => { result.push(o.valueFormatter(v)); }); + return result.join(","); } - var formatItems = BI.Tree.transformToArrayFormat(items); - BI.each(formatItems, function (i, item) { - if (BI.contains(val, item.value) && !BI.contains(result, item.text || item.value)) { + const formatItems = Tree.transformToArrayFormat(items); + each(formatItems, (i, item) => { + if (contains(val, item.value) && !contains(result, item.text || item.value)) { result.push(item.text || item.value); - BI.remove(val, item.value); + remove(val, item.value); } }); if (result.length > 0 && val.length === 0) { return result.join(","); } else { - return BI.isFunction(o.text) ? o.text() : o.text; + return isFunction(o.text) ? o.text() : o.text; } - }, + } - setText: function (text) { + setText(text) { this.options.text = text; this.trigger.setText(text); - }, + } - setValue: function (val) { - var formatText = this._digest(val, this.options.items); + setValue(val) { + const formatText = this._digest(val, this.options.items); this.trigger.setText(formatText); - }, + } - setTipType: function (v) { + setTipType(v) { this.options.tipType = v; this.trigger.setTipType(v); - }, + } - getTextor: function () { + getTextor() { return this.trigger.getTextor(); - }, + } - populate: function (items) { + populate(items) { this.options.items = items; } -}); - -BI.SelectTextTrigger.EVENT_CLEAR = "EVENT_CLEAR"; -BI.shortcut("bi.select_text_trigger", BI.SelectTextTrigger); +} diff --git a/src/case/trigger/trigger.text.select.small.js b/src/case/trigger/trigger.text.select.small.js index adbd5603c..944ee1a51 100644 --- a/src/case/trigger/trigger.text.select.small.js +++ b/src/case/trigger/trigger.text.select.small.js @@ -1,26 +1,31 @@ +import { shortcut, extend, toPix, createWidget, isArray, deepContains, each, contains, Tree } from "@/core"; +import { Trigger } from "@/base"; + /** * 选择字段trigger小一号的 * - * @class BI.SmallSelectTextTrigger - * @extends BI.Trigger + * @class SmallSelectTextTrigger + * @extends Trigger */ -BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class SmallSelectTextTrigger extends Trigger { + static xtype = "bi.small_select_text_trigger" - _defaultConfig: function () { - return BI.extend(BI.SmallSelectTextTrigger.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-small-select-text-trigger bi-border", height: 20, }); - }, + } - _init: function () { - BI.SmallSelectTextTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options; - var obj = this._digest(o.value, o.items); - this.trigger = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + const obj = this._digest(o.value, o.items); + this.trigger = createWidget({ type: "bi.small_text_trigger", element: this, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), text: obj.text, cls: obj.cls, textHgap: o.textHgap, @@ -30,15 +35,15 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, { textTgap: o.textTgap, textBgap: o.textBgap, }); - }, + } - _digest: function(vals, items){ - var o = this.options; - vals = BI.isArray(vals) ? vals : [vals]; - var result = []; - var formatItems = BI.Tree.transformToArrayFormat(items); - BI.each(formatItems, function (i, item) { - if (BI.deepContains(vals, item.value) && !BI.contains(result, item.text || item.value)) { + _digest(vals, items) { + const o = this.options; + vals = isArray(vals) ? vals : [vals]; + const result = []; + const formatItems = Tree.transformToArrayFormat(items); + each(formatItems, (i, item) => { + if (deepContains(vals, item.value) && !contains(result, item.text || item.value)) { result.push(item.text || item.value); } }); @@ -46,24 +51,23 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, { if (result.length > 0) { return { cls: "", - text: result.join(",") - } + text: result.join(","), + }; } else { return { cls: "bi-water-mark", - text: o.text - } + text: o.text, + }; } - }, + } - setValue: function (vals) { - var formatValue = this._digest(vals, this.options.items); + setValue(vals) { + const formatValue = this._digest(vals, this.options.items); this.trigger.element.removeClass("bi-water-mark").addClass(formatValue.cls); this.trigger.setText(formatValue.text); - }, + } - populate: function (items) { + populate(items) { this.options.items = items; } -}); -BI.shortcut("bi.small_select_text_trigger", BI.SmallSelectTextTrigger); +} diff --git a/src/case/trigger/trigger.text.small.js b/src/case/trigger/trigger.text.small.js index 27c395a69..9269a4210 100644 --- a/src/case/trigger/trigger.text.small.js +++ b/src/case/trigger/trigger.text.small.js @@ -1,23 +1,30 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { Trigger } from "@/base"; + /** * 文字trigger(右边小三角小一号的) == * - * @class BI.SmallTextTrigger - * @extends BI.Trigger + * @class SmallTextTrigger + * @extends Trigger */ -BI.SmallTextTrigger = BI.inherit(BI.Trigger, { - _defaultConfig: function () { - var conf = BI.SmallTextTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-text-trigger", +@shortcut() +export class SmallTextTrigger extends Trigger { + static xtype = "bi.small_text_trigger" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-text-trigger`, height: 20, textHgap: 6, }); - }, + } - _init: function () { - BI.SmallTextTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this._const; - this.text = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.text = createWidget({ type: "bi.label", textAlign: "left", height: o.height, @@ -29,32 +36,29 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, { tgap: o.textTgap, bgap: o.textBgap, }); - this.trigerButton = BI.createWidget({ + this.trigerButton = createWidget({ type: "bi.trigger_icon_button", - width: o.triggerWidth || o.height + width: o.triggerWidth || o.height, }); - BI.createWidget({ + createWidget({ element: this, type: "bi.horizontal_fill", - items: [ - { - el: this.text, - width: "fill" - }, { - el: this.trigerButton, - width: "" - } - ] + items: [{ + el: this.text, + width: "fill", + }, { + el: this.trigerButton, + width: "", + }], }); - }, + } - setValue: function (value) { + setValue(value) { this.text.setValue(value); - }, + } - setText: function (text) { + setText(text) { this.text.setText(text); } -}); -BI.shortcut("bi.small_text_trigger", BI.SmallTextTrigger); +} From 0591f0ded9876dcd1ed46f59d12350488cd1621b Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 11 Jan 2023 11:38:55 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-14081=20refactor:=20case/loader?= =?UTF-8?q?=E3=80=81segment=E3=80=81toolbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 2 + src/case/index.js | 12 +- src/case/loader/index.js | 3 + src/case/loader/loader.lazy.js | 131 ++++----- src/case/loader/loader.list.js | 188 ++++++------ src/case/loader/sort.list.js | 171 +++++------ src/case/segment/button.segment.js | 49 ++-- src/case/segment/index.js | 2 + src/case/segment/segment.js | 77 ++--- src/case/toolbar/toolbar.multiselect.js | 134 +++++---- src/core/platform/web/dom.js | 367 ++++++++++++------------ src/core/utils/color.js | 3 + 12 files changed, 598 insertions(+), 541 deletions(-) create mode 100644 src/case/loader/index.js create mode 100644 src/case/segment/index.js diff --git a/es6.js b/es6.js index 2fa0181eb..005b6f512 100644 --- a/es6.js +++ b/es6.js @@ -104,6 +104,8 @@ collection.methods.forEach(el => { "each", "contains", "remove", + "createItems", + "makeArrayByArray", ]; target.forEach(t => { diff --git a/src/case/index.js b/src/case/index.js index 515a45107..40e8a73e4 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -3,6 +3,9 @@ import * as calendarItem from "./calendar"; import * as pager from "./pager"; import * as editor from "./editor"; import * as trigger from "./trigger"; +import * as loader from "./loader"; +import * as segment from "./segment"; +import { MultiSelectBar } from "./toolbar/toolbar.multiselect"; Object.assign(BI, { ...button, @@ -10,6 +13,9 @@ Object.assign(BI, { ...pager, ...editor, ...trigger, + ...loader, + ...segment, + MultiSelectBar, }); export * from "./button"; @@ -17,4 +23,8 @@ export * from "./calendar"; export * from "./pager"; export * from "./editor"; export * from "./trigger"; - +export * from "./loader"; +export * from "./segment"; +export { + MultiSelectBar +}; diff --git a/src/case/loader/index.js b/src/case/loader/index.js new file mode 100644 index 000000000..0fe9aa242 --- /dev/null +++ b/src/case/loader/index.js @@ -0,0 +1,3 @@ +export { LazyLoader } from "./loader.lazy"; +export { ListLoader } from "./loader.list"; +export { SortList } from "./sort.list"; diff --git a/src/case/loader/loader.lazy.js b/src/case/loader/loader.lazy.js index 339940077..54f983ee6 100644 --- a/src/case/loader/loader.lazy.js +++ b/src/case/loader/loader.lazy.js @@ -1,103 +1,106 @@ -/** - * Created by roy on 15/11/6. - */ -BI.LazyLoader = BI.inherit(BI.Widget, { - _const: { - PAGE: 100 - }, - _defaultConfig: function () { - return BI.extend(BI.LazyLoader.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core"; +import { Loader } from "@/base"; + +@shortcut() +export class LazyLoader extends Widget { + static xtype = "bi.lazy_loader" + + _const = { + PAGE: 100, + }; + + static EVENT_CHANGE = "EVENT_CHANGE" + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-lazy-loader", el: {}, - items: [] + items: [], }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.LazyLoader.superclass._init.apply(this, arguments); - var all = o.items.length; - this.loader = BI.createWidget({ + _init() { + const o = this.options; + super._init(...arguments); + const all = o.items.length; + this.loader = createWidget({ type: "bi.loader", element: this, // 下面是button_group的属性 el: o.el, - - itemsCreator: function (options, populate) { - populate(self._getNextItems(options)); + itemsCreator: (options, populate) => { + populate(this._getNextItems(options)); }, - hasNext: function (option) { - return option.count < all; - } + hasNext: option => option.count < all, }); - this.loader.on(BI.Loader.EVENT_CHANGE, function (obj) { - self.fireEvent(BI.LazyLoader.EVENT_CHANGE, obj); + this.loader.on(Loader.EVENT_CHANGE, obj => { + this.fireEvent(LazyLoader.EVENT_CHANGE, obj); }); - }, - _getNextItems: function (options) { - var self = this, o = this.options; - var lastNum = o.items.length - this._const.PAGE * (options.times - 1); - var lastItems = BI.takeRight(o.items, lastNum); - var nextItems = BI.take(lastItems, this._const.PAGE); + } + + _getNextItems(options) { + const o = this.options; + const lastNum = o.items.length - this._const.PAGE * (options.times - 1); + const lastItems = takeRight(o.items, lastNum); + const nextItems = take(lastItems, this._const.PAGE); + return nextItems; - }, + } - populate: function (items) { + populate(items) { this.loader.populate(items); - }, + } - addItems: function (items) { + addItems(items) { this.loader.addItems(items); - }, + } - empty: function () { + empty() { this.loader.empty(); - }, + } - setNotSelectedValue: function () { - this.loader.setNotSelectedValue.apply(this.loader, arguments); - }, + setNotSelectedValue() { + this.loader.setNotSelectedValue(...arguments); + } - getNotSelectedValue: function () { + getNotSelectedValue() { return this.loader.getNotSelectedValue(); - }, + } - setValue: function () { - this.loader.setValue.apply(this.loader, arguments); - }, + setValue() { + this.loader.setValue(...arguments); + } - getValue: function () { - return this.loader.getValue.apply(this.loader, arguments); - }, + getValue() { + return this.loader.getValue(...arguments); + } - getAllButtons: function () { + getAllButtons() { return this.loader.getAllButtons(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.loader.getAllLeaves(); - }, + } - getSelectedButtons: function () { + getSelectedButtons() { return this.loader.getSelectedButtons(); - }, + } - getNotSelectedButtons: function () { + getNotSelectedButtons() { return this.loader.getNotSelectedButtons(); - }, + } - getIndexByValue: function (value) { + getIndexByValue(value) { return this.loader.getIndexByValue(value); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.loader.getNodeById(id); - }, + } - getNodeByValue: function (value) { + getNodeByValue(value) { return this.loader.getNodeByValue(value); } -}); -BI.LazyLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.lazy_loader", BI.LazyLoader); \ No newline at end of file +} diff --git a/src/case/loader/loader.list.js b/src/case/loader/loader.list.js index aeb3ad959..a8aa011e3 100644 --- a/src/case/loader/loader.list.js +++ b/src/case/loader/loader.list.js @@ -1,105 +1,112 @@ +import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core"; + /** * 恶心的加载控件， 为解决排序问题引入的控件 * * Created by GUY on 2015/11/12. - * @class BI.ListLoader - * @extends BI.Widget + * @class ListLoader + * @extends Widget */ -BI.ListLoader = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.ListLoader.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-list-loader", +@shortcut() +export class ListLoader extends Widget { + static xtype = "bi.list_loader" - isDefaultInit: true, // 是否默认初始化数据 + static EVENT_CHANGE = "EVENT_CHANGE" + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-list-loader", + isDefaultInit: true, // 是否默认初始化数据 // 下面是button_group的属性 el: { - type: "bi.button_group" + type: "bi.button_group", }, - items: [], - itemsCreator: BI.emptyFn, - onLoaded: BI.emptyFn, - + itemsCreator: emptyFn, + onLoaded: emptyFn, // 下面是分页信息 count: false, next: {}, - hasNext: BI.emptyFn + hasNext: emptyFn, }); - }, + } - _nextLoad: function () { - var self = this, o = this.options; + _nextLoad() { + const o = this.options; this.next.setLoading(); - o.itemsCreator.apply(this, [{times: ++this.times}, function () { - self.next.setLoaded(); - self.addItems.apply(self, arguments); + o.itemsCreator.apply(this, [{ + times: ++this.times, + }, (...args) => { + this.next.setLoaded(); + this.addItems(...args); }]); - }, + } - _init: function () { - BI.ListLoader.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const o = this.options; if (o.itemsCreator === false) { o.next = false; } - this.button_group = BI.createWidget(o.el, { + this.button_group = createWidget(o.el, { type: "bi.button_group", element: this, chooseType: 0, items: o.items, behaviors: {}, layouts: [{ - type: "bi.vertical" - }] + type: "bi.vertical", + }], }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.ListLoader.EVENT_CHANGE, obj); + this.button_group.on(Controller.EVENT_CHANGE, (...args) => { + const [type, , obj] = args; + this.fireEvent(Controller.EVENT_CHANGE, ...args); + if (type === Events.CLICK) { + this.fireEvent(ListLoader.EVENT_CHANGE, obj); } }); if (o.next !== false) { - this.next = BI.createWidget(BI.extend({ - type: "bi.loading_bar" + this.next = createWidget(extend({ + type: "bi.loading_bar", }, o.next)); - this.next.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { - self._nextLoad(); + this.next.on(Controller.EVENT_CHANGE, type => { + if (type === Events.CLICK) { + this._nextLoad(); } }); } - BI.createWidget({ + createWidget({ type: "bi.vertical", element: this, - items: [this.next] + items: [this.next], }); - o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () { + o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () { this.populate(); }, this)); - if (BI.isNotEmptyArray(o.items)) { + if (isNotEmptyArray(o.items)) { this.populate(o.items); } - }, + } - hasNext: function () { - var o = this.options; - if (BI.isNumber(o.count)) { + hasNext() { + const o = this.options; + if (isNumber(o.count)) { return this.count < o.count; } + return !!o.hasNext.apply(this, [{ times: this.times, - count: this.count + count: this.count, }]); - }, + } - addItems: function (items) { + addItems(items) { this.count += items.length; - if (BI.isObject(this.next)) { + if (isObject(this.next)) { this.options.items = this.options.items.concat(items); if (this.hasNext()) { this.next.setLoaded(); @@ -107,90 +114,91 @@ BI.ListLoader = BI.inherit(BI.Widget, { this.next.setEnd(); } } - this.button_group.addItems.apply(this.button_group, arguments); + this.button_group.addItems(...arguments); this.next.element.appendTo(this.element); - }, + } - populate: function (items) { - var self = this, o = this.options; - if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) { - o.itemsCreator.apply(this, [{times: 1}, function () { - if (arguments.length === 0) { + populate(items) { + const o = this.options; + if (arguments.length === 0 && (isFunction(o.itemsCreator))) { + o.itemsCreator.apply(this, [{ + times: 1, + }, (...args) => { + if (args.length === 0) { throw new Error("参数不能为空"); } - self.populate.apply(self, arguments); + this.populate(...args); o.onLoaded(); }]); + return; } this.options.items = items; this.times = 1; this.count = 0; this.count += items.length; - if (BI.isObject(this.next)) { + if (isObject(this.next)) { if (this.hasNext()) { this.next.setLoaded(); } else { this.next.invisible(); } } - BI.DOM.hang([this.next]); - this.button_group.populate.apply(this.button_group, arguments); + DOM.hang([this.next]); + this.button_group.populate(...arguments); this.next.element.appendTo(this.element); - }, + } - empty: function () { - BI.DOM.hang([this.next]); + empty() { + DOM.hang([this.next]); this.button_group.empty(); this.next.element.appendTo(this.element); - BI.each([this.next], function (i, ob) { + each([this.next], (i, ob) => { ob && ob.setVisible(false); }); - }, + } - setNotSelectedValue: function () { - this.button_group.setNotSelectedValue.apply(this.button_group, arguments); - }, + setNotSelectedValue() { + this.button_group.setNotSelectedValue(...arguments); + } - getNotSelectedValue: function () { + getNotSelectedValue() { return this.button_group.getNotSelectedValue(); - }, + } - setValue: function () { - this.button_group.setValue.apply(this.button_group, arguments); - }, + setValue() { + this.button_group.setValue(...arguments); + } - getValue: function () { - return this.button_group.getValue.apply(this.button_group, arguments); - }, + getValue() { + return this.button_group.getValue(...arguments); + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.button_group.getAllLeaves(); - }, + } - getSelectedButtons: function () { + getSelectedButtons() { return this.button_group.getSelectedButtons(); - }, + } - getNotSelectedButtons: function () { + getNotSelectedButtons() { return this.button_group.getNotSelectedButtons(); - }, + } - getIndexByValue: function (value) { + getIndexByValue(value) { return this.button_group.getIndexByValue(value); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.button_group.getNodeById(id); - }, + } - getNodeByValue: function (value) { + getNodeByValue(value) { return this.button_group.getNodeByValue(value); } -}); -BI.ListLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.list_loader", BI.ListLoader); \ No newline at end of file +} diff --git a/src/case/loader/sort.list.js b/src/case/loader/sort.list.js index c4606a7cb..b3d147fe3 100644 --- a/src/case/loader/sort.list.js +++ b/src/case/loader/sort.list.js @@ -1,58 +1,61 @@ +import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core"; + /** * Created by GUY on 2016/4/29. * - * @class BI.SortList - * @extends BI.Widget + * @class SortList + * @extends Widget */ -BI.SortList = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.SortList.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-sort-list", +@shortcut() +export class SortList extends Widget { + static xtype = "bi.sort_list" - isDefaultInit: true, // 是否默认初始化数据 + static EVENT_CHANGE = "EVENT_CHANGE" + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-sort-list", + isDefaultInit: true, // 是否默认初始化数据 // 下面是button_group的属性 el: { - type: "bi.button_group" + type: "bi.button_group", }, - items: [], - itemsCreator: BI.emptyFn, - onLoaded: BI.emptyFn, - + itemsCreator: emptyFn, + onLoaded: emptyFn, // 下面是分页信息 count: false, next: {}, - hasNext: BI.emptyFn - + hasNext: emptyFn, // containment: this.element, // connectWith: ".bi-sort-list", }); - }, + } - _init: function () { - BI.SortList.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.loader = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.loader = createWidget({ type: "bi.list_loader", element: this, isDefaultInit: o.isDefaultInit, el: o.el, items: this._formatItems(o.items), - itemsCreator: function (op, callback) { - o.itemsCreator(op, function (items) { - callback(self._formatItems(items)); + itemsCreator (op, callback) { + o.itemsCreator(op, items => { + callback(this._formatItems(items)); }); }, onLoaded: o.onLoaded, count: o.count, next: o.next, - hasNext: o.hasNext + hasNext: o.hasNext, }); - this.loader.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.SortList.EVENT_CHANGE, value, obj); + this.loader.on(Controller.EVENT_CHANGE, (...args) => { + const [type, value, obj] = args; + this.fireEvent(Controller.EVENT_CHANGE, ...args); + if (type === Events.CLICK) { + this.fireEvent(SortList.EVENT_CHANGE, value, obj); } }); @@ -63,114 +66,116 @@ BI.SortList = BI.inherit(BI.Widget, { cursor: o.cursor || "drag", tolerance: o.tolerance || "intersect", placeholder: { - element: function ($currentItem) { - var holder = BI.createWidget({ + element ($currentItem) { + const holder = createWidget({ type: "bi.layout", cls: "bi-sortable-holder", - height: $currentItem.outerHeight() + height: $currentItem.outerHeight(), }); holder.element.css({ "margin-left": $currentItem.css("margin-left"), "margin-right": $currentItem.css("margin-right"), "margin-top": $currentItem.css("margin-top"), "margin-bottom": $currentItem.css("margin-bottom"), - margin: $currentItem.css("margin") + margin: $currentItem.css("margin"), }); + return holder.element; }, - update: function () { + update () { - } + }, }, - start: function (event, ui) { + start (event, ui) { }, - stop: function (event, ui) { - self.fireEvent(BI.SortList.EVENT_CHANGE); + stop: (event, ui) => { + this.fireEvent(SortList.EVENT_CHANGE); }, - over: function (event, ui) { + over (event, ui) { - } + }, }); - }, + } - _formatItems: function (items) { - BI.each(items, function (i, item) { - item = BI.stripEL(item); - item.cls = item.cls ? item.cls + " sort-item" : "sort-item"; + _formatItems(items) { + each(items, (i, item) => { + item = stripEL(item); + item.cls = item.cls ? `${item.cls} sort-item` : "sort-item"; item.attributes = { - sorted: item.value + sorted: item.value, }; }); + return items; - }, + } - hasNext: function () { + hasNext() { return this.loader.hasNext(); - }, + } - addItems: function (items) { + addItems(items) { this.loader.addItems(items); - }, + } - populate: function (items) { + populate(items) { if (items) { arguments[0] = this._formatItems(items); } - this.loader.populate.apply(this.loader, arguments); - }, + this.loader.populate(...arguments); + } - empty: function () { + empty() { this.loader.empty(); - }, + } - setNotSelectedValue: function () { - this.loader.setNotSelectedValue.apply(this.loader, arguments); - }, + setNotSelectedValue() { + this.loader.setNotSelectedValue(...arguments); + } - getNotSelectedValue: function () { + getNotSelectedValue() { return this.loader.getNotSelectedValue(); - }, + } - setValue: function () { - this.loader.setValue.apply(this.loader, arguments); - }, + setValue() { + this.loader.setValue(...arguments); + } - getValue: function () { + getValue() { return this.loader.getValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.loader.getAllButtons(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.loader.getAllLeaves(); - }, + } - getSelectedButtons: function () { + getSelectedButtons() { return this.loader.getSelectedButtons(); - }, + } - getNotSelectedButtons: function () { + getNotSelectedButtons() { return this.loader.getNotSelectedButtons(); - }, + } - getIndexByValue: function (value) { + getIndexByValue(value) { return this.loader.getIndexByValue(value); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.loader.getNodeById(id); - }, + } - getNodeByValue: function (value) { + getNodeByValue(value) { return this.loader.getNodeByValue(value); - }, + } - getSortedValues: function () { - return this.loader.element.sortable("toArray", {attribute: "sorted"}); + getSortedValues() { + return this.loader.element.sortable("toArray", { + attribute: "sorted", + }); } -}); -BI.SortList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.sort_list", BI.SortList); +} diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js index 05d0a3d83..9508a686c 100644 --- a/src/case/segment/button.segment.js +++ b/src/case/segment/button.segment.js @@ -1,43 +1,48 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { BasicButton } from "@/base"; + /** * 分段控件使用的button * * Created by GUY on 2015/9/7. - * @class BI.SegmentButton - * @extends BI.BasicButton + * @class SegmentButton + * @extends BasicButton */ -BI.SegmentButton = BI.inherit(BI.BasicButton, { +@shortcut() +export class SegmentButton extends BasicButton { + static xtype = "bi.segment_button" - _defaultConfig: function () { - var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select bi-card", + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`, shadow: true, readonly: true, - hgap: 5 + hgap: 5, }); - }, + } - _init: function () { - BI.SegmentButton.superclass._init.apply(this, arguments); - var opts = this.options, self = this; - this.text = BI.createWidget({ + _init() { + super._init(...arguments); + const opts = this.options; + this.text = createWidget({ type: "bi.label", element: this, textHeight: opts.height, whiteSpace: opts.whiteSpace, text: opts.text, value: opts.value, - hgap: opts.hgap + hgap: opts.hgap, }); - }, + } - setSelected: function () { - BI.SegmentButton.superclass.setSelected.apply(this, arguments); - }, + setSelected() { + super.setSelected(...arguments); + } - setText: function (text) { - BI.SegmentButton.superclass.setText.apply(this, arguments); + setText(text) { + super.setText(...arguments); this.text.setText(text); } -}); -BI.shortcut("bi.segment_button", BI.SegmentButton); +} diff --git a/src/case/segment/index.js b/src/case/segment/index.js new file mode 100644 index 000000000..59c90b855 --- /dev/null +++ b/src/case/segment/index.js @@ -0,0 +1,2 @@ +export { SegmentButton } from "./button.segment"; +export { Segment } from "./segment"; diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js index 2c1dda918..ac16eba20 100644 --- a/src/case/segment/segment.js +++ b/src/case/segment/segment.js @@ -1,72 +1,79 @@ +import { shortcut, Widget, extend, toPix, Controller, createWidget, createItems, makeArrayByArray } from "@/core"; +import { ButtonGroup } from "@/base"; + /** * 单选按钮组 * * Created by GUY on 2015/9/7. - * @class BI.Segment - * @extends BI.Widget + * @class Segment + * @extends Widget */ -BI.Segment = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class Segment extends Widget { + static xtype = "bi.segment" + + static EVENT_CHANGE = "EVENT_CHANGE" + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-segment", items: [], height: 24, }); - }, - _init: function () { - BI.Segment.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.buttonGroup = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const o = this.options; + this.buttonGroup = createWidget({ element: this, type: "bi.button_group", value: o.value, - items: [BI.createItems(o.items, { + items: [createItems(o.items, { type: "bi.segment_button", - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), whiteSpace: o.whiteSpace, })], layouts: [{ type: "bi.table", - columnSize: BI.makeArrayByArray(o.items, "fill"), + columnSize: makeArrayByArray(o.items, "fill"), }], }); - this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.buttonGroup.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.buttonGroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) { - self.fireEvent(BI.Segment.EVENT_CHANGE, value, obj); + this.buttonGroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { + this.fireEvent(Segment.EVENT_CHANGE, value, obj); }); - }, + } - _setEnable: function (enable) { - BI.Segment.superclass._setEnable.apply(this, arguments); + _setEnable(enable) { + super._setEnable(...arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); } else if (enable === false) { this.element.addClass("base-disabled disabled"); } - }, + } - setValue: function (v) { + setValue(v) { this.buttonGroup.setValue(v); - }, + } - setEnabledValue: function (v) { + setEnabledValue(v) { this.buttonGroup.setEnabledValue(v); - }, + } - getValue: function () { + getValue() { return this.buttonGroup.getValue(); - }, + } - populate: function (buttons) { - var o = this.options; - this.buttonGroup.populate([BI.createItems(buttons, { + populate(buttons) { + const o = this.options; + this.buttonGroup.populate([createItems(buttons, { type: "bi.segment_button", - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), whiteSpace: o.whiteSpace, })]); - }, -}); -BI.Segment.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.segment", BI.Segment); + } +} diff --git a/src/case/toolbar/toolbar.multiselect.js b/src/case/toolbar/toolbar.multiselect.js index f18677b85..f5fb1bf45 100644 --- a/src/case/toolbar/toolbar.multiselect.js +++ b/src/case/toolbar/toolbar.multiselect.js @@ -1,20 +1,29 @@ +import { shortcut, extend, emptyFn, i18nText, Controller, createWidget, Events } from "@/core"; +import { BasicButton, Checkbox } from "@/base"; +import { HalfIconButton } from "../button"; + /** * guy * 复选导航条 * Created by GUY on 2015/8/25. - * @class BI.MultiSelectBar - * @extends BI.BasicButton + * @class MultiSelectBar + * @extends BasicButton */ -BI.MultiSelectBar = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectBar.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiSelectBar extends BasicButton { + static xtype = "bi.multi_select_bar" + + static EVENT_CHANGE = "EVENT_CHANGE" + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multi-select-bar", height: 25, - text: BI.i18nText("BI-Select_All"), - isAllCheckedBySelectedValue: BI.emptyFn, + text: i18nText("BI-Select_All"), + isAllCheckedBySelectedValue: emptyFn, // 手动控制选中 disableSelected: true, - isHalfCheckedBySelectedValue: function (selectedValues) { + isHalfCheckedBySelectedValue (selectedValues) { return selectedValues.length > 0; }, halfSelected: false, @@ -22,46 +31,47 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, { iconWidth: 14, iconHeight: 14, }); - }, - _init: function () { - BI.MultiSelectBar.superclass._init.apply(this, arguments); - var self = this, o = this.options; - var isSelect = o.selected === true; - var isHalfSelect = !o.selected && o.halfSelected; - this.checkbox = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const o = this.options; + const isSelect = o.selected === true; + const isHalfSelect = !o.selected && o.halfSelected; + this.checkbox = createWidget({ type: "bi.checkbox", stopPropagation: true, - handler: function () { - self.setSelected(self.isSelected()); + handler: () => { + this.setSelected(this.isSelected()); }, selected: isSelect, invisible: isHalfSelect, iconWidth: o.iconWidth, - iconHeight: o.iconHeight + iconHeight: o.iconHeight, }); - this.half = BI.createWidget({ + this.half = createWidget({ type: "bi.half_icon_button", stopPropagation: true, - handler: function () { - self.setSelected(true); + handler: () => { + this.setSelected(true); }, invisible: isSelect || !isHalfSelect, iconWidth: o.iconWidth, - iconHeight: o.iconHeight + iconHeight: o.iconHeight, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self); + this.checkbox.on(Controller.EVENT_CHANGE, () => { + this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this); }); - this.checkbox.on(BI.Checkbox.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self); + this.checkbox.on(Checkbox.EVENT_CHANGE, () => { + this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this); }); - this.half.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self); + this.half.on(Controller.EVENT_CHANGE, () => { + this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this); }); - this.half.on(BI.HalfIconButton.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self); + this.half.on(HalfIconButton.EVENT_CHANGE, () => { + this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this); }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.label", textAlign: "left", whiteSpace: "nowrap", @@ -71,43 +81,43 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, { text: o.text, keyword: o.keyword, value: o.value, - py: o.py + py: o.py, }); - BI.createWidget({ + createWidget({ type: "bi.htape", element: this, items: [{ width: o.iconWrapperWidth, el: { type: "bi.center_adapt", - items: [this.checkbox, this.half] - } + items: [this.checkbox, this.half], + }, }, { - el: this.text - }] + el: this.text, + }], }); - }, + } - _setSelected: function (v) { + _setSelected(v) { this.checkbox.setSelected(!!v); - }, + } - // 自己手动控制选中 - beforeClick: function () { - var isHalf = this.isHalfSelected(), isSelected = this.isSelected(); + beforeClick() { + const isHalf = this.isHalfSelected(), + isSelected = this.isSelected(); if (isHalf === true) { this.setSelected(true); } else { this.setSelected(!isSelected); } - }, + } - setSelected: function (v) { + setSelected(v) { this.checkbox.setSelected(v); this.setHalfSelected(false); - }, + } - setHalfSelected: function (b) { + setHalfSelected(b) { this.halfSelected = !!b; if (b === true) { this.checkbox.setSelected(false); @@ -117,29 +127,27 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, { this.half.invisible(); this.checkbox.visible(); } - }, + } - isHalfSelected: function () { + isHalfSelected() { return !this.isSelected() && !!this.halfSelected; - }, + } - isSelected: function () { + isSelected() { return this.checkbox.isSelected(); - }, + } - setValue: function (selectedValues) { - BI.MultiSelectBar.superclass.setValue.apply(this, arguments); - var isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments); + setValue(selectedValues) { + super.setValue(...arguments); + const isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments); this.setSelected(isAllChecked); !isAllChecked && this.setHalfSelected(this.options.isHalfCheckedBySelectedValue.apply(this, arguments)); - }, + } - doClick: function () { - BI.MultiSelectBar.superclass.doClick.apply(this, arguments); - if(this.isValid()) { - this.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, this.isSelected(), this); + doClick() { + super.doClick(...arguments); + if (this.isValid()) { + this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this); } } -}); -BI.MultiSelectBar.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_bar", BI.MultiSelectBar); +} diff --git a/src/core/platform/web/dom.js b/src/core/platform/web/dom.js index 5835df64f..1fca2871b 100644 --- a/src/core/platform/web/dom.js +++ b/src/core/platform/web/dom.js @@ -502,207 +502,208 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig for (i = 0; i < directions.length; i++) { direct = directions[i]; switch (direct) { - case "left": - leftRight.push(direct); - break; - case "right": - leftRight.push(direct); - break; - case "top": - topBottom.push(direct); - break; - case "bottom": - topBottom.push(direct); - break; - case "innerLeft": - innerLeftRight.push(direct); - break; - case "innerRight": - innerLeftRight.push(direct); - break; - default: - break; + case "left": + leftRight.push(direct); + break; + case "right": + leftRight.push(direct); + break; + case "top": + topBottom.push(direct); + break; + case "bottom": + topBottom.push(direct); + break; + case "innerLeft": + innerLeftRight.push(direct); + break; + case "innerRight": + innerLeftRight.push(direct); + break; + default: + break; } } for (i = 0; i < directions.length; i++) { + let tW, tH; direct = directions[i]; switch (direct) { - case "left": - if (!isNeedAdaptHeight) { - var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; - if (isLeftSpaceEnough(combo, popup, tW)) { - left = getLeftPosition(combo, popup, tW, container).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); - } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); - } - pos.dir = `left,${pos.dir}`; - if (tbFirst) { - pos.change = "left"; - } - pos.left = left; - - return pos; + case "left": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; + if (isLeftSpaceEnough(combo, popup, tW)) { + left = getLeftPosition(combo, popup, tW, container).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); + } else { + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); } - } - lrFirst = true; - break; - case "right": - if (!isNeedAdaptHeight) { - var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; - if (isRightSpaceEnough(combo, popup, tW)) { - left = getRightPosition(combo, popup, tW, container).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); - } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); - } - pos.dir = `right,${pos.dir}`; - if (tbFirst) { - pos.change = "right"; - } - pos.left = left; - - return pos; + pos.dir = `left,${pos.dir}`; + if (tbFirst) { + pos.change = "left"; } + pos.left = left; + + return pos; } - lrFirst = true; - break; - case "top": - var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; - if (isTopSpaceEnough(combo, popup, tH)) { - top = getTopPosition(combo, popup, tH, container).top; - if (leftRight[0] === "right") { - pos = getLeftAlignPosition(combo, popup, tW, container); + } + lrFirst = true; + break; + case "right": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; + if (isRightSpaceEnough(combo, popup, tW)) { + left = getRightPosition(combo, popup, tW, container).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); } else { - pos = getRightAlignPosition(combo, popup, tW, container); + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); } - pos.dir = `top,${pos.dir}`; - if (lrFirst) { - pos.change = "top"; + pos.dir = `right,${pos.dir}`; + if (tbFirst) { + pos.change = "right"; } - pos.top = top; + pos.left = left; return pos; } - if (needAdaptHeight) { - isNeedAdaptHeight = true; + } + lrFirst = true; + break; + case "top": + tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; + if (isTopSpaceEnough(combo, popup, tH)) { + top = getTopPosition(combo, popup, tH, container).top; + if (leftRight[0] === "right") { + pos = getLeftAlignPosition(combo, popup, tW, container); + } else { + pos = getRightAlignPosition(combo, popup, tW, container); + } + pos.dir = `top,${pos.dir}`; + if (lrFirst) { + pos.change = "top"; } - tbFirst = true; - break; - case "bottom": - var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; - if (isBottomSpaceEnough(combo, popup, tH)) { - top = getBottomPosition(combo, popup, tH, container).top; - if (leftRight[0] === "right") { - pos = getLeftAlignPosition(combo, popup, tW, container); + pos.top = top; + + return pos; + } + if (needAdaptHeight) { + isNeedAdaptHeight = true; + } + tbFirst = true; + break; + case "bottom": + tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; + if (isBottomSpaceEnough(combo, popup, tH)) { + top = getBottomPosition(combo, popup, tH, container).top; + if (leftRight[0] === "right") { + pos = getLeftAlignPosition(combo, popup, tW, container); + } else { + pos = getRightAlignPosition(combo, popup, tW, container); + } + pos.dir = `bottom,${pos.dir}`; + if (lrFirst) { + pos.change = "bottom"; + } + pos.top = top; + + return pos; + } + if (needAdaptHeight) { + isNeedAdaptHeight = true; + } + tbFirst = true; + break; + case "innerLeft": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; + if (isInnerLeftSpaceEnough(combo, popup, tW)) { + left = getInnerLeftPosition(combo, popup, tW).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); } else { - pos = getRightAlignPosition(combo, popup, tW, container); + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); } - pos.dir = `bottom,${pos.dir}`; - if (lrFirst) { - pos.change = "bottom"; + pos.dir = `innerLeft,${pos.dir}`; + if (tbFirst) { + pos.change = "innerLeft"; } - pos.top = top; + pos.left = left; return pos; } - if (needAdaptHeight) { - isNeedAdaptHeight = true; - } - tbFirst = true; - break; - case "innerLeft": - if (!isNeedAdaptHeight) { - var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; - if (isInnerLeftSpaceEnough(combo, popup, tW)) { - left = getInnerLeftPosition(combo, popup, tW).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); - } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); - } - pos.dir = `innerLeft,${pos.dir}`; - if (tbFirst) { - pos.change = "innerLeft"; - } - pos.left = left; - - return pos; + } + lrFirst = true; + break; + case "innerRight": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; + if (isInnerRightSpaceEnough(combo, popup, tW)) { + left = getInnerRightPosition(combo, popup, tW).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); + } else { + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); } - } - lrFirst = true; - break; - case "innerRight": - if (!isNeedAdaptHeight) { - var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; - if (isInnerRightSpaceEnough(combo, popup, tW)) { - left = getInnerRightPosition(combo, popup, tW).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); - } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); - } - pos.dir = `innerLeft,${pos.dir}`; - if (tbFirst) { - pos.change = "innerRight"; - } - pos.left = left; - - return pos; + pos.dir = `innerLeft,${pos.dir}`; + if (tbFirst) { + pos.change = "innerRight"; } + pos.left = left; + + return pos; } - break; - default: - break; + } + break; + default: + break; } } // 此处为四个方向放不下时挑空间最大的方向去放置, 也就是说我设置了弹出方向为"bottom,left", // 最后发现实际弹出方向可能是"top,left"，那么此时外界获取popup的方向应该是"top,left" switch (directions[0]) { - case "left": - case "right": - if (isRightSpaceLarger(combo)) { - left = getRightAdaptPosition(combo, popup, extraWidth, container).left; - firstDir = "right"; - } else { - left = getLeftAdaptPosition(combo, popup, extraWidth, container).left; - firstDir = "left"; - } - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight); - pos.left = left; - pos.dir = `${firstDir},${pos.dir}`; - - return pos; - } - pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight); + case "left": + case "right": + if (isRightSpaceLarger(combo)) { + left = getRightAdaptPosition(combo, popup, extraWidth, container).left; + firstDir = "right"; + } else { + left = getLeftAdaptPosition(combo, popup, extraWidth, container).left; + firstDir = "left"; + } + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight); pos.left = left; pos.dir = `${firstDir},${pos.dir}`; return pos; - default : - if (isBottomSpaceLarger(combo)) { - top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; - firstDir = "bottom"; - } else { - top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; - firstDir = "top"; - } - if (leftRight[0] === "right") { - pos = getLeftAlignPosition(combo, popup, extraWidth, container); - pos.top = top; - pos.dir = `${firstDir},${pos.dir}`; - - return pos; - } - pos = getRightAlignPosition(combo, popup, extraWidth, container); + } + pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight); + pos.left = left; + pos.dir = `${firstDir},${pos.dir}`; + + return pos; + default : + if (isBottomSpaceLarger(combo)) { + top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; + firstDir = "bottom"; + } else { + top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; + firstDir = "top"; + } + if (leftRight[0] === "right") { + pos = getLeftAlignPosition(combo, popup, extraWidth, container); pos.top = top; pos.dir = `${firstDir},${pos.dir}`; return pos; + } + pos = getRightAlignPosition(combo, popup, extraWidth, container); + pos.top = top; + pos.dir = `${firstDir},${pos.dir}`; + + return pos; } } @@ -715,26 +716,26 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap popup.resetHeight && popup.resetHeight(maxHeight); const position = getComboPositionByDirections(combo, popup, extraWidth, extraHeight, needAdaptHeight, directions || ["bottom", "top", "right", "left"], positionRelativeElement); switch (offsetStyle) { - case "center": - if (position.change) { - var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); - position.top = p.top; - } else { - var p = getCenterAdaptPosition(combo, popup, positionRelativeElement); - position.left = p.left; - } - break; - case "middle": - if (position.change) { - var p = getCenterAdaptPosition(combo, popup, positionRelativeElement); - position.left = p.left; - } else { - var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); - position.top = p.top; - } - break; - default: - break; + case "center": + if (position.change) { + const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); + position.top = p.top; + } else { + const p = getCenterAdaptPosition(combo, popup, positionRelativeElement); + position.left = p.left; + } + break; + case "middle": + if (position.change) { + const p = getCenterAdaptPosition(combo, popup, positionRelativeElement); + position.left = p.left; + } else { + const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); + position.top = p.top; + } + break; + default: + break; } if (needAdaptHeight === true) { popup.resetHeight && popup.resetHeight(Math.min(viewportBounds.height - position.top - (positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0), maxHeight)); diff --git a/src/core/utils/color.js b/src/core/utils/color.js index 2eff91b95..a219a4f7d 100644 --- a/src/core/utils/color.js +++ b/src/core/utils/color.js @@ -1,4 +1,5 @@ import { parseInt, parseFloat, isNull, isKey } from "../2.base"; +import * as DOMUtils from "../platform/web/dom"; export const DOM = { isColor(color) { @@ -198,4 +199,6 @@ export const DOM = { Math.floor(255 * (bgColor * (1 - A)) + G * A)},${ Math.floor(255 * (bgColor * (1 - A)) + B * A)})`; }, + + ...DOMUtils, };