diff --git a/es6.js b/es6.js index a3d0ce376..7667443e2 100644 --- a/es6.js +++ b/es6.js @@ -59,8 +59,13 @@ const target = [ "createItems", "makeArrayByArray", "VerticalAlign", + "pushDistinct", + "endWith", "transformItems", "print", + "Tree", + "Func", + "Selection", ]; // 加载模块 @@ -123,7 +128,7 @@ async function handleFile(srcName) { return matchedSentence; } }); - + fs.writeFileSync(srcName, noXtypeCode); return; diff --git a/src/case/button/node/treenode.js b/src/case/button/node/treenode.js index e0a931e7d..f6ef4c5bc 100644 --- a/src/case/button/node/treenode.js +++ b/src/case/button/node/treenode.js @@ -1,13 +1,14 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend } from "../../../core"; +import { Label, NodeButton } from "@/base"; +import { shortcut, extend, VerticalAdaptLayout } from "@/core"; +import { TreeNodeSwitcher } from "@/case"; @shortcut() export class BasicTreeNode extends NodeButton { static xtype = "bi.tree_node"; - + _defaultConfig(props) { const conf = super._defaultConfig.apply(this, arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-tree-node ${props.selectable ? "bi-list-item-active" : "bi-list-item"}`, id: "", @@ -27,7 +28,7 @@ export class BasicTreeNode extends NodeButton { const o = this.options; const checkbox = { - type: "bi.tree_node_switcher", + type: TreeNodeSwitcher.xtype, ref: _ref => { this.switcher = _ref; }, @@ -39,7 +40,7 @@ export class BasicTreeNode extends NodeButton { layer: o.layer, ...o.switcherIcon, stopPropagation: o.selectable, - mounted () { + mounted() { this.setEnable(true); }, listeners: [ @@ -55,7 +56,7 @@ export class BasicTreeNode extends NodeButton { }; return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], items: [ { @@ -63,7 +64,7 @@ export class BasicTreeNode extends NodeButton { lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 }, { el: { - type: "bi.label", + type: Label.xtype, ref: _ref => { this.text = _ref; }, diff --git a/src/case/button/treeitem/treeitem.js b/src/case/button/treeitem/treeitem.js index 85777dd5c..64ae3ffdc 100644 --- a/src/case/button/treeitem/treeitem.js +++ b/src/case/button/treeitem/treeitem.js @@ -1,5 +1,5 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend } from "../../../core"; +import { shortcut, extend, VerticalAdaptLayout, Layout } from "@/core"; +import { NodeButton, Label } from "@/base"; @shortcut() export class BasicTreeItem extends NodeButton { @@ -7,7 +7,7 @@ export class BasicTreeItem extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-tree-item bi-list-item-active`, id: "", @@ -23,12 +23,12 @@ export class BasicTreeItem extends NodeButton { const o = this.options; return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: ["", "fill"], items: [ { el: { - type: "bi.layout", + type: Layout.xtype, height: o.height, width: o.height, cls: this.getLineCls(), @@ -37,7 +37,7 @@ export class BasicTreeItem extends NodeButton { }, { el: { - type: "bi.label", + type: Label.xtype, ref: _ref => { this.text = _ref; }, diff --git a/src/case/index.js b/src/case/index.js index 2643f6cf9..647534575 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -43,6 +43,7 @@ export * from "./loader"; export * from "./segment"; export * from "./layer"; export * from "./linearsegment"; +export * from "./checkbox"; export { MultiSelectBar, SelectList diff --git a/src/case/tree/tree.level.js b/src/case/tree/tree.level.js index 23a2c4473..426175b54 100644 --- a/src/case/tree/tree.level.js +++ b/src/case/tree/tree.level.js @@ -9,7 +9,7 @@ import { isNotEmptyArray, Tree, createWidget, - VerticalLayout + VerticalLayout, Controller, Events } from "@/core"; import { ButtonTree, CustomTree } from "@/base"; import { TreeExpander } from "./treeexpander/tree.expander"; @@ -102,9 +102,9 @@ export class LevelTree extends Widget { ], }, o.el), }); - this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { + this.tree.on(Controller.EVENT_CHANGE, function (type, value, ob) { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); self.setValue(value); } diff --git a/src/core/func/function.js b/src/core/func/function.js index 5977e24d7..0de246721 100644 --- a/src/core/func/function.js +++ b/src/core/func/function.js @@ -15,13 +15,12 @@ export function createDistinctName(array, name) { let src = name, idx = 1; name = name || ""; while (true) { - if (every(array, function (i, item) { - return isKey(item) ? item !== name : item.name !== name; - })) { + if (every(array, (i, item) => isKey(item) ? item !== name : item.name !== name)) { break; } name = src + (idx++); } + return name; } @@ -31,8 +30,9 @@ export function createDistinctName(array, name) { * @return {number} */ export function getGBWidth(str) { - str = str + ""; + str = `${str}`; str = str.replace(/[^\x00-\xff]/g, "xx"); + return Math.ceil(str.length / 2); } @@ -55,7 +55,7 @@ export function getSearchResult(items, keyword, param) { let t, text, py; keyword = toUpperCase(keyword); const matched = array ? [] : {}, find = array ? [] : {}; - each(items, function (i, item) { + each(items, (i, item) => { // 兼容item为null的处理 if (isNull(item)) { return; @@ -77,7 +77,7 @@ export function getSearchResult(items, keyword, param) { } else { array ? find.push(item) : (find[i] = item); } - } else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的，但光这样做还不够，即时错位了，也不能说明就不符合条件 + } else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的，但光这样做还不够，即时错位了，也不能说明就不符合条件 pidx = py.indexOf(keyword); if (pidx > -1) { if (text === keyword || keyword.length === text.length) { @@ -88,9 +88,10 @@ export function getSearchResult(items, keyword, param) { } } }); + return { match: matched, - find: find, + find, }; } @@ -100,7 +101,7 @@ export function getSearchResult(items, keyword, param) { * @param key * @return {any[]} */ -export function getSortedResult(items, key) { +export function getSortedResult(items, key = null) { const getTextOfItem = BI.isFunction(key) ? key : function (item, key) { if (BI.isNotNull(key)) { @@ -112,10 +113,11 @@ export function getSortedResult(items, key) { if (BI.isNotNull(item.value)) { return item.value; } + return item; }; - return items.sort(function (item1, item2) { + return items.sort((item1, item2) => { const str1 = getTextOfItem(item1, key); const str2 = getTextOfItem(item2, key); if (BI.isNull(str1) && BI.isNull(str2)) { @@ -139,28 +141,33 @@ export function getSortedResult(items, key) { return (BI.isNull(BI.CODE_INDEX[char1]) ? BI.MAX : BI.CODE_INDEX[char1]) - (BI.isNull(BI.CODE_INDEX[char2]) ? BI.MAX : BI.CODE_INDEX[char2]); } } + return len1 - len2; }); } export function beforeFunc(sFunc, func) { const __self = sFunc; + return function () { if (func.apply(sFunc, arguments) === false) { return false; } + return __self.apply(sFunc, arguments); }; } export function afterFunc(sFunc, func) { const __self = sFunc; + return function () { const ret = __self.apply(sFunc, arguments); if (ret === false) { return false; } func.apply(sFunc, arguments); + return ret; }; } diff --git a/src/widget/index.js b/src/widget/index.js index aee31d038..d2284b0b8 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -6,6 +6,12 @@ import * as datetime from "./datetime"; import * as datetimepane from "./datetimepane"; import * as dynamicdatetime from "./dynamicdatetime"; import * as time from "./time"; +import { SelectTreeCombo } from "./selecttree/selecttree.combo"; +import { SingleTreeCombo } from "./singletree/singletree.combo"; +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"; Object.assign(BI, { Collapse, @@ -16,6 +22,12 @@ Object.assign(BI, { ...datetimepane, ...dynamicdatetime, ...time, + SelectTreeCombo, + SingleTreeCombo, + MultiTreeCombo, + MultiTreeInsertCombo, + MultiTreeListCombo, + ...multiselect, }); export * from "./date/calendar"; @@ -25,6 +37,13 @@ export * from "./datetime"; export * from "./datetimepane"; export * from "./dynamicdatetime"; export * from "./time"; +export { SelectTreeCombo } from "./selecttree/selecttree.combo"; +export { SingleTreeCombo } from "./singletree/singletree.combo"; +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 { Collapse }; diff --git a/src/widget/multiselect/__test__/multiselect.loader.nobar.test.js b/src/widget/multiselect/__test__/multiselect.loader.nobar.test.js index a7750bb26..904452922 100644 --- a/src/widget/multiselect/__test__/multiselect.loader.nobar.test.js +++ b/src/widget/multiselect/__test__/multiselect.loader.nobar.test.js @@ -4,15 +4,15 @@ * Created by windy on 2019/9/18 */ -describe("multi_select_no_bar_series", function () { - - var _getItemsByTimes, _itemsCreator, itemSelectorGetter, searchItemSelectorGetter, _hasNextByTimes, items; - before(function () { +describe("multi_select_no_bar_series", () => { + let _getItemsByTimes, _itemsCreator, itemSelectorGetter, searchItemSelectorGetter, _hasNextByTimes, items; + before(() => { _getItemsByTimes = function (items, times) { - var res = []; - for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) { + const res = []; + for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) { res.push(items[i]); } + return res; }; @@ -21,65 +21,60 @@ describe("multi_select_no_bar_series", function () { }; _itemsCreator = function (options, callback) { - var items = BI.map(BI.makeArray(100, null), function(idx, v) { + let items = BI.map(BI.makeArray(100, null), (idx, v) => { return { text: idx, value: idx, - title: idx + title: idx, }; }); - var keywords = (options.keywords || []).slice(); + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + BI.each(keywords, (i, kw) => { + const search = BI.Func.getSearchResult(items, kw); items = search.match.concat(search.find); }); if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - items = BI.filter(items, function (i, ob) { - return !filter[ob.value]; - }); + const filter = BI.makeObject(options.selectedValues, true); + items = BI.filter(items, (i, ob) => !filter[ob.value]); } if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: items + items, }); + return; } if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: items.length}); + callback({ count: items.length }); + return; } callback({ items: _getItemsByTimes(items, options.times), - hasNext: _hasNextByTimes(items, options.times) + hasNext: _hasNextByTimes(items, options.times), }); }; itemSelectorGetter = function (array) { - return BI.map(array, function (idx, num) { - return ".bi-multi-select-popup-view .bi-loader .bi-button-group .bi-multi-select-item:nth-child(" + num + ")"; - }); + return BI.map(array, (idx, num) => `.bi-multi-select-popup-view .bi-loader .bi-button-group .bi-multi-select-item:nth-child(${num})`); }; searchItemSelectorGetter = function (array) { - return BI.map(array, function (idx, num) { - return ".bi-multi-select-search-pane .bi-loader .bi-button-group .bi-multi-select-item:nth-child(" + num + ")"; - }); + return BI.map(array, (idx, num) => `.bi-multi-select-search-pane .bi-loader .bi-button-group .bi-multi-select-item:nth-child(${num})`); }; - - }) + }); /** * test_author_windy **/ - it("setValue", function () { - var widget = BI.Test.createWidget({ + it("setValue", () => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); widget.setValue([1, 2]); expect(widget.getValue()).to.deep.equal([1, 2]); @@ -89,12 +84,12 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("getValue", function () { - var widget = BI.Test.createWidget({ + it("getValue", () => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_no_bar_combo", width: 220, itemsCreator: _itemsCreator, - value: [1, 2, 3] + value: [1, 2, 3], }); expect(widget.getValue()).to.deep.equal([1, 2, 3]); widget.destroy(); @@ -103,22 +98,22 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("点选选值", function (done) { - var widget = BI.Test.createWidget({ + it("点选选值", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); widget.element.find(".bi-multi-select-trigger").click(); // 为什么要delay 300呢，因为按钮有debounce - BI.delay(function () { + BI.delay(() => { // 点选1、2、3 - BI.each(itemSelectorGetter([1,2,3]), function (idx, selector) { + BI.each(itemSelectorGetter([1, 2, 3]), (idx, selector) => { widget.element.find(selector).click(); }); // 取消勾选1、2 - BI.delay(function () { - BI.each(itemSelectorGetter([1,2]), function (idx, selector) { + BI.delay(() => { + BI.each(itemSelectorGetter([1, 2]), (idx, selector) => { widget.element.find(selector).click(); }); expect(widget.getValue()).to.deep.equal([2]); @@ -131,19 +126,19 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("搜索选值", function (done) { - var widget = BI.Test.createWidget({ + it("搜索选值", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); - BI.nextTick(function () { + BI.nextTick(() => { widget.element.find(".bi-multi-select-trigger .tip-text-style").click(); // 这边为啥要加呢，因为input的setValue中有nextTick - BI.nextTick(function () { - BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, function () { - BI.nextTick(function () { - BI.each(searchItemSelectorGetter([1,2]), function (idx, selector) { + BI.nextTick(() => { + BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, () => { + BI.nextTick(() => { + BI.each(searchItemSelectorGetter([1, 2]), (idx, selector) => { widget.element.find(selector).click(); }); expect(widget.getValue()).to.deep.equal([2, 12]); @@ -158,21 +153,21 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("查看已选", function (done) { - var widget = BI.Test.createWidget({ + it("查看已选", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_no_bar_combo", width: 220, - itemsCreator: function (op, callback) { + itemsCreator(op, callback) { callback({ - items: items, - hasNext: false + items, + hasNext: false, }); }, - value: [1, 2] + value: [1, 2], }); - BI.nextTick(function () { + BI.nextTick(() => { widget.element.find(".bi-multi-select-check-selected-button").click(); - BI.delay(function () { + BI.delay(() => { expect(widget.element.find(".display-list-item").length).to.equal(2); widget.destroy(); done(); @@ -183,11 +178,11 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("setValue", function () { - var widget = BI.Test.createWidget({ + it("setValue", () => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_insert_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); widget.setValue([1, 2]); expect(widget.getValue()).to.deep.equal([1, 2]); @@ -197,12 +192,12 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("getValue", function () { - var widget = BI.Test.createWidget({ + it("getValue", () => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_insert_no_bar_combo", width: 220, itemsCreator: _itemsCreator, - value: [1, 2, 3] + value: [1, 2, 3], }); expect(widget.getValue()).to.deep.equal([1, 2, 3]); widget.destroy(); @@ -212,22 +207,22 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("点选选值1", function (done) { - var widget = BI.Test.createWidget({ + it("点选选值1", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_insert_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); widget.element.find(".bi-multi-select-trigger").click(); // 为什么要delay 300呢，因为按钮有debounce - BI.delay(function () { + BI.delay(() => { // 点选1、2、3 - BI.each(itemSelectorGetter([1,2,3]), function (idx, selector) { + BI.each(itemSelectorGetter([1, 2, 3]), (idx, selector) => { widget.element.find(selector).click(); }); // 取消勾选1、2、3 - BI.delay(function () { - BI.each(itemSelectorGetter([1,2]), function (idx, selector) { + BI.delay(() => { + BI.each(itemSelectorGetter([1, 2]), (idx, selector) => { widget.element.find(selector).click(); }); expect(widget.getValue()).to.deep.equal([2]); @@ -240,19 +235,19 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("搜索选值1", function (done) { - var widget = BI.Test.createWidget({ + it("搜索选值1", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_insert_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); - BI.nextTick(function () { + BI.nextTick(() => { widget.element.find(".bi-multi-select-trigger .tip-text-style").click(); // 这边为啥要加呢，因为input的setValue中有nextTick - BI.nextTick(function () { - BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, function () { - BI.nextTick(function () { - BI.each(searchItemSelectorGetter([1,2]), function (idx, selector) { + BI.nextTick(() => { + BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, () => { + BI.nextTick(() => { + BI.each(searchItemSelectorGetter([1, 2]), (idx, selector) => { widget.element.find(selector).click(); }); expect(widget.getValue()).to.deep.equal([2, 12]); @@ -267,18 +262,18 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("新增值1", function (done) { - var widget = BI.Test.createWidget({ + it("新增值1", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_insert_no_bar_combo", width: 220, - itemsCreator: _itemsCreator + itemsCreator: _itemsCreator, }); - BI.nextTick(function () { + BI.nextTick(() => { widget.element.find(".bi-multi-select-trigger .tip-text-style").click(); // 这边为啥要加呢，因为input的setValue中有nextTick - BI.nextTick(function () { - BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "z", 50, function () { - BI.nextTick(function () { + BI.nextTick(() => { + BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "z", 50, () => { + BI.nextTick(() => { widget.element.find(".bi-text-button:contains(+点击新增\"z\")").click(); expect(widget.getValue()).to.deep.equal(["z"]); widget.destroy(); @@ -292,23 +287,23 @@ describe("multi_select_no_bar_series", function () { /** * test_author_windy **/ - it("查看已选1", function (done) { - var widget = BI.Test.createWidget({ + it("查看已选1", done => { + const widget = BI.Test.createWidget({ type: "bi.multi_select_insert_no_bar_combo", width: 220, itemsCreator: _itemsCreator, value: { type: 1, - value: [1, 2] - } + value: [1, 2], + }, }); - BI.nextTick(function () { + BI.nextTick(() => { widget.element.find(".bi-multi-select-check-selected-button").click(); - BI.delay(function () { + BI.delay(() => { expect(widget.element.find(".display-list-item").length).to.equal(2); widget.destroy(); done(); }, 300); }); }); -}); \ No newline at end of file +}); diff --git a/src/widget/multiselect/__test__/multiselect.loader.test.js b/src/widget/multiselect/__test__/multiselect.loader.test.js index 324598714..3e3f47411 100644 --- a/src/widget/multiselect/__test__/multiselect.loader.test.js +++ b/src/widget/multiselect/__test__/multiselect.loader.test.js @@ -2,4 +2,4 @@ * @author windy * @version 2.0 * Created by windy on 2019/9/18 - */ \ No newline at end of file + */ diff --git a/src/widget/multiselect/__test__/multiselectcombo.test.js b/src/widget/multiselect/__test__/multiselectcombo.test.js index 324598714..3e3f47411 100644 --- a/src/widget/multiselect/__test__/multiselectcombo.test.js +++ b/src/widget/multiselect/__test__/multiselectcombo.test.js @@ -2,4 +2,4 @@ * @author windy * @version 2.0 * Created by windy on 2019/9/18 - */ \ No newline at end of file + */ diff --git a/src/widget/multiselect/__test__/multiselectinsert.combo.test.js b/src/widget/multiselect/__test__/multiselectinsert.combo.test.js index 324598714..3e3f47411 100644 --- a/src/widget/multiselect/__test__/multiselectinsert.combo.test.js +++ b/src/widget/multiselect/__test__/multiselectinsert.combo.test.js @@ -2,4 +2,4 @@ * @author windy * @version 2.0 * Created by windy on 2019/9/18 - */ \ No newline at end of file + */ diff --git a/src/widget/multiselect/check/multiselect.check.pane.js b/src/widget/multiselect/check/multiselect.check.pane.js index 958375876..6043caf71 100644 --- a/src/widget/multiselect/check/multiselect.check.pane.js +++ b/src/widget/multiselect/check/multiselect.check.pane.js @@ -1,113 +1,121 @@ -/** - * - * @class BI.MultiSelectCheckPane - * @extends BI.Widget - */ -BI.MultiSelectCheckPane = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + map, + i18nText, + VerticalAdaptLayout, VTapeLayout +} from "@/core"; +import { TextButton, Label } from "@/base"; +import { DisplaySelectedList } from "./multiselect.display"; - constants: { - height: 12, - lgap: 10, - tgap: 10, - bgap: 5 - }, +@shortcut() +export class MultiSelectCheckPane extends Widget { + static xtype = "bi.multi_select_check_pane"; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectCheckPane.superclass._defaultConfig.apply(this, arguments), { + constants = { height: 12, lgap: 10, tgap: 10, bgap: 5 }; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-check-pane bi-background", items: [], - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - onClickContinueSelect: BI.emptyFn + itemsCreator: emptyFn, + valueFormatter: emptyFn, + onClickContinueSelect: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectCheckPane.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; + const self = this, + opts = this.options; this.storeValue = opts.value || {}; - this.display = BI.createWidget({ - type: "bi.display_selected_list", + this.display = createWidget({ + type: DisplaySelectedList.xtype, items: opts.items, - itemsCreator: function (op, callback) { - op = BI.extend(op || {}, { - selectedValues: self.storeValue.value + itemsCreator(op, callback) { + op = extend(op || {}, { + selectedValues: self.storeValue.value, }); if (self.storeValue.type === BI.Selection.Multi) { callback({ - items: BI.map(self.storeValue.value, function (i, v) { - var txt = opts.valueFormatter(v) || v; + items: map(self.storeValue.value, (i, v) => { + const txt = opts.valueFormatter(v) || v; return { text: txt, value: v, - title: txt + title: txt, }; - }) + }), }); return; } opts.itemsCreator(op, callback); - } + }, }); - this.continueSelect = BI.createWidget({ - type: "bi.text_button", - title: BI.i18nText("BI-Continue_Select"), - text: BI.i18nText("BI-Continue_Select"), - cls: "multi-select-check-selected bi-high-light" + this.continueSelect = createWidget({ + type: TextButton.xtype, + title: i18nText("BI-Continue_Select"), + text: i18nText("BI-Continue_Select"), + cls: "multi-select-check-selected bi-high-light", }); - this.continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { + this.continueSelect.on(TextButton.EVENT_CHANGE, () => { opts.onClickContinueSelect(); }); - BI.createWidget({ - type: "bi.vtape", + createWidget({ + type: VTapeLayout.xtype, element: this, - items: [{ - height: this.constants.height, - el: { - type: "bi.vertical_adapt", - columnSize: ["auto", "auto"], - cls: "multi-select-continue-select", - items: [ - { - el: { - type: "bi.label", - title: BI.i18nText("BI-Selected_Data"), - text: BI.i18nText("BI-Selected_Data") + items: [ + { + height: this.constants.height, + el: { + type: VerticalAdaptLayout.xtype, + columnSize: ["auto", "auto"], + cls: "multi-select-continue-select", + items: [ + { + el: { + type: Label.xtype, + title: i18nText("BI-Selected_Data"), + text: i18nText("BI-Selected_Data"), + }, + lgap: this.constants.lgap, }, - lgap: this.constants.lgap - }, - { - el: this.continueSelect, - hgap: this.constants.lgap - }] + { + el: this.continueSelect, + hgap: this.constants.lgap, + } + ], + }, + tgap: this.constants.tgap, }, - tgap: this.constants.tgap - }, { - height: "fill", - el: this.display, - tgap: this.constants.bgap - }] + { + height: "fill", + el: this.display, + tgap: this.constants.bgap, + } + ], }); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v || {}; - }, + } - empty: function () { + empty() { this.display.empty(); - }, - - populate: function () { - this.display.populate.apply(this.display, arguments); } -}); -BI.shortcut("bi.multi_select_check_pane", BI.MultiSelectCheckPane); + populate() { + this.display.populate(...arguments); + } +} diff --git a/src/widget/multiselect/check/multiselect.display.js b/src/widget/multiselect/check/multiselect.display.js index 30442583c..db52ee8b7 100644 --- a/src/widget/multiselect/check/multiselect.display.js +++ b/src/widget/multiselect/check/multiselect.display.js @@ -1,106 +1,112 @@ -/** - * - * - * 查看已选弹出层的展示面板 - * @class BI.DisplaySelectedList - * @extends BI.Widget - */ -BI.DisplaySelectedList = BI.inherit(BI.Pane, { +import { + shortcut, + extend, + emptyFn, + createWidget, + VerticalLayout, + createItems +} from "@/core"; +import { Pane, ButtonGroup, Loader, IconTextItem } from "@/base"; +import { ListPane } from "@/case"; - constants: { - height: 24, - lgap: 10 - }, +@shortcut() +export class DisplaySelectedList extends Pane { + static xtype = "bi.display_selected_list"; - _defaultConfig: function () { - return BI.extend(BI.DisplaySelectedList.superclass._defaultConfig.apply(this, arguments), { + constants = { height: 24, lgap: 10 }; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-display-list", - itemsCreator: BI.emptyFn, - items: [] + itemsCreator: emptyFn, + items: [], }); - }, + } - _init: function () { - BI.DisplaySelectedList.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; + const self = this, + opts = this.options; this.hasNext = false; - var cacheItems = []; + let cacheItems = []; - this.button_group = BI.createWidget({ - type: "bi.list_pane", + this.button_group = createWidget({ + type: ListPane.xtype, element: this, el: { - type: "bi.loader", + type: Loader.xtype, isDefaultInit: false, logic: { dynamic: true, - scrolly: true + scrolly: true, }, items: this._createItems(opts.items), - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, layouts: [ { - type: "bi.vertical", - lgap: 10 + type: VerticalLayout.xtype, + lgap: 10, } - ] + ], }, - itemsCreator: function (options, callback) { + itemsCreator (options, callback) { if (options.times === 1) { cacheItems = []; } if (cacheItems.length > 0) { - var renderedItems = cacheItems.slice(0, 100); + const renderedItems = cacheItems.slice(0, 100); cacheItems = cacheItems.slice(100); self.hasNext = cacheItems.length > 0; callback(self._createItems(renderedItems)); + return; } - opts.itemsCreator(options, function (ob) { + opts.itemsCreator(options, ob => { self.hasNext = !!ob.hasNext; - var firstItemsCount = 100 + ob.items.length % 100; + const firstItemsCount = 100 + (ob.items.length % 100); if (ob.items.length > 100) { cacheItems = ob.items.slice(firstItemsCount); - self.hasNext = (firstItemsCount === ob.items.length) ? false : true; + self.hasNext = + firstItemsCount !== ob.items.length; } - callback(self._createItems(ob.items.slice(0, firstItemsCount))); + callback( + self._createItems(ob.items.slice(0, firstItemsCount)) + ); }); }, - hasNext: function () { + hasNext () { return self.hasNext; - } + }, }); - }, + } - _createItems: function (items) { - return BI.createItems(items, { - type: "bi.icon_text_item", + _createItems(items) { + return createItems(items, { + type: IconTextItem.xtype, cls: "cursor-default check-font icon-size-12 display-list-item bi-tips", once: true, invalid: true, selected: true, height: this.constants.height, logic: { - dynamic: true - } + dynamic: true, + }, }); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { + populate(items) { if (arguments.length === 0) { this.button_group.populate(); } else { this.button_group.populate(this._createItems(items)); } } -}); - -BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList); +} diff --git a/src/widget/multiselect/index.js b/src/widget/multiselect/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/widget/multiselect/loader.js b/src/widget/multiselect/loader.js index c2c2d8de7..98b61d890 100644 --- a/src/widget/multiselect/loader.js +++ b/src/widget/multiselect/loader.js @@ -1,146 +1,192 @@ -/** - * 加载控件 - * - * Created by GUY on 2015/8/31. - * @class BI.Loader - * @extends BI.Widget - */ -BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInnerLoader.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + VerticalLayout, + createWidget, + Controller, + Events, + isEmpty, + nextTick, + bind, + isNumber, + isObject, + isFunction, + makeObject, + isArray, + each +} from "@/core"; +import { ButtonGroup, Loader } from "@/base"; + +@shortcut() +export class MultiSelectInnerLoader extends Widget { + static xtype = "bi.multi_select_inner_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-inner-loader", direction: "top", isDefaultInit: true, // 是否默认初始化数据 logic: { dynamic: true, - scrolly: true + scrolly: true, }, // 下面是button_group的属性 el: { - type: "bi.button_group", - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + type: ButtonGroup.xtype, + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, behaviors: { - redmark: function () { + redmark() { return true; - } + }, }, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, items: [], - itemsCreator: BI.emptyFn, - onLoaded: BI.emptyFn, + itemsCreator: emptyFn, + onLoaded: emptyFn, // 下面是分页信息 count: false, prev: false, next: {}, - hasPrev: BI.emptyFn, - hasNext: BI.emptyFn + hasPrev: emptyFn, + hasNext: emptyFn, }); - }, + } - _nextLoad: function () { - var self = this, o = this.options; + _nextLoad() { + const self = this, + o = this.options; this.next.setLoading(); if (this.cachItems && this.cachItems.length > 0) { this.next.setLoaded(); this.addItems(this.cachItems.slice(0, 100)); this.cachItems = this.cachItems.slice(100); + return; } - o.itemsCreator.apply(this, [{times: ++this.times}, function () { - self.next.setLoaded(); - self.addItems.apply(self, arguments); - }]); - }, - - render: function () { - var self = this, o = this.options; + o.itemsCreator.apply(this, [ + { times: ++this.times }, + function () { + self.next.setLoaded(); + self.addItems(...arguments); + } + ]); + } + + render() { + const self = this, + o = this.options; if (o.itemsCreator === false) { o.next = false; } - this.button_group = BI.createWidget(o.el, { - type: "bi.button_group", + this.button_group = createWidget(o.el, { + type: ButtonGroup.xtype, chooseType: 0, items: o.items, behaviors: {}, - layouts: [{ - type: "bi.vertical" - }], - value: o.value + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + value: o.value, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - if (type === BI.Events.CLICK) { - var node = self.cachGroup.getNodeByValue(value); - if (node) { - node.setSelected(obj.isSelected()); + this.button_group.on( + Controller.EVENT_CHANGE, + function (type, value, obj) { + if (type === Events.CLICK) { + const node = self.cachGroup.getNodeByValue(value); + if (node) { + node.setSelected(obj.isSelected()); + } + } + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { + self.fireEvent(Loader.EVENT_CHANGE, obj); } } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.Loader.EVENT_CHANGE, obj); - } - }); + ); - var renderEngine = BI.Widget._renderEngine; - BI.Widget.registerRenderEngine(BI.Element.renderEngine); - this.cachGroup = BI.createWidget(o.el, { - type: "bi.button_group", + const renderEngine = Widget._renderEngine; + Widget.registerRenderEngine(BI.Element.renderEngine); + this.cachGroup = createWidget(o.el, { + type: ButtonGroup.xtype, root: true, chooseType: 0, items: o.items, behaviors: {}, - layouts: [{ - type: "bi.vertical" - }], - value: o.value + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + value: o.value, }); - BI.Widget.registerRenderEngine(renderEngine); + Widget.registerRenderEngine(renderEngine); if (o.next !== false) { - this.next = BI.createWidget(BI.extend({ - type: "bi.loading_bar" - }, o.next)); - this.next.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.next = createWidget( + extend( + { + type: "bi.loading_bar", + }, + o.next + ) + ); + this.next.on(Controller.EVENT_CHANGE, type => { + if (type === Events.CLICK) { self._nextLoad(); } }); } - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, - items: [this.button_group, this.next] + items: [this.button_group, this.next], }); - o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () { - o.isDefaultInit && BI.isEmpty(o.items) && this._populate(); - }, this)); - }, + o.isDefaultInit && + isEmpty(o.items) && + nextTick( + bind(function () { + o.isDefaultInit && isEmpty(o.items) && this._populate(); + }, this) + ); + } - hasNext: function () { - var o = this.options; - if (BI.isNumber(o.count)) { + hasNext() { + const o = this.options; + if (isNumber(o.count)) { return this.count < o.count; } if (this.cachItems && this.cachItems.length > 0) { return true; } - return !!o.hasNext.apply(this, [{ - times: this.times, - count: this.count - }]); - }, - addItems: function (items) { + return !!o.hasNext.apply(this, [ + { + times: this.times, + count: this.count, + } + ]); + } + + addItems(items) { this.count += items.length; - if (BI.isObject(this.next)) { + if (isObject(this.next)) { if (this.hasNext()) { this.options.items = this.options.items.concat(items); this.next.setLoaded(); @@ -148,113 +194,124 @@ BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, { this.next.setEnd(); } } - var renderEngine = BI.Widget._renderEngine; - BI.Widget.registerRenderEngine(BI.Element.renderEngine); - this.cachGroup.addItems.apply(this.cachGroup, arguments); - BI.Widget.registerRenderEngine(renderEngine); - this.button_group.addItems.apply(this.button_group, arguments); - }, - - _populate: function (items) { - var self = this, o = this.options; - if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) { - o.itemsCreator.apply(this, [{times: 1}, function (items, keyword) { - if (arguments.length === 0) { - throw new Error("参数不能为空"); + const renderEngine = Widget._renderEngine; + Widget.registerRenderEngine(BI.Element.renderEngine); + this.cachGroup.addItems(...arguments); + Widget.registerRenderEngine(renderEngine); + this.button_group.addItems(...arguments); + } + + _populate(items) { + const self = this, + o = this.options; + if (arguments.length === 0 && isFunction(o.itemsCreator)) { + o.itemsCreator.apply(this, [ + { times: 1 }, + function (items, keyword) { + if (arguments.length === 0) { + throw new Error("参数不能为空"); + } + self.populate(...arguments); + o.onLoaded(); } - self.populate.apply(self, arguments); - o.onLoaded(); - }]); + ]); + return false; } - this.options.items = (items || []).slice(0, 100 + (items || []).length % 100); + this.options.items = (items || []).slice( + 0, + 100 + ((items || []).length % 100) + ); this.times = 1; this.count = 0; this.count += items.length; - if (BI.isObject(this.next)) { + if (isObject(this.next)) { if (this.hasNext()) { this.next.setLoaded(); } else { this.next.invisible(); } } + return true; - }, + } - populate: function (items, keyword) { - if (this._populate.apply(this, arguments)) { + populate(items, keyword) { + if (this._populate(...arguments)) { this.cachItems = []; - var firstItemsCount = 100 + items.length % 100; + const firstItemsCount = 100 + (items.length % 100); if (items.length > firstItemsCount) { this.cachItems = items.slice(firstItemsCount); } - var renderEngine = BI.Widget._renderEngine; - BI.Widget.registerRenderEngine(BI.Element.renderEngine); + const renderEngine = Widget._renderEngine; + Widget.registerRenderEngine(BI.Element.renderEngine); this.cachGroup.populate.call(this.cachGroup, items, keyword); - BI.Widget.registerRenderEngine(renderEngine); - this.button_group.populate.call(this.button_group, items.slice(0, firstItemsCount), keyword); + Widget.registerRenderEngine(renderEngine); + this.button_group.populate.call( + this.button_group, + items.slice(0, firstItemsCount), + keyword + ); } - }, + } - setNotSelectedValue: function () { - this.button_group.setNotSelectedValue.apply(this.button_group, arguments); - this.cachGroup.setNotSelectedValue.apply(this.cachGroup, arguments); - }, + setNotSelectedValue() { + this.button_group.setNotSelectedValue(...arguments); + this.cachGroup.setNotSelectedValue(...arguments); + } - getNotSelectedValue: function () { + getNotSelectedValue() { return this.cachGroup.getNotSelectedValue(); - }, + } - setAllSelected: function (v) { + setAllSelected(v) { this.button_group.setAllSelected(v); this.cachGroup.setAllSelected(v); - }, + } - setValue: function (value) { - var map = BI.makeObject(BI.isArray(value) ? value : [value]); + setValue(value) { + const map = makeObject(isArray(value) ? value : [value]); this.cachGroup.setValueMap.call(this.cachGroup, map); this.button_group.setValueMap.call(this.button_group, map); - }, + } - getValue: function () { - return this.cachGroup.getValue.apply(this.cachGroup, arguments); - }, + getValue() { + return this.cachGroup.getValue(...arguments); + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.button_group.getAllLeaves(); - }, + } - getSelectedButtons: function () { + getSelectedButtons() { return this.button_group.getSelectedButtons(); - }, + } - getNotSelectedButtons: function () { + getNotSelectedButtons() { return this.button_group.getNotSelectedButtons(); - }, + } - getIndexByValue: function (value) { + getIndexByValue(value) { return this.button_group.getIndexByValue(value); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.button_group.getNodeById(id); - }, + } - getNodeByValue: function (value) { + getNodeByValue(value) { return this.button_group.getNodeByValue(value); - }, + } - empty: function () { + empty() { this.button_group.empty(); this.cachGroup.empty(); - BI.each([this.prev, this.next], function (i, ob) { + each([this.prev, this.next], (i, ob) => { ob && ob.setVisible(false); }); } -}); -BI.MultiSelectInnerLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_inner_loader", BI.MultiSelectInnerLoader); +} diff --git a/src/widget/multiselect/multiselect.combo.js b/src/widget/multiselect/multiselect.combo.js index 5651fa04f..a9efd6a3b 100644 --- a/src/widget/multiselect/multiselect.combo.js +++ b/src/widget/multiselect/multiselect.combo.js @@ -1,51 +1,98 @@ -/** - * - * @class BI.MultiSelectCombo - * @extends BI.Single - */ -BI.MultiSelectCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + isKey, + remove, + deepClone, + createWidget, + toPix, + bind, + last, + initial, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + isNotNull, + makeObject, + map, + each, + Func, + concat, + values, + filter, + contains, + isNull +} from "@/core"; +import { Single, Combo } from "@/base"; +import { TriggerIconButton } from "@/case"; +import { MultiSelectTrigger } from "./multiselect.trigger"; +import { MultiSelectPopupView } from "./multiselect.popup.view"; +import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected"; + +@shortcut() +export class MultiSelectCombo extends Single { + static xtype = "bi.multi_select_combo"; + + static REQ_GET_DATA_LENGTH = "1"; + 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-multi-select-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: 24, allowEdit: true, }); - }, - - _init: function () { - var self = this; - var o = this.options; - BI.MultiSelectCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - if (BI.isKey(self._startValue)) { + } + + _init() { + const self = this; + const o = this.options; + super._init(...arguments); + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + + function assertShowValue() { + if (isKey(self._startValue)) { if (self.storeValue.type === BI.Selection.All) { - BI.remove(self.storeValue.value, self._startValue); + remove(self.storeValue.value, self._startValue); self.storeValue.assist = self.storeValue.assist || []; BI.pushDistinct(self.storeValue.assist, self._startValue); } else { BI.pushDistinct(self.storeValue.value, self._startValue); - BI.remove(self.storeValue.assist, self._startValue); + remove(self.storeValue.assist, self._startValue); } } self.trigger.getSearcher().setState(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue); - }; - this.storeValue = BI.deepClone(o.value) || {}; + } + + this.storeValue = deepClone(o.value) || {}; this._assertValue(this.storeValue); // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.multi_select_trigger", + this.trigger = createWidget({ + type: MultiSelectTrigger.xtype, allowEdit: o.allowEdit, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), text: o.text, defaultText: o.defaultText, masker: { @@ -58,114 +105,124 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { }, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), itemHeight: o.itemHeight, value: this.storeValue, }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiSelectCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self._setStartValue(""); this.getSearcher().setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => { self._setStartValue(""); - self.fireEvent(BI.MultiSelectCombo.EVENT_STOP); + self.fireEvent(MultiSelectCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) { - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.combo.setValue(self.storeValue); - assertShowValue(); - self.combo.populate(); - self._setStartValue(""); - } else { - self.combo.setValue(self.storeValue); - assertShowValue(); - } - self._dataChange = true; - }); + this.trigger.on( + MultiSelectTrigger.EVENT_SEARCHING, + keywords => { + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (BI.endWith(lastKeyword, BI.BlankSplitChar)) { + self.combo.setValue(self.storeValue); + assertShowValue(); + self.combo.populate(); + self._setStartValue(""); + } else { + self.combo.setValue(self.storeValue); + assertShowValue(); + } + self._dataChange = true; + }); + } + self.fireEvent(MultiSelectCombo.EVENT_SEARCHING); } - self.fireEvent(BI.MultiSelectCombo.EVENT_SEARCHING); - }); + ); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { + self._joinAll(this.getValue(), () => { assertShowValue(); - self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM); + self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM); }); } else { - self._join(this.getValue(), function () { + self._join(this.getValue(), () => { assertShowValue(); - self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM); + self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM); }); } self._dataChange = true; }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { - // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) - // 只需要更新查看面板的selectedValue用以请求已选数据 - self.numberCounter.updateSelectedValue(self.storeValue); - }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { + this.trigger.on( + MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, + () => { + // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) + // 只需要更新查看面板的selectedValue用以请求已选数据 + self.numberCounter.updateSelectedValue(self.storeValue); + } + ); + this.trigger.on(MultiSelectTrigger.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", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { type: "bi.multi_select_popup_view", - ref: function () { + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, - listeners: [{ - eventName: BI.MultiSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { - assertShowValue(); - }); - self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM); - }, - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, - action: function () { - self._defaultState(); + listeners: [ + { + eventName: MultiSelectPopupView.EVENT_CHANGE, + action() { + self._dataChange = true; + self.storeValue = this.getValue(); + self._adjust(() => { + assertShowValue(); + }); + self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM); + }, }, - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, - action: function () { - self._dataChange = true; - self.setValue(); - self._defaultState(); + { + eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM, + action() { + self._defaultState(); + }, }, - }], + { + eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR, + action() { + self._dataChange = true; + self.setValue(); + self._defaultState(); + }, + } + ], itemsCreator: o.itemsCreator, itemHeight: o.itemHeight, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); self.numberCounter.adjustView(); @@ -174,39 +231,37 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { }, }, value: o.value, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0; + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); }, }); - 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._stopEditing(); if (self.requesting === true) { self.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.MultiSelectCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button", - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -215,8 +270,8 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ - type: "bi.multi_select_check_selected_switcher", + this.numberCounter = createWidget({ + type: MultiSelectCheckSelectedSwitcher.xtype, masker: { offset: { left: 0, @@ -226,259 +281,274 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), value: this.storeValue, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - this.updateSelectedValue(self.storeValue); - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + function () { + this.updateSelectedValue(self.storeValue); + } + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - 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, - }, { - el: { - type: "bi.vertical_adapt", - items: [this.numberCounter], + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - right: o.height, - top: 0, - height: o.height, - }], + { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0, + }, + { + el: { + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], + }, + right: o.height, + top: 0, + height: o.height, + } + ], }); - }, + } - _itemsCreator4Trigger: function (op, callback) { - var self = this; - var o = this.options; + _itemsCreator4Trigger(op, callback) { + const self = this; + const o = this.options; 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(BI.deepClone(self.getValue())); + self.trigger.setValue(deepClone(self.getValue())); } callback.apply(self, arguments); }); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { + _assertValue(val) { val || (val = {}); val.type || (val.type = BI.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; - var o = this.options; + _joinKeywords(keywords, callback) { + const self = this; + const o = this.options; this._assertValue(this.storeValue); this.requesting = true; - o.itemsCreator({ - type: BI.MultiSelectCombo.REQ_GET_ALL_DATA, - keywords: keywords, - }, function (ob) { - var values = BI.map(ob.items, "value"); - digest(values); - }); + o.itemsCreator( + { + type: MultiSelectCombo.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 === BI.Selection.Multi + ? BI.pushDistinct(self.storeValue.value, val) + : remove(self.storeValue.value, val); } }); self._adjust(callback); } - }, + } - _joinAll: function (res, callback) { - var self = this; - var o = this.options; + _joinAll(res, callback) { + const tempMap = this._makeMap(this.storeValue.value); + const self = this; + const o = this.options; this._assertValue(res); this.requesting = true; 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.getKey()); - 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.getKey() + ); + let change = false; + each(concat(result.match, result.find), (i, obj) => { + const v = obj.value; + if (isNotNull(tempMap[v])) { change = true; - self.storeValue.assist && self.storeValue.assist.push(map[v]); - delete map[v]; + self.storeValue.assist && + self.storeValue.assist.push(tempMap[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.MultiSelectCombo.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKey()], - 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]])) { - self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - BI.remove(self.storeValue.assist, item); - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, + o.itemsCreator( + { + type: MultiSelectCombo.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKey()], + 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]])) { + self.storeValue.assist && + self.storeValue.assist.push(selectedMap[items[i]]); + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + remove(self.storeValue.assist, item); + newItems.push(item); + } + }); + self.storeValue.value = newItems.concat(values(selectedMap)); + self._adjust(callback); + } + ); + } - _adjust: function (callback) { - var self = this; - var o = this.options; + _adjust(callback) { + const self = this; adjust(); callback(); function adjust() { if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.MultiSelectCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectCombo.EVENT_CONFIRM); self.wants2Quit = false; } self.requesting = false; } - }, + } - _join: function (res, callback) { - var self = this; - var 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); - BI.remove(self.storeValue.assist, v); + remove(self.storeValue.assist, 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); + self.storeValue.assist && + self.storeValue.assist.push(map[v]); 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.popup.setStartValue(value); - }, + } - _populate: function () { - this.combo.populate.apply(this.combo, arguments); - }, + _populate() { + this.combo.populate(...arguments); + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v || {}; this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue); - }, - - getValue: function () { - return BI.deepClone(this.storeValue); - }, - - populate: function () { - this._populate.apply(this, arguments); - this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments); - }, -}); - -BI.extend(BI.MultiSelectCombo, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1, -}); - -BI.MultiSelectCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiSelectCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.multi_select_combo", BI.MultiSelectCombo); + } + + getValue() { + return deepClone(this.storeValue); + } + + populate() { + this._populate(...arguments); + this.numberCounter.populateSwitcher(...arguments); + } +} diff --git a/src/widget/multiselect/multiselect.combo.nobar.js b/src/widget/multiselect/multiselect.combo.nobar.js index d757ebbca..332858425 100644 --- a/src/widget/multiselect/multiselect.combo.nobar.js +++ b/src/widget/multiselect/multiselect.combo.nobar.js @@ -1,47 +1,95 @@ -/** - * - * @class BI.MultiSelectNoBarCombo - * @extends BI.Single - */ -BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectNoBarCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + isKey, + remove, + deepClone, + createWidget, + toPix, + bind, + last, + initial, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + isNotNull, + makeObject, + map, + each, + Func, + concat, + values, + filter, + contains, + isNull, pushDistinct, Selection +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiSelectBar, TriggerIconButton } from "@/case"; +import { MultiSelectTrigger } from "./multiselect.trigger"; +import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected"; +import { MultiSelectNoBarPopupView } from "@/widget/multiselect/multiselect.popup.view.nobar"; + +@shortcut() +export class MultiSelectNoBarCombo extends Single { + static xtype = "bi.multi_select_no_bar_combo"; + + static REQ_GET_DATA_LENGTH = "1"; + 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-multi-select-combo-no-bar", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: 24, }); - }, + } + + _init() { + const self = this, + o = this.options; + super._init(...arguments); + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); - _init: function () { - var self = this, o = this.options; - BI.MultiSelectNoBarCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - if (BI.isKey(self._startValue)) { + function assertShowValue() { + if (isKey(self._startValue)) { if (self.storeValue.type === BI.Selection.All) { - BI.remove(self.storeValue.value, self._startValue); + remove(self.storeValue.value, self._startValue); self.storeValue.assist = self.storeValue.assist || []; - BI.pushDistinct(self.storeValue.assist, self._startValue); + pushDistinct(self.storeValue.assist, self._startValue); } else { - BI.pushDistinct(self.storeValue.value, self._startValue); - BI.remove(self.storeValue.assist, self._startValue); + pushDistinct(self.storeValue.value, self._startValue); + remove(self.storeValue.assist, self._startValue); } } self.trigger.getSearcher().setState(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue); - }; + } + this.storeValue = { - type: BI.Selection.Multi, - value: BI.deepClone(o.value) || [] + type: Selection.Multi, + value: deepClone(o.value) || [], }; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.multi_select_trigger", - height: BI.toPix(o.height, o.simple ? 1 : 2), + this.trigger = createWidget({ + type: MultiSelectTrigger.xtype, + height: toPix(o.height, o.simple ? 1 : 2), text: o.text, defaultText: o.defaultText, masker: { @@ -53,163 +101,171 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), itemFormatter: o.itemFormatter, itemHeight: o.itemHeight, value: { type: BI.Selection.Multi, - value: o.value - } + value: o.value, + }, }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectNoBarCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiSelectNoBarCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self._setStartValue(""); this.getSearcher().setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => { self._setStartValue(""); - self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_STOP); + self.fireEvent(MultiSelectNoBarCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) { - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.combo.setValue(self.storeValue); - assertShowValue(); - self.combo.populate(); - self._setStartValue(""); - } else { - self.combo.setValue(self.storeValue); - assertShowValue(); - } - self._dataChange = true; - }); + this.trigger.on( + MultiSelectTrigger.EVENT_SEARCHING, + keywords => { + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (BI.endWith(lastKeyword, BI.BlankSplitChar)) { + self.combo.setValue(self.storeValue); + assertShowValue(); + self.combo.populate(); + self._setStartValue(""); + } else { + self.combo.setValue(self.storeValue); + assertShowValue(); + } + self._dataChange = true; + }); + } } - }); + ); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { + if (obj instanceof MultiSelectBar) { + self._joinAll(this.getValue(), () => { assertShowValue(); }); } else { - self._join(this.getValue(), function () { + self._join(this.getValue(), () => { assertShowValue(); }); } self._dataChange = true; - self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM); - }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { - // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) - // 只需要更新查看面板的selectedValue用以请求已选数据 - self.numberCounter.updateSelectedValue(self.storeValue); + self.fireEvent(MultiSelectNoBarCombo.EVENT_CLICK_ITEM); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { + this.trigger.on( + MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, + () => { + // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) + // 只需要更新查看面板的selectedValue用以请求已选数据 + self.numberCounter.updateSelectedValue(self.storeValue); + } + ); + this.trigger.on(MultiSelectTrigger.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", toggle: false, container: o.container, el: this.trigger, adjustLength: 1, popup: { - type: "bi.multi_select_no_bar_popup_view", - ref: function () { + type: MultiSelectNoBarPopupView.xtype, + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiSelectPopupView.EVENT_CHANGE, - action: function () { + eventName: MultiSelectNoBarPopupView.EVENT_CHANGE, + action() { self._dataChange = true; self.storeValue = this.getValue(); - self._adjust(function () { + self._adjust(() => { assertShowValue(); }); - self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, - action: function () { + self.fireEvent( + MultiSelectNoBarCombo.EVENT_CLICK_ITEM + ); + }, + }, + { + eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM, + action() { self._defaultState(); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR, + action() { self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, itemHeight: o.itemHeight, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); - } + }, }, value: { type: BI.Selection.Multi, - value: o.value + value: o.value, + }, + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); }, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0; - } }); - 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._stopEditing(); if (self.requesting === true) { self.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectNoBarCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button" - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -218,8 +274,8 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ - type: "bi.multi_select_check_selected_switcher", + this.numberCounter = createWidget({ + type: MultiSelectCheckSelectedSwitcher.xtype, masker: { offset: { left: 0, @@ -229,41 +285,54 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), value: { type: BI.Selection.Multi, - value: o.value - } + value: o.value, + }, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - this.updateSelectedValue(self.storeValue); - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + function () { + this.updateSelectedValue(self.storeValue); + } + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -271,238 +340,247 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, - height: o.height + height: o.height, } - ] + ], }); - }, + } - _addItem: function (assertShowValue, matched) { - var self = this; - var keyword = this.trigger.getSearcher().getKeyword(); - this._join({ - type: BI.Selection.Multi, - value: [keyword] - }, function () { - // 如果在不选的状态下直接把该值添加进来 - if (self.storeValue.type === BI.Selection.Multi) { - BI.pushDistinct(self.storeValue.value, keyword); + _addItem(assertShowValue, matched) { + const self = this; + const keyword = this.trigger.getSearcher().getKeyword(); + this._join( + { + type: BI.Selection.Multi, + value: [keyword], + }, + () => { + // 如果在不选的状态下直接把该值添加进来 + if (self.storeValue.type === BI.Selection.Multi) { + BI.pushDistinct(self.storeValue.value, keyword); + } + self.combo.setValue(self.storeValue); + self._setStartValue(keyword); + assertShowValue(); + self.populate(); + self._setStartValue(""); + self._dataChange = true; } - self.combo.setValue(self.storeValue); - self._setStartValue(keyword); - assertShowValue(); - self.populate(); - self._setStartValue(""); - self._dataChange = true; - }); - }, + ); + } - _itemsCreator4Trigger: function (op, callback) { - var self = this, o = this.options; + _itemsCreator4Trigger(op, callback) { + const self = this, + o = this.options; 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(BI.deepClone(self.storeValue)); + self.trigger.setValue(deepClone(self.storeValue)); } callback.apply(self, arguments); }); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { + _assertValue(val) { val || (val = {}); val.type || (val.type = BI.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, + o = this.options; this._assertValue(this.storeValue); this.requesting = true; - o.itemsCreator({ - type: BI.MultiSelectNoBarCombo.REQ_GET_ALL_DATA, - keywords: keywords - }, function (ob) { - var values = BI.map(ob.items, "value"); - digest(values); - }); + o.itemsCreator( + { + type: MultiSelectNoBarCombo.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 === BI.Selection.Multi + ? BI.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); this.requesting = true; 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.getKey()); - 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.getKey() + ); + 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); - delete map[v]; + self.storeValue.assist && + self.storeValue.assist.push(tempMap[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.MultiSelectNoBarCombo.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKey()], - 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]])) { - self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - BI.remove(self.storeValue.assist, item); - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, + o.itemsCreator( + { + type: MultiSelectNoBarCombo.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKey()], + 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]])) { + self.storeValue.assist && + self.storeValue.assist.push(selectedMap[items[i]]); + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + remove(self.storeValue.assist, item); + 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; adjust(); callback(); function adjust() { if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectNoBarCombo.EVENT_CONFIRM); self.wants2Quit = false; } self.requesting = false; } - }, + } - _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); - BI.remove(self.storeValue.assist, v); + pushDistinct(self.storeValue.value, v); + remove(self.storeValue.assist, 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); + self.storeValue.assist && + self.storeValue.assist.push(map[v]); 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.popup.setStartValue(value); - }, + } - _populate: function () { - this.combo.populate.apply(this.combo, arguments); - }, + _populate() { + this.combo.populate(...arguments); + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = { type: BI.Selection.Multi, - value: v || [] + value: v || [], }; this.combo.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue); - }, - - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, - - populate: function () { - this._populate.apply(this, arguments); - this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments); } -}); - -BI.extend(BI.MultiSelectNoBarCombo, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 -}); -BI.MultiSelectNoBarCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectNoBarCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectNoBarCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectNoBarCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiSelectNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; + getValue() { + return deepClone(this.storeValue.value); + } -BI.shortcut("bi.multi_select_no_bar_combo", BI.MultiSelectNoBarCombo); + populate() { + this._populate(...arguments); + this.numberCounter.populateSwitcher(...arguments); + } +} diff --git a/src/widget/multiselect/multiselect.insert.combo.js b/src/widget/multiselect/multiselect.insert.combo.js index c18aa6d90..4d9bb5b3c 100644 --- a/src/widget/multiselect/multiselect.insert.combo.js +++ b/src/widget/multiselect/multiselect.insert.combo.js @@ -1,46 +1,96 @@ -/** - * - * @class BI.MultiSelectInsertCombo - * @extends BI.Single - */ -BI.MultiSelectInsertCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInsertCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + isKey, + remove, + deepClone, + createWidget, + toPix, + bind, + last, + initial, + i18nText, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + isNotNull, + makeObject, + each, + Func, + map, + concat, + values, + filter, + contains, + isNull, endWith, pushDistinct, Selection +} from "@/core"; +import { Single, Combo, Msg } from "@/base"; +import { MultiSelectInsertTrigger } from "./multiselect.insert.trigger"; +import { MultiSelectPopupView } from "./multiselect.popup.view"; +import { MultiSelectBar, TriggerIconButton } from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected"; + +@shortcut() +export class MultiSelectInsertCombo extends Single { + static xtype = "bi.multi_select_insert_combo"; + + static REQ_GET_DATA_LENGTH = "1"; + 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"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-insert-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - allowEdit: true + allowEdit: true, }); - }, - - _init: function () { - var self = this, o = this.options; - BI.MultiSelectInsertCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - if (BI.isKey(self._startValue)) { - if (self.storeValue.type === BI.Selection.All) { - BI.remove(self.storeValue.value, self._startValue); + } + + _init() { + const self = this, + o = this.options; + super._init(...arguments); + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + + function assertShowValue() { + if (isKey(self._startValue)) { + if (self.storeValue.type === Selection.All) { + remove(self.storeValue.value, self._startValue); self.storeValue.assist = self.storeValue.assist || []; - BI.pushDistinct(self.storeValue.assist, self._startValue); + pushDistinct(self.storeValue.assist, self._startValue); } else { - BI.pushDistinct(self.storeValue.value, self._startValue); - BI.remove(self.storeValue.assist, self._startValue); + pushDistinct(self.storeValue.value, self._startValue); + remove(self.storeValue.assist, self._startValue); } } self.trigger.getSearcher().setState(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue); - }; - this.storeValue = BI.deepClone(o.value) || {}; + } + + this.storeValue = deepClone(o.value) || {}; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_insert_trigger", allowEdit: o.allowEdit, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), text: o.text, watermark: o.watermark, defaultText: o.defaultText, @@ -50,168 +100,188 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, { left: 0, top: 0, right: 0, - bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 - } + bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, + }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), itemFormatter: o.itemFormatter, itemHeight: o.itemHeight, value: this.storeValue, }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectInsertTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectInsertCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_BLUR); + this.trigger.on(MultiSelectInsertTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiSelectInsertCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function () { self._setStartValue(""); this.getSearcher().setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => { self._setStartValue(""); - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_STOP); + self.fireEvent(MultiSelectInsertCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_PAUSE, function () { + this.trigger.on(MultiSelectInsertTrigger.EVENT_PAUSE, function () { self._addItem(assertShowValue, true); - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_ADD_ITEM, this.getSearcher().getKeyword()); + self.fireEvent( + MultiSelectInsertCombo.EVENT_ADD_ITEM, + this.getSearcher().getKeyword() + ); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, function (keywords) { - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.combo.setValue(self.storeValue); + this.trigger.on( + MultiSelectInsertTrigger.EVENT_SEARCHING, + function (keywords) { + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (endWith(lastKeyword, BI.BlankSplitChar)) { + self.combo.setValue(self.storeValue); + assertShowValue(); + self.combo.populate(); + self._setStartValue(""); + } else { + self.combo.setValue(self.storeValue); + assertShowValue(); + } + self._dataChange = true; + }); + this.getSearcher().getKeywordsLength() > 2000 && + Msg.alert( + i18nText("BI-Basic_Prompt"), + i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand") + ); + } + self.fireEvent(MultiSelectInsertCombo.EVENT_SEARCHING); + } + ); + + this.trigger.on( + MultiSelectInsertTrigger.EVENT_CHANGE, + function (value, obj) { + if (obj instanceof MultiSelectBar) { + self._joinAll(this.getValue(), () => { assertShowValue(); - self.combo.populate(); - self._setStartValue(""); - } else { - self.combo.setValue(self.storeValue); + self.fireEvent(MultiSelectInsertCombo.EVENT_CLICK_ITEM); + }); + } else { + self._join(this.getValue(), () => { assertShowValue(); - } - self._dataChange = true; - }); - this.getSearcher().getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")); + self.fireEvent(MultiSelectInsertCombo.EVENT_CLICK_ITEM); + }); + } + self._dataChange = true; } - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_SEARCHING); - }); - - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_CHANGE, function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM); - }); - } else { - self._join(this.getValue(), function () { - assertShowValue(); - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM); - }); + ); + this.trigger.on( + MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, + () => { + // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) + // 只需要更新查看面板的selectedValue用以请求已选数据 + self.numberCounter.updateSelectedValue(self.storeValue); } - self._dataChange = true; - }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { - // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) - // 只需要更新查看面板的selectedValue用以请求已选数据 - self.numberCounter.updateSelectedValue(self.storeValue); - }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + ); + this.trigger.on( + MultiSelectInsertTrigger.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", toggle: !o.allowEdit, el: this.trigger, adjustLength: 1, container: o.container, popup: { type: "bi.multi_select_popup_view", - ref: function () { + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiSelectPopupView.EVENT_CHANGE, - action: function () { + eventName: MultiSelectPopupView.EVENT_CHANGE, + action() { self._dataChange = true; self.storeValue = this.getValue(); - self._adjust(function () { + self._adjust(() => { assertShowValue(); }); - self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, - action: function () { + self.fireEvent( + MultiSelectInsertCombo.EVENT_CLICK_ITEM + ); + }, + }, + { + eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM, + action() { self._defaultState(); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR, + action() { self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, itemHeight: o.itemHeight, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); - } + }, }, value: o.value, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); - 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._stopEditing(); if (self.requesting === true) { self.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectInsertCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button" - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -220,49 +290,62 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ - type: "bi.multi_select_check_selected_switcher", + this.numberCounter = createWidget({ + type: MultiSelectCheckSelectedSwitcher.xtype, masker: { offset: { left: 0, top: 0, right: 0, - bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 - } + bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, + }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), - value: o.value + itemsCreator: bind(this._itemsCreator4Trigger, this), + value: o.value, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - this.updateSelectedValue(self.storeValue); - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + function () { + this.updateSelectedValue(self.storeValue); + } + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -270,230 +353,234 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, height: o.height, } - ] + ], }); - }, + } - _itemsCreator4Trigger: function (op, callback) { - var self = this, o = this.options; + _itemsCreator4Trigger(op, callback) { + const self = this, + o = this.options; 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(BI.deepClone(self.getValue())); + self.trigger.setValue(deepClone(self.getValue())); } callback.apply(self, arguments); }); - }, - - _addItem: function (assertShowValue) { - var self = this; - var keyword = this.trigger.getSearcher().getKeyword(); - this._join({ - type: BI.Selection.Multi, - value: [keyword] - }, function () { - // 如果在不选的状态下直接把该值添加进来 - if (self.storeValue.type === BI.Selection.Multi) { - BI.pushDistinct(self.storeValue.value, keyword); + } + + _addItem(assertShowValue) { + const self = this; + const keyword = this.trigger.getSearcher().getKeyword(); + this._join( + { + type: Selection.Multi, + value: [keyword], + }, + () => { + // 如果在不选的状态下直接把该值添加进来 + if (self.storeValue.type === Selection.Multi) { + pushDistinct(self.storeValue.value, keyword); + } + self.combo.setValue(self.storeValue); + self._setStartValue(keyword); + assertShowValue(); + self.populate(); + self._setStartValue(""); + self._dataChange = true; } - self.combo.setValue(self.storeValue); - self._setStartValue(keyword); - assertShowValue(); - self.populate(); - self._setStartValue(""); - self._dataChange = true; - }); - }, + ); + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - _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); this.requesting = true; 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); }); 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); this.requesting = true; 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.getKey()); - 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.getKey() + ); + 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); - delete map[v]; + self.storeValue.assist && + self.storeValue.assist.push(tempMap[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.MultiSelectInsertCombo.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKey()], - 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]])) { - self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - BI.remove(self.storeValue.assist, item); - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, + o.itemsCreator( + { + type: MultiSelectInsertCombo.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKey()], + 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]])) { + self.storeValue.assist && + self.storeValue.assist.push(selectedMap[items[i]]); + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + remove(self.storeValue.assist, item); + 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; adjust(); callback(); function adjust() { if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectInsertCombo.EVENT_CONFIRM); self.wants2Quit = false; } self.requesting = false; } - }, + } - _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); // value更新的时候assist也需要更新 - BI.remove(self.storeValue.assist, v); + remove(self.storeValue.assist, 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); + self.storeValue.assist && + self.storeValue.assist.push(map[v]); 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.popup.setStartValue(value); - }, + } - _populate: function () { - this.combo.populate.apply(this.combo, arguments); - }, + _populate() { + this.combo.populate(...arguments); + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v || {}; this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue); - }, + getValue() { + return deepClone(this.storeValue); + } - populate: function () { - this._populate.apply(this, arguments); - this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments); + populate() { + this._populate(...arguments); + this.numberCounter.populateSwitcher(...arguments); } -}); - -BI.extend(BI.MultiSelectInsertCombo, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 -}); - -BI.MultiSelectInsertCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectInsertCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectInsertCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiSelectInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiSelectInsertCombo.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; - -BI.shortcut("bi.multi_select_insert_combo", BI.MultiSelectInsertCombo); +} diff --git a/src/widget/multiselect/multiselect.insert.combo.nobar.js b/src/widget/multiselect/multiselect.insert.combo.nobar.js index d3fbc3862..b6de5dd52 100644 --- a/src/widget/multiselect/multiselect.insert.combo.nobar.js +++ b/src/widget/multiselect/multiselect.insert.combo.nobar.js @@ -1,47 +1,92 @@ -/** - * - * @class BI.MultiSelectInsertCombo - * @extends BI.Single - */ -BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInsertNoBarCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + isKey, + remove, + deepClone, + createWidget, + toPix, + bind, + last, + initial, + i18nText, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + isNotNull, + makeObject, + each, + Func, + map, + concat, + values, + filter, + contains, + isNull, endWith, pushDistinct, Selection +} from "@/core"; +import { Single, Combo, Msg } from "@/base"; +import { MultiSelectInsertTrigger } from "./multiselect.insert.trigger"; +import { MultiSelectBar, TriggerIconButton } from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected"; +import { MultiSelectNoBarPopupView } from "./multiselect.popup.view.nobar"; + +@shortcut() +export class MultiSelectInsertNoBarCombo extends Single { + static xtype = "bi.multi_select_insert_no_bar_combo"; + + static REQ_GET_DATA_LENGTH = "1"; + static REQ_GET_ALL_DATA = "-1"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-insert-combo-no-bar", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: 24, }); - }, - - _init: function () { - var self = this, o = this.options; - BI.MultiSelectInsertNoBarCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - if (BI.isKey(self._startValue)) { - if (self.storeValue.type === BI.Selection.All) { - BI.remove(self.storeValue.value, self._startValue); + } + + _init() { + const self = this, + o = this.options; + super._init(...arguments); + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + + function assertShowValue() { + if (isKey(self._startValue)) { + if (self.storeValue.type === Selection.All) { + remove(self.storeValue.value, self._startValue); self.storeValue.assist = self.storeValue.assist || []; - BI.pushDistinct(self.storeValue.assist, self._startValue); + pushDistinct(self.storeValue.assist, self._startValue); } else { - BI.pushDistinct(self.storeValue.value, self._startValue); - BI.remove(self.storeValue.assist, self._startValue); + pushDistinct(self.storeValue.value, self._startValue); + remove(self.storeValue.assist, self._startValue); } } self.trigger.getSearcher().setState(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue); - }; + } + this.storeValue = { - type: BI.Selection.Multi, - value: BI.deepClone(o.value) || [] + type: Selection.Multi, + value: deepClone(o.value) || [], }; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.multi_select_insert_trigger", - height: BI.toPix(o.height, o.simple ? 1 : 2), + this.trigger = createWidget({ + type: MultiSelectInsertTrigger.xtype, + height: toPix(o.height, o.simple ? 1 : 2), text: o.text, // adapter: this.popup, masker: { @@ -49,161 +94,179 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, { left: 0, top: 0, right: 0, - bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 - } + bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, + }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), itemFormatter: o.itemFormatter, itemHeight: o.itemHeight, value: { - type: BI.Selection.Multi, - value: o.value - } + type: Selection.Multi, + value: o.value, + }, }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function () { self._setStartValue(""); this.getSearcher().setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => { self._setStartValue(""); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_PAUSE, function () { + this.trigger.on(MultiSelectInsertTrigger.EVENT_PAUSE, function () { self._addItem(assertShowValue, true); - self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM, this.getSearcher().getKeyword()); + self.fireEvent( + MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM, + this.getSearcher().getKeyword() + ); }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, function (keywords) { - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.combo.setValue(self.storeValue); + this.trigger.on( + MultiSelectInsertTrigger.EVENT_SEARCHING, + function (keywords) { + const lastKeyword = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + self._joinKeywords(keywords, () => { + if (endWith(lastKeyword, BI.BlankSplitChar)) { + self.combo.setValue(self.storeValue); + assertShowValue(); + self.combo.populate(); + self._setStartValue(""); + } else { + self.combo.setValue(self.storeValue); + assertShowValue(); + } + self._dataChange = true; + }); + this.getSearcher().getKeywordsLength() > 2000 && + Msg.alert( + i18nText("BI-Basic_Prompt"), + i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand") + ); + } + } + ); + + this.trigger.on( + MultiSelectInsertTrigger.EVENT_CHANGE, + function (value, obj) { + if (obj instanceof MultiSelectBar) { + self._joinAll(this.getValue(), () => { assertShowValue(); - self.combo.populate(); - self._setStartValue(""); - } else { - self.combo.setValue(self.storeValue); + }); + } else { + self._join(this.getValue(), () => { assertShowValue(); - } - self._dataChange = true; - }); - this.getSearcher().getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")); + }); + } + self._dataChange = true; } - }); - - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_CHANGE, function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { - assertShowValue(); - }); - } else { - self._join(this.getValue(), function () { - assertShowValue(); - }); + ); + this.trigger.on( + MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, + () => { + // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) + // 只需要更新查看面板的selectedValue用以请求已选数据 + self.numberCounter.updateSelectedValue(self.storeValue); } - self._dataChange = true; - }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { - // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) - // 只需要更新查看面板的selectedValue用以请求已选数据 - self.numberCounter.updateSelectedValue(self.storeValue); - }); - this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + ); + this.trigger.on( + MultiSelectInsertTrigger.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", toggle: false, container: o.container, el: this.trigger, adjustLength: 1, popup: { - type: "bi.multi_select_no_bar_popup_view", - ref: function () { + type: MultiSelectNoBarPopupView.xtype, + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiSelectPopupView.EVENT_CHANGE, - action: function () { + eventName: MultiSelectNoBarPopupView.EVENT_CHANGE, + action() { self._dataChange = true; self.storeValue = this.getValue(); - self._adjust(function () { + self._adjust(() => { assertShowValue(); }); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, - action: function () { + }, + }, + { + eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM, + action() { self._defaultState(); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR, + action() { self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, itemHeight: o.itemHeight, valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); - } + }, }, value: { - type: BI.Selection.Multi, - value: o.value + type: Selection.Multi, + value: o.value, + }, + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); }, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } }); - 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._stopEditing(); if (self.requesting === true) { self.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectInsertNoBarCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button" - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -212,52 +275,65 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ - type: "bi.multi_select_check_selected_switcher", + this.numberCounter = createWidget({ + type: MultiSelectCheckSelectedSwitcher.xtype, masker: { offset: { left: 0, top: 0, right: 0, - bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 - } + bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, + }, }, valueFormatter: o.valueFormatter, - itemsCreator: BI.bind(this._itemsCreator4Trigger, this), + itemsCreator: bind(this._itemsCreator4Trigger, this), value: { - type: BI.Selection.Multi, - value: o.value - } + type: Selection.Multi, + value: o.value, + }, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - this.updateSelectedValue(self.storeValue); - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + function () { + this.updateSelectedValue(self.storeValue); + } + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -265,226 +341,235 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, - height: o.height + height: o.height, } - ] + ], }); - }, + } - _itemsCreator4Trigger: function (op, callback) { - var self = this, o = this.options; + _itemsCreator4Trigger(op, callback) { + const self = this, + o = this.options; 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(BI.deepClone(self.storeValue)); + self.trigger.setValue(deepClone(self.storeValue)); } callback.apply(self, arguments); }); - }, - - _addItem: function (assertShowValue) { - var self = this; - var keyword = this.trigger.getSearcher().getKeyword(); - this._join({ - type: BI.Selection.Multi, - value: [keyword] - }, function () { - // 如果在不选的状态下直接把该值添加进来 - if (self.storeValue.type === BI.Selection.Multi) { - BI.pushDistinct(self.storeValue.value, keyword); + } + + _addItem(assertShowValue) { + const self = this; + const keyword = this.trigger.getSearcher().getKeyword(); + this._join( + { + type: Selection.Multi, + value: [keyword], + }, + () => { + // 如果在不选的状态下直接把该值添加进来 + if (self.storeValue.type === Selection.Multi) { + pushDistinct(self.storeValue.value, keyword); + } + self.combo.setValue(self.storeValue); + self._setStartValue(keyword); + assertShowValue(); + self.populate(); + self._setStartValue(""); + self._dataChange = true; } - self.combo.setValue(self.storeValue); - self._setStartValue(keyword); - assertShowValue(); - self.populate(); - self._setStartValue(""); - self._dataChange = true; - }); - }, + ); + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - _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); this.requesting = true; 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); }); 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); this.requesting = true; 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.getKey()); - 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.getKey() + ); + 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); - delete map[v]; + self.storeValue.assist && + self.storeValue.assist.push(tempMap[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.MultiSelectInsertNoBarCombo.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKey()], - 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]])) { - self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - BI.remove(self.storeValue.assist, item); - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, + o.itemsCreator( + { + type: MultiSelectInsertNoBarCombo.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKey()], + 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]])) { + self.storeValue.assist && + self.storeValue.assist.push(selectedMap[items[i]]); + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + remove(self.storeValue.assist, item); + 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; adjust(); callback(); function adjust() { if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiSelectInsertNoBarCombo.EVENT_CONFIRM); self.wants2Quit = false; } self.requesting = false; } - }, + } - _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]) { self.storeValue.value.push(v); - BI.remove(self.storeValue.assist, v); + remove(self.storeValue.assist, 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; - self.storeValue.assist && self.storeValue.assist.push(map[v]); + self.storeValue.assist && + self.storeValue.assist.push(map[v]); 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.popup.setStartValue(value); - }, + } - _populate: function () { - this.combo.populate.apply(this.combo, arguments); - }, + _populate() { + this.combo.populate(...arguments); + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = { - type: BI.Selection.Multi, - value: v || [] + type: Selection.Multi, + value: v || [], }; this.combo.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue); - }, - - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, - - populate: function () { - this._populate.apply(this, arguments); - this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments); } -}); -BI.extend(BI.MultiSelectInsertNoBarCombo, { - REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 -}); - -BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + getValue() { + return deepClone(this.storeValue.value); + } -BI.shortcut("bi.multi_select_insert_no_bar_combo", BI.MultiSelectInsertNoBarCombo); + populate() { + this._populate(...arguments); + this.numberCounter.populateSwitcher(...arguments); + } +} diff --git a/src/widget/multiselect/multiselect.insert.trigger.js b/src/widget/multiselect/multiselect.insert.trigger.js index 4ed1b19ef..9b5fd3761 100644 --- a/src/widget/multiselect/multiselect.insert.trigger.js +++ b/src/widget/multiselect/multiselect.insert.trigger.js @@ -1,40 +1,55 @@ -/** - * - * 复选下拉框 - * @class BI.MultiSelectInsertTrigger - * @extends BI.Trigger - */ - -BI.MultiSelectInsertTrigger = BI.inherit(BI.Trigger, { - - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInsertTrigger.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + Layout, + HTapeLayout, + AbsoluteLayout +} from "@/core"; +import { Trigger, Text } from "@/base"; +import { MultiSelectInsertSearcher } from "./trigger/searcher.multiselect.insert"; + +@shortcut() +export class MultiSelectInsertTrigger extends Trigger { + static xtype = "bi.multi_select_insert_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-multi-select-trigger", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, itemHeight: 24, searcher: {}, switcher: {}, adapter: null, masker: {}, - allowEdit: true + allowEdit: true, }); - }, + } - _init: function () { - BI.MultiSelectInsertTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.searcher = BI.createWidget(o.searcher, { - type: "bi.multi_select_insert_searcher", + this.searcher = createWidget(o.searcher, { + type: MultiSelectInsertSearcher.xtype, height: o.height, text: o.text, defaultText: o.defaultText, @@ -46,113 +61,106 @@ BI.MultiSelectInsertTrigger = BI.inherit(BI.Trigger, { popup: {}, adapter: o.adapter, masker: o.masker, - value: o.value - }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_START, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_START); + value: o.value, }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_PAUSE); + this.searcher.on(MultiSelectInsertSearcher.EVENT_START, () => { + self.fireEvent(MultiSelectInsertTrigger.EVENT_START); }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(MultiSelectInsertSearcher.EVENT_PAUSE, () => { + self.fireEvent(MultiSelectInsertTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_STOP); + this.searcher.on( + MultiSelectInsertSearcher.EVENT_SEARCHING, + function () { + self.fireEvent( + MultiSelectInsertTrigger.EVENT_SEARCHING, + arguments + ); + } + ); + this.searcher.on(MultiSelectInsertSearcher.EVENT_STOP, () => { + self.fireEvent(MultiSelectInsertTrigger.EVENT_STOP); }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_CHANGE, arguments); + this.searcher.on(MultiSelectInsertSearcher.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectInsertTrigger.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_BLUR); + this.searcher.on(MultiSelectInsertSearcher.EVENT_BLUR, () => { + self.fireEvent(MultiSelectInsertTrigger.EVENT_BLUR); }); - this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_FOCUS); + this.searcher.on(MultiSelectInsertSearcher.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectInsertTrigger.EVENT_FOCUS); }); - this.wrapNumberCounter = BI.createWidget({ - type: "bi.layout" + this.wrapNumberCounter = createWidget({ + type: Layout.xtype, }); - this.wrapper = BI.createWidget({ - type: "bi.htape", + this.wrapper = createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, - width: "fill" - }, { + width: "fill", + }, + { el: this.wrapNumberCounter, - width: 0 - }, { - el: BI.createWidget(), - width: 24 + width: 0, + }, + { + el: createWidget(), + width: 24, } - ] + ], }); - !o.allowEdit && BI.createWidget({ - type: "bi.absolute", + !o.allowEdit && + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { el: { - type: "bi.text", - title: function () { + type: Text.xtype, + title() { return self.searcher.getState(); - } + }, }, left: 0, right: 24, top: 0, - bottom: 0 + bottom: 0, } - ] + ], }); - }, + } - /** - * 重新调整numberCounter的空白占位符 - */ - refreshPlaceHolderWidth: function (width) { + refreshPlaceHolderWidth(width) { this.wrapper.attr("items")[1].width = width; this.wrapper.resize(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setValue: function (ob) { + setValue(ob) { this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); } -}); - -BI.MultiSelectInsertTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.MultiSelectInsertTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectInsertTrigger.EVENT_START = "EVENT_START"; -BI.MultiSelectInsertTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectInsertTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiSelectInsertTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; -BI.MultiSelectInsertTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectInsertTrigger.EVENT_BLUR = "EVENT_BLUR"; - -BI.shortcut("bi.multi_select_insert_trigger", BI.MultiSelectInsertTrigger); +} diff --git a/src/widget/multiselect/multiselect.loader.js b/src/widget/multiselect/multiselect.loader.js index 2aa22aad5..ed92dfc69 100644 --- a/src/widget/multiselect/multiselect.loader.js +++ b/src/widget/multiselect/multiselect.loader.js @@ -1,75 +1,107 @@ -/** - * 多选加载数据面板 - * Created by guy on 15/11/2. - * @class BI.MultiSelectLoader - * @extends Widget - */ -BI.MultiSelectLoader = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectLoader.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + isKey, + map, + contains, + remove, + Controller, + delay, + isNotNull, + Selection, Direction, LogicFactory, pushDistinct +} from "@/core"; +import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case"; +import { MultiSelectInnerLoader } from "./loader"; + +@shortcut() +export class MultiSelectLoader extends Widget { + static xtype = "bi.multi_select_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-loader", logic: { - dynamic: true + dynamic: true, }, el: { - height: 400 + height: 400, }, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - itemFormatter: BI.emptyFn, - onLoaded: BI.emptyFn, + valueFormatter: emptyFn, + itemsCreator: emptyFn, + itemFormatter: emptyFn, + onLoaded: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, isDefaultInit: false, }); - }, + } - _init: function () { - BI.MultiSelectLoader.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._assertValue(this.storeValue); - this.button_group = BI.createWidget({ - type: "bi.select_list", + this.button_group = createWidget({ + type: SelectList.xtype, logic: opts.logic, toolbar: { - type: "bi.multi_select_bar", + type: MultiSelectBar.xtype, cls: "bi-list-item-active", - height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - iconWrapperWidth: 36 + height: + this.options.itemHeight || + BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + iconWrapperWidth: 36, }, - el: BI.extend({ - onLoaded: opts.onLoaded, - el: { - type: "bi.multi_select_inner_loader", - isDefaultInit: opts.isDefaultInit, - } - }, opts.el), - itemsCreator: function (op, callback) { - var startValue = self._startValue; - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi - ? self.storeValue.value.concat(startValue) : self.storeValue.value + el: extend( + { + onLoaded: opts.onLoaded, + el: { + type: MultiSelectInnerLoader.xtype, + isDefaultInit: opts.isDefaultInit, + }, + }, + opts.el + ), + itemsCreator(op, callback) { + const startValue = self._startValue; + self.storeValue && + (op = extend(op || {}, { + selectedValues: + isKey(startValue) && + self.storeValue.type === Selection.Multi + ? self.storeValue.value.concat(startValue) + : self.storeValue.value, })); - opts.itemsCreator(op, function (ob) { + opts.itemsCreator(op, ob => { hasNext = ob.hasNext; - var firstItems = []; + let firstItems = []; if (op.times === 1 && self.storeValue) { - var json = BI.map(self.storeValue.value, function (i, v) { - var txt = opts.valueFormatter(v) || v; + const json = map(self.storeValue.value, (i, v) => { + const txt = opts.valueFormatter(v) || v; + return { text: txt, value: v, title: txt, - selected: self.storeValue.type === BI.Selection.Multi, + selected: + self.storeValue.type === Selection.Multi, }; }); - if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { - var txt = opts.valueFormatter(startValue) || startValue; + if ( + isKey(self._startValue) && + !contains(self.storeValue.value, self._startValue) + ) { + const txt = + opts.valueFormatter(startValue) || startValue; json.unshift({ text: txt, value: startValue, @@ -79,108 +111,134 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, { } firstItems = self._createItems(json); } - callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); + callback( + firstItems.concat(self._createItems(ob.items)), + ob.keyword || "" + ); if (op.times === 1 && self.storeValue) { - BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue)); + isKey(startValue) && + (self.storeValue.type === Selection.All + ? remove(self.storeValue.value, startValue) + : pushDistinct( + self.storeValue.value, + 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(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({ - scrolly: true, - vgap: 5 - }, opts.logic, { - items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group) - })))); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection( + Direction.Top + ), + extend( + { + scrolly: true, + vgap: 5, + }, + opts.logic, + { + items: LogicFactory.createLogicItemsByDirection( + Direction.Top, + this.button_group + ), + } + ) + ) + ) + ); + this.button_group.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectLoader.EVENT_CHANGE, arguments); + this.button_group.on(SelectList.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectLoader.EVENT_CHANGE, arguments); }); - }, + } - _createItems: function (items) { - var allSelected = this.isAllSelected(); - var itemFormatter = this.options.itemFormatter; - return BI.map(items, (i, item) => { + _createItems(items) { + const allSelected = this.isAllSelected(); + const itemFormatter = this.options.itemFormatter; + + return map(items, (i, item) => { return { - type: "bi.multi_select_item", + type: MultiSelectItem.xtype, logic: this.options.logic, cls: "bi-list-item-active", - height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + height: + this.options.itemHeight || + BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, selected: allSelected, iconWrapperWidth: 36, ...item, ...itemFormatter(item), }; }); - }, + } - _scrollToTop: function () { - var self = this; - BI.delay(function () { + _scrollToTop() { + const self = this; + delay(() => { self.button_group.element.scrollTop(0); }, 30); - }, + } - isAllSelected: function () { + isAllSelected() { return this.button_group.isAllSelected(); - }, + } - _assertValue: function (val) { + _assertValue(val) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - }, + } - 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) { - // arguments.length为0时对arguments[0]赋值后不同环境对其length的取值不同(nashorn) - if (BI.isNotNull(items)) { - arguments[0] = this._createItems(items); + populate(...args) { + const items = args[0]; + if (isNotNull(items)) { + args[0] = this._createItems(items); } - this.button_group.populate.apply(this.button_group, arguments); - }, + this.button_group.populate(...args); + } - resetHeight: function (h) { + resetHeight(h) { this.button_group.resetHeight(h - 10); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.button_group.resetWidth(w); } -}); - -BI.MultiSelectLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_loader", BI.MultiSelectLoader); +} diff --git a/src/widget/multiselect/multiselect.loader.nobar.js b/src/widget/multiselect/multiselect.loader.nobar.js index dde974df8..55a30caa6 100644 --- a/src/widget/multiselect/multiselect.loader.nobar.js +++ b/src/widget/multiselect/multiselect.loader.nobar.js @@ -1,185 +1,242 @@ -/** - * 多选加载数据面板 - * Created by guy on 15/11/2. - * @class BI.MultiSelectNoBarLoader - * @extends Widget - */ -BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectNoBarLoader.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + isKey, + map, + contains, + remove, + Controller, + VerticalLayout, + delay, + isNotNull, + toPix, + Selection, + pushDistinct +} from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SelectList, ListPane, MultiSelectItem } from "@/case"; + +@shortcut() +export class MultiSelectNoBarLoader extends Widget { + static xtype = "bi.multi_select_no_bar_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-loader", logic: { - dynamic: true + dynamic: true, }, el: { - height: 400 + height: 400, }, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, + valueFormatter: emptyFn, + itemsCreator: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - onLoaded: BI.emptyFn, - itemFormatter: BI.emptyFn, + onLoaded: emptyFn, + itemFormatter: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectNoBarLoader.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._assertValue(this.storeValue); - this.button_group = BI.createWidget(BI.extend({ - type: "bi.list_pane", - onLoaded: opts.onLoaded, - el: { - type: "bi.loader", - isDefaultInit: false, - logic: { - dynamic: true, - scrolly: true - }, - el: { - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, - behaviors: { - redmark: function () { - return true; - } + this.button_group = createWidget( + extend( + { + type: ListPane.xtype, + onLoaded: opts.onLoaded, + el: { + type: Loader.xtype, + isDefaultInit: false, + logic: { + dynamic: true, + scrolly: true, + }, + el: { + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, + behaviors: { + redmark() { + return true; + }, + }, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, }, - layouts: [{ - type: "bi.vertical" - }] - } - }, - itemsCreator: function (op, callback) { - var startValue = self._startValue; - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi - ? self.storeValue.value.concat(startValue) : self.storeValue.value - })); - opts.itemsCreator(op, function (ob) { - hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && self.storeValue) { - var json = BI.map(self.storeValue.value, function (i, v) { - var txt = opts.valueFormatter(v) || v; - return { - text: txt, - value: v, - title: txt, - selected: self.storeValue.type === BI.Selection.Multi - }; + itemsCreator(op, callback) { + const startValue = self._startValue; + self.storeValue && + (op = extend(op || {}, { + selectedValues: + isKey(startValue) && + self.storeValue.type === Selection.Multi + ? self.storeValue.value.concat( + startValue + ) + : self.storeValue.value, + })); + opts.itemsCreator(op, ob => { + hasNext = ob.hasNext; + let firstItems = []; + if (op.times === 1 && self.storeValue) { + const json = map( + self.storeValue.value, + (i, v) => { + const txt = opts.valueFormatter(v) || v; + + return { + text: txt, + value: v, + title: txt, + selected: + self.storeValue.type === + Selection.Multi, + }; + } + ); + if ( + isKey(self._startValue) && + !contains( + self.storeValue.value, + self._startValue + ) + ) { + const txt = + opts.valueFormatter(startValue) || + startValue; + json.unshift({ + text: txt, + value: startValue, + title: txt, + selected: true, + }); + } + firstItems = self._createItems(json); + } + callback( + firstItems.concat(self._createItems(ob.items)), + ob.keyword || "" + ); + if (op.times === 1 && self.storeValue) { + isKey(startValue) && + (self.storeValue.type === Selection.All + ? remove( + self.storeValue.value, + startValue + ) + : pushDistinct( + self.storeValue.value, + startValue + )); + self.setValue(self.storeValue); + } + op.times === 1 && self._scrollToTop(); }); - if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { - var txt = opts.valueFormatter(startValue) || startValue; - json.unshift({ - text: txt, - value: startValue, - 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.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue)); - self.setValue(self.storeValue); - } - (op.times === 1) && self._scrollToTop(); - }); - }, - hasNext: function () { - return hasNext; - }, - value: this.storeValue - }, opts.el)); + }, + hasNext() { + return hasNext; + }, + value: this.storeValue, + }, + opts.el + ) + ); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, items: [this.button_group], - vgap: 5 + vgap: 5, }); - 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.SelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectNoBarLoader.EVENT_CHANGE, arguments); + this.button_group.on(SelectList.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectNoBarLoader.EVENT_CHANGE, arguments); }); - }, + } - _createItems: function (items) { - return BI.map(items, (index, item) => { + _createItems(items) { + return map(items, (index, item) => { return { - type: "bi.multi_select_item", + type: MultiSelectItem.xtype, cls: "bi-list-item-active", logic: this.options.logic, - height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + height: + this.options.itemHeight || + BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, iconWrapperWidth: 36, ...item, ...this.options.itemFormatter(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) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - }, + } - 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.value); - }, + } - getValue: function () { + getValue() { return { - type: BI.Selection.Multi, - value: this.button_group.getValue() + type: Selection.Multi, + value: this.button_group.getValue(), }; - }, + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { - if (BI.isNotNull(items)) { + populate(items) { + if (isNotNull(items)) { arguments[0] = this._createItems(items); } - this.button_group.populate.apply(this.button_group, arguments); - }, - - resetHeight: function (h) { - this.button_group.element.css({ "max-height": BI.toPix(h) }); - }, - - resetWidth: function () { + this.button_group.populate(...arguments); + } + resetHeight(h) { + this.button_group.element.css({ "max-height": toPix(h) }); } -}); -BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader); + resetWidth() { + } +} diff --git a/src/widget/multiselect/multiselect.popup.view.js b/src/widget/multiselect/multiselect.popup.view.js index 1e11376d2..c16cbc196 100644 --- a/src/widget/multiselect/multiselect.popup.view.js +++ b/src/widget/multiselect/multiselect.popup.view.js @@ -1,100 +1,113 @@ -/** - * 带加载的多选下拉面板 - * @class BI.MultiSelectPopupView - * @extends Widget - */ -BI.MultiSelectPopupView = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + i18nText +} from "@/core"; +import { MultiPopupView } from "@/case"; +import { MultiSelectLoader } from "./multiselect.loader"; + +@shortcut() +export class MultiSelectPopupView extends Widget { + static xtype = "bi.multi_select_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-popup-view", maxWidth: "auto", minWidth: 135, maxHeight: 400, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - onLoaded: BI.emptyFn, + valueFormatter: emptyFn, + itemsCreator: emptyFn, + onLoaded: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }); - }, + } - _init: function () { - BI.MultiSelectPopupView.superclass._init.apply(this, arguments); - var self = this, opts = this.options; + _init() { + super._init(...arguments); + const self = this, + opts = this.options; - this.loader = BI.createWidget({ - type: "bi.multi_select_loader", + this.loader = createWidget({ + type: MultiSelectLoader.xtype, itemsCreator: opts.itemsCreator, itemHeight: opts.itemHeight, valueFormatter: opts.valueFormatter, itemFormatter: opts.itemFormatter, onLoaded: opts.onLoaded, - value: opts.value + value: opts.value, }); - this.popupView = BI.createWidget({ - type: "bi.multi_popup_view", + this.popupView = createWidget({ + type: MultiPopupView.xtype, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, element: this, - buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], + buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")], el: this.loader, - value: opts.value + value: opts.value, }); - this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectPopupView.EVENT_CHANGE); + this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { + self.fireEvent(MultiSelectPopupView.EVENT_CHANGE); }); - this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { - switch (index) { - case 0: - self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CLEAR); - break; - case 1: - self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM); - break; + this.popupView.on( + MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, + index => { + switch (index) { + case 0: + self.fireEvent(MultiSelectPopupView.EVENT_CLICK_CLEAR); + break; + case 1: + self.fireEvent( + MultiSelectPopupView.EVENT_CLICK_CONFIRM + ); + break; + default: + break; + } } - }); - }, + ); + } - isAllSelected: function () { + isAllSelected() { return this.loader.isAllSelected(); - }, + } - 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.MultiSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiSelectPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; - - -BI.shortcut("bi.multi_select_popup_view", BI.MultiSelectPopupView); + } +} diff --git a/src/widget/multiselect/multiselect.popup.view.nobar.js b/src/widget/multiselect/multiselect.popup.view.nobar.js index c0007f85a..5a8d150d7 100644 --- a/src/widget/multiselect/multiselect.popup.view.nobar.js +++ b/src/widget/multiselect/multiselect.popup.view.nobar.js @@ -1,96 +1,109 @@ -/** - * 带加载的多选下拉面板 - * @class BI.MultiSelectPopupView - * @extends Widget - */ -BI.MultiSelectNoBarPopupView = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + i18nText +} from "@/core"; +import { MultiPopupView } from "@/case"; +import { MultiSelectNoBarLoader } from "./multiselect.loader.nobar"; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectNoBarPopupView.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiSelectNoBarPopupView extends Widget { + static xtype = "bi.multi_select_no_bar_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-popup-view", maxWidth: "auto", minWidth: 135, maxHeight: 400, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, + valueFormatter: emptyFn, + itemsCreator: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - onLoaded: BI.emptyFn + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectNoBarPopupView.superclass._init.apply(this, arguments); - var self = this, opts = this.options; + _init() { + super._init(...arguments); + const self = this, + opts = this.options; - this.loader = BI.createWidget({ - type: "bi.multi_select_no_bar_loader", + this.loader = createWidget({ + type: MultiSelectNoBarLoader.xtype, itemsCreator: opts.itemsCreator, itemHeight: opts.itemHeight, valueFormatter: opts.valueFormatter, itemFormatter: opts.itemFormatter, onLoaded: opts.onLoaded, - value: opts.value + value: opts.value, }); - this.popupView = BI.createWidget({ - type: "bi.multi_popup_view", + this.popupView = createWidget({ + type: MultiPopupView.xtype, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, element: this, - buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], + buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")], el: this.loader, - value: opts.value + value: opts.value, }); - this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CHANGE); + this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { + self.fireEvent(MultiSelectNoBarPopupView.EVENT_CHANGE); }); - this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { - switch (index) { - case 0: - self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR); - break; - case 1: - self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM); - break; + this.popupView.on( + MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, + index => { + switch (index) { + case 0: + self.fireEvent( + MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR + ); + break; + case 1: + self.fireEvent( + MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM + ); + break; + } } - }); - }, + ); + } - 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.MultiSelectNoBarPopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; - - -BI.shortcut("bi.multi_select_no_bar_popup_view", BI.MultiSelectNoBarPopupView); + } +} diff --git a/src/widget/multiselect/multiselect.trigger.js b/src/widget/multiselect/multiselect.trigger.js index f8f95c02b..e938837c6 100644 --- a/src/widget/multiselect/multiselect.trigger.js +++ b/src/widget/multiselect/multiselect.trigger.js @@ -1,40 +1,56 @@ -/** - * - * 复选下拉框 - * @class BI.MultiSelectTrigger - * @extends BI.Trigger - */ - -BI.MultiSelectTrigger = BI.inherit(BI.Trigger, { - - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + isFunction, + Layout, + HTapeLayout, + AbsoluteLayout +} from "@/core"; +import { Trigger, Text } from "@/base"; +import { MultiSelectSearcher } from "./trigger/searcher.multiselect"; + +@shortcut() +export class MultiSelectTrigger extends Trigger { + static xtype = "bi.multi_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_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-trigger", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcher: {}, switcher: {}, adapter: null, masker: {}, allowEdit: true, - itemHeight: 24 + itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.searcher = BI.createWidget(o.searcher, { - type: "bi.multi_select_searcher", + this.searcher = createWidget(o.searcher, { + type: MultiSelectSearcher.xtype, height: o.height, text: o.text, defaultText: o.defaultText, @@ -46,125 +62,111 @@ BI.MultiSelectTrigger = BI.inherit(BI.Trigger, { popup: {}, adapter: o.adapter, masker: o.masker, - value: o.value + value: o.value, }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_START); + this.searcher.on(MultiSelectSearcher.EVENT_START, () => { + self.fireEvent(MultiSelectTrigger.EVENT_START); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_PAUSE); + this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => { + self.fireEvent(MultiSelectTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, function () { + self.fireEvent(MultiSelectTrigger.EVENT_SEARCHING, arguments); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_STOP); + this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => { + self.fireEvent(MultiSelectTrigger.EVENT_STOP); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_CHANGE, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectTrigger.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_BLUR); + this.searcher.on(MultiSelectSearcher.EVENT_BLUR, () => { + self.fireEvent(MultiSelectTrigger.EVENT_BLUR); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_FOCUS); + this.searcher.on(MultiSelectSearcher.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectTrigger.EVENT_FOCUS); }); - this.wrapNumberCounter = BI.createWidget({ - type: "bi.layout" + this.wrapNumberCounter = createWidget({ + type: Layout.xtype, }); - this.wrapper = BI.createWidget({ - type: "bi.htape", + this.wrapper = createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, width: "fill", - rgap: 24 + rgap: 24, } - ] + ], }); - !o.allowEdit && BI.createWidget({ - type: "bi.absolute", + !o.allowEdit && + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { el: { - type: "bi.text", - title: function () { + type: Text.xtype, + title() { /** 修正REPORT-73699引入，需要考虑到传递过来的值是方法的情况 */ - var state = self.searcher.getState(); - if (BI.isFunction(state)) { + const state = self.searcher.getState(); + if (isFunction(state)) { return state(); } + return state; - } + }, }, left: 0, right: 24, top: 0, - bottom: 0 + bottom: 0, } - ] + ], }); - }, + } - /** - * 重新调整numberCounter的空白占位符 - */ - refreshPlaceHolderWidth: function (width) { + refreshPlaceHolderWidth(width) { this.wrapper.attr("items")[0].rgap = 24 + width; this.wrapper.resize(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setValue: function (ob) { + setValue(ob) { this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - focus: function () { + focus() { this.searcher.focus(); - }, + } - blur: function () { + blur() { this.searcher.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.searcher.setWaterMark(v); } -}); - -BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.MultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.MultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectTrigger.EVENT_START = "EVENT_START"; -BI.MultiSelectTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; -BI.MultiSelectTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectTrigger.EVENT_FOCUS = "EVENT_FOCUS"; - -BI.shortcut("bi.multi_select_trigger", BI.MultiSelectTrigger); +} diff --git a/src/widget/multiselect/search/multiselect.search.insert.pane.js b/src/widget/multiselect/search/multiselect.search.insert.pane.js index d459dc73a..ce139fee6 100644 --- a/src/widget/multiselect/search/multiselect.search.insert.pane.js +++ b/src/widget/multiselect/search/multiselect.search.insert.pane.js @@ -1,99 +1,109 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.MultiSelectSearchInsertPane - * @extends Widget - */ - -BI.MultiSelectSearchInsertPane = BI.inherit(BI.Widget, { - - constants: { - height: 24, - lgap: 10, - tgap: 5 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + i18nText, + Controller, VerticalFillLayout +} from "@/core"; +import { Label } from "@/base"; +import { MultiSelectSearchLoader } from "./multiselect.search.loader"; + +@shortcut() +export class MultiSelectSearchInsertPane extends Widget { + static xtype = "bi.multi_select_search_insert_pane"; + + constants = { height: 24, lgap: 10, tgap: 5 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-search-pane bi-card", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - keywordGetter: BI.emptyFn, - itemHeight: 24 + itemsCreator: emptyFn, + valueFormatter: emptyFn, + keywordGetter: emptyFn, + itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectSearchInsertPane.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: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, cls: "bi-keyword-red-mark", hgap: 5, }); - this.loader = BI.createWidget({ - type: "bi.multi_select_search_loader", + this.loader = createWidget({ + type: MultiSelectSearchLoader.xtype, keywordGetter: o.keywordGetter, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, - 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()); + } + ]); }, itemHeight: o.itemHeight, - 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.addNotMatchTip, - }, { - el: this.loader, - }], + items: [ + { + el: this.addNotMatchTip, + }, + { + 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) + ); + } - isAllSelected: function () { + isAllSelected() { return this.loader.isAllSelected(); - }, + } - 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.MultiSelectSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_search_insert_pane", BI.MultiSelectSearchInsertPane); + populate(items) { + this.loader.populate(...arguments); + } +} diff --git a/src/widget/multiselect/search/multiselect.search.loader.js b/src/widget/multiselect/search/multiselect.search.loader.js index 5f6d09f54..b52361dba 100644 --- a/src/widget/multiselect/search/multiselect.search.loader.js +++ b/src/widget/multiselect/search/multiselect.search.loader.js @@ -1,136 +1,160 @@ -/** - * 多选加载数据搜索loader面板 - * Created by guy on 15/11/4. - * @class BI.MultiSelectSearchLoader - * @extends Widget - */ -BI.MultiSelectSearchLoader = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectSearchLoader.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + deepClone, + createWidget, + i18nText, + Controller, + VerticalLayout, + map, + isKey, + Func +} from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case"; + +@shortcut() +export class MultiSelectSearchLoader extends Widget { + static xtype = "bi.multi_select_search_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-search-loader", - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - valueFormatter: BI.emptyFn, - itemFormatter: BI.emptyFn, - itemHeight: 24 + itemsCreator: emptyFn, + keywordGetter: emptyFn, + valueFormatter: emptyFn, + itemFormatter: emptyFn, + itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectSearchLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; - this.storeValue = BI.deepClone(opts.value); - this.button_group = BI.createWidget({ - type: "bi.select_list", + const self = this, + opts = this.options; + let hasNext = false; + this.storeValue = deepClone(opts.value); + this.button_group = createWidget({ + type: SelectList.xtype, toolbar: { - type: "bi.multi_select_bar", + type: MultiSelectBar.xtype, cls: "bi-list-item-active", - iconWrapperWidth: 36 + iconWrapperWidth: 36, }, 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_MULTI, + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, behaviors: { - redmark: function () { + redmark() { return true; - } + }, }, layouts: [ { - type: "bi.vertical" + type: VerticalLayout.xtype, } - ] - } - } + ], + }, + }, }, - itemsCreator: function (op, callback) { - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: self.storeValue.value + itemsCreator(op, callback) { + self.storeValue && + (op = extend(op || {}, { + selectedValues: self.storeValue.value, })); - opts.itemsCreator(op, function (ob) { - var keyword = ob.keyword = opts.keywordGetter(); + opts.itemsCreator(op, ob => { + const keyword = (ob.keyword = opts.keywordGetter()); hasNext = ob.hasNext; - var firstItems = []; + let firstItems = []; if (op.times === 1 && self.storeValue) { - var json = self._filterValues(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); + callback( + firstItems.concat(self._createItems(ob.items)), + keyword, + context + ); if (op.times === 1 && self.storeValue) { self.setValue(self.storeValue); } }); }, - 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.SelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectSearchLoader.EVENT_CHANGE, arguments); + this.button_group.on(SelectList.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectSearchLoader.EVENT_CHANGE, arguments); }); - }, + } + + _createItems(items) { + const allSelected = this.isAllSelected(); + const itemFormatter = this.options.itemFormatter; - _createItems: function (items) { - var allSelected = this.isAllSelected(); - var itemFormatter = this.options.itemFormatter; - - return BI.map(items, (index, item) => { + return map(items, (index, item) => { return { - type: "bi.multi_select_item", + type: MultiSelectItem.xtype, logic: { - dynamic: false + dynamic: false, }, - height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + height: + this.options.itemHeight || + BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, selected: allSelected, cls: "bi-list-item-active", iconWrapperWidth: 36, ...item, - ...itemFormatter(item) + ...itemFormatter(item), }; }); - }, + } - isAllSelected: function () { + isAllSelected() { return this.button_group.isAllSelected(); - }, + } - _filterValues: function (src) { - var o = this.options; - var keyword = o.keywordGetter(); - var values = BI.deepClone(src.value) || []; - var newValues = BI.map(values, function (i, v) { + _filterValues(src) { + const o = this.options; + const keyword = o.keywordGetter(); + let values = deepClone(src.value) || []; + const newValues = map(values, (i, v) => { return { text: o.valueFormatter(v) || 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, @@ -139,38 +163,35 @@ BI.MultiSelectSearchLoader = BI.inherit(BI.Widget, { ...o.itemFormatter(v), }; }); - }, + } - setValue: function (v) { + setValue(v) { // 暂存的值一定是新的值，不然v改掉后，storeValue也跟着改了 - this.storeValue = BI.deepClone(v); + this.storeValue = deepClone(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.MultiSelectSearchLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_search_loader", BI.MultiSelectSearchLoader); +} diff --git a/src/widget/multiselect/search/multiselect.search.pane.js b/src/widget/multiselect/search/multiselect.search.pane.js index 98c733348..0a8ead08b 100644 --- a/src/widget/multiselect/search/multiselect.search.pane.js +++ b/src/widget/multiselect/search/multiselect.search.pane.js @@ -1,86 +1,92 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.MultiSelectSearchPane - * @extends Widget - */ +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + Controller, + AbsoluteLayout +} from "@/core"; +import { MultiSelectSearchLoader } from "./multiselect.search.loader"; -BI.MultiSelectSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiSelectSearchPane extends Widget { + static xtype = "bi.multi_select_search_pane"; - constants: { - height: 24, - lgap: 10, - tgap: 5 - }, + constants = { height: 24, lgap: 10, tgap: 5 }; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectSearchPane.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-search-pane bi-card", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - keywordGetter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, + keywordGetter: emptyFn, itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectSearchPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.loader = BI.createWidget({ - type: "bi.multi_select_search_loader", + this.loader = createWidget({ + type: MultiSelectSearchLoader.xtype, keywordGetter: o.keywordGetter, valueFormatter: o.valueFormatter, itemFormatter: o.itemFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator.apply(self, [op, function (res) { - callback(res); - }]); + itemsCreator(op, callback) { + o.itemsCreator.apply(self, [ + op, + function (res) { + callback(res); + } + ]); }, itemHeight: o.itemHeight, - 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.absolute", + this.resizer = createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.loader, - left: 0, - right: 0, - bottom: 0, - top: 0, - }], + items: [ + { + el: this.loader, + left: 0, + right: 0, + bottom: 0, + top: 0, + } + ], }); - }, + } - isAllSelected: function () { + isAllSelected() { return this.loader.isAllSelected(); - }, + } - hasMatched: function () { - }, + hasMatched() { + } - 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.MultiSelectSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.multi_select_search_pane", BI.MultiSelectSearchPane); + populate(items) { + this.loader.populate(...arguments); + } +} diff --git a/src/widget/multiselect/trigger/button.checkselected.js b/src/widget/multiselect/trigger/button.checkselected.js index 17468061f..275013a86 100644 --- a/src/widget/multiselect/trigger/button.checkselected.js +++ b/src/widget/multiselect/trigger/button.checkselected.js @@ -1,102 +1,124 @@ -/** - * 查看已选按钮 - * Created by guy on 15/11/3. - * @class BI.MultiSelectCheckSelectedButton - * @extends BI.Single - */ -BI.MultiSelectCheckSelectedButton = BI.inherit(BI.Single, { +import { + shortcut, + extend, + emptyFn, + createWidget, + Controller, + i18nText, + isNotNull, + isNotEmptyString, + nextTick, + Selection +} from "@/core"; +import { Single, TextButton } from "@/base"; +import { MultiSelectCombo } from "../multiselect.combo"; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiSelectCheckSelectedButton extends Single { + static xtype = "bi.multi_select_check_selected_button"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-check-selected-button", - itemsCreator: BI.emptyFn + itemsCreator: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectCheckSelectedButton.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.numberCounter = BI.createWidget({ - type: "bi.text_button", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.numberCounter = createWidget({ + type: TextButton.xtype, element: this, hgap: 4, text: "0", textAlign: "center", textHeight: 16, - cls: "bi-high-light-background count-tip" + cls: "bi-high-light-background count-tip", }); - this.numberCounter.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.numberCounter.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.numberCounter.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments); + this.numberCounter.on(TextButton.EVENT_CHANGE, function () { + self.fireEvent( + MultiSelectCheckSelectedButton.EVENT_CHANGE, + arguments + ); }); - this.numberCounter.element.hover(function () { - self.numberCounter.setTag(self.numberCounter.getText()); - self.numberCounter.setText(BI.i18nText("BI-Check_Selected")); - }, function () { - self.numberCounter.setText(self.numberCounter.getTag()); - }); + this.numberCounter.element.hover( + () => { + self.numberCounter.setTag(self.numberCounter.getText()); + self.numberCounter.setText(i18nText("BI-Check_Selected")); + }, + () => { + self.numberCounter.setText(self.numberCounter.getTag()); + } + ); this.setVisible(false); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setValue(o.value); } - }, + } - _populate: function (ob) { - var self = this, o = this.options; - if (ob.type === BI.Selection.All) { - o.itemsCreator({ - type: BI.MultiSelectCombo.REQ_GET_DATA_LENGTH - }, function (res) { - if (self.options.value.type !== BI.Selection.All) { - return; - } - if (BI.isNotEmptyString(res.count)) { - BI.nextTick(function () { - self.numberCounter.setText(res.count); - self.setVisible(true); - }); + _populate(ob) { + const self = this, + o = this.options; + if (ob.type === Selection.All) { + o.itemsCreator( + { + type: MultiSelectCombo.REQ_GET_DATA_LENGTH, + }, + res => { + if (self.options.value.type !== Selection.All) { + return; + } + if (isNotEmptyString(res.count)) { + nextTick(() => { + self.numberCounter.setText(res.count); + self.setVisible(true); + }); - return; + return; + } + const length = res.count - ob.value.length; + nextTick(() => { + self.numberCounter.setText(length); + self.setVisible(length > 0); + }); } - var length = res.count - ob.value.length; - BI.nextTick(function () { - self.numberCounter.setText(length); - self.setVisible(length > 0); - }); - }); + ); + return; } - BI.nextTick(function () { + nextTick(() => { self.numberCounter.setText(ob.value.length); self.setVisible(ob.value.length > 0); }); - }, + } - _assertValue: function (ob) { + _assertValue(ob) { ob || (ob = {}); ob.type || (ob.type = BI.Selection.Multi); ob.value || (ob.value = []); + return ob; - }, + } - setValue: function (ob) { + setValue(ob) { ob = this._assertValue(ob); this.options.value = ob; this._populate(ob); - }, + } - populate: function () { + populate() { this._populate(this._assertValue(this.options.value)); - }, - - getValue: function () { - } -}); -BI.MultiSelectCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_check_selected_button", BI.MultiSelectCheckSelectedButton); + getValue() { + } +} diff --git a/src/widget/multiselect/trigger/editor.multiselect.js b/src/widget/multiselect/trigger/editor.multiselect.js index db9acc9a4..f2e33a410 100644 --- a/src/widget/multiselect/trigger/editor.multiselect.js +++ b/src/widget/multiselect/trigger/editor.multiselect.js @@ -1,24 +1,38 @@ -/** - * 多选输入框 - * Created by guy on 15/11/3. - * @class BI.MultiSelectEditor - * @extends Widget - */ -BI.MultiSelectEditor = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectEditor.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + i18nText, + createWidget, + Controller, + isEmptyString, + isEmptyArray +} from "@/core"; +import { StateEditor } from "@/case"; +import { SelectPatchEditor } from "./editor/editor.patch"; + +@shortcut() +export class MultiSelectEditor extends Widget { + static xtype = "bi.multi_select_editor"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_PAUSE = "EVENT_PAUSE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-editor", el: {}, - watermark: BI.i18nText("BI-Basic_Search") + watermark: i18nText("BI-Basic_Search"), }); - }, + } - _init: function () { - BI.MultiSelectEditor.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 self = this, + o = this.options; + this.editor = createWidget(o.el, { + type: SelectPatchEditor.xtype, element: this, height: o.height, watermark: o.watermark, @@ -30,49 +44,49 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, { warningTitle: o.warningTitle, }); - 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.StateEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectEditor.EVENT_FOCUS); + this.editor.on(StateEditor.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectEditor.EVENT_FOCUS); }); - this.editor.on(BI.StateEditor.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectEditor.EVENT_BLUR); + this.editor.on(StateEditor.EVENT_BLUR, () => { + self.fireEvent(MultiSelectEditor.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); - }, + } - setTipType: function (v) { + setTipType(v) { this.editor.setTipType(v); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.editor.getText(); - }, + } - 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)) { @@ -80,27 +94,19 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, { } 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]; + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.MultiSelectEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.shortcut("bi.multi_select_editor", BI.MultiSelectEditor); +} diff --git a/src/widget/multiselect/trigger/editor/editor.patch.js b/src/widget/multiselect/trigger/editor/editor.patch.js index bec2ae7db..237109ef5 100644 --- a/src/widget/multiselect/trigger/editor/editor.patch.js +++ b/src/widget/multiselect/trigger/editor/editor.patch.js @@ -1,214 +1,248 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2021/5/18 - */ -BI.SelectPatchEditor = BI.inherit(BI.Widget, { - - props: { - baseCls: "bi-patch-select-editor", - height: 24, - }, - - render: function () { - var self = this, o = this.options; - - var debounceInputChange = BI.debounce(BI.bind(this._dealChange, this), 300); - - return BI.extend({ - type: "bi.state_editor", - ref: function (_ref) { - self.editor = _ref; - }, - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - height: o.height, - watermark: o.watermark, - allowBlank: true, - value: o.value, - defaultText: o.defaultText, - text: o.text, - tipType: o.tipType, - warningTitle: o.warningTitle, - el: { - type: 'bi.textarea_editor', - scrolly: false, - validationChecker: function () { - return true; +import { + shortcut, + Widget, + debounce, + bind, + extend, + Controller, + contains, + isKey, + Events, + trim, replaceAll +} from "@/core"; +import { Editor, TextAreaEditor } from "@/base"; +import { StateEditor } from "@/case"; + +@shortcut() +export class SelectPatchEditor extends Widget { + static xtype = "bi.select_patch_editor"; + + props = { baseCls: "bi-patch-select-editor", height: 24 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + render() { + const self = this, + o = this.options; + + const debounceInputChange = debounce(bind(this._dealChange, this), 300); + + return extend( + { + type: StateEditor.xtype, + ref(_ref) { + self.editor = _ref; }, - throttle: true, - }, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type, v) { - if (BI.contains(v, "\n")) { - self._dealChange(type, v); - } else { - debounceInputChange(type, v); - } + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap, + height: o.height, + watermark: o.watermark, + allowBlank: true, + value: o.value, + defaultText: o.defaultText, + text: o.text, + tipType: o.tipType, + warningTitle: o.warningTitle, + el: { + type: TextAreaEditor.xtype, + scrolly: false, + validationChecker() { + return true; + }, + throttle: true, }, - }, { - eventName: BI.Editor.EVENT_KEY_DOWN, - action: function (keyCode) { - if (keyCode === BI.KeyCode.ENTER) { - self._clearSplitValue(); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action(type, v) { + if (contains(v, "\n")) { + self._dealChange(type, v); + } else { + debounceInputChange(type, v); + } + }, + }, + { + eventName: Editor.EVENT_KEY_DOWN, + action(keyCode) { + if (keyCode === BI.KeyCode.ENTER) { + self._clearSplitValue(); + } + }, + }, + { + eventName: Editor.EVENT_FOCUS, + action() { + self.fireEvent( + SelectPatchEditor.EVENT_FOCUS, + arguments + ); + }, + }, + { + eventName: Editor.EVENT_BLUR, + action() { + self._start = false; + self.fireEvent( + SelectPatchEditor.EVENT_BLUR, + arguments + ); + }, } - }, - }, { - eventName: BI.Editor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.SelectPatchEditor.EVENT_FOCUS, arguments); - }, - }, { - eventName: BI.Editor.EVENT_BLUR, - action: function () { - self._start = false; - self.fireEvent(BI.SelectPatchEditor.EVENT_BLUR, arguments); - }, - }], - }, o.el); - }, + ], + }, + o.el + ); + } - _clearSplitValue: function () { + _clearSplitValue() { this.editor.setValue(""); - }, + } - _dealChange: function (type, v) { - var value = ""; + _dealChange(type, v) { + let value = ""; if (v !== this.editor.getValue()) { return; } - if (BI.isKey(v)) { + if (isKey(v)) { value = this._formatText(v); } - if (type === BI.Events.CHANGE) { + if (type === Events.CHANGE) { this._setValue(value); if (this._trimValue(value) !== "") { - if (!this._start || !BI.isKey(this._lastValue) || (this._pause === true && this._trimValue(this._lastValue) !== this._trimValue(value))) { + if ( + !this._start || + !isKey(this._lastValue) || + (this._pause === true && + this._trimValue(this._lastValue) !== + this._trimValue(value)) + ) { this._start = true; this._pause = false; - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this); + this.fireEvent( + Controller.EVENT_CHANGE, + Events.STARTEDIT, + this.getValue(), + this + ); } } if (this._trimValue(this._lastValue) !== this._trimValue(value)) { - this.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, arguments); } if (BI.endWith(value, BI.BlankSplitChar)) { this._pause = true; - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this); + this.fireEvent(Controller.EVENT_CHANGE, Events.PAUSE, "", this); } } - if (type === BI.Events.EMPTY || type === BI.Events.STOPEDIT) { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY); + if (type === Events.EMPTY || type === Events.STOPEDIT) { + this.fireEvent(Controller.EVENT_CHANGE, Events.EMPTY); } this._lastValue = value; - }, + } - _trimValue: function (v) { - return BI.trim(BI.replaceAll(v || "", BI.BlankSplitChar, "")); - }, + _trimValue(v) { + return trim(replaceAll(v || "", BI.BlankSplitChar, "")); + } - _formatText: function (v) { - return BI.replaceAll(v || "", "\n", BI.BlankSplitChar); - }, + _formatText(v) { + return replaceAll(v || "", "\n", BI.BlankSplitChar); + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); - }, + } - doRedMark: function () { - this.editor.doRedMark.apply(this.editor, arguments); - }, + doRedMark() { + this.editor.doRedMark(...arguments); + } - unRedMark: function () { - this.editor.unRedMark.apply(this.editor, arguments); - }, + unRedMark() { + this.editor.unRedMark(...arguments); + } - doHighLight: function () { - this.editor.doHighLight.apply(this.editor, arguments); - }, + doHighLight() { + this.editor.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - _setValue: function (v) { + _setValue(v) { this.editor.setValue(this._formatText(v)); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (v) { + setValue(v) { this._setValue(v); this._lastValue = this._trimValue(v); - }, + } - getValue: function () { - return BI.trim(this.editor.getValue()); - }, + getValue() { + return trim(this.editor.getValue()); + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - setState: function (v) { + setState(v) { this.editor.setState(v); - }, + } - setTipType: function (v) { + setTipType(v) { this.editor.setTipType(v); - }, + } - getText: function () { + getText() { return this.editor.getText(); - }, -}); -BI.SelectPatchEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SelectPatchEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SelectPatchEditor.EVENT_BLUR = "EVENT_BLUR"; - -BI.shortcut("bi.select_patch_editor", BI.SelectPatchEditor); + } +} diff --git a/src/widget/multiselect/trigger/searcher.multiselect.insert.js b/src/widget/multiselect/trigger/searcher.multiselect.insert.js index ec31d3d31..a2e043a6e 100644 --- a/src/widget/multiselect/trigger/searcher.multiselect.insert.js +++ b/src/widget/multiselect/trigger/searcher.multiselect.insert.js @@ -1,161 +1,196 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiSelectInsertSearcher - * @extends Widget - */ -BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectInsertSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + i18nText, + createWidget, + isNotNull, + isEmptyArray, + size, + each +} from "@/core"; +import { MultiSelectEditor } from "./editor.multiselect"; +import { Searcher } from "@/base"; +import { MultiSelectSearchInsertPane } from "../search/multiselect.search.insert.pane"; + +@shortcut() +export class MultiSelectInsertSearcher extends Widget { + static xtype = "bi.multi_select_insert_searcher"; + + 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"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, itemHeight: 24, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, masker: {}, - watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"), + watermark: i18nText("BI-Basic_Search_And_Patch_Paste"), }); - }, + } - _init: function () { - BI.MultiSelectInsertSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.multi_select_editor", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { + type: MultiSelectEditor.xtype, watermark: o.watermark, height: o.height, text: o.text, defaultText: o.defaultText, listeners: [ { - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_BLUR); - } + eventName: MultiSelectEditor.EVENT_FOCUS, + action() { + self.fireEvent(MultiSelectInsertSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action() { + self.fireEvent(MultiSelectInsertSearcher.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({ - type: "bi.multi_select_search_insert_pane", - valueFormatter: o.valueFormatter, - itemFormatter: o.itemFormatter, - keywordGetter: function () { - return self.editor.getKeyword(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getKeyword(); - op.keywords = [keyword]; - this.setKeyword(keyword); - o.itemsCreator(op, function () { - if (keyword === self.editor.getValue()) { - callback.apply(null, arguments); - } - }); + popup: extend( + { + type: MultiSelectSearchInsertPane.xtype, + valueFormatter: o.valueFormatter, + itemFormatter: o.itemFormatter, + keywordGetter() { + return self.editor.getKeyword(); + }, + itemsCreator(op, callback) { + const keyword = self.editor.getKeyword(); + op.keywords = [keyword]; + this.setKeyword(keyword); + o.itemsCreator(op, function () { + if (keyword === self.editor.getValue()) { + callback(...arguments); + } + }); + }, + itemHeight: o.itemHeight, + value: o.value, }, - itemHeight: o.itemHeight, - value: o.value, - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiSelectInsertSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + self.fireEvent(MultiSelectInsertSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiSelectInsertSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectInsertSearcher.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_SEARCHING, keywords.length > 2000 ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) : keywords.slice(0, 2000)); + this.searcher.on(Searcher.EVENT_SEARCHING, function () { + const keywords = this.getKeywords(); + self.fireEvent( + MultiSelectInsertSearcher.EVENT_SEARCHING, + keywords.length > 2000 + ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) + : keywords.slice(0, 2000) + ); }); - 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(); - }, + } - getKeywordsLength: function () { - var keywords = this.editor.getKeywords(); + getKeywordsLength() { + const keywords = this.editor.getKeywords(); - return keywords[keywords.length - 1] === BI.BlankSplitChar ? keywords.length - 1 : keywords.length; - }, + return keywords[keywords.length - 1] === BI.BlankSplitChar + ? keywords.length - 1 + : keywords.length; + } - getKeyword: function () { - var keywords = this.editor.getKeywords().slice(0, 2000); + getKeyword() { + let keywords = this.editor.getKeywords().slice(0, 2000); if (keywords[keywords.length - 1] === BI.BlankSplitChar) { keywords = keywords.slice(0, keywords.length - 1); } - return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; - }, + return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; + } - 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 (ob) { - var o = this.options; + setState(ob) { + let state; + const o = this.options; ob || (ob = {}); ob.value || (ob.value = []); if (ob.type === BI.Selection.All) { if (ob.value.length === 0) { this.editor.setState(BI.Selection.All); - } else if (BI.size(ob.assist) <= 20) { - var state = ""; - BI.each(ob.assist, function (i, v) { + } else if (size(ob.assist) <= 20) { + state = ""; + each(ob.assist, (i, v) => { if (i === 0) { - state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `,${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); @@ -165,13 +200,17 @@ BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, { } else { if (ob.value.length === 0) { this.editor.setState(BI.Selection.None); - } else if (BI.size(ob.value) <= 20) { - var state = ""; - BI.each(ob.value, function (i, v) { + } else if (size(ob.value) <= 20) { + state = ""; + each(ob.value, (i, v) => { if (i === 0) { - state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `,${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); @@ -179,36 +218,26 @@ BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, { this.editor.setState(BI.Selection.Multi); } } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - 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); - } -}); - -BI.MultiSelectInsertSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiSelectInsertSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectInsertSearcher.EVENT_START = "EVENT_START"; -BI.MultiSelectInsertSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectInsertSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiSelectInsertSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectInsertSearcher.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectInsertSearcher.EVENT_BLUR = "EVENT_BLUR"; -BI.shortcut("bi.multi_select_insert_searcher", BI.MultiSelectInsertSearcher); + } + + populate(items) { + this.searcher.populate(...arguments); + } +} diff --git a/src/widget/multiselect/trigger/searcher.multiselect.js b/src/widget/multiselect/trigger/searcher.multiselect.js index e7ed00874..ef23281c3 100644 --- a/src/widget/multiselect/trigger/searcher.multiselect.js +++ b/src/widget/multiselect/trigger/searcher.multiselect.js @@ -1,160 +1,187 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiSelectSearcher - * @extends Widget - */ -BI.MultiSelectSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + i18nText, + createWidget, + isNotNull, + size, + each +} from "@/core"; +import { MultiSelectEditor } from "./editor.multiselect"; +import { Searcher } from "@/base"; +import { MultiSelectSearchPane } from "../search/multiselect.search.pane"; + +@shortcut() +export class MultiSelectSearcher extends Widget { + static xtype = "bi.multi_select_searcher"; + + 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"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, masker: {}, - defaultText: BI.i18nText("BI-Basic_Please_Select"), - itemHeight: 24 + defaultText: i18nText("BI-Basic_Please_Select"), + itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.multi_select_editor", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { + type: MultiSelectEditor.xtype, height: o.height, text: o.text, defaultText: o.defaultText, watermark: o.watermark, listeners: [ { - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); - } + eventName: MultiSelectEditor.EVENT_FOCUS, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action() { + self.fireEvent(MultiSelectSearcher.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({ - type: "bi.multi_select_search_pane", - valueFormatter: o.valueFormatter, - itemFormatter: o.itemFormatter, - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getValue(); - op.keywords = [keyword]; - o.itemsCreator(op, function () { - var keyword = self.editor.getValue(); + popup: extend( + { + type: MultiSelectSearchPane.xtype, + valueFormatter: o.valueFormatter, + itemFormatter: o.itemFormatter, + keywordGetter() { + return self.editor.getValue(); + }, + itemsCreator(op, callback) { + const keyword = self.editor.getValue(); op.keywords = [keyword]; - o.itemsCreator(op, function () { - if (keyword === self.editor.getValue()) { - callback.apply(null, arguments); - } + o.itemsCreator(op, () => { + const keyword = self.editor.getValue(); + op.keywords = [keyword]; + o.itemsCreator(op, function () { + if (keyword === self.editor.getValue()) { + callback(...arguments); + } + }); }); - }); + }, + itemHeight: o.itemHeight, + value: o.value, }, - itemHeight: o.itemHeight, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiSelectSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.MultiSelectSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + self.fireEvent(MultiSelectSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiSelectSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectSearcher.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.MultiSelectSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, function () { + const keywords = this.getKeywords(); + self.fireEvent(MultiSelectSearcher.EVENT_SEARCHING, keywords); }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - 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.getValue(); - }, + } - 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 (ob) { - var o = this.options; + setState(ob) { + let state; + const o = this.options; ob || (ob = {}); ob.value || (ob.value = []); if (ob.type === BI.Selection.All) { if (ob.value.length === 0) { this.editor.setState(BI.Selection.All); - } else if (BI.size(ob.assist) <= 20) { - var state = ""; - BI.each(ob.assist, function (i, v) { + } else if (size(ob.assist) <= 20) { + state = ""; + each(ob.assist, (i, v) => { if (i === 0) { - state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `,${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); @@ -164,13 +191,17 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, { } else { if (ob.value.length === 0) { this.editor.setState(BI.Selection.None); - } else if (BI.size(ob.value) <= 20) { - var state = ""; - BI.each(ob.value, function (i, v) { + } else if (size(ob.value) <= 20) { + state = ""; + each(ob.value, (i, v) => { if (i === 0) { - state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `,${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); @@ -178,36 +209,26 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, { this.editor.setState(BI.Selection.Multi); } } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - 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); - } -}); - -BI.MultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectSearcher.EVENT_START = "EVENT_START"; -BI.MultiSelectSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectSearcher.EVENT_BLUR = "EVENT_BLUR"; -BI.shortcut("bi.multi_select_searcher", BI.MultiSelectSearcher); + } + + populate(items) { + this.searcher.populate(...arguments); + } +} diff --git a/src/widget/multiselect/trigger/switcher.checkselected.js b/src/widget/multiselect/trigger/switcher.checkselected.js index 6804c2c5e..89e4e4fb0 100644 --- a/src/widget/multiselect/trigger/switcher.checkselected.js +++ b/src/widget/multiselect/trigger/switcher.checkselected.js @@ -1,112 +1,128 @@ -/** - * 查看已选switcher - * Created by guy on 15/11/3. - * @class BI.MultiSelectCheckSelectedSwitcher - * @extends Widget - */ -BI.MultiSelectCheckSelectedSwitcher = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + Events, + nextTick +} from "@/core"; +import { Switcher } from "@/base"; +import { MultiSelectCheckSelectedButton } from "./button.checkselected"; +import { MultiSelectCheckPane } from "../check/multiselect.check.pane"; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectCheckSelectedSwitcher.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiSelectCheckSelectedSwitcher extends Widget { + static xtype = "bi.multi_select_check_selected_switcher"; + + static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-check-selected-switcher", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, el: {}, popup: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.MultiSelectCheckSelectedSwitcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.button = BI.createWidget(o.el, { - type: "bi.multi_select_check_selected_button", + this.button = createWidget(o.el, { + type: MultiSelectCheckSelectedButton.xtype, itemsCreator: o.itemsCreator, - value: o.value + value: o.value, }); - this.button.on(BI.Events.VIEW, function () { - self.fireEvent(BI.Events.VIEW, arguments); + this.button.on(Events.VIEW, function () { + self.fireEvent(Events.VIEW, arguments); }); - this.switcher = BI.createWidget({ - type: "bi.switcher", + this.switcher = createWidget({ + type: Switcher.xtype, toggle: false, element: this, el: this.button, - popup: BI.extend({ - type: "bi.multi_select_check_pane", - valueFormatter: o.valueFormatter, - itemsCreator: o.itemsCreator, - onClickContinueSelect: function () { - self.switcher.hideView(); - }, - ref: function (_ref) { - self.checkPane = _ref; + popup: extend( + { + type: MultiSelectCheckPane.xtype, + valueFormatter: o.valueFormatter, + itemsCreator: o.itemsCreator, + onClickContinueSelect() { + self.switcher.hideView(); + }, + ref(_ref) { + self.checkPane = _ref; + }, + value: o.value, }, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.switcher.on(BI.Switcher.EVENT_TRIGGER_CHANGE, function () { - self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE); + this.switcher.on(Switcher.EVENT_TRIGGER_CHANGE, () => { + self.fireEvent( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE + ); }); - this.switcher.on(BI.Switcher.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW); + this.switcher.on(Switcher.EVENT_BEFORE_POPUPVIEW, () => { + self.fireEvent( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW + ); }); - this.switcher.on(BI.Switcher.EVENT_AFTER_HIDEVIEW, function () { - self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW); + this.switcher.on(Switcher.EVENT_AFTER_HIDEVIEW, () => { + self.fireEvent( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW + ); }); - this.switcher.on(BI.Switcher.EVENT_AFTER_POPUPVIEW, function () { - var me = this; - BI.nextTick(function () { + this.switcher.on(Switcher.EVENT_AFTER_POPUPVIEW, function () { + const me = this; + nextTick(() => { me._populate(); }); }); - }, + } - adjustView: function () { + adjustView() { this.switcher.adjustView(); - }, + } - hideView: function () { + hideView() { this.switcher.empty(); this.switcher.hideView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.switcher.setAdapter(adapter); - }, + } - setValue: function (v) { + setValue(v) { this.switcher.setValue(v); - }, + } - // 与setValue的区别是只更新查看已选面板的的selectedValue, 不会更新按钮的计数 - updateSelectedValue: function (v) { + updateSelectedValue(v) { this.checkPane.setValue(v); - }, + } - setButtonChecked: function (v) { + setButtonChecked(v) { this.button.setValue(v); - }, - - getValue: function () { + } - }, + getValue() { + } - populate: function (items) { + populate(items) { this.switcher.populate.apply(this.switcher, arguments); - }, + } - populateSwitcher: function () { + populateSwitcher() { this.button.populate.apply(this.button, arguments); } -}); - -BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; -BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; -BI.shortcut("bi.multi_select_check_selected_switcher", BI.MultiSelectCheckSelectedSwitcher); \ No newline at end of file +} diff --git a/src/widget/multiselecttree/multiselecttree.js b/src/widget/multiselecttree/multiselecttree.js index 959c6593b..3e77234cd 100644 --- a/src/widget/multiselecttree/multiselecttree.js +++ b/src/widget/multiselecttree/multiselecttree.js @@ -1,171 +1,193 @@ -/** - * Created by zcf_1 on 2017/5/11. - */ -BI.MultiSelectTree = BI.inherit(BI.Single, { - _constant: { - EDITOR_HEIGHT: 24 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectTree.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + nextTick, + AbsoluteLayout +} from "@/core"; +import { Single, Searcher } from "@/base"; +import { MultiSelectTreePopup } from "./multiselecttree.popup"; + +@shortcut() +export class MultiSelectTree extends Single { + static xtype = "bi.multi_select_tree"; + + _constant = { EDITOR_HEIGHT: 24 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-tree", - itemsCreator: BI.emptyFn + itemsCreator: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectTree.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.storeValue = {value: {}}; + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.storeValue = { value: {} }; - this.adapter = BI.createWidget({ - type: "bi.multi_select_tree_popup", + this.adapter = createWidget({ + type: MultiSelectTreePopup.xtype, itemsCreator: o.itemsCreator, - showLine: o.showLine + showLine: o.showLine, }); - this.adapter.on(BI.MultiSelectTreePopup.EVENT_CHANGE, function () { + this.adapter.on(MultiSelectTreePopup.EVENT_CHANGE, () => { if (self.searcher.isSearching()) { - self.storeValue = {value: self.searcherPane.getValue()}; + self.storeValue = { value: self.searcherPane.getValue() }; } else { - self.storeValue = {value: self.adapter.getValue()}; + self.storeValue = { value: self.adapter.getValue() }; } self.setSelectedValue(self.storeValue.value); - self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE); + self.fireEvent(MultiSelectTree.EVENT_CHANGE); }); // 搜索中的时候用的是parttree，同adapter中的synctree不一样 - this.searcherPane = BI.createWidget({ + this.searcherPane = createWidget({ type: "bi.multi_tree_search_pane", cls: "bi-border-left bi-border-right bi-border-bottom", - keywordGetter: function () { + keywordGetter() { return self.searcher.getKeyword(); }, - itemsCreator: function (op, callback) { + itemsCreator(op, callback) { op.keyword = self.searcher.getKeyword(); o.itemsCreator(op, callback); - } + }, }); this.searcherPane.setVisible(false); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback({ - keyword: self.searcher.getKeyword() + keyword: self.searcher.getKeyword(), }); }, adapter: this.adapter, popup: this.searcherPane, masker: false, - listeners: [{ - eventName: BI.Searcher.EVENT_START, - action: function () { - self._showSearcherPane(); - // self.storeValue = {value: self.adapter.getValue()}; - // self.searcherPane.setSelectedValue(self.storeValue.value); - } - }, { - eventName: BI.Searcher.EVENT_STOP, - action: function () { - self._showAdapter(); - // self.storeValue = {value: self.searcherPane.getValue()}; - // self.adapter.setSelectedValue(self.storeValue.value); - BI.nextTick(function () { - self.adapter.populate(); - }); - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - if (self.searcher.isSearching()) { - self.storeValue = {value: self.searcherPane.getValue()}; - } else { - self.storeValue = {value: self.adapter.getValue()}; - } - self.setSelectedValue(self.storeValue.value); - self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_START, + action() { + self._showSearcherPane(); + // self.storeValue = {value: self.adapter.getValue()}; + // self.searcherPane.setSelectedValue(self.storeValue.value); + }, + }, + { + eventName: Searcher.EVENT_STOP, + action() { + self._showAdapter(); + // self.storeValue = {value: self.searcherPane.getValue()}; + // self.adapter.setSelectedValue(self.storeValue.value); + nextTick(() => { + self.adapter.populate(); + }); + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action() { + if (self.searcher.isSearching()) { + self.storeValue = { + value: self.searcherPane.getValue(), + }; + } else { + self.storeValue = { + value: self.adapter.getValue(), + }; + } + self.setSelectedValue(self.storeValue.value); + self.fireEvent(MultiSelectTree.EVENT_CHANGE); + }, + }, + { + eventName: Searcher.EVENT_PAUSE, + action() { + self._showAdapter(); + // BI-64732 pause 和stop一致, 都应该刷新adapter + nextTick(() => { + self.adapter.populate(); + }); + }, } - }, { - eventName: BI.Searcher.EVENT_PAUSE, - action: function () { - self._showAdapter(); - // BI-64732 pause 和stop一致, 都应该刷新adapter - BI.nextTick(function () { - self.adapter.populate(); - }); - } - }] + ], }); - BI.createWidget({ + createWidget({ type: "bi.vertical_fill", element: this, - items: [{ - el: this.searcher, - height: "" - }, { - el: this.adapter, - height: "fill" - }] + items: [ + { + el: this.searcher, + height: "", + }, + { + el: this.adapter, + height: "fill", + } + ], }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.searcherPane, - top: this._constant.EDITOR_HEIGHT, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: this._constant.EDITOR_HEIGHT, + 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); - }, - - resize: function () { + } - }, + resize() { + } - setSelectedValue: function (v) { + setSelectedValue(v) { this.storeValue.value = v || {}; this.adapter.setSelectedValue(v); this.searcherPane.setSelectedValue(v); this.searcher.setValue({ - value: v || {} + value: v || {}, }); - }, + } - setValue: function (v) { + setValue(v) { this.adapter.setValue(v); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - updateValue: function (v) { + updateValue(v) { this.adapter.updateValue(v); - }, + } - getValue: function () { + getValue() { return this.storeValue.value; - }, + } - populate: function () { + populate() { this.adapter.populate(); } -}); -BI.MultiSelectTree.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_tree", BI.MultiSelectTree); +} diff --git a/src/widget/multiselecttree/multiselecttree.popup.js b/src/widget/multiselecttree/multiselecttree.popup.js index 95af718ce..805d0571c 100644 --- a/src/widget/multiselecttree/multiselecttree.popup.js +++ b/src/widget/multiselecttree/multiselecttree.popup.js @@ -1,58 +1,63 @@ -/** - * Created by zcf on 2016/12/21. - */ -BI.MultiSelectTreePopup = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectTreePopup.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom", - itemsCreator: BI.emptyFn +import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +import { TreeView, Asynctree } from "@/case"; + +@shortcut() +export class MultiSelectTreePopup extends Widget { + static xtype = "bi.multi_select_tree_popup"; + + static EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: + "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom", + itemsCreator: emptyFn, }); - }, - _init: function () { - BI.MultiSelectTreePopup.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.popup = BI.createWidget({ - type: "bi.async_tree", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.popup = createWidget({ + type: Asynctree.xtype, showLine: o.showLine, element: this, - itemsCreator: o.itemsCreator + itemsCreator: o.itemsCreator, }); - this.popup.on(BI.TreeView.EVENT_AFTERINIT, function () { - self.fireEvent(BI.MultiSelectTreePopup.EVENT_AFTER_INIT); + this.popup.on(TreeView.EVENT_AFTERINIT, () => { + self.fireEvent(MultiSelectTreePopup.EVENT_AFTER_INIT); }); - this.popup.on(BI.TreeView.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectTreePopup.EVENT_CHANGE); + this.popup.on(TreeView.EVENT_CHANGE, () => { + self.fireEvent(MultiSelectTreePopup.EVENT_CHANGE); }); - }, + } - hasChecked: function () { + hasChecked() { return this.popup.hasChecked(); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); this.popup.setValue(v); - }, + } - setSelectedValue: function (v) { + setSelectedValue(v) { v || (v = {}); this.popup.setSelectedValue(v); - }, + } - updateValue: function (v) { + updateValue(v) { this.popup.updateValue(v); this.popup.refresh(); - }, + } - populate: function (config) { + populate(config) { this.popup.stroke(config); } - -}); -BI.MultiSelectTreePopup.EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; -BI.MultiSelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_tree_popup", BI.MultiSelectTreePopup); \ No newline at end of file +} diff --git a/src/widget/multitree/check/multi.tree.check.pane.js b/src/widget/multitree/check/multi.tree.check.pane.js index 598a19f21..56ef73fca 100644 --- a/src/widget/multitree/check/multi.tree.check.pane.js +++ b/src/widget/multitree/check/multi.tree.check.pane.js @@ -1,121 +1,128 @@ -/** - * - * @class BI.MultiTreeCheckPane - * @extends BI.Pane - */ -BI.MultiTreeCheckPane = BI.inherit(BI.Pane, { - - constants: { - height: 25, - lgap: 10, - tgap: 5 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiTreeCheckPane.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + i18nText, + nextTick, + Events, + VerticalAdaptLayout, VTapeLayout +} from "@/core"; +import { Pane, TextButton, Label } from "@/base"; +import { DisplayTree, TreeView } from "@/case"; + +@shortcut() +export class MultiTreeCheckPane extends Pane { + static xtype = "bi.multi_tree_check_pane"; + + constants = { height: 25, lgap: 10, tgap: 5 }; + + static EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-check-pane bi-background", - onClickContinueSelect: BI.emptyFn, + onClickContinueSelect: emptyFn, el: { - type: "bi.display_tree" - } + type: DisplayTree.xtype, + }, }); - }, + } - _init: function () { - BI.MultiTreeCheckPane.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; + const self = this, + opts = this.options; this.selectedValues = {}; - var continueSelect = BI.createWidget({ - type: "bi.text_button", - title: BI.i18nText("BI-Continue_Select"), - text: BI.i18nText("BI-Continue_Select"), - cls: "multi-tree-check-selected" + const continueSelect = createWidget({ + type: TextButton.xtype, + title: i18nText("BI-Continue_Select"), + text: i18nText("BI-Continue_Select"), + cls: "multi-tree-check-selected", }); - continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { + continueSelect.on(TextButton.EVENT_CHANGE, () => { opts.onClickContinueSelect(); - BI.nextTick(function () { + nextTick(() => { self.empty(); }); }); - var backToPopup = BI.createWidget({ - type: "bi.vertical_adapt", + const backToPopup = createWidget({ + type: VerticalAdaptLayout.xtype, columnSize: ["auto", "auto"], cls: "multi-tree-continue-select", items: [ { el: { - type: "bi.label", - title: BI.i18nText("BI-Selected_Data"), - text: BI.i18nText("BI-Selected_Data") + type: Label.xtype, + title: i18nText("BI-Selected_Data"), + text: i18nText("BI-Selected_Data"), }, lgap: this.constants.lgap, - tgap: this.constants.tgap + tgap: this.constants.tgap, }, { el: continueSelect, hgap: this.constants.lgap, - tgap: this.constants.tgap - }] + tgap: this.constants.tgap, + } + ], }); - this.display = BI.createWidget(opts.el, { - type: "bi.display_tree", + this.display = createWidget(opts.el, { + type: DisplayTree.xtype, cls: "bi-multi-tree-display", - itemsCreator: function (op, callback) { - op.type = BI.TreeView.REQ_TYPE_GET_SELECTED_DATA; + itemsCreator(op, callback) { + op.type = TreeView.REQ_TYPE_GET_SELECTED_DATA; opts.itemsCreator(op, callback); }, - value: (opts.value || {}).value + value: (opts.value || {}).value, }); - this.display.on(BI.Events.AFTERINIT, function () { - self.fireEvent(BI.Events.AFTERINIT); + this.display.on(Events.AFTERINIT, () => { + self.fireEvent(Events.AFTERINIT); }); - this.display.on(BI.TreeView.EVENT_INIT, function () { + this.display.on(TreeView.EVENT_INIT, () => { backToPopup.setVisible(false); }); - this.display.on(BI.TreeView.EVENT_AFTERINIT, function () { + this.display.on(TreeView.EVENT_AFTERINIT, () => { backToPopup.setVisible(true); }); - BI.createWidget({ - type: "bi.vtape", + createWidget({ + type: VTapeLayout.xtype, element: this, - items: [{ - height: this.constants.height, - el: backToPopup - }, { - height: "fill", - el: this.display - }] + items: [ + { + height: this.constants.height, + el: backToPopup, + }, + { + height: "fill", + el: this.display, + } + ], }); - }, + } - empty: function () { + empty() { this.display.empty(); - }, + } - populate: function (configs) { + populate(configs) { this.display.stroke(configs); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); this.display.setSelectedValue(v.value); - }, - - getValue: function () { - } -}); -BI.MultiTreeCheckPane.EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK"; - - -BI.shortcut("bi.multi_tree_check_pane", BI.MultiTreeCheckPane); + getValue() { + } +} diff --git a/src/widget/multitree/multi.tree.combo.js b/src/widget/multitree/multi.tree.combo.js index 5fca0ca4f..7ae95930e 100644 --- a/src/widget/multitree/multi.tree.combo.js +++ b/src/widget/multitree/multi.tree.combo.js @@ -1,33 +1,67 @@ -/** - * - * @class BI.MultiTreeCombo - * @extends BI.Single - */ - -BI.MultiTreeCombo = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.MultiTreeCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + toPix, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + deepClone +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiTreeSearcher } from "./trigger/searcher.multi.tree"; +import { MultiTreePopup } from "./multi.tree.popup"; +import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; +import { TriggerIconButton } from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; + +@shortcut() +export class MultiTreeCombo extends Single { + static xtype = "bi.multi_tree_combo"; + + 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"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, isNeedAdjustWidth: true, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.MultiTreeCombo.superclass._init.apply(this, arguments); - var isInit = false; - var want2showCounter = false; + _init() { + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + let clear; + let change; + const self = this, + o = this.options; + super._init(...arguments); + let isInit = false; + let want2showCounter = false; this.storeValue = { value: o.value || {} }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_trigger", allowEdit: o.allowEdit, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), valueFormatter: o.valueFormatter, text: o.text, defaultText: o.defaultText, @@ -45,72 +79,78 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { itemsCreator: o.itemsCreator, listeners: [ { - eventName: BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, - action: function () { + eventName: MultiTreeSearcher.EVENT_CLICK_TREE_NODE, + action() { self._dataChange = true; - } + }, } ], }, - value: { value: o.value || {} } + value: { value: o.value || {} }, }); - 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", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { type: "bi.multi_tree_popup_view", - ref: function () { + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { + eventName: MultiTreePopup.EVENT_AFTERINIT, + action() { self.numberCounter.adjustView(); isInit = true; if (want2showCounter === true) { showCounter(); } - } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CHANGE, + action() { change = true; - var val = { + const val = { type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : {} + value: this.hasChecked() ? this.getValue() : {}, }; self.trigger.getSearcher().setState(val); self.numberCounter.setButtonChecked(val); self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, + action() { self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CLEAR, + action() { clear = true; self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); @@ -119,49 +159,51 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { }, isNeedAdjustWidth: o.isNeedAdjustWidth, value: { value: o.value || {} }, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); - var change = false; - var clear = false; // 标识当前是否点击了清空 + change = false; + clear = false; // 标识当前是否点击了清空 - var isSearching = function () { + function isSearching() { return self.trigger.getSearcher().isSearching(); - }; + } - var isPopupView = function () { + function isPopupView() { return self.combo.isViewVisible(); - }; + } - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiTreeCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiTreeCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self.storeValue = { value: self.combo.getValue() }; this.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () { self.storeValue = { value: this.getValue() }; self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { if (isPopupView()) { self.combo.populate(); } }); - self.fireEvent(BI.MultiTreeCombo.EVENT_STOP); + self.fireEvent(MultiTreeCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_SEARCHING); + this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => { + self.fireEvent(MultiTreeCombo.EVENT_SEARCHING); }); function showCounter() { @@ -174,28 +216,33 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { self.numberCounter.setValue(self.storeValue); } - this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => { self.combo.toggle(); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => { if (!self.combo.isViewVisible()) { self.combo.showView(); } }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { - var checked = this.getSearcher().hasChecked(); - var val = { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () { + const checked = this.getSearcher().hasChecked(); + const val = { type: BI.Selection.Multi, - value: checked ? { 1: 1 } : {} + value: checked ? { 1: 1 } : {}, }; - this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); + this.getSearcher().setState( + checked ? BI.Selection.Multi : BI.Selection.None + ); self.numberCounter.setButtonChecked(val); - self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (isSearching()) { return; } @@ -209,12 +256,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self.populate(); - self.fireEvent(BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW); + self.fireEvent(MultiTreeCombo.EVENT_BEFORE_POPUPVIEW); }); - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => { if (isSearching()) { self._stopEditing(); - self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeCombo.EVENT_CONFIRM); } else { if (isPopupView()) { self._stopEditing(); @@ -222,23 +270,18 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { if (clear === true) { self.storeValue = { value: {} }; } - self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeCombo.EVENT_CONFIRM); } } clear = false; change = false; }); - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW); + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { + self.fireEvent(MultiTreeCombo.EVENT_AFTER_HIDEVIEW); }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button" - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -247,13 +290,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ + this.numberCounter = createWidget({ type: "bi.multi_select_check_selected_switcher", el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { - type: "bi.multi_tree_check_pane" + type: "bi.multi_tree_check_pane", }, masker: { offset: { @@ -265,43 +308,56 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { }, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, - value: { value: o.value || {} } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); - } + value: { value: o.value || {} }, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - if (want2showCounter === false) { - want2showCounter = true; + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - if (isInit === true) { - want2showCounter = null; - showCounter(); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + if (want2showCounter === false) { + want2showCounter = true; + } + if (isInit === true) { + want2showCounter = null; + showCounter(); + } } - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -309,85 +365,76 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, - bottom: 0 + bottom: 0, } - ] + ], }); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue.value = v || {}; this.combo.setValue({ - value: v || {} + value: v || {}, }); this.numberCounter.setValue({ - value: v || {} + value: v || {}, }); - }, + } - getSearcher: function () { + getSearcher() { return this.trigger.getSearcher(); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, + getValue() { + return deepClone(this.storeValue.value); + } - populate: function () { + populate() { this.combo.populate(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiTreeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiTreeCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiTreeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; - -BI.shortcut("bi.multi_tree_combo", BI.MultiTreeCombo); +} diff --git a/src/widget/multitree/multi.tree.insert.combo.js b/src/widget/multitree/multi.tree.insert.combo.js index acacbb875..12670343d 100644 --- a/src/widget/multitree/multi.tree.insert.combo.js +++ b/src/widget/multitree/multi.tree.insert.combo.js @@ -1,34 +1,58 @@ -/** - * 可以往当前选中节点下添加新值的下拉树 - * @class BI.MultiTreeInsertCombo - * @extends BI.Single - */ - -BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.MultiTreeInsertCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + toPix, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + deepClone +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane"; +import { MultiTreePopup } from "./multi.tree.popup"; +import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; +import { TriggerIconButton } from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; + +@shortcut() +export class MultiTreeInsertCombo extends Single { + static xtype = "bi.multi_tree_insert_combo"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-insert-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, isNeedAdjustWidth: true, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.MultiTreeInsertCombo.superclass._init.apply(this, arguments); - var isInit = false; - var want2showCounter = false; + _init() { + const self = this, + o = this.options; + super._init(...arguments); + let isInit = false; + let want2showCounter = false; this.storeValue = { value: o.value || {} }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_trigger", allowEdit: o.allowEdit, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), valueFormatter: o.valueFormatter, text: o.text, defaultText: o.defaultText, @@ -49,85 +73,94 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { type: "bi.multi_tree_search_insert_pane", listeners: [ { - eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, - action: function () { - self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; + eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + action() { + self.storeValue.value[ + self.trigger.getSearcher().getKeyword() + ] = {}; self._assertShowValue(); // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self._stopEditing(); self._dataChange = true; - } - }, { - eventName: BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, - action: function () { + }, + }, + { + eventName: + MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, + action() { self._dataChange = true; - } + }, } - ] - } + ], + }, }, - value: { value: o.value || {} } - + value: { value: o.value || {} }, }); - 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", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { type: "bi.multi_tree_popup_view", - ref: function () { + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { + eventName: MultiTreePopup.EVENT_AFTERINIT, + action() { self.numberCounter.adjustView(); isInit = true; if (want2showCounter === true) { showCounter(); } - } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CHANGE, + action() { change = true; - var val = { + const val = { type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : {} + value: this.hasChecked() ? this.getValue() : {}, }; self.trigger.getSearcher().setState(val); self.numberCounter.setButtonChecked(val); self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.getValue()); + self.fireEvent( + MultiTreeInsertCombo.EVENT_CLICK_ITEM, + self.getValue() + ); self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, + action() { self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CLEAR, + action() { clear = true; self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); @@ -136,49 +169,51 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { }, isNeedAdjustWidth: o.isNeedAdjustWidth, value: { value: o.value || {} }, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); var change = false; - var clear = false; // 标识当前是否点击了清空 + var clear = false; // 标识当前是否点击了清空 - var isSearching = function () { + const isSearching = function () { return self.trigger.getSearcher().isSearching(); }; - var isPopupView = function () { + const isPopupView = function () { return self.combo.isViewVisible(); }; - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiTreeInsertCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiTreeInsertCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self.storeValue = { value: self.combo.getValue() }; this.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () { self.storeValue = { value: this.getValue() }; self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { if (isPopupView()) { self.combo.populate(); } }); - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_STOP); + self.fireEvent(MultiTreeInsertCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_SEARCHING); + this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => { + self.fireEvent(MultiTreeInsertCombo.EVENT_SEARCHING); }); function showCounter() { @@ -191,23 +226,28 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { self.numberCounter.setValue(self.storeValue); } - this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => { self.combo.toggle(); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { - var checked = this.getSearcher().hasChecked(); - var val = { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () { + const checked = this.getSearcher().hasChecked(); + const val = { type: BI.Selection.Multi, - value: checked ? { 1: 1 } : {} + value: checked ? { 1: 1 } : {}, }; - this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); + this.getSearcher().setState( + checked ? BI.Selection.Multi : BI.Selection.None + ); self.numberCounter.setButtonChecked(val); - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeInsertCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (isSearching()) { return; } @@ -221,12 +261,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self.populate(); - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW); + self.fireEvent(MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW); }); - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => { if (isSearching()) { self._stopEditing(); - self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM); } else { if (isPopupView()) { self._stopEditing(); @@ -234,20 +275,21 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { if (clear === true) { self.storeValue = { value: {} }; } - self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM); } } clear = false; change = false; }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + var triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "multi-select-trigger-icon-button" + cls: "multi-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -256,13 +298,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ + this.numberCounter = createWidget({ type: "bi.multi_select_check_selected_switcher", el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { - type: "bi.multi_tree_check_pane" + type: "bi.multi_tree_check_pane", }, itemsCreator: o.itemsCreator, masker: { @@ -274,43 +316,56 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - value: o.value + value: o.value, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - if (want2showCounter === false) { - want2showCounter = true; + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + if (want2showCounter === false) { + want2showCounter = true; + } + if (isInit === true) { + want2showCounter = null; + showCounter(); + } } - if (isInit === true) { - want2showCounter = null; - showCounter(); + ); + + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); } - }); - - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -318,89 +373,81 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, height: o.height, } - ] + ], }); - }, + } - _assertShowValue: function () { + _assertShowValue() { this.trigger.getSearcher().setState(this.storeValue); this.numberCounter.setButtonChecked(this.storeValue); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - getSearcher: function () { + getSearcher() { return this.trigger.getSearcher(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue.value = v || {}; this.combo.setValue({ - value: v || {} + value: v || {}, }); this.numberCounter.setValue({ - value: v || {} + value: v || {}, }); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, + getValue() { + return deepClone(this.storeValue.value); + } - populate: function () { + populate() { this.combo.populate(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiTreeInsertCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiTreeInsertCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiTreeInsertCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiTreeInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - -BI.shortcut("bi.multi_tree_insert_combo", BI.MultiTreeInsertCombo); +} diff --git a/src/widget/multitree/multi.tree.list.combo.js b/src/widget/multitree/multi.tree.list.combo.js index a3a016179..056fbd5fc 100644 --- a/src/widget/multitree/multi.tree.list.combo.js +++ b/src/widget/multitree/multi.tree.list.combo.js @@ -1,38 +1,68 @@ -/** - * 选中节点不影响父子节点状态的下拉树 - * @class BI.MultiTreeListCombo - * @extends BI.Single - */ - -BI.MultiTreeListCombo = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.MultiTreeListCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + toPix, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + deepClone +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane"; +import { MultiTreePopup } from "./multi.tree.popup"; +import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; +import { + TriggerIconButton, + ListPartTree, + ListDisplayTree, + Listasynctree +} from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; + +@shortcut() +export class MultiTreeListCombo extends Single { + static xtype = "bi.multi_tree_list_combo"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-list-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, allowInsertValue: true, isNeedAdjustWidth: true, text: "", }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.MultiTreeListCombo.superclass._init.apply(this, arguments); - var isInit = false; - var want2showCounter = false; + _init() { + const self = this, + o = this.options; + super._init(...arguments); + let isInit = false; + let want2showCounter = false; this.storeValue = { value: o.value || [] }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_trigger", allowEdit: o.allowEdit, text: o.text, defaultText: o.defaultText, watermark: o.watermark, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), valueFormatter: o.valueFormatter, masker: { offset: { @@ -46,96 +76,110 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { type: "bi.multi_list_tree_searcher", itemsCreator: o.itemsCreator, popup: { - type: o.allowInsertValue ? "bi.multi_tree_search_insert_pane" : "bi.multi_tree_search_pane", + type: o.allowInsertValue + ? "bi.multi_tree_search_insert_pane" + : "bi.multi_tree_search_pane", el: { - type: "bi.list_part_tree" + type: ListPartTree.xtype, }, - listeners: [{ - eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, - action: function () { - self.storeValue.value.unshift([self.trigger.getSearcher().getKeyword()]); - self._assertShowValue(); - // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 - self.combo.setValue(self.storeValue); - self.numberCounter.setValue(self.storeValue); - self._stopEditing(); - self._dataChange = true; + listeners: [ + { + eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + action() { + self.storeValue.value.unshift([ + self.trigger.getSearcher().getKeyword() + ]); + self._assertShowValue(); + // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 + self.combo.setValue(self.storeValue); + self.numberCounter.setValue(self.storeValue); + self._stopEditing(); + self._dataChange = true; + }, } - }] - } + ], + }, }, switcher: { el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { type: "bi.multi_tree_check_pane", el: { - type: "bi.list_display_tree" + type: ListDisplayTree.xtype, }, - itemsCreator: o.itemsCreator - } + itemsCreator: o.itemsCreator, + }, }, - value: this.storeValue + value: this.storeValue, }); - 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", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { - type: "bi.multi_tree_popup_view", - ref: function () { + type: MultiTreePopup.xtype, + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, el: { - type: "bi.list_async_tree" + type: Listasynctree.xtype, }, - listeners: [{ - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { - self.numberCounter.adjustView(); - isInit = true; - if (want2showCounter === true) { - showCounter(); - } - } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { - change = true; - var val = { - type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : [] - }; - self.trigger.getSearcher().setState(val); - self.numberCounter.setButtonChecked(val); - self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.getValue()); - self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { - self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { - clear = true; - self._dataChange = true; - self.setValue(); - self._defaultState(); + listeners: [ + { + eventName: MultiTreePopup.EVENT_AFTERINIT, + action() { + self.numberCounter.adjustView(); + isInit = true; + if (want2showCounter === true) { + showCounter(); + } + }, + }, + { + eventName: MultiTreePopup.EVENT_CHANGE, + action() { + change = true; + const val = { + type: BI.Selection.Multi, + value: this.hasChecked() ? this.getValue() : [], + }; + self.trigger.getSearcher().setState(val); + self.numberCounter.setButtonChecked(val); + self.storeValue = { value: self.combo.getValue() }; + self.fireEvent( + MultiTreeListCombo.EVENT_CLICK_ITEM, + self.getValue() + ); + self._dataChange = true; + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, + action() { + self.combo.hideView(); + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CLEAR, + action() { + clear = true; + self._dataChange = true; + self.setValue(); + self._defaultState(); + }, } - }], + ], itemsCreator: o.itemsCreator, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); @@ -144,49 +188,51 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { }, isNeedAdjustWidth: o.isNeedAdjustWidth, value: this.storeValue, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); var change = false; - var clear = false; // 标识当前是否点击了清空 + var clear = false; // 标识当前是否点击了清空 - var isSearching = function () { + const isSearching = function () { return self.trigger.getSearcher().isSearching(); }; - var isPopupView = function () { + const isPopupView = function () { return self.combo.isViewVisible(); }; - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiTreeListCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiTreeListCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiTreeListCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiTreeListCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self.storeValue = { value: self.combo.getValue() }; this.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () { self.storeValue = { value: this.getValue() }; self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { if (isPopupView()) { self.combo.populate(); } }); - self.fireEvent(BI.MultiTreeListCombo.EVENT_STOP); + self.fireEvent(MultiTreeListCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiTreeListCombo.EVENT_SEARCHING); + this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => { + self.fireEvent(MultiTreeListCombo.EVENT_SEARCHING); }); function showCounter() { @@ -199,23 +245,28 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { self.numberCounter.setValue(self.storeValue); } - this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => { self.combo.toggle(); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { - var checked = this.getSearcher().hasChecked(); - var val = { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () { + const checked = this.getSearcher().hasChecked(); + const val = { type: BI.Selection.Multi, - value: checked ? { 1: 1 } : {} + value: checked ? { 1: 1 } : {}, }; - this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); + this.getSearcher().setState( + checked ? BI.Selection.Multi : BI.Selection.None + ); self.numberCounter.setButtonChecked(val); - self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeListCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (isSearching()) { return; } @@ -229,12 +280,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self.populate(); - self.fireEvent(BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW); + self.fireEvent(MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW); }); - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => { if (isSearching()) { self.trigger.stopEditing(); - self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM); } else { if (isPopupView()) { self._stopEditing(); @@ -242,20 +294,21 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { if (clear === true) { self.storeValue = { value: [] }; } - self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM); } } clear = false; change = false; }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + var triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "multi-select-trigger-icon-button" + cls: "multi-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -264,13 +317,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ + this.numberCounter = createWidget({ type: "bi.multi_select_check_selected_switcher", el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { - type: "bi.multi_tree_check_pane" + type: "bi.multi_tree_check_pane", }, itemsCreator: o.itemsCreator, masker: { @@ -282,131 +335,138 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - value: o.value - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); - } + value: o.value, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - if (want2showCounter === false) { - want2showCounter = true; + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - if (isInit === true) { - want2showCounter = null; - showCounter(); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + if (want2showCounter === false) { + want2showCounter = true; + } + if (isInit === true) { + want2showCounter = null; + showCounter(); + } } - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - 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 - }, { - el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0, }, - right: o.height, - top: 0, - height: o.height, - }] + { + el: { + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], + }, + right: o.height, + top: 0, + height: o.height, + } + ], }); - }, + } - _assertShowValue: function () { + _assertShowValue() { this.trigger.getSearcher().setState(this.storeValue); this.numberCounter.setButtonChecked(this.storeValue); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - getSearcher: function () { + getSearcher() { return this.trigger.getSearcher(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue.value = v || []; this.combo.setValue({ - value: v || [] + value: v || [], }); this.numberCounter.setValue({ - value: v || [] + value: v || [], }); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, + getValue() { + return deepClone(this.storeValue.value); + } - populate: function () { + populate() { this.combo.populate(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiTreeListCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiTreeListCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiTreeListCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeListCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiTreeListCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeListCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - -BI.shortcut("bi.multi_tree_list_combo", BI.MultiTreeListCombo); +} diff --git a/src/widget/multitree/multi.tree.popup.js b/src/widget/multitree/multi.tree.popup.js index 970c76cc6..aeb1ced3d 100644 --- a/src/widget/multitree/multi.tree.popup.js +++ b/src/widget/multitree/multi.tree.popup.js @@ -1,106 +1,108 @@ -/** - * 带加载的多选下拉面板 - * @class BI.MultiTreePopup - * @extends BI.Pane - */ -BI.MultiTreePopup = BI.inherit(BI.Pane, { - - _defaultConfig: function () { - return BI.extend(BI.MultiTreePopup.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, emptyFn, createWidget, i18nText } from "@/core"; +import { Pane } from "@/base"; +import { Asynctree, MultiPopupView, TreeView } from "@/case"; + +@shortcut() +export class MultiTreePopup extends Pane { + static xtype = "bi.multi_tree_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + static EVENT_AFTERINIT = "EVENT_AFTERINIT"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-popup", maxWidth: "auto", minWidth: 140, maxHeight: 400, - onLoaded: BI.emptyFn, + onLoaded: emptyFn, el: { - type: "bi.async_tree" - } + type: Asynctree.xtype, + }, }); - }, + } - _init: function () { - BI.MultiTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options, v = opts.value; + const self = this, + opts = this.options, + v = opts.value; this.selectedValues = {}; - this.tree = BI.createWidget(opts.el, { - type: "bi.async_tree", + this.tree = createWidget(opts.el, { + type: Asynctree.xtype, showLine: opts.showLine, height: 400, cls: "popup-view-tree", itemsCreator: opts.itemsCreator, onLoaded: opts.onLoaded, - value: v.value || {} + value: v.value || {}, }); - this.popupView = BI.createWidget({ - type: "bi.multi_popup_view", + this.popupView = createWidget({ + type: MultiPopupView.xtype, element: this, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, - buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], - el: this.tree + buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")], + el: this.tree, }); - this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { - switch (index) { + this.popupView.on( + MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, + index => { + switch (index) { case 0: - self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CLEAR); + self.fireEvent(MultiTreePopup.EVENT_CLICK_CLEAR); break; case 1: - self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CONFIRM); + self.fireEvent(MultiTreePopup.EVENT_CLICK_CONFIRM); break; + } } - }); + ); - this.tree.on(BI.TreeView.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiTreePopup.EVENT_CHANGE); + this.tree.on(TreeView.EVENT_CHANGE, () => { + self.fireEvent(MultiTreePopup.EVENT_CHANGE); }); - this.tree.on(BI.TreeView.EVENT_AFTERINIT, function () { - self.fireEvent(BI.MultiTreePopup.EVENT_AFTERINIT); + this.tree.on(TreeView.EVENT_AFTERINIT, () => { + self.fireEvent(MultiTreePopup.EVENT_AFTERINIT); }); + } - }, - - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); this.tree.setSelectedValue(v.value); - }, + } - populate: function (config) { + populate(config) { this.tree.stroke(config); - }, + } - hasChecked: function () { + hasChecked() { return this.tree.hasChecked(); - }, + } - setDirection: function (direction, position) { + setDirection(direction, position) { this.popupView.setDirection(direction, position); - }, + } - resetHeight: function (h) { + resetHeight(h) { this.popupView.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.popupView.resetWidth(w); } -}); - -BI.MultiTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiTreePopup.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiTreePopup.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; -BI.MultiTreePopup.EVENT_AFTERINIT = "EVENT_AFTERINIT"; - - -BI.shortcut("bi.multi_tree_popup_view", BI.MultiTreePopup); +} diff --git a/src/widget/multitree/trigger/multi.tree.button.checkselected.js b/src/widget/multitree/trigger/multi.tree.button.checkselected.js index 5efd65b2e..7c8e95444 100644 --- a/src/widget/multitree/trigger/multi.tree.button.checkselected.js +++ b/src/widget/multitree/trigger/multi.tree.button.checkselected.js @@ -1,67 +1,80 @@ -/** - * 查看已选按钮 - * Created by guy on 15/11/3. - * @class BI.MultiTreeCheckSelectedButton - * @extends BI.Single - */ -BI.MultiTreeCheckSelectedButton = BI.inherit(BI.Single, { +import { + shortcut, + extend, + emptyFn, + createWidget, + i18nText, + Controller, + size +} from "@/core"; +import { Single, TextButton, IconButton } from "@/base"; +import { MultiSelectCheckSelectedButton } from "../../multiselect/trigger/button.checkselected"; - _defaultConfig: function () { - return BI.extend(BI.MultiTreeCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiTreeCheckSelectedButton extends Single { + static xtype = "bi.multi_tree_check_selected_button"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-check-selected-button", - itemsCreator: BI.emptyFn + itemsCreator: emptyFn, }); - }, + } - _init: function () { - BI.MultiTreeCheckSelectedButton.superclass._init.apply(this, arguments); - var self = this; - this.indicator = BI.createWidget({ - type: "bi.icon_button", + _init() { + super._init(...arguments); + const self = this; + this.indicator = createWidget({ + type: IconButton.xtype, cls: "check-font trigger-check-selected icon-size-12", width: 16, height: 16, - stopPropagation: true + stopPropagation: true, }); - this.checkSelected = BI.createWidget({ - type: "bi.text_button", + this.checkSelected = createWidget({ + type: TextButton.xtype, cls: "bi-high-light-background trigger-check-text", invisible: true, hgap: 4, - text: BI.i18nText("BI-Check_Selected"), + text: i18nText("BI-Check_Selected"), textAlign: "center", }); - this.checkSelected.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.checkSelected.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.checkSelected.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments); + this.checkSelected.on(TextButton.EVENT_CHANGE, function () { + self.fireEvent( + MultiSelectCheckSelectedButton.EVENT_CHANGE, + arguments + ); }); - BI.createWidget({ + createWidget({ type: "bi.horizontal", element: this, - items: [this.indicator, this.checkSelected] + items: [this.indicator, this.checkSelected], }); - this.element.hover(function () { - self.indicator.setVisible(false); - self.checkSelected.setVisible(true); - }, function () { - self.indicator.setVisible(true); - self.checkSelected.setVisible(false); - }); + this.element.hover( + () => { + self.indicator.setVisible(false); + self.checkSelected.setVisible(true); + }, + () => { + self.indicator.setVisible(true); + self.checkSelected.setVisible(false); + } + ); this.setVisible(false); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); - var show = BI.size(v.value) > 0; + const show = size(v.value) > 0; this.setVisible(show); } -}); - -BI.MultiTreeCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_tree_check_selected_button", BI.MultiTreeCheckSelectedButton); +} diff --git a/src/widget/multitree/trigger/multi.tree.search.insert.pane.js b/src/widget/multitree/trigger/multi.tree.search.insert.pane.js index 345d8dab2..bb0a8f219 100644 --- a/src/widget/multitree/trigger/multi.tree.search.insert.pane.js +++ b/src/widget/multitree/trigger/multi.tree.search.insert.pane.js @@ -1,129 +1,148 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.MultiTreeSearchInsertPane - * @extends BI.Pane - */ +import { + shortcut, + Widget, + i18nText, + extend, + Controller, + AbsoluteLayout, + isEmptyArray +} from "@/core"; +import { TreeView, PartTree } from "@/case"; +import { TextButton } from "@/base"; -BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiTreeSearchInsertPane extends Widget { + static xtype = "bi.multi_tree_search_insert_pane"; - constants: { - height: 24, - }, - - props: { + props = { baseCls: "bi-multi-tree-search-insert-pane bi-card", - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - el: { - type: "bi.part_tree" - } - }, + el: { type: PartTree.xtype }, + }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - render: function () { - var self = this, opts = this.options; + render() { + const self = this, + opts = this.options; return { - type: "bi.absolute", + type: AbsoluteLayout.xtype, items: [ { el: { - type: "bi.text_button", + type: TextButton.xtype, invisible: true, - ref: function (_ref) { + ref(_ref) { self.addTip = _ref; }, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), + text: i18nText("BI-Basic_Click_To_Add_Text", ""), height: this.constants.height, cls: "bi-high-light", - handler: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); - } + handler() { + self.fireEvent( + MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + opts.keywordGetter() + ); + }, }, top: 5, left: 0, - right: 0 - }, { - el: BI.extend({ - type: "bi.part_tree", - tipText: BI.i18nText("BI-No_Select"), - itemsCreator: function (op, callback) { - op.keyword = opts.keywordGetter(); - opts.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(opts.keywordGetter(), res.items); - }); - }, - ref: function (_ref) { - self.partTree = _ref; - }, - value: opts.value, - listeners: [ - { - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.TreeView.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); - } - }, { - eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, - action: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE); + right: 0, + }, + { + el: extend( + { + type: PartTree.xtype, + tipText: i18nText("BI-No_Select"), + itemsCreator(op, callback) { + op.keyword = opts.keywordGetter(); + opts.itemsCreator(op, res => { + callback(res); + self.setKeyword( + opts.keywordGetter(), + res.items + ); + }); + }, + ref(_ref) { + self.partTree = _ref; + }, + value: opts.value, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action() { + self.fireEvent( + Controller.EVENT_CHANGE, + arguments + ); + }, + }, + { + eventName: TreeView.EVENT_CHANGE, + action() { + self.fireEvent( + MultiTreeSearchInsertPane.EVENT_CHANGE + ); + }, + }, + { + eventName: PartTree.EVENT_CLICK_TREE_NODE, + action() { + self.fireEvent( + MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE + ); + }, } - } - ] - }, opts.el), + ], + }, + opts.el + ), left: 0, top: 0, bottom: 0, - right: 0 + right: 0, } - ] + ], }; - }, + } - setKeyword: function (keyword, nodes) { - var isAddTipVisible = BI.isEmptyArray(nodes); + setKeyword(keyword, nodes) { + const isAddTipVisible = isEmptyArray(nodes); this.addTip.setVisible(isAddTipVisible); this.partTree.setVisible(!isAddTipVisible); - isAddTipVisible && this.addTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); - }, + isAddTipVisible && + this.addTip.setText( + i18nText("BI-Basic_Click_To_Add_Text", keyword) + ); + } - hasChecked: function () { + hasChecked() { return this.partTree.hasChecked(); - }, + } - setValue: function (v) { + setValue(v) { this.setSelectedValue(v.value); - }, + } - setSelectedValue: function (v) { + setSelectedValue(v) { v || (v = {}); this.partTree.setSelectedValue(v); - }, + } - getValue: function () { + getValue() { return this.partTree.getValue(); - }, + } - empty: function () { + empty() { this.partTree.empty(); - }, - - populate: function (op) { - this.partTree.stroke.apply(this.partTree, arguments); } -}); - -BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; -BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - -BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane); + populate(op) { + this.partTree.stroke(...arguments); + } +} diff --git a/src/widget/multitree/trigger/multi.tree.search.pane.js b/src/widget/multitree/trigger/multi.tree.search.pane.js index 82c221d18..bfea3f11b 100644 --- a/src/widget/multitree/trigger/multi.tree.search.pane.js +++ b/src/widget/multitree/trigger/multi.tree.search.pane.js @@ -1,84 +1,84 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.MultiTreeSearchPane - * @extends BI.Pane - */ +import { shortcut, extend, i18nText, Controller } from "@/core"; +import { Pane } from "@/base"; +import { TreeView, PartTree } from "@/case"; -BI.MultiTreeSearchPane = BI.inherit(BI.Pane, { +@shortcut() +export class MultiTreeSearchPane extends Pane { + static xtype = "bi.multi_tree_search_pane"; - props: { - baseCls: "bi-multi-tree-search-pane bi-card", - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn - }, + props = { baseCls: "bi-multi-tree-search-pane bi-card" }; - render: function () { - var self = this, opts = this.options; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - return BI.extend({ - type: "bi.part_tree", - element: this, - tipText: BI.i18nText("BI-No_Select"), - itemsCreator: function (op, callback) { - op.keyword = opts.keywordGetter(); - opts.itemsCreator(op, callback); - }, - value: opts.value, - listeners: [ - { - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.TreeView.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiTreeSearchPane.EVENT_CHANGE); - } - }, { - eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, - action: function () { - self.fireEvent(BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE); + render() { + const self = this, + opts = this.options; + + return extend( + { + type: PartTree.xtype, + element: this, + tipText: i18nText("BI-No_Select"), + itemsCreator(op, callback) { + op.keyword = opts.keywordGetter(); + opts.itemsCreator(op, callback); + }, + value: opts.value, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action() { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }, + }, + { + eventName: TreeView.EVENT_CHANGE, + action() { + self.fireEvent(MultiTreeSearchPane.EVENT_CHANGE); + }, + }, + { + eventName: PartTree.EVENT_CLICK_TREE_NODE, + action() { + self.fireEvent( + MultiTreeSearchPane.EVENT_CLICK_TREE_NODE + ); + }, } - } - ], - ref: function (_ref) { - self.partTree = _ref; - } - }, opts.el); - }, + ], + ref(_ref) { + self.partTree = _ref; + }, + }, + opts.el + ); + } - hasChecked: function () { + hasChecked() { return this.partTree.hasChecked(); - }, + } - setValue: function (v) { + setValue(v) { this.setSelectedValue(v.value); - }, + } - setSelectedValue: function (v) { + setSelectedValue(v) { v || (v = {}); this.partTree.setSelectedValue(v); - }, + } - getValue: function () { + getValue() { return this.partTree.getValue(); - }, + } - empty: function () { + empty() { this.partTree.empty(); - }, - - populate: function (op) { - this.partTree.stroke.apply(this.partTree, arguments); } -}); -BI.MultiTreeSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.MultiTreeSearchPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiTreeSearchPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; -BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - -BI.shortcut("bi.multi_tree_search_pane", BI.MultiTreeSearchPane); + populate(op) { + this.partTree.stroke(...arguments); + } +} diff --git a/src/widget/multitree/trigger/searcher.list.multi.tree.js b/src/widget/multitree/trigger/searcher.list.multi.tree.js index 8c54afe63..2356c0971 100644 --- a/src/widget/multitree/trigger/searcher.list.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.list.multi.tree.js @@ -1,140 +1,168 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiListTreeSearcher - * @extends Widget - */ -BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiListTreeSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + isNotNull, + isNumber, + size, + each, + last +} from "@/core"; +import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect"; +import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect"; +import { Searcher } from "@/base"; +import { SimpleStateEditor } from "@/case"; +import { MultiTreeSearchPane } from "./multi.tree.search.pane"; + +@shortcut() +export class MultiListTreeSearcher extends Widget { + static xtype = "bi.multi_list_tree_searcher"; + + 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"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-list-tree-searcher", - itemsCreator: BI.emptyFn, - valueFormatter: function (v) { + itemsCreator: emptyFn, + valueFormatter(v) { return v; }, popup: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.MultiListTreeSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ - type: "bi.multi_select_editor", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget({ + type: MultiSelectEditor.xtype, height: o.height, text: o.text, defaultText: o.defaultText, watermark: o.watermark, el: { - type: "bi.simple_state_editor", - height: o.height + type: SimpleStateEditor.xtype, + height: o.height, }, - listeners: [{ - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); + listeners: [ + { + eventName: MultiSelectEditor.EVENT_FOCUS, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_BLUR); + }, } - }] + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback({ - keyword: self.editor.getValue() + keyword: self.editor.getValue(), }); }, el: this.editor, - popup: BI.extend({ - type: "bi.multi_tree_search_pane", - keywordGetter: function () { - return self.editor.getValue(); + popup: extend( + { + type: MultiTreeSearchPane.xtype, + keywordGetter() { + return self.editor.getValue(); + }, + itemsCreator(op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + value: o.value, }, - itemsCreator: function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.MultiListTreeSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiListTreeSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.MultiListTreeSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + self.fireEvent(MultiListTreeSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiListTreeSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiListTreeSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiListTreeSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiListTreeSearcher.EVENT_CHANGE, arguments); }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getValue(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setState: function (ob) { - var o = this.options; + setState(ob) { + const o = this.options; ob || (ob = {}); ob.value || (ob.value = []); - var count = 0; - if (BI.isNumber(ob)) { + let count = 0; + if (isNumber(ob)) { this.editor.setState(ob); - } else if (BI.size(ob.value) === 0) { + } else if (size(ob.value) === 0) { this.editor.setState(BI.Selection.None); } else { - var text = ""; - BI.each(ob.value, function (idx, path) { - var childValue = BI.last(path); - text += (path === "null" ? "" : (o.valueFormatter(childValue + "") || childValue) + "; "); + let text = ""; + each(ob.value, (idx, path) => { + const childValue = last(path); + text += + path === "null" + ? "" + : `${o.valueFormatter(`${childValue}`) || childValue + }; `; count++; }); @@ -144,45 +172,38 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { this.editor.setState(text); } } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - 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); + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.MultiListTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiListTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiListTreeSearcher.EVENT_START = "EVENT_START"; -BI.MultiListTreeSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiListTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.shortcut("bi.multi_list_tree_searcher", BI.MultiListTreeSearcher); +} diff --git a/src/widget/multitree/trigger/searcher.multi.tree.js b/src/widget/multitree/trigger/searcher.multi.tree.js index 1b2dc6983..cfc2a5201 100644 --- a/src/widget/multitree/trigger/searcher.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.multi.tree.js @@ -1,220 +1,260 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiTreeSearcher - * @extends Widget - */ -BI.MultiTreeSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiTreeSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + isNotNull, + isNumber, + size, + keys, + each, + isEmptyObject, Func +} from "@/core"; +import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect"; +import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect"; +import { MultiTreeSearchPane } from "./multi.tree.search.pane"; +import { Searcher } from "@/base"; +import { SimpleStateEditor } from "@/case"; + +@shortcut() +export class MultiTreeSearcher extends Widget { + static xtype = "bi.multi_tree_searcher"; + + static EVENT_SEARCHING = "EVENT_SEARCHING"; + 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_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-searcher", - itemsCreator: BI.emptyFn, - valueFormatter: function (v) { + itemsCreator: emptyFn, + valueFormatter(v) { return v; }, popup: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.MultiTreeSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget({ type: "bi.multi_select_editor", watermark: o.watermark, height: o.height, el: { - type: "bi.simple_state_editor", + type: SimpleStateEditor.xtype, text: o.text, defaultText: o.defaultText, - height: o.height + height: o.height, }, listeners: [ { - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); - } + eventName: MultiSelectEditor.EVENT_FOCUS, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_BLUR); + }, } - ] + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback({ - keyword: self.editor.getValue() + keyword: self.editor.getValue(), }); }, el: this.editor, - popup: BI.extend({ - type: "bi.multi_tree_search_pane", - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - listeners: [ - { - eventName: BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE, - action: function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, arguments); + popup: extend( + { + type: MultiTreeSearchPane.xtype, + keywordGetter() { + return self.editor.getValue(); + }, + itemsCreator(op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + listeners: [ + { + eventName: + MultiTreeSearchPane.EVENT_CLICK_TREE_NODE, + action() { + self.fireEvent( + MultiTreeSearcher.EVENT_CLICK_TREE_NODE, + arguments + ); + }, } - } - ], - 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.MultiTreeSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiTreeSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + self.fireEvent(MultiTreeSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiTreeSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiTreeSearcher.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.MultiTreeSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, function () { + const keywords = this.getKeywords(); + self.fireEvent(MultiTreeSearcher.EVENT_SEARCHING, keywords); }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getValue(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setState: function (ob) { - var o = this.options; + setState(ob) { + const o = this.options; ob || (ob = {}); ob.value || (ob.value = {}); - var count = 0; - if (BI.isNumber(ob)) { + let count = 0; + if (isNumber(ob)) { this.editor.setState(ob); - } else if (BI.size(ob.value) === 0) { + } else if (size(ob.value) === 0) { this.editor.setState(BI.Selection.None); } else { - var text = ""; - var value = ob.value; - var names = BI.Func.getSortedResult(BI.keys(value)); - BI.each(names, function (idx, name) { - var childNodes = getChildrenNode(value[name]); - text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? (BI.isEmptyObject(value[name]) ? "" : ":") : (":" + childNodes)) + "; "; + let text = ""; + const value = ob.value; + const names = BI.Func.getSortedResult(keys(value)); + each(names, (idx, name) => { + const childNodes = getChildrenNode(value[name]); + text += + `${(name === "null" + ? "" + : o.valueFormatter(`${name}`) || name) + + (childNodes === "" + ? isEmptyObject(value[name]) + ? "" + : ":" + : `:${childNodes}`) + }; `; if (childNodes === "") { count++; } }); if (count > 20) { - this.editor.setState(BI.Selection.Multi); + this.editor.setState(Selection.Multi); } else { this.editor.setState(text); } } function getChildrenNode(ob) { - var text = ""; - var index = 0, size = BI.size(ob); - var names = BI.Func.getSortedResult(BI.keys(ob)); - BI.each(names, function (idx, name) { + let text = ""; + const size = size(ob); + let index = 0; + + const names = Func.getSortedResult(keys(ob)); + each(names, (idx, name) => { index++; - var childNodes = getChildrenNode(ob[name]); - text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? "" : (":" + childNodes)) + (index === size ? "" : ","); + const childNodes = getChildrenNode(ob[name]); + text += + (name === "null" + ? "" + : o.valueFormatter(`${name}`) || name) + + (childNodes === "" ? "" : `:${childNodes}`) + + (index === size ? "" : ","); if (childNodes === "") { count++; } }); + return text; } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - 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); + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.MultiTreeSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiTreeSearcher.EVENT_START = "EVENT_START"; -BI.MultiTreeSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; -BI.shortcut("bi.multi_tree_searcher", BI.MultiTreeSearcher); +} diff --git a/src/widget/selecttree/nodes/node.first.plus.js b/src/widget/selecttree/nodes/node.first.plus.js index 378eac230..484128e4d 100644 --- a/src/widget/selecttree/nodes/node.first.plus.js +++ b/src/widget/selecttree/nodes/node.first.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreeFirstPlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-first-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, LogicFactory, Direction +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { FirstTreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreeFirstPlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_first_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-first-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.first_tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: FirstTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.height + iconWidth: o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_first_plus_group_node", BI.SelectTreeFirstPlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/nodes/node.last.plus.js b/src/widget/selecttree/nodes/node.last.plus.js index f8e764e10..572d66e55 100644 --- a/src/widget/selecttree/nodes/node.last.plus.js +++ b/src/widget/selecttree/nodes/node.last.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreeLastPlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-last-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, LogicFactory, Direction +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { LastTreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreeLastPlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_last_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-last-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreeLastPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.last_tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: LastTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.height + iconWidth: o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_last_plus_group_node", BI.SelectTreeLastPlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/nodes/node.mid.plus.js b/src/widget/selecttree/nodes/node.mid.plus.js index ddafe5704..670533dd5 100644 --- a/src/widget/selecttree/nodes/node.mid.plus.js +++ b/src/widget/selecttree/nodes/node.mid.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreeMidPlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-mid-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, Direction, LogicFactory +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { MidTreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreeMidPlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_mid_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-mid-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreeMidPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.mid_tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: MidTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.height + iconWidth: o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_mid_plus_group_node", BI.SelectTreeMidPlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/nodes/node.plus.js b/src/widget/selecttree/nodes/node.plus.js index d5cd39c66..e3e41de7f 100644 --- a/src/widget/selecttree/nodes/node.plus.js +++ b/src/widget/selecttree/nodes/node.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreePlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, LogicFactory +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { TreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreePlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreePlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: TreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.iconWrapperWidth || o.height + iconWidth: o.iconWrapperWidth || o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: 24, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + BI.Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: 24, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreePlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_plus_group_node", BI.SelectTreePlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/selecttree.combo.js b/src/widget/selecttree/selecttree.combo.js index 5095c120d..4e80f3c3b 100644 --- a/src/widget/selecttree/selecttree.combo.js +++ b/src/widget/selecttree/selecttree.combo.js @@ -1,11 +1,32 @@ /** - * @class BI.SelectTreeCombo - * @extends BI.Widget + * @class SelectTreeCombo + * @extends Widget */ -BI.SelectTreeCombo = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SelectTreeCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + createWidget, + Controller, + contains, + isArray, + toPix, + isKey, + isEmptyArray, + isEmptyString, + find, + isNull +} from "@/core"; +import { Combo } from "@/base"; +import { SingleTreeTrigger } from "@/widget/singletree/singletree.trigger"; +import { SelectTreePopup } from "./selecttree.popup"; + +@shortcut() +export class SelectTreeCombo extends Widget { + static xtype = "bi.select_tree_combo"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-tree-combo bi-border bi-border-radius", height: 24, text: "", @@ -13,70 +34,68 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, { value: "", allowClear: false, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SelectTreeCombo.superclass._init.apply(this, arguments); + _init() { + const self = this, o = this.options; + super._init(...arguments); - this.trigger = BI.createWidget({ - type: "bi.single_tree_trigger", + this.trigger = createWidget({ + type: SingleTreeTrigger.xtype, text: o.text, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), items: o.items, value: o.value, allowClear: o.allowClear, warningTitle: o.warningTitle, }); - this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () { - self._clear(); + this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => { + this._clear(); }); - this.popup = BI.createWidget({ - type: "bi.select_level_tree", + this.popup = createWidget({ + type: SelectTreePopup.xtype, items: o.items, - value: o.value + value: o.value, }); - this.combo = BI.createWidget({ - type: "bi.combo", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + this.combo = createWidget({ + type: Combo.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), container: o.container, element: this, adjustLength: 2, el: this.trigger, popup: { - el: this.popup - } + el: this.popup, + }, }); - this.combo.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.combo.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () { + this.popup.on(SelectTreePopup.EVENT_CHANGE, () => { self.setValue(self.popup.getValue()); self.combo.hideView(); }); - if (BI.isKey(o.value)) { + if (isKey(o.value)) { this._checkError(o.value); } - }, + } - _checkError: function (v) { - if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) { + _checkError(v) { + if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) { this.trigger.options.tipType = "success"; this.trigger.element.removeClass("error"); this.element.removeClass("error"); } else { - v = BI.isArray(v) ? v : [v]; - var result = BI.find(this.options.items, function (idx, item) { - return BI.contains(v, item.value); - }); - if (BI.isNull(result)) { + v = isArray(v) ? v : [v]; + const result = find(this.options.items, (idx, item) => contains(v, item.value)); + if (isNull(result)) { this.trigger.setTipType("warning"); this.element.removeClass("error").addClass("error"); this.trigger.element.removeClass("error").addClass("error"); @@ -86,27 +105,24 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, { this.element.removeClass("error"); } } - }, + } - _clear: function () { + _clear() { this.setValue([]); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.trigger.setValue(v); this.popup.setValue(v); this._checkError(v); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); - }, + } - populate: function (items) { + populate(items) { this.combo.populate(items); } -}); - - -BI.shortcut("bi.select_tree_combo", BI.SelectTreeCombo); +} diff --git a/src/widget/selecttree/selecttree.expander.js b/src/widget/selecttree/selecttree.expander.js index b708e4bb9..9220d8811 100644 --- a/src/widget/selecttree/selecttree.expander.js +++ b/src/widget/selecttree/selecttree.expander.js @@ -1,77 +1,86 @@ -/** - * @class BI.SelectTreeExpander - * @extends BI.Widget - */ -BI.SelectTreeExpander = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + createWidget, + Controller, + Events, + contains +} from "@/core"; +import { Expander } from "@/base"; - _defaultConfig: function () { - return BI.extend(BI.SelectTreeExpander.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SelectTreeExpander extends Widget { + static xtype = "bi.select_tree_expander"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-tree-expander", trigger: "", toggle: true, direction: "bottom", isDefaultInit: true, el: {}, - popup: {} + popup: {}, }); - }, + } - _init: function () { - BI.SelectTreeExpander.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.trigger = BI.createWidget(o.el); - this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.trigger = createWidget(o.el); + this.trigger.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.expander.setValue([]); } } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.expander = BI.createWidget({ - type: "bi.expander", + this.expander = createWidget({ + type: Expander.xtype, element: this, trigger: o.trigger, toggle: o.toggle, direction: o.direction, isDefaultInit: o.isDefaultInit, el: this.trigger, - popup: o.popup + popup: o.popup, }); - this.expander.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.expander.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { self.trigger.setSelected(false); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.expander.getAllLeaves(); - }, + } - setValue: function (v) { - if (BI.contains(v, this.trigger.getValue())) { + setValue(v) { + if (contains(v, this.trigger.getValue())) { this.trigger.setSelected(true); this.expander.setValue([]); } else { this.trigger.setSelected(false); this.expander.setValue(v); } - }, + } - getValue: function () { + getValue() { if (this.trigger.isSelected()) { return [this.trigger.getValue()]; } + return this.expander.getValue(); - }, + } - populate: function (items) { + populate(items) { this.expander.populate(items); } -}); - -BI.shortcut("bi.select_tree_expander", BI.SelectTreeExpander); \ No newline at end of file +} diff --git a/src/widget/selecttree/selecttree.popup.js b/src/widget/selecttree/selecttree.popup.js index cfce060ef..b9ea1e2e2 100644 --- a/src/widget/selecttree/selecttree.popup.js +++ b/src/widget/selecttree/selecttree.popup.js @@ -1,94 +1,109 @@ -/** - * @class BI.SelectTreePopup - * @extends BI.Pane - */ - -BI.SelectTreePopup = BI.inherit(BI.Pane, { - - _defaultConfig: function () { - return BI.extend(BI.SelectTreePopup.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + i18nText, + each, + createWidget, + Controller, + isArray, isNotEmptyArray, UUID, defaults, Tree, VerticalLayout +} from "@/core"; +import { Pane } from "@/base"; +import { BasicTreeItem, BasicTreeNode, LevelTree, TreeExpander } from "@/case"; + +@shortcut() +export class SelectTreePopup extends Pane { + static xtype = "bi.select_level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-level-tree", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), items: [], - value: "" + value: "", }); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this; - BI.each(nodes, function (i, node) { - var extend = { - layer: layer, + _formatItems(nodes, layer, pNode) { + const self = this; + each(nodes, (i, node) => { + const extend = { + layer, isFirstNode: i === 0, isLastNode: i === nodes.length - 1, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - pNode: pNode, + pNode, }; - node.id = node.id || BI.UUID(); - - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { - - extend.type = "bi.tree_node"; + node.id = node.id || UUID(); + + if ( + node.isParent === true || + node.parent === true || + isNotEmptyArray(node.children) + ) { + extend.type = BasicTreeNode.xtype; extend.selectable = true; - BI.defaults(node, extend); + defaults(node, extend); self._formatItems(node.children, layer + 1, node); } else { - extend.type = "bi.tree_item"; - BI.defaults(node, extend); + extend.type = BasicTreeItem.xtype; + defaults(node, extend); } }); + return nodes; - }, + } - _init: function () { - BI.SelectTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.tree = BI.createWidget({ - type: "bi.level_tree", + this.tree = createWidget({ + type: LevelTree.xtype, expander: { - type: "bi.tree_expander", + type: TreeExpander.xtype, // isDefaultInit: true, selectable: true, }, - items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0), + items: this._formatItems(Tree.transformToTreeFormat(o.items), 0), value: o.value, - chooseType: BI.Selection.Single + chooseType: Selection.Single, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, vgap: 5, - items: [this.tree] + items: [this.tree], }); - this.tree.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.tree.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.tree.on(BI.LevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.SelectTreePopup.EVENT_CHANGE); + this.tree.on(LevelTree.EVENT_CHANGE, () => { + self.fireEvent(SelectTreePopup.EVENT_CHANGE); }); this.check(); - }, + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, - - populate: function (items) { - BI.SelectTreePopup.superclass.populate.apply(this, arguments); - this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(items))); } -}); -BI.SelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.select_level_tree", BI.SelectTreePopup); + populate(items) { + super.populate(...arguments); + this.tree.populate( + this._formatItems(Tree.transformToTreeFormat(items)) + ); + } +} diff --git a/src/widget/singletree/singletree.combo.js b/src/widget/singletree/singletree.combo.js index 589c205c6..cfa92ea91 100644 --- a/src/widget/singletree/singletree.combo.js +++ b/src/widget/singletree/singletree.combo.js @@ -1,12 +1,35 @@ -/** - * @class BI.SingleTreeCombo - * @extends BI.Widget - */ -BI.SingleTreeCombo = BI.inherit(BI.Widget, { - - _defaultConfig: function (config) { - return BI.extend(BI.SingleTreeCombo.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-tree-combo " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), +import { + shortcut, + Widget, + extend, + createWidget, + toPix, + Controller, + isKey, + isNull, + isEmptyArray, + isEmptyString, + isArray, + contains, find +} from "@/core"; +import { Combo } from "@/base"; +import { SingleTreeTrigger } from "./singletree.trigger"; +import { SingleTreePopup } from "./singletree.popup"; + +@shortcut() +export class SingleTreeCombo extends Widget { + static xtype = "bi.single_tree_combo"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig(config) { + return extend(super._defaultConfig(...arguments), { + baseCls: + `bi-single-tree-combo ${ + config.simple + ? "bi-border-bottom" + : "bi-border bi-border-radius"}`, trigger: {}, height: 24, text: "", @@ -14,75 +37,79 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, { value: "", allowClear: false, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SingleTreeCombo.superclass._init.apply(this, arguments); + _init() { + const self = this, + o = this.options; + super._init(...arguments); - this.trigger = BI.createWidget(BI.extend({ - type: "bi.single_tree_trigger", - text: o.text, - defaultText: o.defaultText, - height: BI.toPix(o.height, 2), - items: o.items, - value: o.value, - allowClear: o.allowClear, - warningTitle: o.warningTitle, - }, o.trigger)); + this.trigger = createWidget( + extend( + { + type: SingleTreeTrigger.xtype, + text: o.text, + defaultText: o.defaultText, + height: toPix(o.height, 2), + items: o.items, + value: o.value, + allowClear: o.allowClear, + warningTitle: o.warningTitle, + }, + o.trigger + ) + ); - this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () { + this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => { self._clear(); }); - this.popup = BI.createWidget({ - type: "bi.single_level_tree", + this.popup = createWidget({ + type: SingleTreePopup.xtype, items: o.items, - value: o.value + value: o.value, }); - this.combo = BI.createWidget({ - type: "bi.combo", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + this.combo = createWidget({ + type: Combo.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), container: o.container, element: this, adjustLength: 2, el: this.trigger, popup: { - el: this.popup - } + el: this.popup, + }, }); - this.combo.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.combo.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { + self.fireEvent(SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments); }); - this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () { + this.popup.on(SingleTreePopup.EVENT_CHANGE, () => { self.setValue(self.popup.getValue()); self.combo.hideView(); - self.fireEvent(BI.SingleTreeCombo.EVENT_CHANGE); + self.fireEvent(SingleTreeCombo.EVENT_CHANGE); }); - if (BI.isKey(o.value)) { + if (isKey(o.value)) { this._checkError(o.value); } - }, + } - _checkError: function (v) { - if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) { + _checkError(v) { + if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) { this.trigger.options.tipType = "success"; this.trigger.element.removeClass("error"); this.element.removeClass("error"); } else { - v = BI.isArray(v) ? v : [v]; - var result = BI.find(this.options.items, function (idx, item) { - return BI.contains(v, item.value); - }); - if (BI.isNull(result)) { + v = isArray(v) ? v : [v]; + const result = find(this.options.items, (idx, item) => contains(v, item.value)); + if (isNull(result)) { this.trigger.setTipType("warning"); this.element.removeClass("error").addClass("error"); this.trigger.element.removeClass("error").addClass("error"); @@ -92,28 +119,24 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, { this.element.removeClass("error"); } } - }, + } - _clear: function () { + _clear() { this.setValue([]); - }, + } - populate: function (items) { + populate(items) { this.combo.populate(items); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.trigger.setValue(v); this.popup.setValue(v); this._checkError(v); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); } -}); - -BI.SingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.single_tree_combo", BI.SingleTreeCombo); +} diff --git a/src/widget/singletree/singletree.popup.js b/src/widget/singletree/singletree.popup.js index 6a73680af..7e4b6899d 100644 --- a/src/widget/singletree/singletree.popup.js +++ b/src/widget/singletree/singletree.popup.js @@ -1,66 +1,74 @@ -/** - * @class BI.SingleTreePopup - * @extends BI.Pane - */ +import { + shortcut, + extend, + i18nText, + createWidget, + Controller, + isArray, VerticalLayout +} from "@/core"; +import { Pane } from "@/base"; +import { LevelTree } from "@/case"; -BI.SingleTreePopup = BI.inherit(BI.Pane, { +@shortcut() +export class SingleTreePopup extends Pane { + static xtype = "bi.single_level_tree"; - _defaultConfig: function () { - return BI.extend(BI.SingleTreePopup.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-level-tree", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), items: [], - value: "" + value: "", }); - }, + } - _init: function () { - BI.SingleTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; - - this.tree = BI.createWidget({ + const self = this, + o = this.options; + + this.tree = createWidget({ type: "bi.level_tree", expander: { - isDefaultInit: true + isDefaultInit: true, }, items: o.items, value: o.value, - chooseType: BI.Selection.Single + chooseType: Selection.Single, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, vgap: 5, - items: [this.tree] + items: [this.tree], }); - this.tree.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.tree.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.tree.on(BI.LevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleTreePopup.EVENT_CHANGE); + this.tree.on(LevelTree.EVENT_CHANGE, () => { + self.fireEvent(SingleTreePopup.EVENT_CHANGE); }); this.check(); - }, + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, + } - populate: function (items) { - BI.SingleTreePopup.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this.tree.populate(items); } -}); - -BI.SingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_level_tree", BI.SingleTreePopup); \ No newline at end of file +} diff --git a/src/widget/singletree/singletree.trigger.js b/src/widget/singletree/singletree.trigger.js index 221c8b069..a328a147c 100644 --- a/src/widget/singletree/singletree.trigger.js +++ b/src/widget/singletree/singletree.trigger.js @@ -1,29 +1,41 @@ -/** - * @class BI.SingleTreeTrigger - * @extends BI.Trigger - */ +import { + shortcut, + extend, + emptyFn, + createWidget, + contains, + isArray, + some +} from "@/core"; +import { Trigger } from "@/base"; +import { SelectTextTrigger } from "@/case"; -BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class SingleTreeTrigger extends Trigger { + static xtype = "bi.single_tree_trigger"; - _defaultConfig: function () { - return BI.extend(BI.SingleTreeTrigger.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CLEAR = "EVENT_CLEAR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-tree-trigger", height: 24, text: "", items: [], value: "", allowClear: false, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, }); - }, + } - _init: function () { - BI.SingleTreeTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.trigger = BI.createWidget({ - type: "bi.select_text_trigger", + this.trigger = createWidget({ + type: SelectTextTrigger.xtype, element: this, text: o.text, defaultText: o.defaultText, @@ -36,50 +48,47 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { valueFormatter: o.valueFormatter, listeners: [ { - eventName: BI.SelectTextTrigger.EVENT_CLEAR, - action: function () { - self.fireEvent(BI.SingleTreeTrigger.EVENT_CLEAR); - } + eventName: SelectTextTrigger.EVENT_CLEAR, + action() { + self.fireEvent(SingleTreeTrigger.EVENT_CLEAR); + }, } - ] + ], }); - }, + } + + _checkTitle() { + const val = this.getValue(); + some(this.options.items, (i, item) => { + if (contains(val, item.value)) { + this.trigger.setTitle(item.text || item.value); - _checkTitle: function () { - var self = this, val = this.getValue(); - BI.any(this.options.items, function (i, item) { - if (BI.contains(val, item.value)) { - self.trigger.setTitle(item.text || item.value); return true; } }); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.options.value = v; this.trigger.setValue(v); this._checkTitle(); - }, + } - setTipType: function (v) { + setTipType(v) { this.options.tipType = v; this.trigger.setTipType(v); - }, + } - getValue: function () { + getValue() { return this.options.value || []; - }, + } - getTextor: function () { + getTextor() { return this.trigger.getTextor(); - }, + } - populate: function (items) { + populate(items) { this.trigger.populate(items); } - -}); - -BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR"; -BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger); +}