From f32af40f0f1b1020127eaee7eb4013f1237cfd7e Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Thu, 12 Jan 2023 20:06:01 +0800 Subject: [PATCH] KERNEL-14101 refactor: widget/singleselect --- src/widget/index.js | 3 + src/widget/multiselect/index.js | 1 + src/widget/singleselect/index.js | 9 + src/widget/singleselect/search/index.js | 3 + .../search/singleselect.search.loader.js | 181 +++++----- .../search/singleselect.search.pane.insert.js | 124 +++---- .../search/singleselect.search.pane.js | 130 +++---- src/widget/singleselect/singleselect.combo.js | 321 +++++++++--------- .../singleselect/singleselect.insert.combo.js | 260 +++++++------- src/widget/singleselect/singleselect.list.js | 226 ++++++------ .../singleselect/singleselect.loader.js | 239 ++++++------- .../singleselect/singleselect.popup.view.js | 88 +++-- .../singleselect/singleselect.trigger.js | 174 +++++----- .../singleselect/singleselectlist.insert.js | 266 ++++++++------- .../trigger/editor.singleselect.js | 102 +++--- src/widget/singleselect/trigger/index.js | 2 + .../trigger/searcher.singleselect.js | 189 +++++------ 17 files changed, 1204 insertions(+), 1114 deletions(-) create mode 100644 src/widget/singleselect/index.js create mode 100644 src/widget/singleselect/search/index.js create mode 100644 src/widget/singleselect/trigger/index.js diff --git a/src/widget/index.js b/src/widget/index.js index 874fd77cd..84e8b6e4f 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -19,6 +19,7 @@ import { NumberEditor } from "./numbereditor/number.editor"; import { NumberInterval } from "./numberinterval/numberinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; +import * as singleselect from "./singleselect"; Object.assign(BI, { Collapse, @@ -42,6 +43,7 @@ Object.assign(BI, { NumberInterval, ...multiselect, ...multiselectlist, + ...singleselect, }); export * from "./date/calendar"; @@ -57,6 +59,7 @@ export * from "./multiselectlist"; export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; +export * from "./singleselect"; export { Collapse, diff --git a/src/widget/multiselect/index.js b/src/widget/multiselect/index.js index 9d15e06a0..9e0934c14 100644 --- a/src/widget/multiselect/index.js +++ b/src/widget/multiselect/index.js @@ -2,3 +2,4 @@ export { MultiSelectCombo } from "./multiselect.combo"; export { MultiSelectNoBarCombo } from "./multiselect.combo.nobar"; export { MultiSelectInsertCombo } from "./multiselect.insert.combo"; export { MultiSelectInsertNoBarCombo } from "./multiselect.insert.combo.nobar"; +export { SelectPatchEditor } from "./trigger/editor/editor.patch"; diff --git a/src/widget/singleselect/index.js b/src/widget/singleselect/index.js new file mode 100644 index 000000000..7e3f4cd04 --- /dev/null +++ b/src/widget/singleselect/index.js @@ -0,0 +1,9 @@ +export { SingleSelectCombo } from "./singleselect.combo"; +export { SingleSelectInsertCombo } from "./singleselect.insert.combo"; +export { SingleSelectList } from "./singleselect.list"; +export { SingleSelectLoader } from "./singleselect.loader"; +export { SingleSelectPopupView } from "./singleselect.popup.view"; +export { SingleSelectTrigger } from "./singleselect.trigger"; +export { SingleSelectInsertList } from "./singleselectlist.insert"; +export * from "./trigger"; +export * from "./search"; diff --git a/src/widget/singleselect/search/index.js b/src/widget/singleselect/search/index.js new file mode 100644 index 000000000..70c02c573 --- /dev/null +++ b/src/widget/singleselect/search/index.js @@ -0,0 +1,3 @@ +export { SingleSelectSearchLoader } from "./singleselect.search.loader"; +export { SingleSelectSearchPane } from "./singleselect.search.pane"; +export { SingleSelectSearchInsertPane } from "./singleselect.search.pane.insert"; diff --git a/src/widget/singleselect/search/singleselect.search.loader.js b/src/widget/singleselect/search/singleselect.search.loader.js index 5625593dd..56ab10f3c 100644 --- a/src/widget/singleselect/search/singleselect.search.loader.js +++ b/src/widget/singleselect/search/singleselect.search.loader.js @@ -1,73 +1,80 @@ -/** - * 单选加载数据搜索loader面板 - * Created by guy on 15/11/4. - * @class BI.SingleSelectSearchLoader - * @extends Widget - */ -BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText, isUndefined, Controller, VerticalLayout, map, isArray, isKey, Func } from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SingleSelectList } from "../singleselect.list"; +import { SingleSelectItem, SingleSelectRadioItem } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearchLoader.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectSearchLoader extends Widget { + static xtype = "bi.single_select_search_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-search-loader", allowNoSelect: false, logic: { - dynamic: false + dynamic: false, }, - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - valueFormatter: BI.emptyFn + itemsCreator: emptyFn, + keywordGetter: emptyFn, + valueFormatter: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectSearchLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; + const self = this, + opts = this.options; + let hasNext = false; - this.button_group = BI.createWidget({ - type: "bi.single_select_list", + this.button_group = createWidget({ + type: SingleSelectList.xtype, allowNoSelect: opts.allowNoSelect, element: this, logic: { - dynamic: false + dynamic: false, }, value: opts.value, el: { - tipText: BI.i18nText("BI-No_Select"), + tipText: i18nText("BI-No_Select"), el: { - type: "bi.loader", + type: Loader.xtype, isDefaultInit: false, logic: { dynamic: true, - scrolly: true + scrolly: true, }, el: { - chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, + chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, behaviors: { - redmark: function () { + redmark () { return true; - } + }, }, - layouts: [{ - type: "bi.vertical" - }] - } - } + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + }, }, - itemsCreator: function (op, callback) { - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: [self.storeValue] - })); - opts.itemsCreator(op, function (ob) { - var keyword = ob.keyword = opts.keywordGetter(); + itemsCreator (op, callback) { + self.storeValue && + (op = extend(op || {}, { + selectedValues: [self.storeValue], + })); + opts.itemsCreator(op, ob => { + const keyword = (ob.keyword = opts.keywordGetter()); hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && !BI.isUndefined(self.storeValue)) { - var json = self._filterValues(self.storeValue); + let firstItems = []; + if (op.times === 1 && !isUndefined(self.storeValue)) { + const json = self._filterValues(self.storeValue); firstItems = self._createItems(json); } - var context = { + const context = { tipText: ob.tipText, }; callback(firstItems.concat(self._createItems(ob.items)), keyword || "", context); @@ -76,88 +83,88 @@ BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, { } }); }, - hasNext: function () { + hasNext () { return hasNext; - } + }, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SingleSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectSearchLoader.EVENT_CHANGE, arguments); + this.button_group.on(SingleSelectList.EVENT_CHANGE, function () { + self.fireEvent(SingleSelectSearchLoader.EVENT_CHANGE, arguments); }); - }, + } - _createItems: function (items) { - var o = this.options; - return BI.map(items, function (i, item) { - return BI.extend({ - type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item", + _createItems(items) { + const o = this.options; + + return map(items, (i, item) => extend( + { + type: o.allowNoSelect ? SingleSelectItem.xtype : SingleSelectRadioItem.xtype, logic: o.logic, cls: "bi-list-item-active", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, selected: false, iconWrapperWidth: 26, hgap: o.allowNoSelect ? 10 : 0, - title: item.title || item.text - }, item); - }); - }, + title: item.title || item.text, + }, + item + )); + } - _filterValues: function (src) { - var o = this.options; - var keyword = o.keywordGetter(); - var values = src || []; - var newValues = BI.map(BI.isArray(values) ? values : [values], function (i, v) { + _filterValues(src) { + const o = this.options; + const keyword = o.keywordGetter(); + let values = src || []; + const newValues = map(isArray(values) ? values : [values], (i, v) => { return { text: o.valueFormatter(v) || v, - value: v + value: v, }; }); - if (BI.isKey(keyword)) { - var search = BI.Func.getSearchResult(newValues, keyword); + if (isKey(keyword)) { + const search = Func.getSearchResult(newValues, keyword); values = search.match.concat(search.find); } - return BI.map(values, function (i, v) { + + return map(values, (i, v) => { return { text: v.text, title: v.text, value: v.value, - selected: false + selected: false, }; }); - }, + } - setValue: function (v) { + setValue(v) { // 暂存的值一定是新的值，不然v改掉后，storeValue也跟着改了 this.storeValue = v; this.button_group.setValue(v); - }, + } - getValue: function () { + getValue() { return this.button_group.getValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { - this.button_group.populate.apply(this.button_group, arguments); - }, + populate(items) { + this.button_group.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.button_group.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.button_group.resetWidth(w); } -}); - -BI.SingleSelectSearchLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_search_loader", BI.SingleSelectSearchLoader); +} diff --git a/src/widget/singleselect/search/singleselect.search.pane.insert.js b/src/widget/singleselect/search/singleselect.search.pane.insert.js index 6c1e49af2..5c7ca6e5d 100644 --- a/src/widget/singleselect/search/singleselect.search.pane.insert.js +++ b/src/widget/singleselect/search/singleselect.search.pane.insert.js @@ -1,96 +1,96 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.SingleSelectSearchInsertPane - * @extends Widget - */ +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText, Controller, VerticalFillLayout, VerticalLayout } from "@/core"; +import { Label } from "@/base"; +import { SingleSelectSearchLoader } from "./singleselect.search.loader"; -BI.SingleSelectSearchInsertPane = BI.inherit(BI.Widget, { +@shortcut() +export class SingleSelectSearchInsertPane extends Widget { + static xtype = "bi.single_select_search_insert_pane"; - constants: { - height: 25, - lgap: 10, - tgap: 5 - }, + constants = { height: 25, lgap: 10, tgap: 5 }; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-search-pane-insert bi-card", allowNoSelect: false, - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - keywordGetter: BI.emptyFn + itemsCreator: emptyFn, + valueFormatter: emptyFn, + keywordGetter: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectSearchInsertPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.addNotMatchTip = BI.createWidget({ - type: "bi.label", - text: BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), + this.addNotMatchTip = createWidget({ + type: Label.xtype, + text: i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), height: this.constants.height, cls: "bi-keyword-red-mark", hgap: 5, }); - this.loader = BI.createWidget({ - type: "bi.single_select_search_loader", + this.loader = createWidget({ + type: SingleSelectSearchLoader.xtype, allowNoSelect: o.allowNoSelect, keywordGetter: o.keywordGetter, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator.apply(self, [op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }]); + itemsCreator (op, callback) { + o.itemsCreator.apply(self, [ + op, + function (res) { + callback(res); + self.setKeyword(o.keywordGetter()); + } + ]); }, - value: o.value + value: o.value, }); - this.loader.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.loader.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.resizer = BI.createWidget({ - type: "bi.vertical_fill", + this.resizer = createWidget({ + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], element: this, - items: [{ - type: "bi.vertical", - items: [this.addNotMatchTip], - height: this.constants.height - }, { - el: this.loader - }] + items: [ + { + type: VerticalLayout.xtype, + items: [this.addNotMatchTip], + height: this.constants.height, + }, + { + el: this.loader, + } + ], }); - }, + } - setKeyword: function (keyword) { - this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); - }, + setKeyword(keyword) { + this.addNotMatchTip.setText(i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); + } - hasMatched: function () { + hasMatched() { return false; - }, + } - setValue: function (v) { + setValue(v) { this.loader.setValue(v); - }, + } - getValue: function () { + getValue() { return this.loader.getValue(); - }, + } - empty: function () { + empty() { this.loader.empty(); - }, - - populate: function (items) { - this.loader.populate.apply(this.loader, arguments); } -}); -BI.SingleSelectSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.single_select_search_insert_pane", BI.SingleSelectSearchInsertPane); + populate(items) { + this.loader.populate(...arguments); + } +} diff --git a/src/widget/singleselect/search/singleselect.search.pane.js b/src/widget/singleselect/search/singleselect.search.pane.js index ea923c5f6..d11421f34 100644 --- a/src/widget/singleselect/search/singleselect.search.pane.js +++ b/src/widget/singleselect/search/singleselect.search.pane.js @@ -1,101 +1,105 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.SingleSelectSearchPane - * @extends Widget - */ +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText, Controller, VerticalFillLayout } from "@/core"; +import { Label } from "@/base"; +import { SingleSelectSearchLoader } from "./singleselect.search.loader"; -BI.SingleSelectSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class SingleSelectSearchPane extends Widget { + static xtype = "bi.single_select_search_pane"; - constants: { - height: 25, - lgap: 10, - tgap: 5 - }, + constants = { height: 25, lgap: 10, tgap: 5 }; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearchPane.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-search-pane bi-card", allowNoSelect: false, - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - keywordGetter: BI.emptyFn + itemsCreator: emptyFn, + valueFormatter: emptyFn, + keywordGetter: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectSearchPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.tooltipClick = BI.createWidget({ - type: "bi.label", + this.tooltipClick = createWidget({ + type: Label.xtype, invisible: true, - text: BI.i18nText("BI-Click_Blank_To_Select"), + text: i18nText("BI-Click_Blank_To_Select"), cls: "single-select-toolbar", - height: this.constants.height + height: this.constants.height, }); - this.loader = BI.createWidget({ - type: "bi.single_select_search_loader", + this.loader = createWidget({ + type: SingleSelectSearchLoader.xtype, allowNoSelect: o.allowNoSelect, keywordGetter: o.keywordGetter, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator.apply(self, [op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }]); + itemsCreator (op, callback) { + o.itemsCreator.apply(self, [ + op, + function (res) { + callback(res); + self.setKeyword(o.keywordGetter()); + } + ]); }, - value: o.value + value: o.value, }); - this.loader.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.loader.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.resizer = BI.createWidget({ - type: "bi.vertical_fill", + this.resizer = createWidget({ + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], element: this, - items: [{ - el: this.tooltipClick, - }, { - el: this.loader - }] + items: [ + { + el: this.tooltipClick, + }, + { + el: this.loader, + } + ], }); this.tooltipClick.setVisible(false); - }, + } - setKeyword: function (keyword) { - var btn, o = this.options; - var isVisible = this.loader.getAllButtons().length > 0 && (btn = this.loader.getAllButtons()[0]) && (keyword === (o.valueFormatter(btn.getValue()) || btn.getValue())); + setKeyword(keyword) { + let btn; + const o = this.options; + const isVisible = + this.loader.getAllButtons().length > 0 && + (btn = this.loader.getAllButtons()[0]) && + keyword === (o.valueFormatter(btn.getValue()) || btn.getValue()); if (isVisible !== this.tooltipClick.isVisible()) { this.tooltipClick.setVisible(isVisible); - this.resizer.attr("items")[0].height = (isVisible ? this.constants.height : 0); + this.resizer.attr("items")[0].height = isVisible ? this.constants.height : 0; this.resizer.resize(); } - }, + } - hasMatched: function () { + hasMatched() { return this.tooltipClick.isVisible(); - }, + } - setValue: function (v) { + setValue(v) { this.loader.setValue(v); - }, + } - getValue: function () { + getValue() { return this.loader.getValue(); - }, + } - empty: function () { + empty() { this.loader.empty(); - }, - - populate: function (items) { - this.loader.populate.apply(this.loader, arguments); } -}); -BI.SingleSelectSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.single_select_search_pane", BI.SingleSelectSearchPane); + populate(items) { + this.loader.populate(...arguments); + } +} diff --git a/src/widget/singleselect/singleselect.combo.js b/src/widget/singleselect/singleselect.combo.js index cc4d7c261..2d1d2b013 100644 --- a/src/widget/singleselect/singleselect.combo.js +++ b/src/widget/singleselect/singleselect.combo.js @@ -1,89 +1,104 @@ -/** - * - * @class BI.SingleSelectCombo - * @extends BI.Single - */ -BI.SingleSelectCombo = BI.inherit(BI.Single, { +import { shortcut, extend, emptyFn, isKey, createWidget, toPix, isNotNull, nextTick, AbsoluteLayout, makeObject, map, each, remove } from "@/core"; +import { Single, Combo } from "@/base"; +import { SingleSelectTrigger } from "./singleselect.trigger"; +import { SingleSelectPopupView } from "./singleselect.popup.view"; +import { TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectCombo extends Single { + static xtype = "bi.single_select_combo"; + + static REQ_GET_DATA_LENGTH = 0; + static REQ_GET_ALL_DATA = -1; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-combo", allowNoSelect: false, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + valueFormatter: emptyFn, height: 24, - allowEdit: true + allowEdit: true, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SingleSelectCombo.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue = self._startValue); - self.trigger.getSearcher().setState(self.storeValue); + const assertShowValue = () => { + isKey(this._startValue) && (this.storeValue = this._startValue); + this.trigger.getSearcher().setState(this.storeValue); }; this.storeValue = o.value; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.single_select_trigger", - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), // adapter: this.popup, allowNoSelect: o.allowNoSelect, allowEdit: o.allowEdit, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator(op, function (res) { - if (op.times === 1 && BI.isNotNull(op.keywords)) { + itemsCreator: (op, callback) => { + o.itemsCreator(op, (...args) => { + if (op.times === 1 && isNotNull(op.keywords)) { // 预防trigger内部把当前的storeValue改掉 - self.trigger.setValue(self.getValue()); + this.trigger.setValue(this.getValue()); } - callback.apply(self, arguments); + callback.apply(this, ...args); }); }, text: o.text, - value: this.storeValue + value: this.storeValue, }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectCombo.EVENT_FOCUS); + this.trigger.on(SingleSelectTrigger.EVENT_FOCUS, () => { + this.fireEvent(SingleSelectCombo.EVENT_FOCUS); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectCombo.EVENT_BLUR); + this.trigger.on(SingleSelectTrigger.EVENT_BLUR, () => { + this.fireEvent(SingleSelectCombo.EVENT_BLUR); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_START, function () { - self._setStartValue(); - this.getSearcher().setValue(self.storeValue); + this.trigger.on(SingleSelectTrigger.EVENT_START, () => { + this._setStartValue(); + this.getSearcher().setValue(this.storeValue); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_STOP, function () { - self._setStartValue(); - self.fireEvent(BI.SingleSelectCombo.EVENT_STOP); + this.trigger.on(SingleSelectTrigger.EVENT_STOP, () => { + this._setStartValue(); + this.fireEvent(SingleSelectCombo.EVENT_STOP); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_SEARCHING, function () { - self._dataChange = true; - self.fireEvent(BI.SingleSelectCombo.EVENT_SEARCHING); + this.trigger.on(SingleSelectTrigger.EVENT_SEARCHING, () => { + this._dataChange = true; + this.fireEvent(SingleSelectCombo.EVENT_SEARCHING); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_CHANGE, function (value, obj) { - self.storeValue = this.getValue(); - assertShowValue(); - self._defaultState(); - self._dataChange = true; - }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_COUNTER_CLICK, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.trigger.on( + SingleSelectTrigger.EVENT_CHANGE, + (value, obj) => { + this.storeValue = this.trigger.getValue(); + assertShowValue(); + this._defaultState(); + this._dataChange = true; + } + ); + this.trigger.on(SingleSelectTrigger.EVENT_COUNTER_CLICK, () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", container: o.container, toggle: false, el: this.trigger, @@ -91,182 +106,174 @@ BI.SingleSelectCombo = BI.inherit(BI.Single, { popup: { type: "bi.single_select_popup_view", allowNoSelect: o.allowNoSelect, - ref: function () { - self.popup = this; - self.trigger.setAdapter(this); + ref: _ref => { + this.popup = _ref; + this.trigger.setAdapter(_ref); }, listeners: [{ - eventName: BI.SingleSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { + eventName: SingleSelectPopupView.EVENT_CHANGE, + action: () => { + this._dataChange = true; + this.storeValue = this.popup.getValue(); + this._adjust(() => { assertShowValue(); - self._defaultState(); + this._defaultState(); }); - self.fireEvent(BI.SingleSelectCombo.EVENT_CLICK_ITEM); - } + this.fireEvent(SingleSelectCombo.EVENT_CLICK_ITEM); + }, }], itemsCreator: o.itemsCreator, itemWrapper: o.itemWrapper, valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { - self.combo.adjustWidth(); - self.combo.adjustHeight(); - self.trigger.getSearcher().adjustView(); + onLoaded: () => { + nextTick(() => { + this.combo.adjustWidth(); + this.combo.adjustHeight(); + this.trigger.getSearcher().adjustView(); }); - } + }, }, - hideChecker: function (e) { + hideChecker(e) { return triggerBtn.element.find(e.target).length === 0; }, - value: o.value + value: o.value, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - if (!this.isViewVisible()) { - self._dataChange = false;// 标记数据是否发生变化 + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + if (!this.combo.isViewVisible()) { + this._dataChange = false; // 标记数据是否发生变化 } - this.setValue(self.storeValue); - BI.nextTick(function () { - self.populate(); + this.setValue(this.storeValue); + nextTick(() => { + this.populate(); }); }); // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件 this.wants2Quit = false; - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { // important:关闭弹出时又可能没有退出编辑状态 - self.trigger.stopEditing(); - if (self.requesting === true) { - self.wants2Quit = true; + this.trigger.stopEditing(); + if (this.requesting === true) { + this.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.SingleSelectCombo.EVENT_CONFIRM); + this._dataChange && + this.fireEvent(SingleSelectCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "single-select-trigger-icon-button" + cls: "single-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { - if (self.combo.isViewVisible()) { - self.combo.hideView(); + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { + if (this.combo.isViewVisible()) { + this.combo.hideView(); } else { - self.combo.showView(); + this.combo.showView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [{ el: this.combo, left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }] + bottom: 0, + } + ], }); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { - }, + _assertValue(val) {} - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _joinKeywords: function (keywords, callback) { - var self = this, o = this.options; + _joinKeywords(keywords, callback) { + const o = this.options; this._assertValue(this.storeValue); this.requesting = true; o.itemsCreator({ - type: BI.SingleSelectCombo.REQ_GET_ALL_DATA, - keywords: keywords - }, function (ob) { - var values = BI.map(ob.items, "value"); + type: SingleSelectCombo.REQ_GET_ALL_DATA, + keywords, + }, + ob => { + const values = map(ob.items, "value"); digest(values); - }); + } + ); - function digest (items) { - var selectedMap = self._makeMap(items); - BI.each(keywords, function (i, val) { - if (BI.isNotNull(selectedMap[val])) { - BI.remove(self.storeValue.value, val); + const digest = items => { + const selectedMap = this._makeMap(items); + each(keywords, (i, val) => { + if (isNotNull(selectedMap[val])) { + remove(this.storeValue.value, val); } }); - self._adjust(callback); - } - }, + this._adjust(callback); + }; + } - _adjust: function (callback) { - var self = this, o = this.options; + _adjust(callback) { + const adjust = () => { + if (this.wants2Quit === true) { + this._dataChange && + this.fireEvent(SingleSelectCombo.EVENT_CONFIRM); + this.wants2Quit = false; + } + this.requesting = false; + }; + + const o = this.options; if (!this._count) { o.itemsCreator({ - type: BI.SingleSelectCombo.REQ_GET_DATA_LENGTH - }, function (res) { - self._count = res.count; + type: SingleSelectCombo.REQ_GET_DATA_LENGTH, + }, + res => { + this._count = res.count; adjust(); callback(); - }); + } + ); } else { adjust(); callback(); - } + } - function adjust () { - if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.SingleSelectCombo.EVENT_CONFIRM); - self.wants2Quit = false; - } - self.requesting = false; - } - }, - - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.popup.setStartValue(value); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - populate: function () { + populate() { this._count = null; - this.combo.populate.apply(this.combo, arguments); + this.combo.populate(...arguments); } -}); - -BI.extend(BI.SingleSelectCombo, { - REQ_GET_DATA_LENGTH: 0, - REQ_GET_ALL_DATA: -1 -}); - -BI.SingleSelectCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.SingleSelectCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectCombo.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SingleSelectCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.SingleSelectCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.single_select_combo", BI.SingleSelectCombo); +} diff --git a/src/widget/singleselect/singleselect.insert.combo.js b/src/widget/singleselect/singleselect.insert.combo.js index a36bf0bd6..991735404 100644 --- a/src/widget/singleselect/singleselect.insert.combo.js +++ b/src/widget/singleselect/singleselect.insert.combo.js @@ -1,45 +1,58 @@ -/** - * - * @class BI.SingleSelectInsertCombo - * @extends BI.Single - */ -BI.SingleSelectInsertCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectInsertCombo.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, emptyFn, i18nText, isKey, createWidget, toPix, isNotNull, nextTick, AbsoluteLayout, makeObject } from "@/core"; +import { Single, Combo } from "@/base"; +import { SingleSelectTrigger } from "./singleselect.trigger"; +import { SingleSelectPopupView } from "./singleselect.popup.view"; +import { TriggerIconButton } from "@/case"; + +@shortcut() +export class SingleSelectInsertCombo extends Single { + static xtype = "bi.single_select_insert_combo"; + + static REQ_GET_DATA_LENGTH = 0; + static REQ_GET_ALL_DATA = -1; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-combo", allowNoSelect: false, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, - watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"), + watermark: i18nText("BI-Basic_Search_And_Patch_Paste"), }); - }, - - _init: function () { - var self = this, o = this.options; - BI.SingleSelectInsertCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue = self._startValue); - self.trigger.getSearcher().setState(self.storeValue); + } + + _init() { + const self = this, + o = this.options; + super._init(...arguments); + const assertShowValue = () => { + isKey(this._startValue) && (this.storeValue = this._startValue); + this.trigger.getSearcher().setState(this.storeValue); }; this.storeValue = o.value; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.single_select_trigger", + this.trigger = createWidget({ + type: SingleSelectTrigger.xtype, watermark: o.watermark, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), allowNoSelect: o.allowNoSelect, allowEdit: o.allowEdit, // adapter: this.popup, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { + itemsCreator (op, callback) { o.itemsCreator(op, function (res) { - if (op.times === 1 && BI.isNotNull(op.keywords)) { + if (op.times === 1 && isNotNull(op.keywords)) { // 预防trigger内部把当前的storeValue改掉 self.trigger.setValue(self.getValue()); } @@ -51,198 +64,195 @@ BI.SingleSelectInsertCombo = BI.inherit(BI.Single, { searcher: { popup: { type: "bi.single_select_search_insert_pane", - } - } + }, + }, }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_FOCUS); + this.trigger.on(SingleSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(SingleSelectInsertCombo.EVENT_FOCUS); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_BLUR); + this.trigger.on(SingleSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(SingleSelectInsertCombo.EVENT_BLUR); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_START, function () { + this.trigger.on(SingleSelectTrigger.EVENT_START, function () { self._setStartValue(); this.getSearcher().setValue(self.storeValue); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_STOP, function () { + this.trigger.on(SingleSelectTrigger.EVENT_STOP, () => { self._setStartValue(); - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_STOP); + self.fireEvent(SingleSelectInsertCombo.EVENT_STOP); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_PAUSE, function () { + this.trigger.on(SingleSelectTrigger.EVENT_PAUSE, () => { self.storeValue = self.trigger.getSearcher().getKeyword(); assertShowValue(); self._defaultState(); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_SEARCHING, function () { + this.trigger.on(SingleSelectTrigger.EVENT_SEARCHING, () => { self._dataChange = true; - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_SEARCHING); + self.fireEvent(SingleSelectInsertCombo.EVENT_SEARCHING); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_CHANGE, function (value, obj) { - self.storeValue = this.getValue(); - assertShowValue(); - self._defaultState(); - self._dataChange = true; - }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_COUNTER_CLICK, function () { + this.trigger.on( + SingleSelectTrigger.EVENT_CHANGE, + function (value, obj) { + self.storeValue = this.getValue(); + assertShowValue(); + self._defaultState(); + self._dataChange = true; + } + ); + this.trigger.on(SingleSelectTrigger.EVENT_COUNTER_CLICK, () => { if (!self.combo.isViewVisible()) { self.combo.showView(); } }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", container: o.container, toggle: false, el: this.trigger, adjustLength: 1, popup: { - type: "bi.single_select_popup_view", + type: SingleSelectPopupView.xtype, allowNoSelect: o.allowNoSelect, - ref: function () { + ref () { self.popup = this; self.trigger.setAdapter(this); }, - listeners: [{ - eventName: BI.SingleSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { - assertShowValue(); - self._defaultState(); - }); - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_CLICK_ITEM); + listeners: [ + { + eventName: SingleSelectPopupView.EVENT_CHANGE, + action () { + self._dataChange = true; + self.storeValue = this.getValue(); + self._adjust(() => { + assertShowValue(); + self._defaultState(); + }); + self.fireEvent( + SingleSelectInsertCombo.EVENT_CLICK_ITEM + ); + }, } - }], + ], itemsCreator: o.itemsCreator, itemWrapper: o.itemWrapper, valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { + onLoaded () { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); self.trigger.getSearcher().adjustView(); }); - } + }, }, - hideChecker: function (e) { + hideChecker (e) { return triggerBtn.element.find(e.target).length === 0; }, - value: o.value + value: o.value, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (!this.isViewVisible()) { - self._dataChange = false;// 标记数据是否发生变化 + self._dataChange = false; // 标记数据是否发生变化 } this.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { self.populate(); }); }); // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件 this.wants2Quit = false; - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { // important:关闭弹出时又可能没有退出编辑状态 self.trigger.stopEditing(); if (self.requesting === true) { self.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.SingleSelectInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(SingleSelectInsertCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "single-select-trigger-icon-button" + cls: "single-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { if (self.combo.isViewVisible()) { self.combo.hideView(); } else { self.combo.showView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.combo, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: triggerBtn, - right: 0, - top: 0, - bottom: 0 - }] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0, + } + ], }); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { - }, + _assertValue(val) {} - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _adjust: function (callback) { - var self = this, o = this.options; + _adjust(callback) { + const self = this; adjust(); callback(); - function adjust () { + function adjust() { if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.SingleSelectInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(SingleSelectInsertCombo.EVENT_CONFIRM); self.wants2Quit = false; } self.requesting = false; } - }, + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.popup.setStartValue(value); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, - - populate: function () { - this.combo.populate.apply(this.combo, arguments); } -}); -BI.extend(BI.SingleSelectInsertCombo, { - REQ_GET_DATA_LENGTH: 0, - REQ_GET_ALL_DATA: -1 -}); - -BI.SingleSelectInsertCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectInsertCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.SingleSelectInsertCombo.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SingleSelectInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.SingleSelectInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.single_select_insert_combo", BI.SingleSelectInsertCombo); + populate() { + this.combo.populate(...arguments); + } +} diff --git a/src/widget/singleselect/singleselect.list.js b/src/widget/singleselect/singleselect.list.js index 9842eb3ea..13c51656b 100644 --- a/src/widget/singleselect/singleselect.list.js +++ b/src/widget/singleselect/singleselect.list.js @@ -1,41 +1,41 @@ -/** - * 选择列表 - * - * Created by GUY on 2015/11/1. - * @class BI.SingleSelectList - * @extends BI.Widget - */ -BI.SingleSelectList = BI.inherit(BI.Widget, { - - _constants: { - itemHeight: 24 - }, - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectList.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, Controller, Events, i18nText } from "@/core"; +import { ListPane, SingleSelectItem } from "@/case"; + +@shortcut() +export class SingleSelectList extends Widget { + static xtype = "bi.single_select_list"; + + _constants = { itemHeight: 24 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-list", direction: BI.Direction.Top, // toolbar的位置 logic: { - dynamic: true + dynamic: true, }, items: [], - itemsCreator: BI.emptyFn, - hasNext: BI.emptyFn, - onLoaded: BI.emptyFn, + itemsCreator: emptyFn, + hasNext: emptyFn, + onLoaded: emptyFn, el: { - type: "bi.list_pane" + type: ListPane.xtype, }, - allowNoSelect: false + allowNoSelect: false, }); - }, - _init: function () { - BI.SingleSelectList.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.list = BI.createWidget(o.el, { - type: "bi.list_pane", + this.list = createWidget(o.el, { + type: ListPane.xtype, items: o.items, - itemsCreator: function (op, callback) { + itemsCreator (op, callback) { op.times === 1 && self.toolbar && self.toolbar.setVisible(false); o.itemsCreator(op, function (items) { callback.apply(self, arguments); @@ -47,117 +47,137 @@ BI.SingleSelectList = BI.inherit(BI.Widget, { }, onLoaded: o.onLoaded, hasNext: o.hasNext, - value: o.value + value: o.value, }); - this.list.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - if (type === BI.Events.CLICK) { - self.fireEvent(BI.SingleSelectList.EVENT_CHANGE, value, obj); + this.list.on(Controller.EVENT_CHANGE, function (type, value, obj) { + if (type === Events.CLICK) { + self.fireEvent(SingleSelectList.EVENT_CHANGE, value, obj); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({ - scrolly: true - }, o.logic, { - items: o.allowNoSelect ? BI.LogicFactory.createLogicItemsByDirection(o.direction, { - type: "bi.single_select_item", - cls: "bi-list-item-active", - height: this._constants.itemHeight, - forceNotSelected: true, - text: BI.i18nText("BI-Basic_No_Select"), - ref: function (_ref) { - self.toolbar = _ref; + createWidget( + extend( + { + element: this, }, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) { - self.list.setValue(); - self.fireEvent(BI.SingleSelectList.EVENT_CHANGE); + BI.LogicFactory.createLogic( + BI.LogicFactory.createLogicTypeByDirection(o.direction), + extend( + { + scrolly: true, + }, + o.logic, + { + items: o.allowNoSelect + ? BI.LogicFactory.createLogicItemsByDirection( + o.direction, + { + type: SingleSelectItem.xtype, + cls: "bi-list-item-active", + height: this._constants.itemHeight, + forceNotSelected: true, + text: i18nText("BI-Basic_No_Select"), + ref (_ref) { + self.toolbar = _ref; + }, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action (type) { + if (type === Events.CLICK) { + self.list.setValue(); + self.fireEvent(SingleSelectList.EVENT_CHANGE); + } + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }, + } + ], + }, + this.list + ) + : BI.LogicFactory.createLogicItemsByDirection(o.direction, this.list), } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }] - }, this.list) : BI.LogicFactory.createLogicItemsByDirection(o.direction, this.list) - })))); - - }, + ) + ) + ) + ); + } - 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 (v) { + setValue(v) { this.list.setValue([v]); - }, + } - getValue: function () { + getValue() { return this.list.getValue()[0]; - }, + } - empty: function () { + empty() { this.list.empty(); - }, + } - populate: function (items) { - this.list.populate.apply(this.list, arguments); - }, + populate(items) { + this.list.populate(...arguments); + } - resetHeight: function (h) { - this.list.resetHeight ? this.list.resetHeight(h) : - this.list.element.css({"max-height": BI.pixFormat(h - (this.options.allowNoSelect ? this._constants.itemHeight : 0))}); - }, + resetHeight(h) { + this.list.resetHeight + ? this.list.resetHeight(h) + : this.list.element.css({ + "max-height": BI.pixFormat(h - (this.options.allowNoSelect ? this._constants.itemHeight : 0)), + }); + } - setNotSelectedValue: function () { - this.list.setNotSelectedValue.apply(this.list, arguments); - }, + setNotSelectedValue() { + this.list.setNotSelectedValue(...arguments); + } - 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.SingleSelectList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_list", BI.SingleSelectList); +} diff --git a/src/widget/singleselect/singleselect.loader.js b/src/widget/singleselect/singleselect.loader.js index 645bdad66..678f4a681 100644 --- a/src/widget/singleselect/singleselect.loader.js +++ b/src/widget/singleselect/singleselect.loader.js @@ -1,178 +1,187 @@ -/** - * 单选加载数据面板 - * Created by guy on 15/11/2. - * @class BI.SingleSelectLoader - * @extends Widget - */ -BI.SingleSelectLoader = BI.inherit(BI.Widget, { - - _constants: { - itemVgap: 5 - }, - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectLoader.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isUndefined, map, isKey, Controller, VerticalLayout, delay } from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SingleSelectList } from "./singleselect.list"; +import { SingleSelectItem, SingleSelectRadioItem } from "@/case"; + +@shortcut() +export class SingleSelectLoader extends Widget { + static xtype = "bi.single_select_loader"; + + _constants = { itemVgap: 5 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-loader", logic: { - dynamic: true + dynamic: true, }, el: { - height: 400 + height: 400, }, allowNoSelect: false, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - onLoaded: BI.emptyFn + valueFormatter: emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; + const self = this, + opts = this.options; + let hasNext = false; this.storeValue = opts.value; - this.button_group = BI.createWidget({ - type: "bi.single_select_list", + this.button_group = createWidget({ + type: SingleSelectList.xtype, allowNoSelect: opts.allowNoSelect, logic: opts.logic, - el: BI.extend({ - onLoaded: opts.onLoaded, - el: { - type: "bi.loader", - isDefaultInit: false, - logic: { - dynamic: true, - scrolly: true - }, + el: extend( + { + onLoaded: opts.onLoaded, el: { - chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, - behaviors: { - redmark: function () { - return true; - } + type: Loader.xtype, + isDefaultInit: false, + logic: { + dynamic: true, + scrolly: true, }, - layouts: [{ - type: "bi.vertical" - }] - } - } - }, opts.el), - itemsCreator: function (op, callback) { - var startValue = self._startValue; - !BI.isUndefined(self.storeValue) && (op = BI.extend(op || {}, { - selectedValues: [self.storeValue] - })); - opts.itemsCreator(op, function (ob) { + el: { + chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, + behaviors: { + redmark () { + return true; + }, + }, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + }, + }, + opts.el + ), + itemsCreator (op, callback) { + const startValue = self._startValue; + !isUndefined(self.storeValue) && + (op = extend(op || {}, { + selectedValues: [self.storeValue], + })); + opts.itemsCreator(op, ob => { hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && !BI.isUndefined(self.storeValue)) { - var json = BI.map([self.storeValue], function (i, v) { - var txt = opts.valueFormatter(v) || v; - return opts.itemWrapper({ - text: txt, - value: v, - title: txt, - selected: true - }) || { - text: txt, - value: v, - title: txt, - selected: true - }; + let firstItems = []; + if (op.times === 1 && !isUndefined(self.storeValue)) { + const json = map([self.storeValue], (i, v) => { + const txt = opts.valueFormatter(v) || v; + + return ( + opts.itemWrapper({ + text: txt, + value: v, + title: txt, + selected: true, + }) || { + text: txt, + value: v, + title: txt, + selected: true, + } + ); }); firstItems = self._createItems(json); } callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); if (op.times === 1 && self.storeValue) { - BI.isKey(startValue) && (self.storeValue = startValue); + isKey(startValue) && (self.storeValue = startValue); self.setValue(self.storeValue); } - (op.times === 1) && self._scrollToTop(); + op.times === 1 && self._scrollToTop(); }); }, - hasNext: function () { + hasNext () { return hasNext; }, - value: this.storeValue + value: this.storeValue, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, items: [this.button_group], - vgap: this._constants.itemVgap + vgap: this._constants.itemVgap, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SingleSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectLoader.EVENT_CHANGE, arguments); + this.button_group.on(SingleSelectList.EVENT_CHANGE, function () { + self.fireEvent(SingleSelectLoader.EVENT_CHANGE, arguments); }); - }, + } - _createItems: function (items) { - var o = this.options; - return BI.map(items, function (i, item) { - return BI.extend({ - type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item", + _createItems(items) { + const o = this.options; + + return map(items, (i, item) => extend( + { + type: o.allowNoSelect ? SingleSelectItem.xtype : SingleSelectRadioItem.xtype, logic: o.logic, cls: "bi-list-item-active", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, selected: false, iconWrapperWidth: 26, textHgap: o.allowNoSelect ? 10 : 0, - title: item.title || item.text - }, item); - }); - }, + title: item.title || item.text, + }, + item + )); + } - _scrollToTop: function () { - var self = this; - BI.delay(function () { + _scrollToTop() { + const self = this; + delay(() => { self.button_group.element.scrollTop(0); }, 30); - }, + } - _assertValue: function (val) { - }, + _assertValue(val) {} - setStartValue: function (v) { + setStartValue(v) { this._startValue = v; - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this._assertValue(this.storeValue); this.button_group.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.button_group.getValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { - this.button_group.populate.apply(this.button_group, arguments); - }, + populate(items) { + this.button_group.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.button_group.resetHeight(h - this._constants.itemVgap * 2); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.button_group.resetWidth(w); } -}); - -BI.SingleSelectLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_loader", BI.SingleSelectLoader); +} diff --git a/src/widget/singleselect/singleselect.popup.view.js b/src/widget/singleselect/singleselect.popup.view.js index ffa8766bd..c03d71522 100644 --- a/src/widget/singleselect/singleselect.popup.view.js +++ b/src/widget/singleselect/singleselect.popup.view.js @@ -1,84 +1,82 @@ -/** - * 带加载的单选下拉面板 - * @class BI.SingleSelectPopupView - * @extends Widget - */ -BI.SingleSelectPopupView = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +import { MultiPopupView } from "@/case"; +import { PopupView } from "@/base"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectPopupView.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectPopupView extends Widget { + static xtype = "bi.single_select_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-popup-view", allowNoSelect: false, maxWidth: "auto", minWidth: 135, maxHeight: 400, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - onLoaded: BI.emptyFn + valueFormatter: emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectPopupView.superclass._init.apply(this, arguments); - var self = this, opts = this.options; + _init() { + super._init(...arguments); + const opts = this.options; - this.loader = BI.createWidget({ + this.loader = createWidget({ type: "bi.single_select_loader", allowNoSelect: opts.allowNoSelect, itemsCreator: opts.itemsCreator, itemWrapper: opts.itemWrapper, valueFormatter: opts.valueFormatter, onLoaded: opts.onLoaded, - value: opts.value + value: opts.value, }); - this.popupView = BI.createWidget({ - type: "bi.popup_view", + this.popupView = createWidget({ + type: PopupView.xtype, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, element: this, el: this.loader, - value: opts.value + value: opts.value, }); - this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectPopupView.EVENT_CHANGE); + this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { + this.fireEvent(SingleSelectPopupView.EVENT_CHANGE); }); - }, + } - setStartValue: function (v) { + setStartValue(v) { this.loader.setStartValue(v); - }, + } - setValue: function (v) { + setValue(v) { this.popupView.setValue(v); - }, + } - getValue: function () { + getValue() { return this.popupView.getValue(); - }, + } - populate: function (items) { - this.popupView.populate.apply(this.popupView, arguments); - }, + populate(items) { + this.popupView.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.popupView.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.popupView.resetWidth(w); - }, + } - setDirection: function (direction, position) { + setDirection(direction, position) { this.popupView.setDirection(direction, position); - }, -}); - -BI.SingleSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE"; - - -BI.shortcut("bi.single_select_popup_view", BI.SingleSelectPopupView); + } +} diff --git a/src/widget/singleselect/singleselect.trigger.js b/src/widget/singleselect/singleselect.trigger.js index 35c6c0349..02021774c 100644 --- a/src/widget/singleselect/singleselect.trigger.js +++ b/src/widget/singleselect/singleselect.trigger.js @@ -1,40 +1,46 @@ -/** - * - * 单选下拉框 - * @class BI.SingleSelectTrigger - * @extends BI.Trigger - */ - -BI.SingleSelectTrigger = BI.inherit(BI.Trigger, { - - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectTrigger.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, emptyFn, createWidget, HTapeLayout, AbsoluteLayout } from "@/core"; +import { Trigger, Text } from "@/base"; +import { SingleSelectSearcher } from "./trigger"; + +@shortcut() +export class SingleSelectTrigger extends Trigger { + static xtype = "bi.single_select_trigger"; + + constants = { height: 14, rgap: 4, lgap: 4 }; + + static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; + static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-trigger", allowNoSelect: false, - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcher: {}, switcher: {}, adapter: null, masker: {}, - allowEdit: true + allowEdit: true, }); - }, + } - _init: function () { - BI.SingleSelectTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const o = this.options; - this.searcher = BI.createWidget(o.searcher, { - type: "bi.single_select_searcher", + this.searcher = createWidget(o.searcher, { + type: SingleSelectSearcher.xtype, watermark: o.watermark, allowNoSelect: o.allowNoSelect, text: o.text, @@ -44,95 +50,85 @@ BI.SingleSelectTrigger = BI.inherit(BI.Trigger, { popup: {}, adapter: o.adapter, masker: o.masker, - value: o.value + value: o.value, }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_START, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_START); + this.searcher.on(SingleSelectSearcher.EVENT_START, () => { + this.fireEvent(SingleSelectTrigger.EVENT_START); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_PAUSE); + this.searcher.on(SingleSelectSearcher.EVENT_PAUSE, () => { + this.fireEvent(SingleSelectTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(SingleSelectSearcher.EVENT_SEARCHING, (...args) => { + this.fireEvent(SingleSelectTrigger.EVENT_SEARCHING, ...args); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_STOP, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_STOP); + this.searcher.on(SingleSelectSearcher.EVENT_STOP, () => { + this.fireEvent(SingleSelectTrigger.EVENT_STOP); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_CHANGE, arguments); + this.searcher.on(SingleSelectSearcher.EVENT_CHANGE, (...args) => { + this.fireEvent(SingleSelectTrigger.EVENT_CHANGE, ...args); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_FOCUS); + this.searcher.on(SingleSelectSearcher.EVENT_FOCUS, () => { + this.fireEvent(SingleSelectTrigger.EVENT_FOCUS); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_BLUR, arguments); + this.searcher.on(SingleSelectSearcher.EVENT_BLUR, (...args) => { + this.fireEvent(SingleSelectTrigger.EVENT_BLUR, ...args); }); - var wrapper = BI.createWidget({ - type: "bi.htape", + createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, - width: "fill" - }, { - el: BI.createWidget(), - width: 24 - }] + width: "fill", + }, + { + el: createWidget(), + width: 24, + } + ], }); - !o.allowEdit && BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: { - type: "bi.text", - title: function () { - return self.searcher.getState(); + !o.allowEdit && + createWidget({ + type: AbsoluteLayout.xtype, + element: this, + items: [ + { + el: { + type: Text.xtype, + title: () => this.searcher.getState(), + }, + left: 0, + right: 24, + top: 0, + bottom: 0, } - }, - left: 0, - right: 24, - top: 0, - bottom: 0 - }] - }); - }, + ], + }); + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setValue: function (v) { + setValue(v) { this.searcher.setValue(v); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); } -}); - -BI.SingleSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.SingleSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.SingleSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SingleSelectTrigger.EVENT_START = "EVENT_START"; -BI.SingleSelectTrigger.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SingleSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SingleSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; -BI.SingleSelectTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectTrigger.EVENT_BLUR = "EVENT_BLUR"; - -BI.shortcut("bi.single_select_trigger", BI.SingleSelectTrigger); \ No newline at end of file +} diff --git a/src/widget/singleselect/singleselectlist.insert.js b/src/widget/singleselect/singleselectlist.insert.js index cd32a22e8..e2dc37b9b 100644 --- a/src/widget/singleselect/singleselectlist.insert.js +++ b/src/widget/singleselect/singleselectlist.insert.js @@ -1,61 +1,83 @@ -/** - * @author: Teller - * @createdAt: 2018/3/28 - * @Description -*/ -BI.SingleSelectInsertList = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.SingleSelectInsertList.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + isKey, + createWidget, + isNotEmptyString, + i18nText, + deepClone, + VerticalFillLayout, + AbsoluteLayout, + makeObject +} from "@/core"; +import { Single, Searcher } from "@/base"; +import { SingleSelectLoader } from "./singleselect.loader"; +import { SelectPatchEditor } from "../multiselect"; +import { SearchEditor } from "../editor"; + +@shortcut() +export class SingleSelectInsertList extends Single { + static xtype = "bi.single_select_insert_list"; + + static REQ_GET_DATA_LENGTH = 0; + static REQ_GET_ALL_DATA = -1; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-insert-list", allowNoSelect: false, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + valueFormatter: emptyFn, searcherHeight: 24, }); - }, - _init: function () { - BI.SingleSelectInsertList.superclass._init.apply(this, arguments); + } + + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; this.storeValue = o.value; - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue = self._startValue); - // self.trigger.setValue(self.storeValue); + const assertShowValue = () => { + isKey(this._startValue) && (this.storeValue = this._startValue); + // this.trigger.setValue(this.storeValue); }; - this.adapter = BI.createWidget({ - type: "bi.single_select_loader", + this.adapter = createWidget({ + type: SingleSelectLoader.xtype, allowNoSelect: o.allowNoSelect, cls: "popup-single-select-list bi-border-left bi-border-right bi-border-bottom", itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, itemWrapper: o.itemWrapper, logic: { - dynamic: true + dynamic: true, }, // onLoaded: o.onLoaded, el: {}, - value: o.value + value: o.value, }); - this.adapter.on(BI.SingleSelectLoader.EVENT_CHANGE, function () { + this.adapter.on(SingleSelectLoader.EVENT_CHANGE, function () { self.storeValue = this.getValue(); assertShowValue(); - self.fireEvent(BI.SingleSelectInsertList.EVENT_CHANGE); + self.fireEvent(SingleSelectInsertList.EVENT_CHANGE); }); - this.searcherPane = BI.createWidget({ + this.searcherPane = createWidget({ type: "bi.single_select_search_insert_pane", allowNoSelect: o.allowNoSelect, cls: "bi-border-left bi-border-right bi-border-bottom", valueFormatter: o.valueFormatter, - keywordGetter: function () { + keywordGetter () { return self.trigger.getKeyword(); }, - itemsCreator: function (op, callback) { + itemsCreator (op, callback) { op.keywords = [self.trigger.getKeyword()]; - if (BI.isNotEmptyString(op.keywords[0])) { + if (isNotEmptyString(op.keywords[0])) { this.setKeyword(op.keywords[0]); o.itemsCreator(op, callback); } @@ -63,145 +85,147 @@ BI.SingleSelectInsertList = BI.inherit(BI.Single, { }); this.searcherPane.setVisible(false); - this.trigger = BI.createWidget({ - type: "bi.searcher", + this.trigger = createWidget({ + type: Searcher.xtype, el: { - type: "bi.select_patch_editor", + type: SelectPatchEditor.xtype, el: { - type: "bi.search_editor", - watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"), + type: SearchEditor.xtype, + watermark: i18nText("BI-Basic_Search_And_Patch_Paste"), }, - ref: function (ref) { + ref (ref) { self.editor = ref; }, height: o.searcherHeight, }, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch (op, callback) { callback(); }, adapter: this.adapter, popup: this.searcherPane, masker: false, value: o.value, - listeners: [{ - eventName: BI.Searcher.EVENT_START, - action: function () { - self._showSearcherPane(); - self._setStartValue(); - this.setValue(BI.deepClone(self.storeValue)); - } - }, { - eventName: BI.Searcher.EVENT_STOP, - action: function () { - self._showAdapter(); - self._setStartValue(); - self.adapter.setValue(self.storeValue); - // 需要刷新回到初始界面，否则搜索的结果不能放在最前面 - self.adapter.populate(); - } - }, { - eventName: BI.Searcher.EVENT_PAUSE, - action: function () { - var keyword = this.getKeyword(); - self.storeValue = keyword; - self._showAdapter(); - self.adapter.setValue(self.storeValue); - self._setStartValue(keyword); - assertShowValue(); - self.adapter.populate(); - self._setStartValue(); - self.fireEvent(BI.SingleSelectInsertList.EVENT_CHANGE); - - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - self.storeValue = this.getValue(); - self.fireEvent(BI.SingleSelectInsertList.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_START, + action () { + self._showSearcherPane(); + self._setStartValue(); + this.setValue(deepClone(self.storeValue)); + }, + }, + { + eventName: Searcher.EVENT_STOP, + action () { + self._showAdapter(); + self._setStartValue(); + self.adapter.setValue(self.storeValue); + // 需要刷新回到初始界面，否则搜索的结果不能放在最前面 + self.adapter.populate(); + }, + }, + { + eventName: Searcher.EVENT_PAUSE, + action () { + const keyword = this.getKeyword(); + self.storeValue = keyword; + self._showAdapter(); + self.adapter.setValue(self.storeValue); + self._setStartValue(keyword); + assertShowValue(); + self.adapter.populate(); + self._setStartValue(); + self.fireEvent(SingleSelectInsertList.EVENT_CHANGE); + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action () { + self.storeValue = this.getValue(); + self.fireEvent(SingleSelectInsertList.EVENT_CHANGE); + }, } - }] + ], }); - BI.createWidget({ - type: "bi.vertical_fill", + createWidget({ + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], element: this, - items: [{ - el: this.trigger, - }, { - el: this.adapter, - }] + items: [ + { + el: this.trigger, + }, + { + el: this.adapter, + } + ], }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.searcherPane, - top: 24, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: 24, + bottom: 0, + left: 0, + right: 0, + } + ], }); - }, + } - _showAdapter: function () { + _showAdapter() { this.adapter.setVisible(true); this.searcherPane.setVisible(false); - }, + } - _showSearcherPane: function () { + _showSearcherPane() { this.searcherPane.setVisible(true); this.adapter.setVisible(false); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); - }, + } - _assertValue: function () {}, + _assertValue() {} - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.adapter.setStartValue(value); - }, + } - isAllSelected: function () { + isAllSelected() { return this.adapter.isAllSelected(); - }, + } - resize: function () { + resize() { // this.trigger.getCounter().adjustView(); // this.trigger.adjustView(); - }, - setValue: function (v) { + } + + setValue(v) { this.storeValue = v; this.adapter.setValue(this.storeValue); this.trigger.setValue(this.storeValue); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue); - }, + getValue() { + return deepClone(this.storeValue); + } - populate: function () { + populate() { this._count = null; this._allData = null; - this.adapter.populate.apply(this.adapter, arguments); - this.trigger.populate.apply(this.trigger, arguments); + this.adapter.populate(...arguments); + this.trigger.populate(...arguments); } -}); - -BI.extend(BI.SingleSelectInsertList, { - REQ_GET_DATA_LENGTH: 0, - REQ_GET_ALL_DATA: -1 -}); - -BI.SingleSelectInsertList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_insert_list", BI.SingleSelectInsertList); +} diff --git a/src/widget/singleselect/trigger/editor.singleselect.js b/src/widget/singleselect/trigger/editor.singleselect.js index 881f60b45..635b7481e 100644 --- a/src/widget/singleselect/trigger/editor.singleselect.js +++ b/src/widget/singleselect/trigger/editor.singleselect.js @@ -1,25 +1,28 @@ -/** - * 单选输入框 - * Created by guy on 15/11/3. - * @class BI.SingleSelectEditor - * @extends Widget - */ -BI.SingleSelectEditor = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, i18nText, createWidget, Controller, isEmptyString, isEmptyArray, BlankSplitChar } from "@/core"; +import { StateEditor } from "@/case"; +import { SelectPatchEditor } from "../../multiselect"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectEditor.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectEditor extends Widget { + static xtype = "bi.single_select_editor"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-editor", el: {}, - text: BI.i18nText("BI-Basic_Please_Select"), - watermark: BI.i18nText("BI-Basic_Search"), + text: i18nText("BI-Basic_Please_Select"), + watermark: i18nText("BI-Basic_Search"), }); - }, + } - _init: function () { - BI.SingleSelectEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.select_patch_editor", + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.el, { + type: SelectPatchEditor.xtype, element: this, height: o.height, watermark: o.watermark, @@ -29,64 +32,59 @@ BI.SingleSelectEditor = BI.inherit(BI.Widget, { text: o.text, }); - 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.StateEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectEditor.EVENT_FOCUS); + this.editor.on(StateEditor.EVENT_FOCUS, () => { + this.fireEvent(SingleSelectEditor.EVENT_FOCUS); }); - this.editor.on(BI.StateEditor.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectEditor.EVENT_BLUR); + this.editor.on(StateEditor.EVENT_BLUR, () => { + this.fireEvent(SingleSelectEditor.EVENT_BLUR); }); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setState: function (state) { + setState(state) { this.editor.setState(state); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getKeywords: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); - if (BI.isEmptyString(keywords[keywords.length - 1])) { + getKeywords() { + const val = this.editor.getValue(); + let keywords = val.split(/\u200b\s\u200b/); + if (isEmptyString(keywords[keywords.length - 1])) { keywords = keywords.slice(0, keywords.length - 1); } if (/\u200b\s\u200b$/.test(val)) { - return keywords.concat([BI.BlankSplitChar]); + return keywords.concat([BlankSplitChar]); } return keywords; - }, + } - getKeyword: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); - if (BI.isEmptyString(keywords[keywords.length - 1])) { + getKeyword() { + const val = this.editor.getValue(); + let keywords = val.split(/\u200b\s\u200b/); + if (isEmptyString(keywords[keywords.length - 1])) { keywords = keywords.slice(0, keywords.length - 1); } - return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; - }, - - populate: function (items) { + return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; } -}); -BI.SingleSelectEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.shortcut("bi.single_select_editor", BI.SingleSelectEditor); \ No newline at end of file + populate(items) {} +} diff --git a/src/widget/singleselect/trigger/index.js b/src/widget/singleselect/trigger/index.js new file mode 100644 index 000000000..e5abc14b0 --- /dev/null +++ b/src/widget/singleselect/trigger/index.js @@ -0,0 +1,2 @@ +export { SingleSelectEditor } from "./editor.singleselect"; +export { SingleSelectSearcher } from "./searcher.singleselect"; diff --git a/src/widget/singleselect/trigger/searcher.singleselect.js b/src/widget/singleselect/trigger/searcher.singleselect.js index 800fd7560..82b581942 100644 --- a/src/widget/singleselect/trigger/searcher.singleselect.js +++ b/src/widget/singleselect/trigger/searcher.singleselect.js @@ -1,162 +1,161 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.SingleSelectSearcher - * @extends Widget - */ -BI.SingleSelectSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearcher.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isNotNull, isUndefined, Selection } from "@/core"; +import { SingleSelectEditor } from "./editor.singleselect"; +import { Searcher } from "@/base"; + +@shortcut() +export class SingleSelectSearcher extends Widget { + static xtype = "bi.single_select_searcher"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, masker: {}, - allowNoSelect: false + allowNoSelect: false, }); - }, + } - _init: function () { - BI.SingleSelectSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { type: "bi.single_select_editor", height: o.height, watermark: o.watermark, text: o.text, listeners: [{ - eventName: BI.SingleSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.SingleSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_BLUR); - } - }] + eventName: SingleSelectEditor.EVENT_FOCUS, + action: () => { + this.fireEvent(SingleSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: SingleSelectEditor.EVENT_BLUR, + action: () => { + this.fireEvent(SingleSelectSearcher.EVENT_BLUR); + }, + } + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, height: o.height, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback(); }, el: this.editor, - popup: BI.extend({ + popup: extend({ type: "bi.single_select_search_pane", allowNoSelect: o.allowNoSelect, valueFormatter: o.valueFormatter, - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getValue(); + keywordGetter: () => this.editor.getValue(), + itemsCreator(op, callback) { + const keyword = self.editor.getValue(); op.keywords = [keyword]; this.setKeyword(keyword); o.itemsCreator(op, callback); }, - value: o.value - }, o.popup), + value: o.value, + }, + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + this.fireEvent(SingleSelectSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.SingleSelectSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + this.fireEvent(SingleSelectSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + this.fireEvent(SingleSelectSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, (...args) => { + this.fireEvent(SingleSelectSearcher.EVENT_CHANGE, ...args); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.SingleSelectSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, () => { + const keywords = this.searcher.getKeywords(); + this.fireEvent(SingleSelectSearcher.EVENT_SEARCHING, keywords); }); - if(BI.isNotNull(o.value)){ + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getKeyword(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setState: function (v) { - var o = this.options; - if (BI.isUndefined(v)) { - this.editor.setState(BI.Selection.None); + setState(v) { + const o = this.options; + if (isUndefined(v)) { + this.editor.setState(Selection.None); } else { v = v ?? ""; - this.editor.setState(o.valueFormatter(v + "") || (v + "")); + this.editor.setState(o.valueFormatter(`${v}`) || `${v}`); } - }, + } - setValue: function (ob) { + setValue(ob) { this.setState(ob); this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - populate: function (items) { - this.searcher.populate.apply(this.searcher, arguments); + populate(items) { + this.searcher.populate(...arguments); } -}); - -BI.SingleSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectSearcher.EVENT_BLUR = "EVENT_BLUR"; -BI.SingleSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.SingleSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SingleSelectSearcher.EVENT_START = "EVENT_START"; -BI.SingleSelectSearcher.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SingleSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.shortcut("bi.single_select_searcher", BI.SingleSelectSearcher); +}