From dcbd4c8087bd4248ce5690638e3f39dbf5cef5f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Mon, 16 Jan 2023 15:19:24 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14108=20refactor:componet/valuechooser?= =?UTF-8?q?=E6=96=87=E4=BB=B6es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/index.js | 3 + .../valuechooser/abstract.valuechooser.js | 142 ++++++++-------- .../valuechooser/combo.valuechooser.insert.js | 151 +++++++++-------- .../valuechooser/combo.valuechooser.js | 155 +++++++++--------- .../valuechooser/combo.valuechooser.nobar.js | 140 ++++++++-------- src/component/valuechooser/index.js | 5 + .../valuechooser/pane.valuechooser.js | 81 +++++---- 7 files changed, 355 insertions(+), 322 deletions(-) create mode 100644 src/component/valuechooser/index.js diff --git a/src/component/index.js b/src/component/index.js index c6978e185..acd7babbc 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -1,15 +1,18 @@ import * as allvaluechooser from "./allvaluechooser"; import * as form from "./form"; +import * as valueChooser from "./valuechooser"; import { AllValueMultiTextValueCombo } from "./allvaluemultitextvaluecombo/allvalue.multitextvalue.combo"; Object.assign(BI, { ...allvaluechooser, ...form, + ...valueChooser, AllValueMultiTextValueCombo, }); export * from "./allvaluechooser"; export * from "./form"; +export * from "./valuechooser"; export { AllValueMultiTextValueCombo }; diff --git a/src/component/valuechooser/abstract.valuechooser.js b/src/component/valuechooser/abstract.valuechooser.js index a97434a84..8cf66acc0 100644 --- a/src/component/valuechooser/abstract.valuechooser.js +++ b/src/component/valuechooser/abstract.valuechooser.js @@ -1,110 +1,122 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AbstractValueChooser - * @extends BI.Widget - */ -BI.AbstractValueChooser = BI.inherit(BI.Widget, { +import { + Widget, + extend, + emptyFn, + isNotNull, + some, + isNotEmptyArray, + each, + Func, + uniq, + makeObject, + filter, + Selection, + difference, + map +} from "@/core"; +import { MultiSelectCombo } from "@/widget"; - _const: { - perPage: 100 - }, +export class AbstractValueChooser extends Widget { + _const = { perPage: 100 }; - _defaultConfig: function () { - return BI.extend(BI.AbstractValueChooser.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _valueFormatter: function (v) { - var text = v; + _valueFormatter(v) { + let text = v; if (this.options.valueFormatter) { return this.options.valueFormatter(v); } - if (BI.isNotNull(this.items)) { - BI.some(this.items, function (i, item) { + if (isNotNull(this.items)) { + some(this.items, (i, item) => { // 把value都换成字符串 - if (item.value === v || item.value + "" === v) { + if (item.value === v || `${item.value}` === v) { text = item.text; + return true; } }); } + return text; - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * this._const.perPage < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this, o = this.options; - if (!o.cache || !this.items) { - o.itemsCreator({}, function (items) { - self.items = items; - call(items); - }); - } else { - call(this.items); - } - function call (items) { - var keywords = (options.keywords || []).slice(); - var resultItems = items; - if(BI.isNotEmptyArray(keywords)) { + _itemsCreator(options, callback) { + const call = items => { + const keywords = (options.keywords || []).slice(); + let resultItems = items; + if (isNotEmptyArray(keywords)) { resultItems = []; - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); resultItems = resultItems.concat(search.match).concat(search.find); }); - resultItems = BI.uniq(resultItems); + resultItems = uniq(resultItems); } - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - resultItems = BI.filter(resultItems, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const filterFunc = makeObject(options.selectedValues, true); + resultItems = filter(resultItems, (i, ob) => !filterFunc[ob.value]); } - if (options.type === BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: resultItems + items: resultItems, }); + return; } - if (options.type === BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: resultItems.length}); + if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) { + callback({ count: resultItems.length }); + return; } callback({ - items: self._getItemsByTimes(resultItems, options.times), - hasNext: self._hasNextByTimes(resultItems, options.times) + items: this._getItemsByTimes(resultItems, options.times), + hasNext: this._hasNextByTimes(resultItems, options.times), + }); + }; + const o = this.options; + if (!o.cache || !this.items) { + o.itemsCreator({}, items => { + this.items = items; + call(items); }); + } else { + call(this.items); } - }, + } - _assertValue: function (v) { + _assertValue(v) { v = v || {}; - var value = v; - if (v.type === BI.Selection.Multi && BI.isNotNull(this.items)) { - var isAllSelect = BI.difference(BI.map(this.items, "value"), v.value).length === 0; + let value = v; + if (v.type === Selection.Multi && isNotNull(this.items)) { + const isAllSelect = difference(map(this.items, "value"), v.value).length === 0; if (isAllSelect) { value = { - type: BI.Selection.All, + type: Selection.All, value: [], }; } } + return value; - }, -}); \ No newline at end of file + } +} diff --git a/src/component/valuechooser/combo.valuechooser.insert.js b/src/component/valuechooser/combo.valuechooser.insert.js index a2cdce0d9..096aa5ac1 100644 --- a/src/component/valuechooser/combo.valuechooser.insert.js +++ b/src/component/valuechooser/combo.valuechooser.insert.js @@ -1,105 +1,114 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况 - * 封装了字段处理逻辑 - */ -BI.ValueChooserInsertCombo = BI.inherit(BI.AbstractValueChooser, { +import { shortcut, extend, emptyFn, isNotNull, createWidget, bind, Selection, difference, map } from "@/core"; +import { AbstractValueChooser } from "./abstract.valuechooser"; +import { MultiSelectCombo, MultiSelectInsertCombo } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.ValueChooserInsertCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class ValueChooserInsertCombo extends AbstractValueChooser { + static xtype = "bi.value_chooser_insert_combo"; + + 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-value-chooser-insert-combo", width: 200, height: 24, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.ValueChooserInsertCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - if (BI.isNotNull(o.items)) { + _init() { + super._init(...arguments); + const o = this.options; + if (isNotNull(o.items)) { this.items = o.items; } - this.combo = BI.createWidget({ - type: "bi.multi_select_insert_combo", + this.combo = createWidget({ + type: MultiSelectInsertCombo.xtype, simple: o.simple, element: this, allowEdit: o.allowEdit, text: o.text, value: this._assertValue(o.value), - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, height: o.height, - listeners: [{ - eventName: BI.MultiSelectCombo.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.ValueChooserInsertCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_BLUR, - action: function () { - self.fireEvent(BI.ValueChooserInsertCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_STOP, - action: function () { - self.fireEvent(BI.ValueChooserInsertCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_CLICK_ITEM, - action: function () { - self.fireEvent(BI.ValueChooserInsertCombo.EVENT_CLICK_ITEM); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.ValueChooserInsertCombo.EVENT_SEARCHING); + listeners: [ + { + eventName: MultiSelectCombo.EVENT_FOCUS, + action: () => { + this.fireEvent(ValueChooserInsertCombo.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectCombo.EVENT_BLUR, + action: () => { + this.fireEvent(ValueChooserInsertCombo.EVENT_BLUR); + }, + }, + { + eventName: MultiSelectCombo.EVENT_STOP, + action: () => { + this.fireEvent(ValueChooserInsertCombo.EVENT_STOP); + }, + }, + { + eventName: MultiSelectCombo.EVENT_CLICK_ITEM, + action: () => { + this.fireEvent(ValueChooserInsertCombo.EVENT_CLICK_ITEM); + }, + }, + { + eventName: MultiSelectCombo.EVENT_SEARCHING, + action: () => { + this.fireEvent(ValueChooserInsertCombo.EVENT_SEARCHING); + }, + }, + { + eventName: MultiSelectCombo.EVENT_CONFIRM, + action: () => { + this.fireEvent(ValueChooserInsertCombo.EVENT_CONFIRM); + }, } - }, { - eventName: BI.MultiSelectCombo.EVENT_CONFIRM, - action: function () { - self.fireEvent(BI.ValueChooserInsertCombo.EVENT_CONFIRM); - } - }] + ], }); - }, + } - setValue: function (v) { + setValue(v) { this.combo.setValue(this._assertValue(v)); - }, + } - getValue: function () { - var val = this.combo.getValue() || {}; + getValue() { + const val = this.combo.getValue() || {}; + return { type: val.type, - value: val.value + value: val.value, }; - }, + } - getAllValue: function() { - var val = this.combo.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getAllValue() { + const val = this.combo.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.combo.populate(); } -}); - -BI.ValueChooserInsertCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.ValueChooserInsertCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ValueChooserInsertCombo.EVENT_STOP = "EVENT_STOP"; -BI.ValueChooserInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.ValueChooserInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.ValueChooserInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.value_chooser_insert_combo", BI.ValueChooserInsertCombo); +} diff --git a/src/component/valuechooser/combo.valuechooser.js b/src/component/valuechooser/combo.valuechooser.js index 786dc1abd..b913f9a55 100644 --- a/src/component/valuechooser/combo.valuechooser.js +++ b/src/component/valuechooser/combo.valuechooser.js @@ -1,110 +1,115 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.ValueChooserCombo - * @extends BI.Widget - */ -BI.ValueChooserCombo = BI.inherit(BI.AbstractValueChooser, { +import { shortcut, extend, emptyFn, isNotNull, createWidget, bind, Selection, difference, map } from "@/core"; +import { AbstractValueChooser } from "./abstract.valuechooser"; +import { MultiSelectCombo } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.ValueChooserCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class ValueChooserCombo extends AbstractValueChooser { + static xtype = "bi.value_chooser_combo"; + + 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-value-chooser-combo", width: 200, height: 24, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.ValueChooserCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - if (BI.isNotNull(o.items)) { + _init() { + super._init(...arguments); + const o = this.options; + if (isNotNull(o.items)) { this.items = o.items; } - this.combo = BI.createWidget({ - type: "bi.multi_select_combo", + this.combo = createWidget({ + type: MultiSelectCombo.xtype, simple: o.simple, element: this, allowEdit: o.allowEdit, text: o.text, defaultText: o.defaultText, value: this._assertValue(o.value), - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, height: o.height, - listeners: [{ - eventName: BI.MultiSelectCombo.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.ValueChooserCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_BLUR, - action: function () { - self.fireEvent(BI.ValueChooserCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_STOP, - action: function () { - self.fireEvent(BI.ValueChooserCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_CLICK_ITEM, - action: function () { - self.fireEvent(BI.ValueChooserCombo.EVENT_CLICK_ITEM); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.ValueChooserCombo.EVENT_SEARCHING); + listeners: [ + { + eventName: MultiSelectCombo.EVENT_FOCUS, + action: () => { + this.fireEvent(ValueChooserCombo.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectCombo.EVENT_BLUR, + action: () => { + this.fireEvent(ValueChooserCombo.EVENT_BLUR); + }, + }, + { + eventName: MultiSelectCombo.EVENT_STOP, + action: () => { + this.fireEvent(ValueChooserCombo.EVENT_STOP); + }, + }, + { + eventName: MultiSelectCombo.EVENT_CLICK_ITEM, + action: () => { + this.fireEvent(ValueChooserCombo.EVENT_CLICK_ITEM); + }, + }, + { + eventName: MultiSelectCombo.EVENT_SEARCHING, + action: () => { + this.fireEvent(ValueChooserCombo.EVENT_SEARCHING); + }, + }, + { + eventName: MultiSelectCombo.EVENT_CONFIRM, + action: () => { + this.fireEvent(ValueChooserCombo.EVENT_CONFIRM); + }, } - }, { - eventName: BI.MultiSelectCombo.EVENT_CONFIRM, - action: function () { - self.fireEvent(BI.ValueChooserCombo.EVENT_CONFIRM); - } - }] + ], }); - }, + } - setValue: function (v) { + setValue(v) { this.combo.setValue(this._assertValue(v)); - }, + } - getValue: function () { - var val = this.combo.getValue() || {}; + getValue() { + const val = this.combo.getValue() || {}; + return { type: val.type, - value: val.value + value: val.value, }; - }, + } - getAllValue: function () { - var val = this.combo.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getAllValue() { + const val = this.combo.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.combo.populate(); } -}); - -BI.ValueChooserCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.ValueChooserCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ValueChooserCombo.EVENT_STOP = "EVENT_STOP"; -BI.ValueChooserCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.ValueChooserCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.ValueChooserCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.value_chooser_combo", BI.ValueChooserCombo); +} diff --git a/src/component/valuechooser/combo.valuechooser.nobar.js b/src/component/valuechooser/combo.valuechooser.nobar.js index 2910ea4fa..502c61aaf 100644 --- a/src/component/valuechooser/combo.valuechooser.nobar.js +++ b/src/component/valuechooser/combo.valuechooser.nobar.js @@ -1,98 +1,98 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2020/12/31 - */ -BI.ValueChooserNoBarCombo = BI.inherit(BI.AbstractValueChooser, { +import { shortcut, isNotNull, bind } from "@/core"; +import { AbstractValueChooser } from "./abstract.valuechooser"; +import { MultiSelectCombo, MultiSelectNoBarCombo } from "@/widget"; - props: { - baseCls: "bi-value-chooser-combo", - width: 200, - height: 24, - items: null, - itemsCreator: BI.emptyFn, - cache: true - }, +@shortcut() +export class ValueChooserNoBarCombo extends AbstractValueChooser { + static xtype = "bi.value_chooser_no_bar_combo"; - render: function () { - var self = this, o = this.options; - if (BI.isNotNull(o.items)) { + props = { baseCls: "bi-value-chooser-combo", width: 200, height: 24, items: null, cache: true }; + + 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"; + + render() { + const o = this.options; + if (isNotNull(o.items)) { this.items = o.items; } return { - type: "bi.multi_select_no_bar_combo", + type: MultiSelectNoBarCombo.xtype, simple: o.simple, allowEdit: o.allowEdit, text: o.text, defaultText: o.defaultText, value: this._assertValue(o.value), - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, height: o.height, - ref: function (_ref) { - self.combo = _ref; + ref: _ref => { + this.combo = _ref; }, - listeners: [{ - eventName: BI.MultiSelectCombo.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.ValueChooserNoBarCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_BLUR, - action: function () { - self.fireEvent(BI.ValueChooserNoBarCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_STOP, - action: function () { - self.fireEvent(BI.ValueChooserNoBarCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_CLICK_ITEM, - action: function () { - self.fireEvent(BI.ValueChooserNoBarCombo.EVENT_CLICK_ITEM); - } - }, { - eventName: BI.MultiSelectCombo.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.ValueChooserNoBarCombo.EVENT_SEARCHING); + listeners: [ + { + eventName: MultiSelectCombo.EVENT_FOCUS, + action: () => { + this.fireEvent(ValueChooserNoBarCombo.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectCombo.EVENT_BLUR, + action: () => { + this.fireEvent(ValueChooserNoBarCombo.EVENT_BLUR); + }, + }, + { + eventName: MultiSelectCombo.EVENT_STOP, + action: () => { + this.fireEvent(ValueChooserNoBarCombo.EVENT_STOP); + }, + }, + { + eventName: MultiSelectCombo.EVENT_CLICK_ITEM, + action: () => { + this.fireEvent(ValueChooserNoBarCombo.EVENT_CLICK_ITEM); + }, + }, + { + eventName: MultiSelectCombo.EVENT_SEARCHING, + action: () => { + this.fireEvent(ValueChooserNoBarCombo.EVENT_SEARCHING); + }, + }, + { + eventName: MultiSelectCombo.EVENT_CONFIRM, + action: () => { + this.fireEvent(ValueChooserNoBarCombo.EVENT_CONFIRM); + }, } - }, { - eventName: BI.MultiSelectCombo.EVENT_CONFIRM, - action: function () { - self.fireEvent(BI.ValueChooserNoBarCombo.EVENT_CONFIRM); - } - }] + ], }; - }, + } - setValue: function (v) { + setValue(v) { this.combo.setValue(v); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); - }, + } - getAllValue: function () { + getAllValue() { return this.getValue(); - }, + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.combo.populate(); } -}); - -BI.ValueChooserNoBarCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.ValueChooserNoBarCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ValueChooserNoBarCombo.EVENT_STOP = "EVENT_STOP"; -BI.ValueChooserNoBarCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.ValueChooserNoBarCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.ValueChooserNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.value_chooser_no_bar_combo", BI.ValueChooserNoBarCombo); +} diff --git a/src/component/valuechooser/index.js b/src/component/valuechooser/index.js new file mode 100644 index 000000000..1b920d806 --- /dev/null +++ b/src/component/valuechooser/index.js @@ -0,0 +1,5 @@ +export { ValueChooserInsertCombo } from "./combo.valuechooser.insert"; +export { ValueChooserCombo } from "./combo.valuechooser"; +export { ValueChooserNoBarCombo } from "./combo.valuechooser.nobar"; +export { AbstractValueChooser } from "./abstract.valuechooser"; +export { ValueChooserPane } from "./pane.valuechooser"; diff --git a/src/component/valuechooser/pane.valuechooser.js b/src/component/valuechooser/pane.valuechooser.js index d483f26fb..9936aeebd 100644 --- a/src/component/valuechooser/pane.valuechooser.js +++ b/src/component/valuechooser/pane.valuechooser.js @@ -1,70 +1,69 @@ -/** - * 简单的复选面板, 适用于数据量少的情况 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.ValueChooserPane - * @extends BI.Widget - */ -BI.ValueChooserPane = BI.inherit(BI.AbstractValueChooser, { +import { shortcut, extend, emptyFn, createWidget, bind, isNotNull, Selection, difference, map } from "@/core"; +import { AbstractValueChooser } from "./abstract.valuechooser"; +import { MultiSelectList } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.ValueChooserPane.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class ValueChooserPane extends AbstractValueChooser { + static xtype = "bi.value_chooser_pane"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-value-chooser-pane", items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.ValueChooserPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.list = BI.createWidget({ - type: "bi.multi_select_list", + _init() { + super._init(...arguments); + const o = this.options; + this.list = createWidget({ + type: MultiSelectList.xtype, element: this, value: o.value, - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this) + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), }); - this.list.on(BI.MultiSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.ValueChooserPane.EVENT_CHANGE); + this.list.on(MultiSelectList.EVENT_CHANGE, () => { + this.fireEvent(ValueChooserPane.EVENT_CHANGE); }); - if (BI.isNotNull(o.items)) { + if (isNotNull(o.items)) { this.items = o.items; this.list.populate(); } - }, + } - setValue: function (v) { + setValue(v) { this.list.setValue(v); - }, + } - getValue: function () { - var val = this.list.getValue() || {}; + getValue() { + const val = this.list.getValue() || {}; + return { type: val.type, - value: val.value + value: val.value, }; - }, + } - getAllValue: function() { - var val = this.combo.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getAllValue() { + const val = this.combo.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.list.populate(); } -}); -BI.ValueChooserPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.value_chooser_pane", BI.ValueChooserPane); +}