From edc9e565bb98789e74bb40a5e12812ed09232f96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Wed, 11 Jan 2023 14:41:20 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14069=20refactor:=20case/layer=E3=80=81l?= =?UTF-8?q?inearsegment=E3=80=81list=20es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/index.js | 12 +- src/case/layer/index.js | 4 + src/case/layer/layer.multipopup.js | 54 +-- src/case/layer/layer.panel.js | 57 +-- src/case/layer/pane.list.js | 403 +++++++++++++----- src/case/layer/panel.js | 70 +-- .../linearsegment/button.linear.segment.js | 53 +-- src/case/linearsegment/index.js | 2 + src/case/linearsegment/linear.segment.js | 74 ++-- src/case/list/list.select.js | 249 +++++------ src/core/platform/web/dom.js | 8 +- 11 files changed, 606 insertions(+), 380 deletions(-) create mode 100644 src/case/layer/index.js create mode 100644 src/case/linearsegment/index.js diff --git a/src/case/index.js b/src/case/index.js index 40e8a73e4..11ee09f0b 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -6,6 +6,9 @@ import * as trigger from "./trigger"; import * as loader from "./loader"; import * as segment from "./segment"; import { MultiSelectBar } from "./toolbar/toolbar.multiselect"; +import * as layer from "./layer"; +import * as linearSegment from "./linearsegment"; +import { SelectList } from "./list/list.select"; Object.assign(BI, { ...button, @@ -16,6 +19,9 @@ Object.assign(BI, { ...loader, ...segment, MultiSelectBar, + ...layer, + ...linearSegment, + SelectList, }); export * from "./button"; @@ -25,6 +31,10 @@ export * from "./editor"; export * from "./trigger"; export * from "./loader"; export * from "./segment"; +export * from "./layer"; +export * from "./linearsegment"; export { - MultiSelectBar + MultiSelectBar, + SelectList }; + diff --git a/src/case/layer/index.js b/src/case/layer/index.js new file mode 100644 index 000000000..73a7ea575 --- /dev/null +++ b/src/case/layer/index.js @@ -0,0 +1,4 @@ +export { MultiPopupView } from "./layer.multipopup"; +export { PopupPanel } from "./layer.panel"; +export { ListPane } from "./pane.list"; +export { Panel } from "./panel"; diff --git a/src/case/layer/layer.multipopup.js b/src/case/layer/layer.multipopup.js index 5b69dabe3..d531f57c7 100644 --- a/src/case/layer/layer.multipopup.js +++ b/src/case/layer/layer.multipopup.js @@ -4,57 +4,57 @@ * @extends BI.Widget */ -BI.MultiPopupView = BI.inherit(BI.PopupView, { - - _defaultConfig: function () { - var conf = BI.MultiPopupView.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - _baseCls: (conf._baseCls || "") + " bi-multi-list-view", - buttons: [BI.i18nText("BI-Basic_OK")] +import { shortcut, extend, i18nText, each, createWidget, createItems } from "@/core"; +import { PopupView, ButtonGroup } from "@/base"; +@shortcut() +export class MultiPopupView extends PopupView { + static xtype = "bi.multi_popup_view"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; + _defaultConfig () { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + _baseCls: `${conf._baseCls || ""} bi-multi-list-view`, + buttons: [i18nText("BI-Basic_OK")], }); - }, + } - _createToolBar: function () { - var o = this.options, self = this; + _createToolBar () { + const o = this.options; if (o.buttons.length === 0) { return; } - var text = []; // 构造[{text:content},……] - BI.each(o.buttons, function (idx, item) { + const text = []; // 构造[{text:content},……] + each(o.buttons, (idx, item) => { text.push({ text: item, - value: idx + value: idx, }); }); - this.buttongroup = BI.createWidget({ + this.buttongroup = createWidget({ type: "bi.button_group", cls: "list-view-toolbar bi-high-light bi-split-top", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - items: BI.createItems(text, { + items: createItems(text, { type: "bi.text_button", once: false, shadow: true, - isShadowShowingOnSelected: true + isShadowShowingOnSelected: true, }), layouts: [{ type: "bi.center", hgap: 0, - vgap: 0 - }] + vgap: 0, + }], }); - this.buttongroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) { - self.fireEvent(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, value, obj); + this.buttongroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { + this.fireEvent(MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, value, obj); }); return this.buttongroup; } - -}); - -BI.MultiPopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; - -BI.shortcut("bi.multi_popup_view", BI.MultiPopupView); +} diff --git a/src/case/layer/layer.panel.js b/src/case/layer/layer.panel.js index c136cc0e9..cc5701e61 100644 --- a/src/case/layer/layer.panel.js +++ b/src/case/layer/layer.panel.js @@ -4,29 +4,38 @@ * @extends BI.MultiPopupView */ -BI.PopupPanel = BI.inherit(BI.MultiPopupView, { - - _defaultConfig: function () { - var conf = BI.PopupPanel.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-popup-panel", - title: "" +import { shortcut, extend, createWidget } from "@/core"; +import { IconButton } from "@/base"; +import { MultiPopupView } from "./layer.multipopup"; +@shortcut() +export class PopupPanel extends MultiPopupView { + static xtype = "bi.popup_panel"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLOSE = "EVENT_CLOSE"; + static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; + _defaultConfig () { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-popup-panel`, + title: "", }); - }, + } - _createTool: function () { - var self = this, o = this.options; - var close = BI.createWidget({ + _createTool () { + const o = this.options; + const close = createWidget({ type: "bi.icon_button", cls: "close-h-font", width: 25, - height: 25 + height: 25, }); - close.on(BI.IconButton.EVENT_CHANGE, function () { - self.setVisible(false); - self.fireEvent(BI.PopupPanel.EVENT_CLOSE); + close.on(IconButton.EVENT_CHANGE, () => { + this.setVisible(false); + this.fireEvent(PopupPanel.EVENT_CLOSE); }); - return BI.createWidget({ + + return createWidget({ type: "bi.htape", cls: "popup-panel-title bi-header-background", height: 25, @@ -36,18 +45,12 @@ BI.PopupPanel = BI.inherit(BI.MultiPopupView, { textAlign: "left", text: o.title, height: 25, - lgap: 10 - } + lgap: 10, + }, }, { el: close, - width: 25 - }] + width: 25, + }], }); } -}); - -BI.PopupPanel.EVENT_CHANGE = "EVENT_CHANGE"; -BI.PopupPanel.EVENT_CLOSE = "EVENT_CLOSE"; -BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; - -BI.shortcut("bi.popup_panel", BI.PopupPanel); +} diff --git a/src/case/layer/pane.list.js b/src/case/layer/pane.list.js index d4b774d00..21d9ebeb7 100644 --- a/src/case/layer/pane.list.js +++ b/src/case/layer/pane.list.js @@ -5,14 +5,19 @@ * @class BI.ListPane * @extends BI.Pane */ -BI.ListPane = BI.inherit(BI.Pane, { - - _defaultConfig: function () { - var conf = BI.ListPane.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-list-pane", +import { shortcut, extend, each, createWidget, emptyFn, nextTick, concat, get, Controller, Events, LogicFactory, Direction, isNull, removeAt, isFunction, isNotEmptyString, isEmptyArray } from "@/core"; +import { Pane, ButtonGroup } from "@/base"; +@shortcut() +export class ListPane extends Pane { + static xtype = "bi.list_pane"; + static EVENT_CHANGE = "EVENT_CHANGE"; + _defaultConfig () { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-list-pane`, logic: { - dynamic: true + dynamic: true, }, lgap: 0, rgap: 0, @@ -21,181 +26,373 @@ BI.ListPane = BI.inherit(BI.Pane, { vgap: 0, hgap: 0, items: [], - itemsCreator: BI.emptyFn, - hasNext: BI.emptyFn, - onLoaded: BI.emptyFn, + itemsCreator: emptyFn, + hasNext: emptyFn, + onLoaded: emptyFn, el: { - type: "bi.button_group" - } + type: "bi.button_group", + }, }); - }, - _init: function () { - BI.ListPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; - - this.button_group = BI.createWidget(o.el, { + } + _init () { + super._init(...arguments); + const o = this.options; + this.button_group = createWidget(o.el, { type: "bi.button_group", - chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, + chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, behaviors: {}, items: o.items, value: o.value, - itemsCreator: function (op, calback) { + itemsCreator: (op, callback) => { if (op.times === 1) { - self.empty(); - BI.nextTick(function () { - self.loading(); + this.empty(); + nextTick(() => { + this.loading(); }); } - o.itemsCreator(op, function () { - calback.apply(self, arguments); - o.items = BI.concat(o.items, BI.get(arguments, [0], [])); + o.itemsCreator(op, (...args) => { + callback(...args); + o.items = concat(o.items, get(...args, [0], [])); if (op.times === 1) { - o.items = BI.get(arguments, [0], []); - BI.nextTick(function () { - self.loaded(); + o.items = get(...args, [0], []); + nextTick(() => { + this.loaded(); // callback可能在loading之前执行, check保证显示正确 - self.check(); + this.check(); }); } }); }, hasNext: o.hasNext, 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.ListPane.EVENT_CHANGE, value, obj); + this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); + if (type === Events.CLICK) { + this.fireEvent(ListPane.EVENT_CHANGE, value, obj); } }); this.check(); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({ + createWidget(extend({ + element: this, + }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({ scrolly: true, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, bgap: o.bgap, vgap: o.vgap, - hgap: o.hgap + hgap: o.hgap, }, o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group) + items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group), })))); - }, + } - hasPrev: function () { + hasPrev () { return this.button_group.hasPrev && this.button_group.hasPrev(); - }, + } - hasNext: function () { + hasNext () { return this.button_group.hasNext && this.button_group.hasNext(); - }, + } - prependItems: function (items) { + prependItems (items) { this.options.items = items.concat(this.options.items); - this.button_group.prependItems.apply(this.button_group, arguments); + this.button_group.prependItems(...arguments); this.check(); - }, + } - addItems: function (items) { + addItems (items) { this.options.items = this.options.items.concat(items); - this.button_group.addItems.apply(this.button_group, arguments); + this.button_group.addItems(...arguments); this.check(); - }, + } - removeItemAt: function (indexes) { - indexes = BI.isNull(indexes) ? [] : indexes; - BI.removeAt(this.options.items, indexes); - this.button_group.removeItemAt.apply(this.button_group, arguments); + removeItemAt (indexes) { + indexes = isNull(indexes) ? [] : indexes; + removeAt(this.options.items, indexes); + this.button_group.removeItemAt(...arguments); this.check(); - }, + } - populate: function (items) { - var self = this, o = this.options; - if (arguments.length === 0 && (BI.isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法 - this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, function () { - if (arguments.length === 0) { + populate (items) { + const o = this.options; + if (arguments.length === 0 && (isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法 + this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, (...args) => { + if (args.length === 0) { throw new Error("参数不能为空"); } - self.populate.apply(self, arguments); + this.populate(...args); }]); + return; } - var context = BI.get(arguments, [2], {}); - var tipText = context.tipText || ''; - if (BI.isNotEmptyString(tipText)) { - BI.ListPane.superclass.populate.apply(this, []); + const context = get(arguments, [2], {}); + const tipText = context.tipText || ""; + if (isNotEmptyString(tipText)) { + super.populate.apply(this, []); this.setTipText(tipText); } else { - BI.ListPane.superclass.populate.apply(this, arguments); - this.button_group.populate.apply(this.button_group, arguments); - BI.isEmptyArray(BI.get(arguments, [0], [])) && this.setTipText(o.tipText); + super.populate(...arguments); + this.button_group.populate(...arguments); + isEmptyArray(get(arguments, [0], [])) && this.setTipText(o.tipText); } - }, + } - empty: function () { + empty () { this.button_group.empty(); - }, + } - 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); + } - setAllSelected: function (v) { + setAllSelected (v) { if (this.button_group.setAllSelected) { this.button_group.setAllSelected(v); } else { - BI.each(this.getAllButtons(), function (i, btn) { + each(this.getAllButtons(), (i, btn) => { (btn.setSelected || btn.setAllSelected).apply(btn, [v]); }); } - }, + } - 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.ListPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.list_pane", BI.ListPane); +} +// BI.ListPane = BI.inherit(BI.Pane, { + +// _defaultConfig: function () { +// var conf = BI.ListPane.superclass._defaultConfig.apply(this, arguments); +// return BI.extend(conf, { +// baseCls: (conf.baseCls || "") + " bi-list-pane", +// logic: { +// dynamic: true +// }, +// lgap: 0, +// rgap: 0, +// tgap: 0, +// bgap: 0, +// vgap: 0, +// hgap: 0, +// items: [], +// itemsCreator: BI.emptyFn, +// hasNext: BI.emptyFn, +// onLoaded: BI.emptyFn, +// el: { +// type: "bi.button_group" +// } +// }); +// }, +// _init: function () { +// BI.ListPane.superclass._init.apply(this, arguments); +// var self = this, o = this.options; + +// this.button_group = BI.createWidget(o.el, { +// type: "bi.button_group", +// chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, +// behaviors: {}, +// items: o.items, +// value: o.value, +// itemsCreator: function (op, calback) { +// if (op.times === 1) { +// self.empty(); +// BI.nextTick(function () { +// self.loading(); +// }); +// } +// o.itemsCreator(op, function () { +// calback.apply(self, arguments); +// o.items = BI.concat(o.items, BI.get(arguments, [0], [])); +// if (op.times === 1) { +// o.items = BI.get(arguments, [0], []); +// BI.nextTick(function () { +// self.loaded(); +// // callback可能在loading之前执行, check保证显示正确 +// self.check(); +// }); +// } +// }); +// }, +// hasNext: o.hasNext, +// layouts: [{ +// 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.ListPane.EVENT_CHANGE, value, obj); +// } +// }); +// this.check(); + +// BI.createWidget(BI.extend({ +// element: this +// }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({ +// scrolly: true, +// lgap: o.lgap, +// rgap: o.rgap, +// tgap: o.tgap, +// bgap: o.bgap, +// vgap: o.vgap, +// hgap: o.hgap +// }, o.logic, { +// items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group) +// })))); +// }, + +// hasPrev: function () { +// return this.button_group.hasPrev && this.button_group.hasPrev(); +// }, + +// hasNext: function () { +// return this.button_group.hasNext && this.button_group.hasNext(); +// }, + +// prependItems: function (items) { +// this.options.items = items.concat(this.options.items); +// this.button_group.prependItems.apply(this.button_group, arguments); +// this.check(); +// }, + +// addItems: function (items) { +// this.options.items = this.options.items.concat(items); +// this.button_group.addItems.apply(this.button_group, arguments); +// this.check(); +// }, + +// removeItemAt: function (indexes) { +// indexes = BI.isNull(indexes) ? [] : indexes; +// BI.removeAt(this.options.items, indexes); +// this.button_group.removeItemAt.apply(this.button_group, arguments); +// this.check(); +// }, + +// populate: function (items) { +// var self = this, o = this.options; +// if (arguments.length === 0 && (BI.isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法 +// this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, function () { +// if (arguments.length === 0) { +// throw new Error("参数不能为空"); +// } +// self.populate.apply(self, arguments); +// }]); +// return; +// } + +// var context = BI.get(arguments, [2], {}); +// var tipText = context.tipText || ''; +// if (BI.isNotEmptyString(tipText)) { +// BI.ListPane.superclass.populate.apply(this, []); +// this.setTipText(tipText); +// } else { +// BI.ListPane.superclass.populate.apply(this, arguments); +// this.button_group.populate.apply(this.button_group, arguments); +// BI.isEmptyArray(BI.get(arguments, [0], [])) && this.setTipText(o.tipText); +// } +// }, + +// empty: function () { +// this.button_group.empty(); +// }, + +// setNotSelectedValue: function () { +// this.button_group.setNotSelectedValue.apply(this.button_group, arguments); +// }, + +// getNotSelectedValue: function () { +// return this.button_group.getNotSelectedValue(); +// }, + +// setValue: function () { +// this.button_group.setValue.apply(this.button_group, arguments); +// }, + +// setAllSelected: function (v) { +// if (this.button_group.setAllSelected) { +// this.button_group.setAllSelected(v); +// } else { +// BI.each(this.getAllButtons(), function (i, btn) { +// (btn.setSelected || btn.setAllSelected).apply(btn, [v]); +// }); +// } +// }, + +// getValue: function () { +// return this.button_group.getValue.apply(this.button_group, arguments); +// }, + +// getAllButtons: function () { +// return this.button_group.getAllButtons(); +// }, + +// getAllLeaves: function () { +// return this.button_group.getAllLeaves(); +// }, + +// getSelectedButtons: function () { +// return this.button_group.getSelectedButtons(); +// }, + +// getNotSelectedButtons: function () { +// return this.button_group.getNotSelectedButtons(); +// }, + +// getIndexByValue: function (value) { +// return this.button_group.getIndexByValue(value); +// }, + +// getNodeById: function (id) { +// return this.button_group.getNodeById(id); +// }, + +// getNodeByValue: function (value) { +// return this.button_group.getNodeByValue(value); +// } +// }); +// BI.ListPane.EVENT_CHANGE = "EVENT_CHANGE"; +// BI.shortcut("bi.list_pane", BI.ListPane); diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js index 4ec115b51..51bd4fc50 100644 --- a/src/case/layer/panel.js +++ b/src/case/layer/panel.js @@ -1,11 +1,18 @@ -/** - * 带有标题栏的pane - * @class BI.Panel - * @extends BI.Widget - */ -BI.Panel = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Panel.superclass._defaultConfig.apply(this, arguments), { + +import { shortcut, Widget, extend, toPix, Controller, createWidget } from "@/core"; +import { ButtonGroup } from "@/base"; + +@shortcut() +export class Panel extends Widget { + static xtype = "bi.panel" + + + + static EVENT_CHANGE = "EVENT_CHANGE" + + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-panel bi-border", title: "", titleHeight: 30, @@ -15,62 +22,59 @@ BI.Panel = BI.inherit(BI.Widget, { // dynamic: false // } }); - }, + } - render: function () { + render() { return { type: "bi.vertical_fill", rowSize: ["", "fill"], - items: [this._createTitle(), this.options.el] + items: [this._createTitle(), this.options.el], }; - }, + } - _createTitle: function () { - var self = this, o = this.options; - this.text = BI.createWidget({ + _createTitle() { + const o = this.options; + this.text = createWidget({ type: "bi.label", cls: "panel-title-text", text: o.title, - height: o.titleHeight + height: o.titleHeight, }); - this.button_group = BI.createWidget({ + this.button_group = createWidget({ type: "bi.button_group", items: o.titleButtons, layouts: [{ type: "bi.center_adapt", - lgap: 10 - }] + lgap: 10, + }], }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, () => { + this.fireEvent(Controller.EVENT_CHANGE, ...arguments); }); - this.button_group.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) { - self.fireEvent(BI.Panel.EVENT_CHANGE, value, obj); + this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { + this.fireEvent(Panel.EVENT_CHANGE, value, obj); }); return { // el: { type: "bi.left_right_vertical_adapt", cls: "panel-title bi-header-background bi-border-bottom", - height: BI.toPix(o.titleHeight, 1), + height: toPix(o.titleHeight, 1), items: { left: [this.text], - right: [this.button_group] + right: [this.button_group], }, lhgap: 10, - rhgap: 10 + rhgap: 10, // }, - // height: BI.toPix(o.titleHeight, 1) + // height: toPix(o.titleHeight, 1) }; - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setValue(title); } -}); -BI.Panel.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.panel", BI.Panel); +} diff --git a/src/case/linearsegment/button.linear.segment.js b/src/case/linearsegment/button.linear.segment.js index c9954925c..11c2b20b5 100644 --- a/src/case/linearsegment/button.linear.segment.js +++ b/src/case/linearsegment/button.linear.segment.js @@ -1,26 +1,28 @@ -BI.LinearSegmentButton = BI.inherit(BI.BasicButton, { - props: { - extraCls: "bi-line-segment-button bi-list-item-effect", - once: true, - readonly: true, - hgap: 10, - height: 24 - }, +import { shortcut, toPix } from "@/core"; +import { BasicButton } from "@/base"; - render: function () { - var self = this, o = this.options; +@shortcut() +export class LinearSegmentButton extends BasicButton { + static xtype = "bi.linear_segment_button" + + props = { extraCls:"bi-line-segment-button bi-list-item-effect", once:true, readonly:true, hgap:10, height:24 }; + + + + render () { + const o = this.options; return [{ type: "bi.label", text: o.text, height: o.height, - textHeight: BI.toPix(o.height, 2), + textHeight: toPix(o.height, 2), value: o.value, hgap: o.hgap, - ref: function () { - self.text = this; - } + ref : _ref => { + this.text = _ref; + }, }, { type: "bi.absolute", items: [{ @@ -28,28 +30,27 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, { type: "bi.layout", cls: "line-segment-button-line", height: 2, - ref: function () { - self.line = this; - } + ref : _ref => { + this.line = _ref; + }, }, left: 0, right: 0, - bottom: 0 - }] + bottom: 0, + }], }]; - }, + } - setSelected: function (v) { - BI.LinearSegmentButton.superclass.setSelected.apply(this, arguments); + setSelected (v) { + super.setSelected(...arguments); if (v) { this.line.element.addClass("bi-high-light-background"); } else { this.line.element.removeClass("bi-high-light-background"); } - }, + } - setText: function (text) { + setText (text) { this.text.setText(text); } -}); -BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton); +} diff --git a/src/case/linearsegment/index.js b/src/case/linearsegment/index.js new file mode 100644 index 000000000..bf437ca2b --- /dev/null +++ b/src/case/linearsegment/index.js @@ -0,0 +1,2 @@ +export { LinearSegmentButton } from "./button.linear.segment"; +export { LinearSegment } from "./linear.segment"; diff --git a/src/case/linearsegment/linear.segment.js b/src/case/linearsegment/linear.segment.js index 41d282263..b34771c3b 100644 --- a/src/case/linearsegment/linear.segment.js +++ b/src/case/linearsegment/linear.segment.js @@ -1,60 +1,62 @@ -BI.LinearSegment = BI.inherit(BI.Widget, { - props: { - baseCls: "bi-linear-segment", - items: [], - height: 30 - }, +import { shortcut, Widget, createItems, makeArrayByArray } from "@/core"; - render: function () { - var self = this, o = this.options; +@shortcut() +export class LinearSegment extends Widget { + static xtype = "bi.linear_segment" + + props = { baseCls:"bi-linear-segment", items:[], height:30 }; + + + + render () { + const o = this.options; + return { type: "bi.button_group", - items: [BI.createItems(o.items, { + items: [createItems(o.items, { type: "bi.linear_segment_button", - height: o.height + height: o.height, })], layouts: [{ type: "bi.table", - columnSize: BI.makeArrayByArray(o.items, "fill"), + columnSize: makeArrayByArray(o.items, "fill"), }], value: o.value, listeners: [{ eventName: "__EVENT_CHANGE__", - action: function () { - self.fireEvent("__EVENT_CHANGE__", arguments); - } + action () { + this.fireEvent("__EVENT_CHANGE__", arguments); + }, }, { eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } + action () { + this.fireEvent("EVENT_CHANGE"); + }, }], - ref: function () { - self.buttonGroup = this; - } + ref: _ref => { + this.buttonGroup = _ref; + }, }; - }, + } - 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.linear_segment_button", - height: o.height - })]) - }, -}); -BI.shortcut("bi.linear_segment", BI.LinearSegment); + height: o.height, + })]); + } +} diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js index dfb3d7c1a..a6fb459db 100644 --- a/src/case/list/list.select.js +++ b/src/case/list/list.select.js @@ -1,100 +1,105 @@ -/** - * 选择列表 - * - * Created by GUY on 2015/11/1. - * @class BI.SelectList - * @extends BI.Widget - */ -BI.SelectList = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SelectList.superclass._defaultConfig.apply(this, arguments), { +/* eslint-disable no-mixed-spaces-and-tabs */ + +import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, isNotNull, isEmptyString, isEmptyArray, Direction, get, LogicFactory, each, pixFormat } from "@/core"; +import { ButtonGroup } from "@/base"; +@shortcut() +export class SelectList extends Widget { + static xtype = "bi.select_list"; + + + + static EVENT_CHANGE = "EVENT_CHANGE"; + + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-list", - direction: BI.Direction.Top, // toolbar的位置 + direction: Direction.Top, // toolbar的位置 logic: { - dynamic: true + dynamic: true, }, items: [], - itemsCreator: BI.emptyFn, - hasNext: BI.emptyFn, - onLoaded: BI.emptyFn, + itemsCreator: emptyFn, + hasNext: emptyFn, + onLoaded: emptyFn, toolbar: { type: "bi.multi_select_bar", - iconWrapperWidth: 36 + iconWrapperWidth: 36, }, el: { - type: "bi.list_pane" - } + type: "bi.list_pane", + }, }); - }, - _init: function () { - BI.SelectList.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; // 全选 - this.toolbar = BI.createWidget(o.toolbar); + this.toolbar = createWidget(o.toolbar); this.allSelected = false; - this.toolbar.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.allSelected = this.isSelected(); - if (type === BI.Events.CLICK) { - self.setAllSelected(self.allSelected); - self.fireEvent(BI.SelectList.EVENT_CHANGE, value, obj); + this.toolbar.on(Controller.EVENT_CHANGE, (type, value, obj) => { + this.allSelected = this.toolbar.isSelected(); + if (type === Events.CLICK) { + this.setAllSelected(this.allSelected); + this.fireEvent(SelectList.EVENT_CHANGE, value, obj); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.list = BI.createWidget(o.el, { + this.list = createWidget(o.el, { type: "bi.list_pane", items: o.items, - itemsCreator: function (op, callback) { - op.times === 1 && self.toolbar.setVisible(false); - o.itemsCreator(op, function (items, keywords, context) { - callback.apply(self, arguments); + itemsCreator(op, callback) { + op.times === 1 && this.toolbar.setVisible(false); + o.itemsCreator(op, (items, keywords, context, ...args) => { + callback(items, keywords, context, ...args); if (op.times === 1) { - var tipText = BI.get(context, 'tipText', ''); - var visible = BI.isEmptyString(tipText) && items && items.length > 0; - self.toolbar.setVisible(visible); - self.toolbar.setEnable(self.isEnabled() && visible); + const tipText = get(context, "tipText", ""); + const visible = isEmptyString(tipText) && items && items.length > 0; + this.toolbar.setVisible(visible); + this.toolbar.setEnable(this.isEnabled() && visible); } - self._checkAllSelected(); + this._checkAllSelected(); }); }, onLoaded: o.onLoaded, - hasNext: o.hasNext + hasNext: o.hasNext, }); - this.list.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - if (type === BI.Events.CLICK) { - self._checkAllSelected(); - self.fireEvent(BI.SelectList.EVENT_CHANGE, value, obj); + this.list.on(Controller.EVENT_CHANGE, (type, value, obj) => { + if (type === Events.CLICK) { + this._checkAllSelected(); + this.fireEvent(SelectList.EVENT_CHANGE, value, obj); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, arguments); }); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({ - scrolly: true + createWidget(extend({ + element: this, + }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(o.direction), extend({ + scrolly: true, }, o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list) + items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list), })))); if (o.items.length <= 0) { this.toolbar.setVisible(false); this.toolbar.setEnable(false); } - if(BI.isNotNull(o.value)){ + if (isNotNull(o.value)) { this.setValue(o.value); } - }, + } - _checkAllSelected: function () { - var selectLength = this.list.getValue().length; - var notSelectLength = this.getAllLeaves().length - selectLength; - var hasNext = this.list.hasNext(); - var isAlreadyAllSelected = this.toolbar.isSelected(); - var isHalf = selectLength > 0 && notSelectLength > 0; - var allSelected = selectLength > 0 && notSelectLength <= 0 && (!hasNext || isAlreadyAllSelected); + _checkAllSelected() { + const selectLength = this.list.getValue().length; + const notSelectLength = this.getAllLeaves().length - selectLength; + const hasNext = this.list.hasNext(); + const isAlreadyAllSelected = this.toolbar.isSelected(); + let isHalf = selectLength > 0 && notSelectLength > 0; + let allSelected = selectLength > 0 && notSelectLength <= 0 && (!hasNext || isAlreadyAllSelected); if (this.isAllSelected() === false) { hasNext && (isHalf = selectLength > 0); @@ -110,127 +115,125 @@ BI.SelectList = BI.inherit(BI.Widget, { this.toolbar.setHalfSelected(isHalf); !isHalf && this.toolbar.setSelected(allSelected); - }, + } - setAllSelected: function (v) { + setAllSelected(v) { if (this.list.setAllSelected) { this.list.setAllSelected(v); } else { - BI.each(this.getAllButtons(), function (i, btn) { + each(this.getAllButtons(), (i, btn) => { (btn.setSelected || btn.setAllSelected).apply(btn, [v]); }); } this.allSelected = !!v; this.toolbar.setSelected(v); this.toolbar.setHalfSelected(false); - }, + } - setToolBarVisible: function (b) { + setToolBarVisible(b) { this.toolbar.setVisible(b); - }, + } - isAllSelected: function () { + isAllSelected() { return this.allSelected; // return this.toolbar.isSelected(); - }, + } - hasPrev: function () { + hasPrev() { return this.list.hasPrev(); - }, + } - hasNext: function () { + hasNext() { return this.list.hasNext(); - }, + } - prependItems: function (items) { - this.list.prependItems.apply(this.list, arguments); - }, + prependItems(items) { + this.list.prependItems(...arguments); + } - addItems: function (items) { - this.list.addItems.apply(this.list, arguments); - }, + addItems(items) { + this.list.addItems(...arguments); + } - setValue: function (data) { - var selectAll = data.type === BI.ButtonGroup.CHOOSE_TYPE_ALL; + setValue(data) { + const selectAll = data.type === ButtonGroup.CHOOSE_TYPE_ALL; this.setAllSelected(selectAll); this.list[selectAll ? "setNotSelectedValue" : "setValue"](data.value); this._checkAllSelected(); - }, + } - getValue: function () { + getValue() { if (this.isAllSelected() === false) { return { - type: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + type: ButtonGroup.CHOOSE_TYPE_MULTI, value: this.list.getValue(), - assist: this.list.getNotSelectedValue() + assist: this.list.getNotSelectedValue(), }; } + return { - type: BI.ButtonGroup.CHOOSE_TYPE_ALL, + type: ButtonGroup.CHOOSE_TYPE_ALL, value: this.list.getNotSelectedValue(), - assist: this.list.getValue() + assist: this.list.getValue(), }; + } - }, - - empty: function () { + empty() { this.list.empty(); - }, + } - populate: function (items) { - this.toolbar.setVisible(!BI.isEmptyArray(items)); - this.toolbar.setEnable(this.isEnabled() && !BI.isEmptyArray(items)); - this.list.populate.apply(this.list, arguments); + populate(items) { + this.toolbar.setVisible(!isEmptyArray(items)); + this.toolbar.setEnable(this.isEnabled() && !isEmptyArray(items)); + this.list.populate(...arguments); this._checkAllSelected(); - }, + } - _setEnable: function (enable) { - BI.SelectList.superclass._setEnable.apply(this, arguments); + _setEnable(enable) { + super._setEnable(...arguments); this.toolbar.setEnable(enable); - }, + } - resetHeight: function (h) { - var toolHeight = ( this.toolbar.element.outerHeight() || 25) * ( this.toolbar.isVisible() ? 1 : 0); + resetHeight(h) { + const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0); this.list.resetHeight ? this.list.resetHeight(h - toolHeight) : - this.list.element.css({"max-height": BI.pixFormat(h - toolHeight)}); - }, + this.list.element.css({ "max-height": pixFormat(h - toolHeight) }); + } - setNotSelectedValue: function () { - this.list.setNotSelectedValue.apply(this.list, arguments); + setNotSelectedValue() { + this.list.setNotSelectedValue(...arguments); this._checkAllSelected(); - }, + } - getNotSelectedValue: function () { + getNotSelectedValue() { return this.list.getNotSelectedValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.list.getAllButtons(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.list.getAllLeaves(); - }, + } - getSelectedButtons: function () { + getSelectedButtons() { return this.list.getSelectedButtons(); - }, + } - getNotSelectedButtons: function () { + getNotSelectedButtons() { return this.list.getNotSelectedButtons(); - }, + } - getIndexByValue: function (value) { + getIndexByValue(value) { return this.list.getIndexByValue(value); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.list.getNodeById(id); - }, + } - getNodeByValue: function (value) { + getNodeByValue(value) { return this.list.getNodeByValue(value); } -}); -BI.SelectList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.select_list", BI.SelectList); +} diff --git a/src/core/platform/web/dom.js b/src/core/platform/web/dom.js index 1fca2871b..95a348e7e 100644 --- a/src/core/platform/web/dom.js +++ b/src/core/platform/web/dom.js @@ -265,12 +265,12 @@ export function _getLeftAlignPosition(combo, popup, extraWidth, container) { } export function getLeftAlignPosition(combo, popup, extraWidth, container) { - let left = this._getLeftAlignPosition(combo, popup, extraWidth, container); + let left = _getLeftAlignPosition(combo, popup, extraWidth, container); let dir = ""; // 如果放不下，优先使用RightAlign, 如果RightAlign也放不下, 再使用left=0 const containerRect = container ? container.getBoundingClientRect() : { left: 0 }; if (left + containerRect.left < 0) { - left = this._getRightAlignPosition(combo, popup, extraWidth); + left = _getRightAlignPosition(combo, popup, extraWidth); dir = "left"; } if (left + containerRect.left < 0) { @@ -302,11 +302,11 @@ export function _getRightAlignPosition(combo, popup, extraWidth, container) { } export function getRightAlignPosition(combo, popup, extraWidth, container) { - let left = this._getRightAlignPosition(combo, popup, extraWidth, container); + let left = _getRightAlignPosition(combo, popup, extraWidth, container); let dir = ""; // 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0 if (left < 0) { - left = this._getLeftAlignPosition(combo, popup, extraWidth, container); + left = _getLeftAlignPosition(combo, popup, extraWidth, container); dir = "right"; } if (left < 0) {