forked from fanruan/fineui
Browse Source
Merge in VISUAL/fineui from ~DAILER/fineui:es6 to es6 * commit '2bfd07879c342edab49b6a714a5972eb15a5c9de': KERNEL-14086 feat: widget/singletree、selecttreees6
Dailer-刘荣歆
2 years ago
32 changed files with 3098 additions and 2457 deletions
@ -1,113 +1,121 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* @class BI.MultiSelectCheckPane |
Widget, |
||||||
* @extends BI.Widget |
extend, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiSelectCheckPane = BI.inherit(BI.Widget, { |
createWidget, |
||||||
|
map, |
||||||
|
i18nText, |
||||||
|
VerticalAdaptLayout, VTapeLayout |
||||||
|
} from "@/core"; |
||||||
|
import { TextButton, Label } from "@/base"; |
||||||
|
import { DisplaySelectedList } from "./multiselect.display"; |
||||||
|
|
||||||
constants: { |
@shortcut() |
||||||
height: 12, |
export class MultiSelectCheckPane extends Widget { |
||||||
lgap: 10, |
static xtype = "bi.multi_select_check_pane"; |
||||||
tgap: 10, |
|
||||||
bgap: 5 |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
constants = { height: 12, lgap: 10, tgap: 10, bgap: 5 }; |
||||||
return BI.extend(BI.MultiSelectCheckPane.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
|
_defaultConfig() { |
||||||
|
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-multi-select-check-pane bi-background", |
baseCls: "bi-multi-select-check-pane bi-background", |
||||||
items: [], |
items: [], |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
onClickContinueSelect: BI.emptyFn |
onClickContinueSelect: emptyFn, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectCheckPane.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.storeValue = opts.value || {}; |
this.storeValue = opts.value || {}; |
||||||
this.display = BI.createWidget({ |
this.display = createWidget({ |
||||||
type: "bi.display_selected_list", |
type: DisplaySelectedList.xtype, |
||||||
items: opts.items, |
items: opts.items, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
op = BI.extend(op || {}, { |
op = extend(op || {}, { |
||||||
selectedValues: self.storeValue.value |
selectedValues: self.storeValue.value, |
||||||
}); |
}); |
||||||
if (self.storeValue.type === BI.Selection.Multi) { |
if (self.storeValue.type === BI.Selection.Multi) { |
||||||
callback({ |
callback({ |
||||||
items: BI.map(self.storeValue.value, function (i, v) { |
items: map(self.storeValue.value, (i, v) => { |
||||||
var txt = opts.valueFormatter(v) || v; |
const txt = opts.valueFormatter(v) || v; |
||||||
|
|
||||||
return { |
return { |
||||||
text: txt, |
text: txt, |
||||||
value: v, |
value: v, |
||||||
title: txt |
title: txt, |
||||||
}; |
}; |
||||||
}) |
}), |
||||||
}); |
}); |
||||||
|
|
||||||
return; |
return; |
||||||
} |
} |
||||||
opts.itemsCreator(op, callback); |
opts.itemsCreator(op, callback); |
||||||
} |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
this.continueSelect = BI.createWidget({ |
this.continueSelect = createWidget({ |
||||||
type: "bi.text_button", |
type: TextButton.xtype, |
||||||
title: BI.i18nText("BI-Continue_Select"), |
title: i18nText("BI-Continue_Select"), |
||||||
text: BI.i18nText("BI-Continue_Select"), |
text: i18nText("BI-Continue_Select"), |
||||||
cls: "multi-select-check-selected bi-high-light" |
cls: "multi-select-check-selected bi-high-light", |
||||||
}); |
}); |
||||||
|
|
||||||
this.continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { |
this.continueSelect.on(TextButton.EVENT_CHANGE, () => { |
||||||
opts.onClickContinueSelect(); |
opts.onClickContinueSelect(); |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vtape", |
type: VTapeLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
height: this.constants.height, |
{ |
||||||
el: { |
height: this.constants.height, |
||||||
type: "bi.vertical_adapt", |
el: { |
||||||
columnSize: ["auto", "auto"], |
type: VerticalAdaptLayout.xtype, |
||||||
cls: "multi-select-continue-select", |
columnSize: ["auto", "auto"], |
||||||
items: [ |
cls: "multi-select-continue-select", |
||||||
{ |
items: [ |
||||||
el: { |
{ |
||||||
type: "bi.label", |
el: { |
||||||
title: BI.i18nText("BI-Selected_Data"), |
type: Label.xtype, |
||||||
text: BI.i18nText("BI-Selected_Data") |
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", |
||||||
height: "fill", |
el: this.display, |
||||||
el: this.display, |
tgap: this.constants.bgap, |
||||||
tgap: this.constants.bgap |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.storeValue = v || {}; |
this.storeValue = v || {}; |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.display.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); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,106 +1,112 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* |
extend, |
||||||
* 查看已选弹出层的展示面板 |
emptyFn, |
||||||
* @class BI.DisplaySelectedList |
createWidget, |
||||||
* @extends BI.Widget |
VerticalLayout, |
||||||
*/ |
createItems |
||||||
BI.DisplaySelectedList = BI.inherit(BI.Pane, { |
} from "@/core"; |
||||||
|
import { Pane, ButtonGroup, Loader, IconTextItem } from "@/base"; |
||||||
|
import { ListPane } from "@/case"; |
||||||
|
|
||||||
constants: { |
@shortcut() |
||||||
height: 24, |
export class DisplaySelectedList extends Pane { |
||||||
lgap: 10 |
static xtype = "bi.display_selected_list"; |
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
constants = { height: 24, lgap: 10 }; |
||||||
return BI.extend(BI.DisplaySelectedList.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
|
_defaultConfig() { |
||||||
|
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-display-list", |
baseCls: "bi-display-list", |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
items: [] |
items: [], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.DisplaySelectedList.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.hasNext = false; |
this.hasNext = false; |
||||||
var cacheItems = []; |
let cacheItems = []; |
||||||
|
|
||||||
this.button_group = BI.createWidget({ |
this.button_group = createWidget({ |
||||||
type: "bi.list_pane", |
type: ListPane.xtype, |
||||||
element: this, |
element: this, |
||||||
el: { |
el: { |
||||||
type: "bi.loader", |
type: Loader.xtype, |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
logic: { |
logic: { |
||||||
dynamic: true, |
dynamic: true, |
||||||
scrolly: true |
scrolly: true, |
||||||
}, |
}, |
||||||
items: this._createItems(opts.items), |
items: this._createItems(opts.items), |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
layouts: [ |
layouts: [ |
||||||
{ |
{ |
||||||
type: "bi.vertical", |
type: VerticalLayout.xtype, |
||||||
lgap: 10 |
lgap: 10, |
||||||
} |
} |
||||||
] |
], |
||||||
}, |
}, |
||||||
itemsCreator: function (options, callback) { |
itemsCreator (options, callback) { |
||||||
if (options.times === 1) { |
if (options.times === 1) { |
||||||
cacheItems = []; |
cacheItems = []; |
||||||
} |
} |
||||||
|
|
||||||
if (cacheItems.length > 0) { |
if (cacheItems.length > 0) { |
||||||
var renderedItems = cacheItems.slice(0, 100); |
const renderedItems = cacheItems.slice(0, 100); |
||||||
cacheItems = cacheItems.slice(100); |
cacheItems = cacheItems.slice(100); |
||||||
self.hasNext = cacheItems.length > 0; |
self.hasNext = cacheItems.length > 0; |
||||||
callback(self._createItems(renderedItems)); |
callback(self._createItems(renderedItems)); |
||||||
|
|
||||||
return; |
return; |
||||||
} |
} |
||||||
|
|
||||||
opts.itemsCreator(options, function (ob) { |
opts.itemsCreator(options, ob => { |
||||||
self.hasNext = !!ob.hasNext; |
self.hasNext = !!ob.hasNext; |
||||||
var firstItemsCount = 100 + ob.items.length % 100; |
const firstItemsCount = 100 + (ob.items.length % 100); |
||||||
if (ob.items.length > 100) { |
if (ob.items.length > 100) { |
||||||
cacheItems = ob.items.slice(firstItemsCount); |
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; |
return self.hasNext; |
||||||
} |
}, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_createItems: function (items) { |
_createItems(items) { |
||||||
return BI.createItems(items, { |
return createItems(items, { |
||||||
type: "bi.icon_text_item", |
type: IconTextItem.xtype, |
||||||
cls: "cursor-default check-font icon-size-12 display-list-item bi-tips", |
cls: "cursor-default check-font icon-size-12 display-list-item bi-tips", |
||||||
once: true, |
once: true, |
||||||
invalid: true, |
invalid: true, |
||||||
selected: true, |
selected: true, |
||||||
height: this.constants.height, |
height: this.constants.height, |
||||||
logic: { |
logic: { |
||||||
dynamic: true |
dynamic: true, |
||||||
} |
}, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.button_group.empty(); |
this.button_group.empty(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
if (arguments.length === 0) { |
if (arguments.length === 0) { |
||||||
this.button_group.populate(); |
this.button_group.populate(); |
||||||
} else { |
} else { |
||||||
this.button_group.populate(this._createItems(items)); |
this.button_group.populate(this._createItems(items)); |
||||||
} |
} |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList); |
|
||||||
|
@ -1,185 +1,242 @@ |
|||||||
/** |
import { |
||||||
* 多选加载数据面板 |
shortcut, |
||||||
* Created by guy on 15/11/2. |
Widget, |
||||||
* @class BI.MultiSelectNoBarLoader |
extend, |
||||||
* @extends Widget |
emptyFn, |
||||||
*/ |
createWidget, |
||||||
BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, { |
isKey, |
||||||
|
map, |
||||||
_defaultConfig: function () { |
contains, |
||||||
return BI.extend(BI.MultiSelectNoBarLoader.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-loader", |
||||||
logic: { |
logic: { |
||||||
dynamic: true |
dynamic: true, |
||||||
}, |
}, |
||||||
el: { |
el: { |
||||||
height: 400 |
height: 400, |
||||||
}, |
}, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
onLoaded: BI.emptyFn, |
onLoaded: emptyFn, |
||||||
itemFormatter: BI.emptyFn, |
itemFormatter: emptyFn, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectNoBarLoader.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
var hasNext = false; |
opts = this.options; |
||||||
|
let hasNext = false; |
||||||
|
|
||||||
this.storeValue = opts.value || {}; |
this.storeValue = opts.value || {}; |
||||||
this._assertValue(this.storeValue); |
this._assertValue(this.storeValue); |
||||||
|
|
||||||
this.button_group = BI.createWidget(BI.extend({ |
this.button_group = createWidget( |
||||||
type: "bi.list_pane", |
extend( |
||||||
onLoaded: opts.onLoaded, |
{ |
||||||
el: { |
type: ListPane.xtype, |
||||||
type: "bi.loader", |
onLoaded: opts.onLoaded, |
||||||
isDefaultInit: false, |
el: { |
||||||
logic: { |
type: Loader.xtype, |
||||||
dynamic: true, |
isDefaultInit: false, |
||||||
scrolly: true |
logic: { |
||||||
}, |
dynamic: true, |
||||||
el: { |
scrolly: true, |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
}, |
||||||
behaviors: { |
el: { |
||||||
redmark: function () { |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
return true; |
behaviors: { |
||||||
} |
redmark() { |
||||||
|
return true; |
||||||
|
}, |
||||||
|
}, |
||||||
|
layouts: [ |
||||||
|
{ |
||||||
|
type: VerticalLayout.xtype, |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
}, |
}, |
||||||
layouts: [{ |
itemsCreator(op, callback) { |
||||||
type: "bi.vertical" |
const startValue = self._startValue; |
||||||
}] |
self.storeValue && |
||||||
} |
(op = extend(op || {}, { |
||||||
}, |
selectedValues: |
||||||
itemsCreator: function (op, callback) { |
isKey(startValue) && |
||||||
var startValue = self._startValue; |
self.storeValue.type === Selection.Multi |
||||||
self.storeValue && (op = BI.extend(op || {}, { |
? self.storeValue.value.concat( |
||||||
selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi |
startValue |
||||||
? self.storeValue.value.concat(startValue) : self.storeValue.value |
) |
||||||
})); |
: self.storeValue.value, |
||||||
opts.itemsCreator(op, function (ob) { |
})); |
||||||
hasNext = ob.hasNext; |
opts.itemsCreator(op, ob => { |
||||||
var firstItems = []; |
hasNext = ob.hasNext; |
||||||
if (op.times === 1 && self.storeValue) { |
let firstItems = []; |
||||||
var json = BI.map(self.storeValue.value, function (i, v) { |
if (op.times === 1 && self.storeValue) { |
||||||
var txt = opts.valueFormatter(v) || v; |
const json = map( |
||||||
return { |
self.storeValue.value, |
||||||
text: txt, |
(i, v) => { |
||||||
value: v, |
const txt = opts.valueFormatter(v) || v; |
||||||
title: txt, |
|
||||||
selected: self.storeValue.type === BI.Selection.Multi |
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; |
hasNext() { |
||||||
json.unshift({ |
return hasNext; |
||||||
text: txt, |
}, |
||||||
value: startValue, |
value: this.storeValue, |
||||||
title: txt, |
}, |
||||||
selected: true |
opts.el |
||||||
}); |
) |
||||||
} |
); |
||||||
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)); |
|
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: VerticalLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
items: [this.button_group], |
items: [this.button_group], |
||||||
vgap: 5 |
vgap: 5, |
||||||
}); |
}); |
||||||
|
|
||||||
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { |
this.button_group.on(Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { |
this.button_group.on(SelectList.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.MultiSelectNoBarLoader.EVENT_CHANGE, arguments); |
self.fireEvent(MultiSelectNoBarLoader.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_createItems: function (items) { |
_createItems(items) { |
||||||
return BI.map(items, (index, item) => { |
return map(items, (index, item) => { |
||||||
return { |
return { |
||||||
type: "bi.multi_select_item", |
type: MultiSelectItem.xtype, |
||||||
cls: "bi-list-item-active", |
cls: "bi-list-item-active", |
||||||
logic: this.options.logic, |
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, |
iconWrapperWidth: 36, |
||||||
...item, |
...item, |
||||||
...this.options.itemFormatter(item), |
...this.options.itemFormatter(item), |
||||||
}; |
}; |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_scrollToTop: function () { |
_scrollToTop() { |
||||||
var self = this; |
const self = this; |
||||||
BI.delay(function () { |
delay(() => { |
||||||
self.button_group.element.scrollTop(0); |
self.button_group.element.scrollTop(0); |
||||||
}, 30); |
}, 30); |
||||||
}, |
} |
||||||
|
|
||||||
_assertValue: function (val) { |
_assertValue(val) { |
||||||
val || (val = {}); |
val || (val = {}); |
||||||
val.type || (val.type = BI.Selection.Multi); |
val.type || (val.type = Selection.Multi); |
||||||
val.value || (val.value = []); |
val.value || (val.value = []); |
||||||
}, |
} |
||||||
|
|
||||||
setStartValue: function (v) { |
setStartValue(v) { |
||||||
this._startValue = v; |
this._startValue = v; |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.storeValue = v || {}; |
this.storeValue = v || {}; |
||||||
this._assertValue(this.storeValue); |
this._assertValue(this.storeValue); |
||||||
this.button_group.setValue(this.storeValue.value); |
this.button_group.setValue(this.storeValue.value); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return { |
return { |
||||||
type: BI.Selection.Multi, |
type: Selection.Multi, |
||||||
value: this.button_group.getValue() |
value: this.button_group.getValue(), |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
getAllButtons: function () { |
getAllButtons() { |
||||||
return this.button_group.getAllButtons(); |
return this.button_group.getAllButtons(); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.button_group.empty(); |
this.button_group.empty(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
if (BI.isNotNull(items)) { |
if (isNotNull(items)) { |
||||||
arguments[0] = this._createItems(items); |
arguments[0] = this._createItems(items); |
||||||
} |
} |
||||||
this.button_group.populate.apply(this.button_group, arguments); |
this.button_group.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
resetHeight: function (h) { |
|
||||||
this.button_group.element.css({ "max-height": BI.toPix(h) }); |
|
||||||
}, |
|
||||||
|
|
||||||
resetWidth: function () { |
|
||||||
|
|
||||||
|
resetHeight(h) { |
||||||
|
this.button_group.element.css({ "max-height": toPix(h) }); |
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE"; |
resetWidth() { |
||||||
BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader); |
} |
||||||
|
} |
||||||
|
@ -1,100 +1,113 @@ |
|||||||
/** |
import { |
||||||
* 带加载的多选下拉面板 |
shortcut, |
||||||
* @class BI.MultiSelectPopupView |
Widget, |
||||||
* @extends Widget |
extend, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiSelectPopupView = BI.inherit(BI.Widget, { |
createWidget, |
||||||
|
i18nText |
||||||
_defaultConfig: function () { |
} from "@/core"; |
||||||
return BI.extend(BI.MultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-popup-view", |
||||||
maxWidth: "auto", |
maxWidth: "auto", |
||||||
minWidth: 135, |
minWidth: 135, |
||||||
maxHeight: 400, |
maxHeight: 400, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
onLoaded: BI.emptyFn, |
onLoaded: emptyFn, |
||||||
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectPopupView.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_loader", |
type: MultiSelectLoader.xtype, |
||||||
itemsCreator: opts.itemsCreator, |
itemsCreator: opts.itemsCreator, |
||||||
itemHeight: opts.itemHeight, |
itemHeight: opts.itemHeight, |
||||||
valueFormatter: opts.valueFormatter, |
valueFormatter: opts.valueFormatter, |
||||||
itemFormatter: opts.itemFormatter, |
itemFormatter: opts.itemFormatter, |
||||||
onLoaded: opts.onLoaded, |
onLoaded: opts.onLoaded, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView = BI.createWidget({ |
this.popupView = createWidget({ |
||||||
type: "bi.multi_popup_view", |
type: MultiPopupView.xtype, |
||||||
stopPropagation: false, |
stopPropagation: false, |
||||||
maxWidth: opts.maxWidth, |
maxWidth: opts.maxWidth, |
||||||
minWidth: opts.minWidth, |
minWidth: opts.minWidth, |
||||||
maxHeight: opts.maxHeight, |
maxHeight: opts.maxHeight, |
||||||
element: this, |
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, |
el: this.loader, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { |
this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { |
||||||
self.fireEvent(BI.MultiSelectPopupView.EVENT_CHANGE); |
self.fireEvent(MultiSelectPopupView.EVENT_CHANGE); |
||||||
}); |
}); |
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { |
this.popupView.on( |
||||||
switch (index) { |
MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, |
||||||
case 0: |
index => { |
||||||
self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CLEAR); |
switch (index) { |
||||||
break; |
case 0: |
||||||
case 1: |
self.fireEvent(MultiSelectPopupView.EVENT_CLICK_CLEAR); |
||||||
self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM); |
break; |
||||||
break; |
case 1: |
||||||
|
self.fireEvent( |
||||||
|
MultiSelectPopupView.EVENT_CLICK_CONFIRM |
||||||
|
); |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
} |
} |
||||||
}); |
); |
||||||
}, |
} |
||||||
|
|
||||||
isAllSelected: function () { |
isAllSelected() { |
||||||
return this.loader.isAllSelected(); |
return this.loader.isAllSelected(); |
||||||
}, |
} |
||||||
|
|
||||||
setStartValue: function (v) { |
setStartValue(v) { |
||||||
this.loader.setStartValue(v); |
this.loader.setStartValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.popupView.setValue(v); |
this.popupView.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.popupView.getValue(); |
return this.popupView.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.popupView.populate.apply(this.popupView, arguments); |
this.popupView.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
resetHeight: function (h) { |
resetHeight(h) { |
||||||
this.popupView.resetHeight(h); |
this.popupView.resetHeight(h); |
||||||
}, |
} |
||||||
|
|
||||||
resetWidth: function (w) { |
resetWidth(w) { |
||||||
this.popupView.resetWidth(w); |
this.popupView.resetWidth(w); |
||||||
}, |
} |
||||||
|
|
||||||
setDirection: function (direction, position) { |
setDirection(direction, position) { |
||||||
this.popupView.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); |
|
||||||
|
@ -1,96 +1,109 @@ |
|||||||
/** |
import { |
||||||
* 带加载的多选下拉面板 |
shortcut, |
||||||
* @class BI.MultiSelectPopupView |
Widget, |
||||||
* @extends Widget |
extend, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiSelectNoBarPopupView = BI.inherit(BI.Widget, { |
createWidget, |
||||||
|
i18nText |
||||||
|
} from "@/core"; |
||||||
|
import { MultiPopupView } from "@/case"; |
||||||
|
import { MultiSelectNoBarLoader } from "./multiselect.loader.nobar"; |
||||||
|
|
||||||
_defaultConfig: function () { |
@shortcut() |
||||||
return BI.extend(BI.MultiSelectNoBarPopupView.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-popup-view", |
||||||
maxWidth: "auto", |
maxWidth: "auto", |
||||||
minWidth: 135, |
minWidth: 135, |
||||||
maxHeight: 400, |
maxHeight: 400, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
onLoaded: BI.emptyFn |
onLoaded: emptyFn, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectNoBarPopupView.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_no_bar_loader", |
type: MultiSelectNoBarLoader.xtype, |
||||||
itemsCreator: opts.itemsCreator, |
itemsCreator: opts.itemsCreator, |
||||||
itemHeight: opts.itemHeight, |
itemHeight: opts.itemHeight, |
||||||
valueFormatter: opts.valueFormatter, |
valueFormatter: opts.valueFormatter, |
||||||
itemFormatter: opts.itemFormatter, |
itemFormatter: opts.itemFormatter, |
||||||
onLoaded: opts.onLoaded, |
onLoaded: opts.onLoaded, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView = BI.createWidget({ |
this.popupView = createWidget({ |
||||||
type: "bi.multi_popup_view", |
type: MultiPopupView.xtype, |
||||||
stopPropagation: false, |
stopPropagation: false, |
||||||
maxWidth: opts.maxWidth, |
maxWidth: opts.maxWidth, |
||||||
minWidth: opts.minWidth, |
minWidth: opts.minWidth, |
||||||
maxHeight: opts.maxHeight, |
maxHeight: opts.maxHeight, |
||||||
element: this, |
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, |
el: this.loader, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { |
this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { |
||||||
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CHANGE); |
self.fireEvent(MultiSelectNoBarPopupView.EVENT_CHANGE); |
||||||
}); |
}); |
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { |
this.popupView.on( |
||||||
switch (index) { |
MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, |
||||||
case 0: |
index => { |
||||||
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR); |
switch (index) { |
||||||
break; |
case 0: |
||||||
case 1: |
self.fireEvent( |
||||||
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM); |
MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR |
||||||
break; |
); |
||||||
|
break; |
||||||
|
case 1: |
||||||
|
self.fireEvent( |
||||||
|
MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM |
||||||
|
); |
||||||
|
break; |
||||||
|
} |
||||||
} |
} |
||||||
}); |
); |
||||||
}, |
} |
||||||
|
|
||||||
setStartValue: function (v) { |
setStartValue(v) { |
||||||
this.loader.setStartValue(v); |
this.loader.setStartValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.popupView.setValue(v); |
this.popupView.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.popupView.getValue(); |
return this.popupView.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.popupView.populate.apply(this.popupView, arguments); |
this.popupView.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
resetHeight: function (h) { |
resetHeight(h) { |
||||||
this.popupView.resetHeight(h); |
this.popupView.resetHeight(h); |
||||||
}, |
} |
||||||
|
|
||||||
resetWidth: function (w) { |
resetWidth(w) { |
||||||
this.popupView.resetWidth(w); |
this.popupView.resetWidth(w); |
||||||
}, |
} |
||||||
|
|
||||||
setDirection: function (direction, position) { |
setDirection(direction, position) { |
||||||
this.popupView.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); |
|
||||||
|
@ -1,99 +1,109 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* 在搜索框中输入文本弹出的面板 |
Widget, |
||||||
* @class BI.MultiSelectSearchInsertPane |
extend, |
||||||
* @extends Widget |
emptyFn, |
||||||
*/ |
createWidget, |
||||||
|
i18nText, |
||||||
BI.MultiSelectSearchInsertPane = BI.inherit(BI.Widget, { |
Controller, VerticalFillLayout |
||||||
|
} from "@/core"; |
||||||
constants: { |
import { Label } from "@/base"; |
||||||
height: 24, |
import { MultiSelectSearchLoader } from "./multiselect.search.loader"; |
||||||
lgap: 10, |
|
||||||
tgap: 5 |
@shortcut() |
||||||
}, |
export class MultiSelectSearchInsertPane extends Widget { |
||||||
|
static xtype = "bi.multi_select_search_insert_pane"; |
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.MultiSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-search-pane bi-card", |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
keywordGetter: BI.emptyFn, |
keywordGetter: emptyFn, |
||||||
itemHeight: 24 |
itemHeight: 24, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectSearchInsertPane.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
|
o = this.options; |
||||||
|
|
||||||
this.addNotMatchTip = BI.createWidget({ |
this.addNotMatchTip = createWidget({ |
||||||
type: "bi.label", |
type: Label.xtype, |
||||||
text: BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), |
text: i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), |
||||||
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
cls: "bi-keyword-red-mark", |
cls: "bi-keyword-red-mark", |
||||||
hgap: 5, |
hgap: 5, |
||||||
}); |
}); |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_search_loader", |
type: MultiSelectSearchLoader.xtype, |
||||||
keywordGetter: o.keywordGetter, |
keywordGetter: o.keywordGetter, |
||||||
valueFormatter: o.valueFormatter, |
valueFormatter: o.valueFormatter, |
||||||
itemFormatter: o.itemFormatter, |
itemFormatter: o.itemFormatter, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
o.itemsCreator.apply(self, [op, function (res) { |
o.itemsCreator.apply(self, [ |
||||||
callback(res); |
op, |
||||||
self.setKeyword(o.keywordGetter()); |
function (res) { |
||||||
}]); |
callback(res); |
||||||
|
self.setKeyword(o.keywordGetter()); |
||||||
|
} |
||||||
|
]); |
||||||
}, |
}, |
||||||
itemHeight: o.itemHeight, |
itemHeight: o.itemHeight, |
||||||
value: o.value |
value: o.value, |
||||||
}); |
}); |
||||||
this.loader.on(BI.Controller.EVENT_CHANGE, function () { |
this.loader.on(Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
|
|
||||||
this.resizer = BI.createWidget({ |
this.resizer = createWidget({ |
||||||
type: "bi.vertical_fill", |
type: VerticalFillLayout.xtype, |
||||||
rowSize: ["", "fill"], |
rowSize: ["", "fill"], |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
el: this.addNotMatchTip, |
{ |
||||||
}, { |
el: this.addNotMatchTip, |
||||||
el: this.loader, |
}, |
||||||
}], |
{ |
||||||
|
el: this.loader, |
||||||
|
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
setKeyword: function (keyword) { |
setKeyword(keyword) { |
||||||
this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); |
this.addNotMatchTip.setText( |
||||||
}, |
i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword) |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
isAllSelected: function () { |
isAllSelected() { |
||||||
return this.loader.isAllSelected(); |
return this.loader.isAllSelected(); |
||||||
}, |
} |
||||||
|
|
||||||
hasMatched: function () { |
hasMatched() { |
||||||
return false; |
return false; |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.loader.setValue(v); |
this.loader.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.loader.getValue(); |
return this.loader.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.loader.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); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,86 +1,92 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* 在搜索框中输入文本弹出的面板 |
Widget, |
||||||
* @class BI.MultiSelectSearchPane |
extend, |
||||||
* @extends Widget |
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: { |
constants = { height: 24, lgap: 10, tgap: 5 }; |
||||||
height: 24, |
|
||||||
lgap: 10, |
|
||||||
tgap: 5 |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
return BI.extend(BI.MultiSelectSearchPane.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
|
_defaultConfig() { |
||||||
|
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-multi-select-search-pane bi-card", |
baseCls: "bi-multi-select-search-pane bi-card", |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
keywordGetter: BI.emptyFn, |
keywordGetter: emptyFn, |
||||||
itemHeight: 24, |
itemHeight: 24, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectSearchPane.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
|
o = this.options; |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_search_loader", |
type: MultiSelectSearchLoader.xtype, |
||||||
keywordGetter: o.keywordGetter, |
keywordGetter: o.keywordGetter, |
||||||
valueFormatter: o.valueFormatter, |
valueFormatter: o.valueFormatter, |
||||||
itemFormatter: o.itemFormatter, |
itemFormatter: o.itemFormatter, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
o.itemsCreator.apply(self, [op, function (res) { |
o.itemsCreator.apply(self, [ |
||||||
callback(res); |
op, |
||||||
}]); |
function (res) { |
||||||
|
callback(res); |
||||||
|
} |
||||||
|
]); |
||||||
}, |
}, |
||||||
itemHeight: o.itemHeight, |
itemHeight: o.itemHeight, |
||||||
value: o.value |
value: o.value, |
||||||
}); |
}); |
||||||
this.loader.on(BI.Controller.EVENT_CHANGE, function () { |
this.loader.on(Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
|
|
||||||
this.resizer = BI.createWidget({ |
this.resizer = createWidget({ |
||||||
type: "bi.absolute", |
type: AbsoluteLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
el: this.loader, |
{ |
||||||
left: 0, |
el: this.loader, |
||||||
right: 0, |
left: 0, |
||||||
bottom: 0, |
right: 0, |
||||||
top: 0, |
bottom: 0, |
||||||
}], |
top: 0, |
||||||
|
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
isAllSelected: function () { |
isAllSelected() { |
||||||
return this.loader.isAllSelected(); |
return this.loader.isAllSelected(); |
||||||
}, |
} |
||||||
|
|
||||||
hasMatched: function () { |
hasMatched() { |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.loader.setValue(v); |
this.loader.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.loader.getValue(); |
return this.loader.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.loader.empty(); |
this.loader.empty(); |
||||||
}, |
|
||||||
|
|
||||||
populate: function (items) { |
|
||||||
this.loader.populate.apply(this.loader, arguments); |
|
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.MultiSelectSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; |
populate(items) { |
||||||
|
this.loader.populate(...arguments); |
||||||
BI.shortcut("bi.multi_select_search_pane", BI.MultiSelectSearchPane); |
} |
||||||
|
} |
||||||
|
@ -1,214 +1,248 @@ |
|||||||
/** |
import { |
||||||
* @author windy |
shortcut, |
||||||
* @version 2.0 |
Widget, |
||||||
* Created by windy on 2021/5/18 |
debounce, |
||||||
*/ |
bind, |
||||||
BI.SelectPatchEditor = BI.inherit(BI.Widget, { |
extend, |
||||||
|
Controller, |
||||||
props: { |
contains, |
||||||
baseCls: "bi-patch-select-editor", |
isKey, |
||||||
height: 24, |
Events, |
||||||
}, |
trim, replaceAll |
||||||
|
} from "@/core"; |
||||||
render: function () { |
import { Editor, TextAreaEditor } from "@/base"; |
||||||
var self = this, o = this.options; |
import { StateEditor } from "@/case"; |
||||||
|
|
||||||
var debounceInputChange = BI.debounce(BI.bind(this._dealChange, this), 300); |
@shortcut() |
||||||
|
export class SelectPatchEditor extends Widget { |
||||||
return BI.extend({ |
static xtype = "bi.select_patch_editor"; |
||||||
type: "bi.state_editor", |
|
||||||
ref: function (_ref) { |
props = { baseCls: "bi-patch-select-editor", height: 24 }; |
||||||
self.editor = _ref; |
|
||||||
}, |
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
hgap: o.hgap, |
static EVENT_FOCUS = "EVENT_FOCUS"; |
||||||
vgap: o.vgap, |
static EVENT_BLUR = "EVENT_BLUR"; |
||||||
lgap: o.lgap, |
|
||||||
rgap: o.rgap, |
render() { |
||||||
tgap: o.tgap, |
const self = this, |
||||||
bgap: o.bgap, |
o = this.options; |
||||||
height: o.height, |
|
||||||
watermark: o.watermark, |
const debounceInputChange = debounce(bind(this._dealChange, this), 300); |
||||||
allowBlank: true, |
|
||||||
value: o.value, |
return extend( |
||||||
defaultText: o.defaultText, |
{ |
||||||
text: o.text, |
type: StateEditor.xtype, |
||||||
tipType: o.tipType, |
ref(_ref) { |
||||||
warningTitle: o.warningTitle, |
self.editor = _ref; |
||||||
el: { |
|
||||||
type: 'bi.textarea_editor', |
|
||||||
scrolly: false, |
|
||||||
validationChecker: function () { |
|
||||||
return true; |
|
||||||
}, |
}, |
||||||
throttle: true, |
hgap: o.hgap, |
||||||
}, |
vgap: o.vgap, |
||||||
listeners: [{ |
lgap: o.lgap, |
||||||
eventName: BI.Controller.EVENT_CHANGE, |
rgap: o.rgap, |
||||||
action: function (type, v) { |
tgap: o.tgap, |
||||||
if (BI.contains(v, "\n")) { |
bgap: o.bgap, |
||||||
self._dealChange(type, v); |
height: o.height, |
||||||
} else { |
watermark: o.watermark, |
||||||
debounceInputChange(type, v); |
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, |
||||||
}, |
}, |
||||||
}, { |
listeners: [ |
||||||
eventName: BI.Editor.EVENT_KEY_DOWN, |
{ |
||||||
action: function (keyCode) { |
eventName: Controller.EVENT_CHANGE, |
||||||
if (keyCode === BI.KeyCode.ENTER) { |
action(type, v) { |
||||||
self._clearSplitValue(); |
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, |
o.el |
||||||
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); |
|
||||||
}, |
|
||||||
|
|
||||||
_clearSplitValue: function () { |
_clearSplitValue() { |
||||||
this.editor.setValue(""); |
this.editor.setValue(""); |
||||||
}, |
} |
||||||
|
|
||||||
_dealChange: function (type, v) { |
_dealChange(type, v) { |
||||||
var value = ""; |
let value = ""; |
||||||
if (v !== this.editor.getValue()) { |
if (v !== this.editor.getValue()) { |
||||||
return; |
return; |
||||||
} |
} |
||||||
if (BI.isKey(v)) { |
if (isKey(v)) { |
||||||
value = this._formatText(v); |
value = this._formatText(v); |
||||||
} |
} |
||||||
if (type === BI.Events.CHANGE) { |
if (type === Events.CHANGE) { |
||||||
this._setValue(value); |
this._setValue(value); |
||||||
if (this._trimValue(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._start = true; |
||||||
this._pause = false; |
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)) { |
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)) { |
if (BI.endWith(value, BI.BlankSplitChar)) { |
||||||
this._pause = true; |
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) { |
if (type === Events.EMPTY || type === Events.STOPEDIT) { |
||||||
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY); |
this.fireEvent(Controller.EVENT_CHANGE, Events.EMPTY); |
||||||
} |
} |
||||||
this._lastValue = value; |
this._lastValue = value; |
||||||
}, |
} |
||||||
|
|
||||||
_trimValue: function (v) { |
_trimValue(v) { |
||||||
return BI.trim(BI.replaceAll(v || "", BI.BlankSplitChar, "")); |
return trim(replaceAll(v || "", BI.BlankSplitChar, "")); |
||||||
}, |
} |
||||||
|
|
||||||
_formatText: function (v) { |
_formatText(v) { |
||||||
return BI.replaceAll(v || "", "\n", BI.BlankSplitChar); |
return replaceAll(v || "", "\n", BI.BlankSplitChar); |
||||||
}, |
} |
||||||
|
|
||||||
setWaterMark: function (v) { |
setWaterMark(v) { |
||||||
this.editor.setWaterMark(v); |
this.editor.setWaterMark(v); |
||||||
}, |
} |
||||||
|
|
||||||
doRedMark: function () { |
doRedMark() { |
||||||
this.editor.doRedMark.apply(this.editor, arguments); |
this.editor.doRedMark(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
unRedMark: function () { |
unRedMark() { |
||||||
this.editor.unRedMark.apply(this.editor, arguments); |
this.editor.unRedMark(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
doHighLight: function () { |
doHighLight() { |
||||||
this.editor.doHighLight.apply(this.editor, arguments); |
this.editor.doHighLight(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
unHighLight: function () { |
unHighLight() { |
||||||
this.text.unHighLight.apply(this.text, arguments); |
this.text.unHighLight(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
focus: function () { |
focus() { |
||||||
this.editor.focus(); |
this.editor.focus(); |
||||||
}, |
} |
||||||
|
|
||||||
blur: function () { |
blur() { |
||||||
this.editor.blur(); |
this.editor.blur(); |
||||||
}, |
} |
||||||
|
|
||||||
_setValue: function (v) { |
_setValue(v) { |
||||||
this.editor.setValue(this._formatText(v)); |
this.editor.setValue(this._formatText(v)); |
||||||
}, |
} |
||||||
|
|
||||||
_showInput: function () { |
_showInput() { |
||||||
this.editor.visible(); |
this.editor.visible(); |
||||||
this.text.invisible(); |
this.text.invisible(); |
||||||
}, |
} |
||||||
|
|
||||||
_showHint: function () { |
_showHint() { |
||||||
this.editor.invisible(); |
this.editor.invisible(); |
||||||
this.text.visible(); |
this.text.visible(); |
||||||
}, |
} |
||||||
|
|
||||||
isValid: function () { |
isValid() { |
||||||
return this.editor.isValid(); |
return this.editor.isValid(); |
||||||
}, |
} |
||||||
|
|
||||||
setErrorText: function (text) { |
setErrorText(text) { |
||||||
this.editor.setErrorText(text); |
this.editor.setErrorText(text); |
||||||
}, |
} |
||||||
|
|
||||||
getErrorText: function () { |
getErrorText() { |
||||||
return this.editor.getErrorText(); |
return this.editor.getErrorText(); |
||||||
}, |
} |
||||||
|
|
||||||
isEditing: function () { |
isEditing() { |
||||||
return this.editor.isEditing(); |
return this.editor.isEditing(); |
||||||
}, |
} |
||||||
|
|
||||||
getLastValidValue: function () { |
getLastValidValue() { |
||||||
return this.editor.getLastValidValue(); |
return this.editor.getLastValidValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getLastChangedValue: function () { |
getLastChangedValue() { |
||||||
return this.editor.getLastChangedValue(); |
return this.editor.getLastChangedValue(); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this._setValue(v); |
this._setValue(v); |
||||||
this._lastValue = this._trimValue(v); |
this._lastValue = this._trimValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return BI.trim(this.editor.getValue()); |
return trim(this.editor.getValue()); |
||||||
}, |
} |
||||||
|
|
||||||
getState: function () { |
getState() { |
||||||
return this.editor.getState(); |
return this.editor.getState(); |
||||||
}, |
} |
||||||
|
|
||||||
setState: function (v) { |
setState(v) { |
||||||
this.editor.setState(v); |
this.editor.setState(v); |
||||||
}, |
} |
||||||
|
|
||||||
setTipType: function (v) { |
setTipType(v) { |
||||||
this.editor.setTipType(v); |
this.editor.setTipType(v); |
||||||
}, |
} |
||||||
|
|
||||||
getText: function () { |
getText() { |
||||||
return this.editor.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); |
|
||||||
|
Loading…
Reference in new issue