From 0591f0ded9876dcd1ed46f59d12350488cd1621b Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 11 Jan 2023 11:38:55 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14081=20refactor:=20case/loader=E3=80=81?= =?UTF-8?q?segment=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, };