|
|
|
import {
|
|
|
|
shortcut,
|
|
|
|
Widget,
|
|
|
|
extend,
|
|
|
|
emptyFn,
|
|
|
|
Controller,
|
|
|
|
createWidget,
|
|
|
|
Events,
|
|
|
|
isNotNull,
|
|
|
|
isEmptyString,
|
|
|
|
isEmptyArray,
|
|
|
|
Direction,
|
|
|
|
get,
|
|
|
|
LogicFactory,
|
|
|
|
each,
|
|
|
|
pixFormat
|
|
|
|
} from "@/core";
|
|
|
|
import { ButtonGroup } from "@/base";
|
|
|
|
import { MultiSelectBar } from "../toolbar/toolbar.multiselect";
|
|
|
|
import { ListPane } from "../layer/pane.list";
|
|
|
|
|
|
|
|
/* eslint-disable no-mixed-spaces-and-tabs */
|
|
|
|
|
|
|
|
@shortcut()
|
|
|
|
export class SelectList extends Widget {
|
|
|
|
static xtype = "bi.select_list";
|
|
|
|
|
|
|
|
static EVENT_CHANGE = "EVENT_CHANGE";
|
|
|
|
|
|
|
|
_defaultConfig() {
|
|
|
|
return extend(super._defaultConfig(...arguments), {
|
|
|
|
baseCls: "bi-select-list",
|
|
|
|
direction: Direction.Top, // toolbar的位置
|
|
|
|
logic: {
|
|
|
|
dynamic: true,
|
|
|
|
},
|
|
|
|
items: [],
|
|
|
|
itemsCreator: emptyFn,
|
|
|
|
hasNext: emptyFn,
|
|
|
|
onLoaded: emptyFn,
|
|
|
|
toolbar: {
|
|
|
|
type: MultiSelectBar.xtype,
|
|
|
|
iconWrapperWidth: 36,
|
|
|
|
},
|
|
|
|
el: {
|
|
|
|
type: ListPane.xtype,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_init() {
|
|
|
|
super._init(...arguments);
|
|
|
|
const o = this.options;
|
|
|
|
|
|
|
|
// 全选
|
|
|
|
this.toolbar = createWidget(o.toolbar);
|
|
|
|
this.allSelected = false;
|
|
|
|
this.toolbar.on(Controller.EVENT_CHANGE, (...args) => {
|
|
|
|
const [type, value, obj] = args;
|
|
|
|
this.allSelected = this.toolbar.isSelected();
|
|
|
|
if (type === Events.CLICK) {
|
|
|
|
this.setAllSelected(this.allSelected);
|
|
|
|
this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
|
|
|
|
}
|
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, ...args);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.list = createWidget(o.el, {
|
|
|
|
type: ListPane.xtype,
|
|
|
|
items: o.items,
|
|
|
|
itemsCreator: (op, callback) => {
|
|
|
|
op.times === 1 && this.toolbar.setVisible(false);
|
|
|
|
o.itemsCreator(op, (items, keywords, context, ...args) => {
|
|
|
|
callback(items, keywords, context, ...args);
|
|
|
|
if (op.times === 1) {
|
|
|
|
const tipText = get(context, "tipText", "");
|
|
|
|
const visible = isEmptyString(tipText) && items && items.length > 0;
|
|
|
|
this.toolbar.setVisible(visible);
|
|
|
|
this.toolbar.setEnable(this.isEnabled() && visible);
|
|
|
|
}
|
|
|
|
this._checkAllSelected();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onLoaded: o.onLoaded,
|
|
|
|
hasNext: o.hasNext,
|
|
|
|
});
|
|
|
|
|
|
|
|
this.list.on(Controller.EVENT_CHANGE, (...args) => {
|
|
|
|
const [type, value, obj] = args;
|
|
|
|
if (type === Events.CLICK) {
|
|
|
|
this._checkAllSelected();
|
|
|
|
this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
|
|
|
|
}
|
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, ...args);
|
|
|
|
});
|
|
|
|
|
|
|
|
createWidget(
|
|
|
|
extend(
|
|
|
|
{
|
|
|
|
element: this,
|
|
|
|
},
|
|
|
|
LogicFactory.createLogic(
|
|
|
|
LogicFactory.createLogicTypeByDirection(o.direction),
|
|
|
|
extend(
|
|
|
|
{
|
|
|
|
scrolly: true,
|
|
|
|
},
|
|
|
|
o.logic,
|
|
|
|
{
|
|
|
|
items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list),
|
|
|
|
}
|
|
|
|
)
|
|
|
|
)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
if (o.items.length <= 0) {
|
|
|
|
this.toolbar.setVisible(false);
|
|
|
|
this.toolbar.setEnable(false);
|
|
|
|
}
|
|
|
|
if (isNotNull(o.value)) {
|
|
|
|
this.setValue(o.value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_checkAllSelected() {
|
|
|
|
const selectLength = this.list.getValue().length;
|
|
|
|
const notSelectLength = this.getAllLeaves().length - selectLength;
|
|
|
|
const hasNext = this.list.hasNext();
|
|
|
|
const isAlreadyAllSelected = this.toolbar.isSelected();
|
|
|
|
let isHalf = selectLength > 0 && notSelectLength > 0;
|
|
|
|
let allSelected = selectLength > 0 && notSelectLength <= 0 && (!hasNext || isAlreadyAllSelected);
|
|
|
|
|
|
|
|
if (this.isAllSelected() === false) {
|
|
|
|
hasNext && (isHalf = selectLength > 0);
|
|
|
|
if (!isAlreadyAllSelected && notSelectLength === 0 && !hasNext) {
|
|
|
|
allSelected = true;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
hasNext && (isHalf = notSelectLength > 0);
|
|
|
|
if (!isAlreadyAllSelected && notSelectLength === 0) {
|
|
|
|
allSelected = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.toolbar.setHalfSelected(isHalf);
|
|
|
|
!isHalf && this.toolbar.setSelected(allSelected);
|
|
|
|
}
|
|
|
|
|
|
|
|
setAllSelected(v) {
|
|
|
|
if (this.list.setAllSelected) {
|
|
|
|
this.list.setAllSelected(v);
|
|
|
|
} else {
|
|
|
|
each(this.getAllButtons(), (i, btn) => {
|
|
|
|
(btn.setSelected || btn.setAllSelected).apply(btn, [v]);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.allSelected = !!v;
|
|
|
|
this.toolbar.setSelected(v);
|
|
|
|
this.toolbar.setHalfSelected(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
setToolBarVisible(b) {
|
|
|
|
this.toolbar.setVisible(b);
|
|
|
|
}
|
|
|
|
|
|
|
|
isAllSelected() {
|
|
|
|
return this.allSelected;
|
|
|
|
// return this.toolbar.isSelected();
|
|
|
|
}
|
|
|
|
|
|
|
|
hasPrev() {
|
|
|
|
return this.list.hasPrev();
|
|
|
|
}
|
|
|
|
|
|
|
|
hasNext() {
|
|
|
|
return this.list.hasNext();
|
|
|
|
}
|
|
|
|
|
|
|
|
prependItems(items) {
|
|
|
|
this.list.prependItems(...arguments);
|
|
|
|
}
|
|
|
|
|
|
|
|
addItems(items) {
|
|
|
|
this.list.addItems(...arguments);
|
|
|
|
}
|
|
|
|
|
|
|
|
setValue(data) {
|
|
|
|
const selectAll = data.type === ButtonGroup.CHOOSE_TYPE_ALL;
|
|
|
|
this.setAllSelected(selectAll);
|
|
|
|
this.list[selectAll ? "setNotSelectedValue" : "setValue"](data.value);
|
|
|
|
this._checkAllSelected();
|
|
|
|
}
|
|
|
|
|
|
|
|
getValue() {
|
|
|
|
if (this.isAllSelected() === false) {
|
|
|
|
return {
|
|
|
|
type: ButtonGroup.CHOOSE_TYPE_MULTI,
|
|
|
|
value: this.list.getValue(),
|
|
|
|
assist: this.list.getNotSelectedValue(),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
type: ButtonGroup.CHOOSE_TYPE_ALL,
|
|
|
|
value: this.list.getNotSelectedValue(),
|
|
|
|
assist: this.list.getValue(),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
empty() {
|
|
|
|
this.list.empty();
|
|
|
|
}
|
|
|
|
|
|
|
|
populate(items) {
|
|
|
|
this.toolbar.setVisible(!isEmptyArray(items));
|
|
|
|
this.toolbar.setEnable(this.isEnabled() && !isEmptyArray(items));
|
|
|
|
this.list.populate(...arguments);
|
|
|
|
this._checkAllSelected();
|
|
|
|
}
|
|
|
|
|
|
|
|
_setEnable(enable) {
|
|
|
|
super._setEnable(...arguments);
|
|
|
|
this.toolbar.setEnable(enable);
|
|
|
|
}
|
|
|
|
|
|
|
|
resetHeight(h) {
|
|
|
|
const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0);
|
|
|
|
this.list.resetHeight
|
|
|
|
? this.list.resetHeight(h - toolHeight)
|
|
|
|
: this.list.element.css({ "max-height": pixFormat(h - toolHeight) });
|
|
|
|
}
|
|
|
|
|
|
|
|
setNotSelectedValue() {
|
|
|
|
this.list.setNotSelectedValue(...arguments);
|
|
|
|
this._checkAllSelected();
|
|
|
|
}
|
|
|
|
|
|
|
|
getNotSelectedValue() {
|
|
|
|
return this.list.getNotSelectedValue();
|
|
|
|
}
|
|
|
|
|
|
|
|
getAllButtons() {
|
|
|
|
return this.list.getAllButtons();
|
|
|
|
}
|
|
|
|
|
|
|
|
getAllLeaves() {
|
|
|
|
return this.list.getAllLeaves();
|
|
|
|
}
|
|
|
|
|
|
|
|
getSelectedButtons() {
|
|
|
|
return this.list.getSelectedButtons();
|
|
|
|
}
|
|
|
|
|
|
|
|
getNotSelectedButtons() {
|
|
|
|
return this.list.getNotSelectedButtons();
|
|
|
|
}
|
|
|
|
|
|
|
|
getIndexByValue(value) {
|
|
|
|
return this.list.getIndexByValue(value);
|
|
|
|
}
|
|
|
|
|
|
|
|
getNodeById(id) {
|
|
|
|
return this.list.getNodeById(id);
|
|
|
|
}
|
|
|
|
|
|
|
|
getNodeByValue(value) {
|
|
|
|
return this.list.getNodeByValue(value);
|
|
|
|
}
|
|
|
|
}
|