From 101b3352fa2775797b02ebaf36e8c3c25cc99791 Mon Sep 17 00:00:00 2001 From: zsmj Date: Thu, 12 Jan 2023 15:18:14 +0800 Subject: [PATCH] update --- src/widget/editor/editor.search.js | 280 +++++---- src/widget/index.js | 3 + src/widget/multiselect/index.js | 4 + src/widget/multiselectlist/index.js | 3 + .../multiselectlist/multiselectlist.insert.js | 528 ++++++++++------- .../multiselectlist.insert.nobar.js | 547 ++++++++++-------- src/widget/multiselectlist/multiselectlist.js | 534 +++++++++-------- 7 files changed, 1089 insertions(+), 810 deletions(-) create mode 100644 src/widget/multiselectlist/index.js diff --git a/src/widget/editor/editor.search.js b/src/widget/editor/editor.search.js index bd40ae5a9..48a7b8655 100644 --- a/src/widget/editor/editor.search.js +++ b/src/widget/editor/editor.search.js @@ -1,26 +1,69 @@ -/** - * Created by roy on 15/9/14. - */ -BI.SearchEditor = BI.inherit(BI.Widget, { - _defaultConfig: function (config) { - var conf = BI.SearchEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: "bi-search-editor bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), +import { + shortcut, + Widget, + extend, + i18nText, + emptyFn, + createWidget, + toPix, + isKey, + Controller, + Events, + HTapeLayout, + isEndWithBlank +} from "@/core"; +import { IconButton, Editor, IconLabel } from "@/base"; + +@shortcut() +export class SearchEditor extends Widget { + static xtype = "bi.search_editor"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_BACKSPACE = "EVENT_BACKSPACE"; + static EVENT_CLEAR = "EVENT_CLEAR"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_REMOVE = "EVENT_REMOVE"; + static EVENT_EMPTY = "EVENT_EMPTY"; + + _defaultConfig(config) { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `bi-search-editor bi-focus-shadow ${ + config.simple + ? "bi-border-bottom" + : "bi-border bi-border-radius"}`, height: 24, errorText: "", - watermark: BI.i18nText("BI-Basic_Search"), - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, - value: "" - }); - }, - _init: function () { - BI.SearchEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.editor", + watermark: i18nText("BI-Basic_Search"), + validationChecker: emptyFn, + quitChecker: emptyFn, + value: "", + }); + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { + type: Editor.xtype, simple: o.simple, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), watermark: o.watermark, allowBlank: true, hgap: 1, @@ -30,189 +73,172 @@ BI.SearchEditor = BI.inherit(BI.Widget, { value: o.value, autoTrim: o.autoTrim, }); - this.clear = BI.createWidget({ - type: "bi.icon_button", + this.clear = createWidget({ + type: IconButton.xtype, stopEvent: true, cls: "close-font", - invisible: !BI.isKey(o.value) + invisible: !isKey(o.value), }); - this.clear.on(BI.IconButton.EVENT_CHANGE, function () { + this.clear.on(IconButton.EVENT_CHANGE, () => { self.setValue(""); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT, self.getValue()); + self.fireEvent( + Controller.EVENT_CHANGE, + Events.STOPEDIT, + self.getValue() + ); // 从有内容到无内容的清空也是一次change - self.fireEvent(BI.SearchEditor.EVENT_CHANGE); - self.fireEvent(BI.SearchEditor.EVENT_CLEAR); + self.fireEvent(SearchEditor.EVENT_CHANGE); + self.fireEvent(SearchEditor.EVENT_CLEAR); }); - BI.createWidget({ + createWidget({ element: this, - height: BI.toPix(o.height, o.simple ? 1 : 2), - type: "bi.htape", + height: toPix(o.height, o.simple ? 1 : 2), + type: HTapeLayout.xtype, items: [ { el: { - type: "bi.icon_label", - cls: "search-font" + type: IconLabel.xtype, + cls: "search-font", }, - width: 24 + width: 24, }, { - el: self.editor + el: self.editor, }, { el: this.clear, - width: 24 + width: 24, } - ] + ], }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SearchEditor.EVENT_FOCUS); + this.editor.on(Editor.EVENT_FOCUS, () => { + self.fireEvent(SearchEditor.EVENT_FOCUS); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SearchEditor.EVENT_BLUR); + this.editor.on(Editor.EVENT_BLUR, () => { + self.fireEvent(SearchEditor.EVENT_BLUR); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SearchEditor.EVENT_CLICK); + this.editor.on(Editor.EVENT_CLICK, () => { + self.fireEvent(SearchEditor.EVENT_CLICK); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { + this.editor.on(Editor.EVENT_CHANGE, () => { self._checkClear(); - self.fireEvent(BI.SearchEditor.EVENT_CHANGE); + self.fireEvent(SearchEditor.EVENT_CHANGE); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SearchEditor.EVENT_KEY_DOWN, v); + this.editor.on(Editor.EVENT_KEY_DOWN, v => { + self.fireEvent(SearchEditor.EVENT_KEY_DOWN, v); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SearchEditor.EVENT_SPACE); + this.editor.on(Editor.EVENT_SPACE, () => { + self.fireEvent(SearchEditor.EVENT_SPACE); }); - this.editor.on(BI.Editor.EVENT_BACKSPACE, function () { - self.fireEvent(BI.SearchEditor.EVENT_BACKSPACE); + this.editor.on(Editor.EVENT_BACKSPACE, () => { + self.fireEvent(SearchEditor.EVENT_BACKSPACE); }); - - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SearchEditor.EVENT_VALID); + this.editor.on(Editor.EVENT_VALID, () => { + self.fireEvent(SearchEditor.EVENT_VALID); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.SearchEditor.EVENT_ERROR); + this.editor.on(Editor.EVENT_ERROR, () => { + self.fireEvent(SearchEditor.EVENT_ERROR); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SearchEditor.EVENT_ENTER); + this.editor.on(Editor.EVENT_ENTER, () => { + self.fireEvent(SearchEditor.EVENT_ENTER); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SearchEditor.EVENT_RESTRICT); + this.editor.on(Editor.EVENT_RESTRICT, () => { + self.fireEvent(SearchEditor.EVENT_RESTRICT); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { + this.editor.on(Editor.EVENT_EMPTY, () => { self._checkClear(); - self.fireEvent(BI.SearchEditor.EVENT_EMPTY); + self.fireEvent(SearchEditor.EVENT_EMPTY); }); - this.editor.on(BI.Editor.EVENT_REMOVE, function () { - self.fireEvent(BI.SearchEditor.EVENT_REMOVE); + this.editor.on(Editor.EVENT_REMOVE, () => { + self.fireEvent(SearchEditor.EVENT_REMOVE); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self.fireEvent(BI.SearchEditor.EVENT_CONFIRM); + this.editor.on(Editor.EVENT_CONFIRM, () => { + self.fireEvent(SearchEditor.EVENT_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self.fireEvent(BI.SearchEditor.EVENT_CHANGE_CONFIRM); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => { + self.fireEvent(SearchEditor.EVENT_CHANGE_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SearchEditor.EVENT_START); + this.editor.on(Editor.EVENT_START, () => { + self.fireEvent(SearchEditor.EVENT_START); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SearchEditor.EVENT_PAUSE); + this.editor.on(Editor.EVENT_PAUSE, () => { + self.fireEvent(SearchEditor.EVENT_PAUSE); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SearchEditor.EVENT_STOP); + this.editor.on(Editor.EVENT_STOP, () => { + self.fireEvent(SearchEditor.EVENT_STOP); }); - }, + } - _checkClear: function () { + _checkClear() { if (!this.getValue()) { this.clear.invisible(); } else { this.clear.visible(); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - getValue: function () { + getValue() { if (this.isValid()) { return this.editor.getValue(); } - }, + } - getKeywords: function () { - var val = this.editor.getLastChangedValue(); - var keywords = val.match(/[\S]+/g); - if (BI.isEndWithBlank(val)) { + getKeywords() { + const val = this.editor.getLastChangedValue(); + const keywords = val.match(/[\S]+/g); + if (isEndWithBlank(val)) { return keywords.concat([" "]); } + return keywords; - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - if (BI.isKey(v)) { + if (isKey(v)) { this.clear.visible(); } - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - showClearIcon: function () { + showClearIcon() { this.clear.visible(); - }, + } - hideClearIcon: function () { + hideClearIcon() { this.clear.invisible(); } -}); -BI.SearchEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SearchEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.SearchEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.SearchEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.SearchEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.SearchEditor.EVENT_BACKSPACE = "EVENT_BACKSPACE"; -BI.SearchEditor.EVENT_CLEAR = "EVENT_CLEAR"; - -BI.SearchEditor.EVENT_START = "EVENT_START"; -BI.SearchEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SearchEditor.EVENT_STOP = "EVENT_STOP"; -BI.SearchEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SearchEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SearchEditor.EVENT_VALID = "EVENT_VALID"; -BI.SearchEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.SearchEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.SearchEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.SearchEditor.EVENT_REMOVE = "EVENT_REMOVE"; -BI.SearchEditor.EVENT_EMPTY = "EVENT_EMPTY"; -BI.shortcut("bi.search_editor", BI.SearchEditor); +} diff --git a/src/widget/index.js b/src/widget/index.js index d2284b0b8..4e3aaf496 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -12,6 +12,7 @@ import { MultiTreeCombo } from "./multitree/multi.tree.combo"; import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; import * as multiselect from "./multiselect"; +import * as multiselectlist from "./multiselectlist"; Object.assign(BI, { Collapse, @@ -28,6 +29,7 @@ Object.assign(BI, { MultiTreeInsertCombo, MultiTreeListCombo, ...multiselect, + ...multiselectlist, }); export * from "./date/calendar"; @@ -43,6 +45,7 @@ export { MultiTreeCombo } from "./multitree/multi.tree.combo"; export { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; export { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; export * from "./multiselect"; +export * from "./multiselectlist"; export { Collapse diff --git a/src/widget/multiselect/index.js b/src/widget/multiselect/index.js index e69de29bb..9d15e06a0 100644 --- a/src/widget/multiselect/index.js +++ b/src/widget/multiselect/index.js @@ -0,0 +1,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"; diff --git a/src/widget/multiselectlist/index.js b/src/widget/multiselectlist/index.js new file mode 100644 index 000000000..416458b1f --- /dev/null +++ b/src/widget/multiselectlist/index.js @@ -0,0 +1,3 @@ +export * from "./multiselectlist.insert"; +export * from "./multiselectlist.insert.nobar"; +export * from "./multiselectlist"; diff --git a/src/widget/multiselectlist/multiselectlist.insert.js b/src/widget/multiselectlist/multiselectlist.insert.js index 8b6e8785f..71616ccb3 100644 --- a/src/widget/multiselectlist/multiselectlist.insert.js +++ b/src/widget/multiselectlist/multiselectlist.insert.js @@ -1,59 +1,105 @@ -/** - * Created by zcf_1 on 2017/5/2. - */ -BI.MultiSelectInsertList = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInsertList.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + deepClone, + isKey, + Selection, + remove, + pushDistinct, + createWidget, + isNotEmptyString, + i18nText, + isEmptyArray, + last, + initial, + endWith, + AbsoluteLayout, + isEmptyString, + makeObject, + each, + Func, + map, + concat, + isNotNull, + values, + filter, + contains, + isNull, VerticalFillLayout +} from "@/core"; +import { Single, Searcher } from "@/base"; +import { MultiSelectBar } from "@/case"; +import { SelectPatchEditor } from "../multiselect/trigger/editor/editor.patch"; +import { MultiSelectLoader } from "../multiselect/multiselect.loader"; +import { MultiSelectSearchInsertPane } from "../multiselect/search/multiselect.search.insert.pane"; +import { SearchEditor } from "@/widget/editor/editor.search"; + + +@shortcut() +export class MultiSelectInsertList extends Single { + static xtype = "bi.multi_select_insert_list"; + + static REQ_GET_DATA_LENGTH = "1"; + static REQ_GET_ALL_DATA = "-1"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-insert-list", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcherHeight: BI.SIZE_CONSANTS.TRIGGER_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }); - }, - _init: function () { - BI.MultiSelectInsertList.superclass._init.apply(this, arguments); + } - var self = this, o = this.options; - this.storeValue = this._assertValue(BI.deepClone(o.value) || {}); + _init() { + super._init(...arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, self._startValue) : BI.pushDistinct(self.storeValue.value, self._startValue)); + const self = this, + o = this.options; + this.storeValue = this._assertValue(deepClone(o.value) || {}); + + function assertShowValue() { + isKey(self._startValue) && + (self.storeValue.type === Selection.All + ? remove(self.storeValue.value, self._startValue) + : pushDistinct(self.storeValue.value, self._startValue)); // self.trigger.setValue(self.storeValue); - }; + } - this.adapter = BI.createWidget({ - type: "bi.multi_select_loader", + this.adapter = createWidget({ + type: MultiSelectLoader.xtype, cls: "popup-multi-select-list bi-border-left bi-border-right bi-border-bottom", itemsCreator: o.itemsCreator, itemHeight: o.itemHeight, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, logic: { - dynamic: false + dynamic: false, }, // onLoaded: o.onLoaded, el: {}, isDefaultInit: true, - value: o.value + value: o.value, }); - this.adapter.on(BI.MultiSelectLoader.EVENT_CHANGE, function () { + this.adapter.on(MultiSelectLoader.EVENT_CHANGE, function () { self.storeValue = this.getValue(); assertShowValue(); - self.fireEvent(BI.MultiSelectInsertList.EVENT_CHANGE); + self.fireEvent(MultiSelectInsertList.EVENT_CHANGE); }); - this.searcherPane = BI.createWidget({ - type: "bi.multi_select_search_insert_pane", + this.searcherPane = createWidget({ + type: MultiSelectSearchInsertPane.xtype, cls: "bi-border-left bi-border-right bi-border-bottom", valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, - keywordGetter: function () { + keywordGetter() { return self.trigger.getKeyword(); }, - itemsCreator: function (op, callback) { - var keyword = self.trigger.getKeyword(); - if (BI.isNotEmptyString(keyword)) { + itemsCreator(op, callback) { + const keyword = self.trigger.getKeyword(); + if (isNotEmptyString(keyword)) { op.keywords = [keyword]; this.setKeyword(op.keywords[0]); o.itemsCreator(op, callback); @@ -63,298 +109,338 @@ BI.MultiSelectInsertList = 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; }, }, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback(); }, adapter: this.adapter, popup: this.searcherPane, masker: false, - 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 keywords = self._getKeywords(); - if (keywords[keywords.length - 1] === BI.BlankSplitChar) { - keywords = keywords.slice(0, keywords.length - 1); - } - var keyword = BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; - self._join({ - type: BI.Selection.Multi, - value: [keyword] - }, function () { - if (self.storeValue.type === BI.Selection.Multi) { - BI.pushDistinct(self.storeValue.value, keyword); - } + 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._setStartValue(keyword); - assertShowValue(); + // 需要刷新回到初始界面，否则搜索的结果不能放在最前面 self.adapter.populate(); - self._setStartValue(""); - self.fireEvent(BI.MultiSelectInsertList.EVENT_CHANGE); - }); - self._showAdapter(); - } - }, { - eventName: BI.Searcher.EVENT_SEARCHING, - action: function () { - var keywords = self._getKeywords(); - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { + }, + }, + { + eventName: Searcher.EVENT_PAUSE, + action() { + let keywords = self._getKeywords(); + if ( + keywords[keywords.length - 1] === BI.BlankSplitChar + ) { + keywords = keywords.slice(0, keywords.length - 1); + } + const keyword = isEmptyArray(keywords) + ? "" + : keywords[keywords.length - 1]; + self._join( + { + type: Selection.Multi, + value: [keyword], + }, + () => { + if (self.storeValue.type === Selection.Multi) { + pushDistinct( + self.storeValue.value, + keyword + ); + } + self._showAdapter(); self.adapter.setValue(self.storeValue); + self._setStartValue(keyword); assertShowValue(); self.adapter.populate(); self._setStartValue(""); - } else { - self.adapter.setValue(self.storeValue); - assertShowValue(); + self.fireEvent( + MultiSelectInsertList.EVENT_CHANGE + ); } - self.fireEvent(BI.MultiSelectInsertList.EVENT_CHANGE); - }); - self._getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")); - } - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectInsertList.EVENT_CHANGE); - }); - } else { - self._join(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectInsertList.EVENT_CHANGE); - }); - } + ); + self._showAdapter(); + }, + }, + { + eventName: Searcher.EVENT_SEARCHING, + action() { + let keywords = self._getKeywords(); + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (endWith(lastKeyword, BI.BlankSplitChar)) { + self.adapter.setValue(self.storeValue); + assertShowValue(); + self.adapter.populate(); + self._setStartValue(""); + } else { + self.adapter.setValue(self.storeValue); + assertShowValue(); + } + self.fireEvent( + MultiSelectInsertList.EVENT_CHANGE + ); + }); + self._getKeywordsLength() > 2000 && + BI.Msg.alert( + i18nText("BI-Basic_Prompt"), + i18nText( + "BI-Basic_Too_Much_Value_Get_Two_Thousand" + ) + ); + } + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action(value, obj) { + if (obj instanceof MultiSelectBar) { + self._joinAll(this.getValue(), () => { + assertShowValue(); + self.fireEvent( + MultiSelectInsertList.EVENT_CHANGE + ); + }); + } else { + self._join(this.getValue(), () => { + assertShowValue(); + self.fireEvent( + MultiSelectInsertList.EVENT_CHANGE + ); + }); + } + }, } - }], - value: o.value + ], + value: o.value, }); - 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: o.searcherHeight || BI.SIZE_CONSANTS.TRIGGER_HEIGHT, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: o.searcherHeight || BI.SIZE_CONSANTS.TRIGGER_HEIGHT, + bottom: 0, + left: 0, + right: 0, + } + ], }); - }, + } - _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)) { keywords = keywords.concat([BI.BlankSplitChar]); } - return keywords.length > 2000 ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) : keywords.slice(0, 2000); - }, + return keywords.length > 2000 + ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) + : keywords.slice(0, 2000); + } - _getKeywordsLength: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); + _getKeywordsLength() { + const val = this.editor.getValue(); + const keywords = val.split(/\u200b\s\u200b/); return keywords.length - 1; - }, + } - _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 (val) { + _assertValue(val) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); + return 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 self = this; this._assertValue(this.storeValue); // 和复选下拉框同步，allData做缓存是会爆炸的 digest(); function digest() { - BI.each(keywords, function (i, val) { - self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); + each(keywords, (i, val) => { + self.storeValue.type === Selection.Multi + ? pushDistinct(self.storeValue.value, val) + : remove(self.storeValue.value, val); }); callback(); } - }, + } - _joinAll: function (res, callback) { - var self = this, o = this.options; + _joinAll(res, callback) { + const self = this, + o = this.options; this._assertValue(res); if (this.storeValue.type === res.type) { - var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { - return { - text: o.valueFormatter(v) || v, - value: v - }; - }), this.trigger.getKeyword()); - var change = false; - var map = this._makeMap(this.storeValue.value); - BI.each(BI.concat(result.match, result.find), function (i, obj) { - var v = obj.value; - if (BI.isNotNull(map[v])) { + const result = Func.getSearchResult( + map(this.storeValue.value, (_i, v) => { + return { + text: o.valueFormatter(v) || v, + value: v, + }; + }), + this.trigger.getKeyword() + ); + let change = false; + const tempMap = this._makeMap(this.storeValue.value); + each(concat(result.match, result.find), (i, obj) => { + const v = obj.value; + if (isNotNull(tempMap[v])) { change = true; - delete map[v]; + delete tempMap[v]; } }); - change && (this.storeValue.value = BI.values(map)); + change && (this.storeValue.value = values(tempMap)); callback(); + return; } - o.itemsCreator({ - type: BI.MultiSelectInsertList.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKeyword()], - selectedValues: BI.filter(this.storeValue.value, function (_i, v) { - return !BI.contains(res.value, v); - }), - }, function (ob) { - var items = BI.map(ob.items, "value"); - var selectedMap = self._makeMap(self.storeValue.value); - var notSelectedMap = self._makeMap(res.value); - var newItems = []; - BI.each(items, function (i, item) { - if (BI.isNotNull(selectedMap[items[i]])) { - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - callback(); - }); - }, + o.itemsCreator( + { + type: MultiSelectInsertList.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKeyword()], + selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)), + }, + ob => { + const items = map(ob.items, "value"); + const selectedMap = self._makeMap(self.storeValue.value); + const notSelectedMap = self._makeMap(res.value); + const newItems = []; + each(items, (i, item) => { + if (isNotNull(selectedMap[items[i]])) { + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + newItems.push(item); + } + }); + self.storeValue.value = newItems.concat(values(selectedMap)); + callback(); + } + ); + } - _join: function (res, callback) { - var self = this, o = this.options; + _join(res, callback) { + const self = this; this._assertValue(res); this._assertValue(this.storeValue); if (this.storeValue.type === res.type) { - var map = this._makeMap(this.storeValue.value); - BI.each(res.value, function (i, v) { + const map = this._makeMap(this.storeValue.value); + each(res.value, (i, v) => { if (!map[v]) { - BI.pushDistinct(self.storeValue.value, v); + pushDistinct(self.storeValue.value, v); map[v] = v; } }); - var change = false; - BI.each(res.assist, function (i, v) { - if (BI.isNotNull(map[v])) { + let change = false; + each(res.assist, (i, v) => { + if (isNotNull(map[v])) { change = true; delete map[v]; } }); - change && (this.storeValue.value = BI.values(map)); + change && (this.storeValue.value = values(map)); callback(); + return; } this._joinAll(res, callback); - }, + } - _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._assertValue(this.storeValue); this.adapter.setValue(this.storeValue); this.trigger.setValue(this.storeValue); - }, - - getValue: function () { - return BI.deepClone(this.storeValue); - }, - - populate: function () { - this.adapter.populate.apply(this.adapter, arguments); - this.trigger.populate.apply(this.trigger, arguments); } -}); -BI.extend(BI.MultiSelectInsertList, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 -}); + getValue() { + return deepClone(this.storeValue); + } -BI.MultiSelectInsertList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_insert_list", BI.MultiSelectInsertList); + populate() { + this.adapter.populate(...arguments); + this.trigger.populate(...arguments); + } +} diff --git a/src/widget/multiselectlist/multiselectlist.insert.nobar.js b/src/widget/multiselectlist/multiselectlist.insert.nobar.js index be87999ad..ac21aa3b4 100644 --- a/src/widget/multiselectlist/multiselectlist.insert.nobar.js +++ b/src/widget/multiselectlist/multiselectlist.insert.nobar.js @@ -1,61 +1,107 @@ -/** - * Created by zcf_1 on 2017/5/2. - */ -BI.MultiSelectInsertNoBarList = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInsertNoBarList.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + Selection, + deepClone, + isKey, + remove, + pushDistinct, + createWidget, + isNotEmptyString, + i18nText, + isEmptyArray, + last, + initial, + endWith, + AbsoluteLayout, + isEmptyString, + makeObject, + each, + Func, + map, + concat, + isNotNull, + values, + filter, + contains, + isNull, VTapeLayout +} from "@/core"; +import { Single, Searcher, Msg } from "@/base"; +import { MultiSelectBar } from "@/case"; +import { SelectPatchEditor } from "../multiselect/trigger/editor/editor.patch"; +import { MultiSelectNoBarLoader } from "../multiselect/multiselect.loader.nobar"; +import { MultiSelectSearchInsertPane } from "../multiselect/search/multiselect.search.insert.pane"; +import { SearchEditor } from "../editor/editor.search"; + + +@shortcut() +export class MultiSelectInsertNoBarList extends Single { + static xtype = "bi.multi_select_insert_no_bar_list"; + + static REQ_GET_DATA_LENGTH = "1"; + static REQ_GET_ALL_DATA = "-1"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-insert-list", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcherHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }); - }, - _init: function () { - BI.MultiSelectInsertNoBarList.superclass._init.apply(this, arguments); + } - var self = this, o = this.options; + _init() { + super._init(...arguments); + + const self = this, + o = this.options; this.storeValue = { - type: BI.Selection.Multi, - value: BI.deepClone(o.value) || [] + type: Selection.Multi, + value: deepClone(o.value) || [], }; - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, self._startValue) : BI.pushDistinct(self.storeValue.value, self._startValue)); + function assertShowValue() { + isKey(self._startValue) && + (self.storeValue.type === Selection.All + ? remove(self.storeValue.value, self._startValue) + : pushDistinct(self.storeValue.value, self._startValue)); // self.trigger.setValue(self.storeValue); - }; + } - this.adapter = BI.createWidget({ - type: "bi.multi_select_no_bar_loader", + this.adapter = createWidget({ + type: MultiSelectNoBarLoader.xtype, cls: "popup-multi-select-list bi-border-left bi-border-right bi-border-bottom", itemsCreator: o.itemsCreator, itemHeight: o.itemHeight, valueFormatter: o.valueFormatter, logic: { - dynamic: false + dynamic: false, }, // onLoaded: o.onLoaded, el: {}, value: { - type: BI.Selection.Multi, - value: o.value || [] - } + type: Selection.Multi, + value: o.value || [], + }, }); - this.adapter.on(BI.MultiSelectLoader.EVENT_CHANGE, function () { + this.adapter.on(MultiSelectNoBarLoader.EVENT_CHANGE, function () { self.storeValue = this.getValue(); assertShowValue(); - self.fireEvent(BI.MultiSelectInsertNoBarList.EVENT_CHANGE); + self.fireEvent(MultiSelectInsertNoBarList.EVENT_CHANGE); }); - this.searcherPane = BI.createWidget({ - type: "bi.multi_select_search_insert_pane", + this.searcherPane = createWidget({ + type: MultiSelectSearchInsertPane.xtype, cls: "bi-border-left bi-border-right bi-border-bottom", valueFormatter: o.valueFormatter, - keywordGetter: function () { + keywordGetter() { return self.trigger.getKeyword(); }, - itemsCreator: function (op, callback) { - var keyword = self.trigger.getKeyword(); - if (BI.isNotEmptyString(keyword)) { + itemsCreator(op, callback) { + const keyword = self.trigger.getKeyword(); + if (isNotEmptyString(keyword)) { op.keywords = [keyword]; this.setKeyword(op.keywords[0]); o.itemsCreator(op, callback); @@ -64,303 +110,342 @@ BI.MultiSelectInsertNoBarList = 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 + height: o.searcherHeight, }, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback(); }, adapter: this.adapter, popup: this.searcherPane, height: 200, masker: false, - 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 keywords = self._getKeywords(); - if (keywords[keywords.length - 1] === BI.BlankSplitChar) { - keywords = keywords.slice(0, keywords.length - 1); - } - var keyword = BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; - self._join({ - type: BI.Selection.Multi, - value: [keyword] - }, function () { - if (self.storeValue.type === BI.Selection.Multi) { - BI.pushDistinct(self.storeValue.value, keyword); - } + 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._setStartValue(keyword); - assertShowValue(); + // 需要刷新回到初始界面，否则搜索的结果不能放在最前面 self.adapter.populate(); - self._setStartValue(""); - self.fireEvent(BI.MultiSelectInsertNoBarList.EVENT_CHANGE); - }); - } - }, { - eventName: BI.Searcher.EVENT_SEARCHING, - action: function () { - var keywords = self._getKeywords(); - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { + }, + }, + { + eventName: Searcher.EVENT_PAUSE, + action() { + let keywords = self._getKeywords(); + if ( + keywords[keywords.length - 1] === BI.BlankSplitChar + ) { + keywords = keywords.slice(0, keywords.length - 1); + } + const keyword = isEmptyArray(keywords) + ? "" + : keywords[keywords.length - 1]; + self._join( + { + type: Selection.Multi, + value: [keyword], + }, + () => { + if (self.storeValue.type === Selection.Multi) { + pushDistinct( + self.storeValue.value, + keyword + ); + } + self._showAdapter(); self.adapter.setValue(self.storeValue); + self._setStartValue(keyword); assertShowValue(); self.adapter.populate(); self._setStartValue(""); - } else { - self.adapter.setValue(self.storeValue); - assertShowValue(); + self.fireEvent( + MultiSelectInsertNoBarList.EVENT_CHANGE + ); } - self.fireEvent(BI.MultiSelectInsertNoBarList.EVENT_CHANGE); - }); - self._getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")); - } - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectInsertNoBarList.EVENT_CHANGE); - }); - } else { - self._join(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectInsertNoBarList.EVENT_CHANGE); - }); - } + ); + }, + }, + { + eventName: Searcher.EVENT_SEARCHING, + action() { + let keywords = self._getKeywords(); + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (endWith(lastKeyword, BI.BlankSplitChar)) { + self.adapter.setValue(self.storeValue); + assertShowValue(); + self.adapter.populate(); + self._setStartValue(""); + } else { + self.adapter.setValue(self.storeValue); + assertShowValue(); + } + self.fireEvent( + MultiSelectInsertNoBarList.EVENT_CHANGE + ); + }); + self._getKeywordsLength() > 2000 && + Msg.alert( + i18nText("BI-Basic_Prompt"), + i18nText( + "BI-Basic_Too_Much_Value_Get_Two_Thousand" + ) + ); + } + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action(value, obj) { + if (obj instanceof MultiSelectBar) { + self._joinAll(this.getValue(), () => { + assertShowValue(); + self.fireEvent( + MultiSelectInsertNoBarList.EVENT_CHANGE + ); + }); + } else { + self._join(this.getValue(), () => { + assertShowValue(); + self.fireEvent( + MultiSelectInsertNoBarList.EVENT_CHANGE + ); + }); + } + }, } - }], + ], value: { - type: BI.Selection.Multi, - value: o.value || [] - } + type: Selection.Multi, + value: o.value || [], + }, }); - BI.createWidget({ - type: "bi.vtape", + createWidget({ + type: VTapeLayout.xtype, element: this, - items: [{ - el: this.trigger, - height: o.searcherHeight - }, { - el: this.adapter, - height: "fill" - }] + items: [ + { + el: this.trigger, + height: o.searcherHeight, + }, + { + el: this.adapter, + height: "fill", + } + ], }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.searcherPane, - top: o.searcherHeight, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: o.searcherHeight, + bottom: 0, + left: 0, + right: 0, + } + ], }); - }, + } - _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)) { keywords = keywords.concat([BI.BlankSplitChar]); } - return keywords.length > 2000 ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) : keywords.slice(0, 2000); - }, + return keywords.length > 2000 + ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) + : keywords.slice(0, 2000); + } - _getKeywordsLength: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); + _getKeywordsLength() { + const val = this.editor.getValue(); + const keywords = val.split(/\u200b\s\u200b/); return keywords.length - 1; - }, + } - _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 (val) { + _assertValue(val) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - }, + } - _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 self = this; this._assertValue(this.storeValue); // 和复选下拉框同步，allData做缓存是会爆炸的 digest(); - function digest (items) { - BI.each(keywords, function (i, val) { - self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); + function digest(items) { + each(keywords, (i, val) => { + self.storeValue.type === Selection.Multi + ? pushDistinct(self.storeValue.value, val) + : remove(self.storeValue.value, val); }); callback(); } - }, + } - _joinAll: function (res, callback) { - var self = this, o = this.options; + _joinAll(res, callback) { + const self = this, + o = this.options; this._assertValue(res); if (this.storeValue.type === res.type) { - var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { - return { - text: o.valueFormatter(v) || v, - value: v - }; - }), this.trigger.getKeyword()); - var change = false; - var map = this._makeMap(this.storeValue.value); - BI.each(BI.concat(result.match, result.find), function (i, obj) { - var v = obj.value; - if (BI.isNotNull(map[v])) { + const result = Func.getSearchResult( + map(this.storeValue.value, (_i, v) => { + return { + text: o.valueFormatter(v) || v, + value: v, + }; + }), + this.trigger.getKeyword() + ); + let change = false; + const tempMap = this._makeMap(this.storeValue.value); + each(concat(result.match, result.find), (i, obj) => { + const v = obj.value; + if (isNotNull(tempMap[v])) { change = true; - delete map[v]; + delete tempMap[v]; } }); - change && (this.storeValue.value = BI.values(map)); + change && (this.storeValue.value = values(tempMap)); callback(); + return; } - o.itemsCreator({ - type: BI.MultiSelectInsertNoBarList.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKeyword()], - selectedValues: BI.filter(this.storeValue.value, function (_i, v) { - return !BI.contains(res.value, v); - }), - }, function (ob) { - var items = BI.map(ob.items, "value"); - var selectedMap = self._makeMap(self.storeValue.value); - var notSelectedMap = self._makeMap(res.value); - var newItems = []; - BI.each(items, function (i, item) { - if (BI.isNotNull(selectedMap[items[i]])) { - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - callback(); - }); - }, + o.itemsCreator( + { + type: MultiSelectInsertNoBarList.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKeyword()], + selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)), + }, + ob => { + const items = map(ob.items, "value"); + const selectedMap = self._makeMap(self.storeValue.value); + const notSelectedMap = self._makeMap(res.value); + const newItems = []; + each(items, (i, item) => { + if (isNotNull(selectedMap[items[i]])) { + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + newItems.push(item); + } + }); + self.storeValue.value = newItems.concat(values(selectedMap)); + callback(); + } + ); + } - _join: function (res, callback) { - var self = this, o = this.options; + _join(res, callback) { + const self = this; this._assertValue(res); this._assertValue(this.storeValue); if (this.storeValue.type === res.type) { - var map = this._makeMap(this.storeValue.value); - BI.each(res.value, function (i, v) { + const map = this._makeMap(this.storeValue.value); + each(res.value, (i, v) => { if (!map[v]) { - BI.pushDistinct(self.storeValue.value, v); + pushDistinct(self.storeValue.value, v); map[v] = v; } }); - var change = false; - BI.each(res.assist, function (i, v) { - if (BI.isNotNull(map[v])) { + let change = false; + each(res.assist, (i, v) => { + if (isNotNull(map[v])) { change = true; delete map[v]; } }); - change && (this.storeValue.value = BI.values(map)); + change && (this.storeValue.value = values(map)); callback(); + return; } this._joinAll(res, callback); - }, + } - _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 = { - type: BI.Selection.Multi, - value: v || [] + type: Selection.Multi, + value: v || [], }; this.adapter.setValue(this.storeValue); this.trigger.setValue(this.storeValue); - }, - - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, - - populate: function () { - this.adapter.populate.apply(this.adapter, arguments); - this.trigger.populate.apply(this.trigger, arguments); } -}); -BI.extend(BI.MultiSelectInsertNoBarList, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 -}); + getValue() { + return deepClone(this.storeValue.value); + } -BI.MultiSelectInsertNoBarList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_insert_no_bar_list", BI.MultiSelectInsertNoBarList); + populate() { + this.adapter.populate(...arguments); + this.trigger.populate(...arguments); + } +} diff --git a/src/widget/multiselectlist/multiselectlist.js b/src/widget/multiselectlist/multiselectlist.js index 7255963df..878bc5bc0 100644 --- a/src/widget/multiselectlist/multiselectlist.js +++ b/src/widget/multiselectlist/multiselectlist.js @@ -1,177 +1,233 @@ -/** - * Created by zcf_1 on 2017/5/2. - */ -BI.MultiSelectList = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectList.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + deepClone, + isKey, + Selection, + remove, + pushDistinct, + createWidget, + isNotEmptyString, + last, + initial, + endWith, + AbsoluteLayout, + isEmptyString, + makeObject, + map, + each, + isNotNull, + Func, + concat, + values, + filter, + contains, + isNull, VTapeLayout +} from "@/core"; +import { Searcher } from "@/base"; +import { MultiSelectBar } from "@/case"; +import { MultiSelectLoader } from "../multiselect/multiselect.loader"; +import { MultiSelectSearchPane } from "../multiselect/search/multiselect.search.pane"; +import { SelectPatchEditor } from "../multiselect/trigger/editor/editor.patch"; +import { SearchEditor } from "../editor/editor.search"; + + +@shortcut() +export class MultiSelectList extends Widget { + static xtype = "bi.multi_select_list"; + + static REQ_GET_DATA_LENGTH = "1"; + static REQ_GET_ALL_DATA = "-1"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-list", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcherHeight: 24, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }); - }, - _init: function () { - BI.MultiSelectList.superclass._init.apply(this, arguments); + } + + _init() { + super._init(...arguments); - var self = this, o = this.options; - this.storeValue = this._assertValue(BI.deepClone(o.value) || {}); + const self = this, + o = this.options; + this.storeValue = this._assertValue(deepClone(o.value) || {}); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, self._startValue) : BI.pushDistinct(self.storeValue.value, self._startValue)); + function assertShowValue() { + isKey(self._startValue) && + (self.storeValue.type === Selection.All + ? remove(self.storeValue.value, self._startValue) + : pushDistinct(self.storeValue.value, self._startValue)); // self.trigger.setValue(self.storeValue); - }; + } - this.adapter = BI.createWidget({ - type: "bi.multi_select_loader", + this.adapter = createWidget({ + type: MultiSelectLoader.xtype, cls: "popup-multi-select-list bi-border-left bi-border-right bi-border-bottom", itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, itemHeight: o.itemHeight, logic: { - dynamic: false + dynamic: false, }, value: o.value, isDefaultInit: true, // onLoaded: o.onLoaded, - el: {} + el: {}, }); - this.adapter.on(BI.MultiSelectLoader.EVENT_CHANGE, function () { + this.adapter.on(MultiSelectLoader.EVENT_CHANGE, function () { self.storeValue = this.getValue(); - self._adjust(function () { + self._adjust(() => { assertShowValue(); - self.fireEvent(BI.MultiSelectList.EVENT_CHANGE); + self.fireEvent(MultiSelectList.EVENT_CHANGE); }); }); - this.searcherPane = BI.createWidget({ - type: "bi.multi_select_search_pane", + this.searcherPane = createWidget({ + type: MultiSelectSearchPane.xtype, cls: "bi-border-left bi-border-right bi-border-bottom", valueFormatter: o.valueFormatter, - keywordGetter: function () { + keywordGetter() { return self.trigger.getKeyword(); }, - itemsCreator: function (op, callback) { - var keyword = self.trigger.getKeyword(); - if (BI.isNotEmptyString(keyword)) { + itemsCreator(op, callback) { + const keyword = self.trigger.getKeyword(); + if (isNotEmptyString(keyword)) { op.keywords = [keyword]; o.itemsCreator(op, callback); } }, - itemHeight: o.itemHeight + itemHeight: o.itemHeight, }); 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", + type: SearchEditor.xtype, }, - ref: function (ref) { + ref(ref) { self.editor = ref; }, - height: o.searcherHeight + height: o.searcherHeight, }, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback(); }, adapter: this.adapter, popup: this.searcherPane, height: 200, masker: false, - 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 () { - self._showAdapter(); - self.fireEvent(BI.MultiSelectList.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() { + self._showAdapter(); + self.fireEvent(MultiSelectList.EVENT_CHANGE); + }, }, - }, { - eventName: BI.Searcher.EVENT_SEARCHING, - action: function () { - var keywords = this.getKeyword(); - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.adapter.setValue(self.storeValue); + { + eventName: Searcher.EVENT_SEARCHING, + action() { + let keywords = this.getKeyword(); + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (endWith(lastKeyword, BI.BlankSplitChar)) { + self.adapter.setValue(self.storeValue); + assertShowValue(); + self.adapter.populate(); + self._setStartValue(""); + } else { + self.adapter.setValue(self.storeValue); + assertShowValue(); + } + self.fireEvent(MultiSelectList.EVENT_CHANGE); + }); + } + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action(value, obj) { + if (obj instanceof MultiSelectBar) { + self._joinAll(this.getValue(), () => { assertShowValue(); - self.adapter.populate(); - self._setStartValue(""); - } else { - self.adapter.setValue(self.storeValue); + self.fireEvent(MultiSelectList.EVENT_CHANGE); + }); + } else { + self._join(this.getValue(), () => { assertShowValue(); - } - self.fireEvent(BI.MultiSelectList.EVENT_CHANGE); - }); - } - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectList.EVENT_CHANGE); - }); - } else { - self._join(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectList.EVENT_CHANGE); - }); - } + self.fireEvent(MultiSelectList.EVENT_CHANGE); + }); + } + }, } - }] + ], }); - BI.createWidget({ - type: "bi.vtape", + createWidget({ + type: VTapeLayout.xtype, element: this, - items: [{ - el: this.trigger, - height: o.searcherHeight - }, { - el: this.adapter, - height: "fill" - }] + items: [ + { + el: this.trigger, + height: o.searcherHeight, + }, + { + el: this.adapter, + height: "fill", + } + ], }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.searcherPane, - top: o.searcherHeight, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: o.searcherHeight, + bottom: 0, + left: 0, + right: 0, + } + ], }); - }, + } - _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)) { @@ -179,193 +235,209 @@ BI.MultiSelectList = BI.inherit(BI.Widget, { } return keywords; - }, + } - _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 (val) { + _assertValue(val) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); + return 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 self = this, + o = this.options; this._assertValue(this.storeValue); // 和复选下拉框同步，allData做缓存是会爆炸的 - o.itemsCreator({ - type: BI.MultiSelectList.REQ_GET_ALL_DATA, - keywords: keywords - }, function (ob) { - var values = BI.map(ob.items, "value"); - digest(values); - }); + o.itemsCreator( + { + type: MultiSelectList.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])) { - self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); + const selectedMap = self._makeMap(items); + each(keywords, (i, val) => { + if (isNotNull(selectedMap[val])) { + self.storeValue.type === Selection.Multi + ? pushDistinct(self.storeValue.value, val) + : remove(self.storeValue.value, val); } }); self._adjust(callback); } - }, + } - _joinAll: function (res, callback) { - var self = this, o = this.options; + _joinAll(res, callback) { + const self = this, + o = this.options; this._assertValue(res); if (this.storeValue.type === res.type) { - var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { - return { - text: o.valueFormatter(v) || v, - value: v - }; - }), this.trigger.getKeyword()); - var change = false; - var map = this._makeMap(this.storeValue.value); - BI.each(BI.concat(result.match, result.find), function (i, obj) { - var v = obj.value; - if (BI.isNotNull(map[v])) { + const result = Func.getSearchResult( + map(this.storeValue.value, (_i, v) => { + return { + text: o.valueFormatter(v) || v, + value: v, + }; + }), + this.trigger.getKeyword() + ); + let change = false; + const tempMap = this._makeMap(this.storeValue.value); + each(concat(result.match, result.find), (i, obj) => { + const v = obj.value; + if (isNotNull(tempMap[v])) { change = true; - delete map[v]; + delete tempMap[v]; } }); - change && (this.storeValue.value = BI.values(map)); + change && (this.storeValue.value = values(tempMap)); this._adjust(callback); + return; } - o.itemsCreator({ - type: BI.MultiSelectList.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKeyword()], - selectedValues: BI.filter(this.storeValue.value, function (_i, v) { - return !BI.contains(res.value, v); - }), - }, function (ob) { - var items = BI.map(ob.items, "value"); - var selectedMap = self._makeMap(self.storeValue.value); - var notSelectedMap = self._makeMap(res.value); - var newItems = []; - BI.each(items, function (i, item) { - if (BI.isNotNull(selectedMap[items[i]])) { - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, + o.itemsCreator( + { + type: MultiSelectList.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKeyword()], + selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)), + }, + ob => { + const items = map(ob.items, "value"); + const selectedMap = self._makeMap(self.storeValue.value); + const notSelectedMap = self._makeMap(res.value); + const newItems = []; + each(items, (i, item) => { + if (isNotNull(selectedMap[items[i]])) { + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + newItems.push(item); + } + }); + self.storeValue.value = newItems.concat(values(selectedMap)); + self._adjust(callback); + } + ); + } - _adjust: function (callback) { - var self = this, o = this.options; + _adjust(callback) { + const self = this, + o = this.options; if (!this._count) { - o.itemsCreator({ - type: BI.MultiSelectList.REQ_GET_DATA_LENGTH - }, function (res) { - self._count = res.count; - adjust(); - callback(); - }); + o.itemsCreator( + { + type: MultiSelectList.REQ_GET_DATA_LENGTH, + }, + res => { + self._count = res.count; + adjust(); + callback(); + } + ); } else { adjust(); callback(); } function adjust() { - if (self.storeValue.type === BI.Selection.All && self.storeValue.value.length >= self._count) { + if ( + self.storeValue.type === Selection.All && + self.storeValue.value.length >= self._count + ) { self.storeValue = { - type: BI.Selection.Multi, - value: [] + type: Selection.Multi, + value: [], }; - } else if (self.storeValue.type === BI.Selection.Multi && self.storeValue.value.length >= self._count) { + } else if ( + self.storeValue.type === Selection.Multi && + self.storeValue.value.length >= self._count + ) { self.storeValue = { - type: BI.Selection.All, - value: [] + type: Selection.All, + value: [], }; } } - }, + } - _join: function (res, callback) { - var self = this, o = this.options; + _join(res, callback) { + const self = this; this._assertValue(res); this._assertValue(this.storeValue); if (this.storeValue.type === res.type) { - var map = this._makeMap(this.storeValue.value); - BI.each(res.value, function (i, v) { + const map = this._makeMap(this.storeValue.value); + each(res.value, (i, v) => { if (!map[v]) { - BI.pushDistinct(self.storeValue.value, v); + pushDistinct(self.storeValue.value, v); map[v] = v; } }); - var change = false; - BI.each(res.assist, function (i, v) { - if (BI.isNotNull(map[v])) { + let change = false; + each(res.assist, (i, v) => { + if (isNotNull(map[v])) { change = true; delete map[v]; } }); - change && (this.storeValue.value = BI.values(map)); + change && (this.storeValue.value = values(map)); self._adjust(callback); + return; } this._joinAll(res, callback); - }, + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.adapter.setStartValue(value); - }, + } - isAllSelected: function () { + isAllSelected() { return this.adapter.isAllSelected(); - }, + } - resize: function () { - // this.trigger.getCounter().adjustView(); - // this.trigger.adjustView(); - }, - setValue: function (v) { + resize() { + + } + + setValue(v) { this.storeValue = v || {}; this._assertValue(this.storeValue); this.adapter.setValue(this.storeValue); this.trigger.setValue(this.storeValue); - }, - - getValue: function () { - return BI.deepClone(this.storeValue); - }, - - populate: function () { - this.adapter.populate.apply(this.adapter, arguments); - this.trigger.populate.apply(this.trigger, arguments); } -}); -BI.extend(BI.MultiSelectList, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 -}); + getValue() { + return deepClone(this.storeValue); + } -BI.MultiSelectList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_list", BI.MultiSelectList); + populate() { + this.adapter.populate(...arguments); + this.trigger.populate(...arguments); + } +}