Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Pull request #3364: Es6 

Merge in VISUAL/fineui from ~JOKER.WANG/fineui:es6 to es6

* commit '7d86ad53c162248503f839fbfcd947aabafccba9':
  KERNEL-14069 refactor: 删除无用代码
  KERNEL-14069 refactor: case/layer、linearsegment、list es6化
es6
Joker.Wang-王顺 2 years ago
parent
554222709a 7d86ad53c1
commit
41a8aa966d
11 changed files with 413 additions and 380 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/case/index.js
  2. 4
      src/case/layer/index.js
  3. 54
      src/case/layer/layer.multipopup.js
  4. 55
      src/case/layer/layer.panel.js
  5. 210
      src/case/layer/pane.list.js
  6. 70
      src/case/layer/panel.js
  7. 53
      src/case/linearsegment/button.linear.segment.js
  8. 2
      src/case/linearsegment/index.js
  9. 74
      src/case/linearsegment/linear.segment.js
  10. 249
      src/case/list/list.select.js
  11. 8
      src/core/utils/dom.js

12
src/case/index.js
Unescape View File

@ -8,6 +8,9 @@ import * as trigger from "./trigger";
import * as loader from "./loader"; import * as loader from "./loader";
import * as segment from "./segment"; import * as segment from "./segment";
import { MultiSelectBar } from "./toolbar/toolbar.multiselect"; import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
import * as layer from "./layer";
import * as linearSegment from "./linearsegment";
import { SelectList } from "./list/list.select";
Object.assign(BI, { Object.assign(BI, {
...button, ...button,
@ -20,6 +23,9 @@ Object.assign(BI, {
...loader, ...loader,
...segment, ...segment,
MultiSelectBar, MultiSelectBar,
...layer,
...linearSegment,
SelectList,
}); });
export * from "./button"; export * from "./button";
@ -32,6 +38,10 @@ export * from "./ztree";
export * from "./trigger"; export * from "./trigger";
export * from "./loader"; export * from "./loader";
export * from "./segment"; export * from "./segment";
export * from "./layer";
export * from "./linearsegment";
export { export {
MultiSelectBar MultiSelectBar,
SelectList
}; };

4
src/case/layer/index.js
Unescape View File

@ -0,0 +1,4 @@
export { MultiPopupView } from "./layer.multipopup";
export { PopupPanel } from "./layer.panel";
export { ListPane } from "./pane.list";
export { Panel } from "./panel";

54
src/case/layer/layer.multipopup.js
Unescape View File

@ -4,57 +4,57 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.MultiPopupView = BI.inherit(BI.PopupView, { import { shortcut, extend, i18nText, each, createWidget, createItems } from "@/core";
import { PopupView, ButtonGroup } from "@/base";
_defaultConfig: function () { @shortcut()
var conf = BI.MultiPopupView.superclass._defaultConfig.apply(this, arguments); export class MultiPopupView extends PopupView {
return BI.extend(conf, { static xtype = "bi.multi_popup_view";
_baseCls: (conf._baseCls || "") + " bi-multi-list-view", static EVENT_CHANGE = "EVENT_CHANGE";
buttons: [BI.i18nText("BI-Basic_OK")] static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
_defaultConfig () {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
_baseCls: `${conf._baseCls || ""} bi-multi-list-view`,
buttons: [i18nText("BI-Basic_OK")],
}); });
}, }
_createToolBar: function () { _createToolBar () {
var o = this.options, self = this; const o = this.options;
if (o.buttons.length === 0) { if (o.buttons.length === 0) {
return; return;
} }
var text = []; // 构造[{text:content},……] const text = []; // 构造[{text:content},……]
BI.each(o.buttons, function (idx, item) { each(o.buttons, (idx, item) => {
text.push({ text.push({
text: item, text: item,
value: idx value: idx,
}); });
}); });
this.buttongroup = BI.createWidget({ this.buttongroup = createWidget({
type: "bi.button_group", type: "bi.button_group",
cls: "list-view-toolbar bi-high-light bi-split-top", cls: "list-view-toolbar bi-high-light bi-split-top",
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
items: BI.createItems(text, { items: createItems(text, {
type: "bi.text_button", type: "bi.text_button",
once: false, once: false,
shadow: true, shadow: true,
isShadowShowingOnSelected: true isShadowShowingOnSelected: true,
}), }),
layouts: [{ layouts: [{
type: "bi.center", type: "bi.center",
hgap: 0, hgap: 0,
vgap: 0 vgap: 0,
}] }],
}); });
this.buttongroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) { this.buttongroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
self.fireEvent(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, value, obj); this.fireEvent(MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, value, obj);
}); });
return this.buttongroup; return this.buttongroup;
} }
}
});
BI.MultiPopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
BI.shortcut("bi.multi_popup_view", BI.MultiPopupView);

55
src/case/layer/layer.panel.js
Unescape View File

@ -4,29 +4,38 @@
* @extends BI.MultiPopupView * @extends BI.MultiPopupView
*/ */
BI.PopupPanel = BI.inherit(BI.MultiPopupView, { import { shortcut, extend, createWidget } from "@/core";
import { IconButton } from "@/base";
import { MultiPopupView } from "./layer.multipopup";
@shortcut()
export class PopupPanel extends MultiPopupView {
static xtype = "bi.popup_panel";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_CLOSE = "EVENT_CLOSE";
static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
_defaultConfig () {
const conf = super._defaultConfig(...arguments);
_defaultConfig: function () { return extend(conf, {
var conf = BI.PopupPanel.superclass._defaultConfig.apply(this, arguments); baseCls: `${conf.baseCls || ""} bi-popup-panel`,
return BI.extend(conf, { title: "",
baseCls: (conf.baseCls || "") + " bi-popup-panel",
title: ""
}); });
}, }
_createTool: function () { _createTool () {
var self = this, o = this.options; const o = this.options;
var close = BI.createWidget({ const close = createWidget({
type: "bi.icon_button", type: "bi.icon_button",
cls: "close-h-font", cls: "close-h-font",
width: 25, width: 25,
height: 25 height: 25,
}); });
close.on(BI.IconButton.EVENT_CHANGE, function () { close.on(IconButton.EVENT_CHANGE, () => {
self.setVisible(false); this.setVisible(false);
self.fireEvent(BI.PopupPanel.EVENT_CLOSE); this.fireEvent(PopupPanel.EVENT_CLOSE);
}); });
return BI.createWidget({
return createWidget({
type: "bi.htape", type: "bi.htape",
cls: "popup-panel-title bi-header-background", cls: "popup-panel-title bi-header-background",
height: 25, height: 25,
@ -36,18 +45,12 @@ BI.PopupPanel = BI.inherit(BI.MultiPopupView, {
textAlign: "left", textAlign: "left",
text: o.title, text: o.title,
height: 25, height: 25,
lgap: 10 lgap: 10,
} },
}, { }, {
el: close, el: close,
width: 25 width: 25,
}] }],
}); });
} }
}); }
BI.PopupPanel.EVENT_CHANGE = "EVENT_CHANGE";
BI.PopupPanel.EVENT_CLOSE = "EVENT_CLOSE";
BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
BI.shortcut("bi.popup_panel", BI.PopupPanel);

210
src/case/layer/pane.list.js
Unescape View File

@ -5,14 +5,19 @@
* @class BI.ListPane * @class BI.ListPane
* @extends BI.Pane * @extends BI.Pane
*/ */
BI.ListPane = BI.inherit(BI.Pane, { import { shortcut, extend, each, createWidget, emptyFn, nextTick, concat, get, Controller, Events, LogicFactory, Direction, isNull, removeAt, isFunction, isNotEmptyString, isEmptyArray } from "@/core";
import { Pane, ButtonGroup } from "@/base";
_defaultConfig: function () { @shortcut()
var conf = BI.ListPane.superclass._defaultConfig.apply(this, arguments); export class ListPane extends Pane {
return BI.extend(conf, { static xtype = "bi.list_pane";
baseCls: (conf.baseCls || "") + " bi-list-pane", static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig () {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-list-pane`,
logic: { logic: {
dynamic: true dynamic: true,
}, },
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
@ -21,181 +26,180 @@ BI.ListPane = BI.inherit(BI.Pane, {
vgap: 0, vgap: 0,
hgap: 0, hgap: 0,
items: [], items: [],
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
hasNext: BI.emptyFn, hasNext: emptyFn,
onLoaded: BI.emptyFn, onLoaded: emptyFn,
el: { el: {
type: "bi.button_group" type: "bi.button_group",
} },
}); });
}, }
_init: function () { _init () {
BI.ListPane.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.button_group = createWidget(o.el, {
this.button_group = BI.createWidget(o.el, {
type: "bi.button_group", type: "bi.button_group",
chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
behaviors: {}, behaviors: {},
items: o.items, items: o.items,
value: o.value, value: o.value,
itemsCreator: function (op, calback) { itemsCreator: (op, callback) => {
if (op.times === 1) { if (op.times === 1) {
self.empty(); this.empty();
BI.nextTick(function () { nextTick(() => {
self.loading(); this.loading();
}); });
} }
o.itemsCreator(op, function () { o.itemsCreator(op, (...args) => {
calback.apply(self, arguments); callback(...args);
o.items = BI.concat(o.items, BI.get(arguments, [0], [])); o.items = concat(o.items, get(...args, [0], []));
if (op.times === 1) { if (op.times === 1) {
o.items = BI.get(arguments, [0], []); o.items = get(...args, [0], []);
BI.nextTick(function () { nextTick(() => {
self.loaded(); this.loaded();
// callback可能在loading之前执行, check保证显示正确 // callback可能在loading之前执行, check保证显示正确
self.check(); this.check();
}); });
} }
}); });
}, },
hasNext: o.hasNext, hasNext: o.hasNext,
layouts: [{ layouts: [{
type: "bi.vertical" type: "bi.vertical",
}] }],
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
self.fireEvent(BI.ListPane.EVENT_CHANGE, value, obj); this.fireEvent(ListPane.EVENT_CHANGE, value, obj);
} }
}); });
this.check(); this.check();
BI.createWidget(BI.extend({ createWidget(extend({
element: this element: this,
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({ }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({
scrolly: true, scrolly: true,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap, rgap: o.rgap,
tgap: o.tgap, tgap: o.tgap,
bgap: o.bgap, bgap: o.bgap,
vgap: o.vgap, vgap: o.vgap,
hgap: o.hgap hgap: o.hgap,
}, o.logic, { }, o.logic, {
items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group) items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group),
})))); }))));
}, }
hasPrev: function () { hasPrev () {
return this.button_group.hasPrev && this.button_group.hasPrev(); return this.button_group.hasPrev && this.button_group.hasPrev();
}, }
hasNext: function () { hasNext () {
return this.button_group.hasNext && this.button_group.hasNext(); return this.button_group.hasNext && this.button_group.hasNext();
}, }
prependItems: function (items) { prependItems (items) {
this.options.items = items.concat(this.options.items); this.options.items = items.concat(this.options.items);
this.button_group.prependItems.apply(this.button_group, arguments); this.button_group.prependItems(...arguments);
this.check(); this.check();
}, }
addItems: function (items) { addItems (items) {
this.options.items = this.options.items.concat(items); this.options.items = this.options.items.concat(items);
this.button_group.addItems.apply(this.button_group, arguments); this.button_group.addItems(...arguments);
this.check(); this.check();
}, }
removeItemAt: function (indexes) { removeItemAt (indexes) {
indexes = BI.isNull(indexes) ? [] : indexes; indexes = isNull(indexes) ? [] : indexes;
BI.removeAt(this.options.items, indexes); removeAt(this.options.items, indexes);
this.button_group.removeItemAt.apply(this.button_group, arguments); this.button_group.removeItemAt(...arguments);
this.check(); this.check();
}, }
populate: function (items) { populate (items) {
var self = this, o = this.options; const o = this.options;
if (arguments.length === 0 && (BI.isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法 if (arguments.length === 0 && (isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法
this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, function () { this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, (...args) => {
if (arguments.length === 0) { if (args.length === 0) {
throw new Error("参数不能为空"); throw new Error("参数不能为空");
} }
self.populate.apply(self, arguments); this.populate(...args);
}]); }]);
return; return;
} }
var context = BI.get(arguments, [2], {}); const context = get(arguments, [2], {});
var tipText = context.tipText || ''; const tipText = context.tipText || "";
if (BI.isNotEmptyString(tipText)) { if (isNotEmptyString(tipText)) {
BI.ListPane.superclass.populate.apply(this, []); super.populate.apply(this, []);
this.setTipText(tipText); this.setTipText(tipText);
} else { } else {
BI.ListPane.superclass.populate.apply(this, arguments); super.populate(...arguments);
this.button_group.populate.apply(this.button_group, arguments); this.button_group.populate(...arguments);
BI.isEmptyArray(BI.get(arguments, [0], [])) && this.setTipText(o.tipText); isEmptyArray(get(arguments, [0], [])) && this.setTipText(o.tipText);
} }
}, }
empty: function () { empty () {
this.button_group.empty(); this.button_group.empty();
}, }
setNotSelectedValue: function () { setNotSelectedValue () {
this.button_group.setNotSelectedValue.apply(this.button_group, arguments); this.button_group.setNotSelectedValue(...arguments);
}, }
getNotSelectedValue: function () { getNotSelectedValue () {
return this.button_group.getNotSelectedValue(); return this.button_group.getNotSelectedValue();
}, }
setValue: function () { setValue () {
this.button_group.setValue.apply(this.button_group, arguments); this.button_group.setValue(...arguments);
}, }
setAllSelected: function (v) { setAllSelected (v) {
if (this.button_group.setAllSelected) { if (this.button_group.setAllSelected) {
this.button_group.setAllSelected(v); this.button_group.setAllSelected(v);
} else { } else {
BI.each(this.getAllButtons(), function (i, btn) { each(this.getAllButtons(), (i, btn) => {
(btn.setSelected || btn.setAllSelected).apply(btn, [v]); (btn.setSelected || btn.setAllSelected).apply(btn, [v]);
}); });
} }
}, }
getValue: function () { getValue () {
return this.button_group.getValue.apply(this.button_group, arguments); return this.button_group.getValue(...arguments);
}, }
getAllButtons: function () { getAllButtons () {
return this.button_group.getAllButtons(); return this.button_group.getAllButtons();
}, }
getAllLeaves: function () { getAllLeaves () {
return this.button_group.getAllLeaves(); return this.button_group.getAllLeaves();
}, }
getSelectedButtons: function () { getSelectedButtons () {
return this.button_group.getSelectedButtons(); return this.button_group.getSelectedButtons();
}, }
getNotSelectedButtons: function () { getNotSelectedButtons () {
return this.button_group.getNotSelectedButtons(); return this.button_group.getNotSelectedButtons();
}, }
getIndexByValue: function (value) { getIndexByValue (value) {
return this.button_group.getIndexByValue(value); return this.button_group.getIndexByValue(value);
}, }
getNodeById: function (id) { getNodeById (id) {
return this.button_group.getNodeById(id); return this.button_group.getNodeById(id);
}, }
getNodeByValue: function (value) { getNodeByValue (value) {
return this.button_group.getNodeByValue(value); return this.button_group.getNodeByValue(value);
} }
}); }
BI.ListPane.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.list_pane", BI.ListPane);

70
src/case/layer/panel.js
Unescape View File

@ -1,11 +1,18 @@
/**
* 带有标题栏的pane import { shortcut, Widget, extend, toPix, Controller, createWidget } from "@/core";
* @class BI.Panel import { ButtonGroup } from "@/base";
* @extends BI.Widget
*/ @shortcut()
BI.Panel = BI.inherit(BI.Widget, { export class Panel extends Widget {
_defaultConfig: function () { static xtype = "bi.panel"
return BI.extend(BI.Panel.superclass._defaultConfig.apply(this, arguments), {
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-panel bi-border", baseCls: "bi-panel bi-border",
title: "", title: "",
titleHeight: 30, titleHeight: 30,
@ -15,62 +22,59 @@ BI.Panel = BI.inherit(BI.Widget, {
// dynamic: false // dynamic: false
// } // }
}); });
}, }
render: function () { render() {
return { return {
type: "bi.vertical_fill", type: "bi.vertical_fill",
rowSize: ["", "fill"], rowSize: ["", "fill"],
items: [this._createTitle(), this.options.el] items: [this._createTitle(), this.options.el],
}; };
}, }
_createTitle: function () { _createTitle() {
var self = this, o = this.options; const o = this.options;
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.label", type: "bi.label",
cls: "panel-title-text", cls: "panel-title-text",
text: o.title, text: o.title,
height: o.titleHeight height: o.titleHeight,
}); });
this.button_group = BI.createWidget({ this.button_group = createWidget({
type: "bi.button_group", type: "bi.button_group",
items: o.titleButtons, items: o.titleButtons,
layouts: [{ layouts: [{
type: "bi.center_adapt", type: "bi.center_adapt",
lgap: 10 lgap: 10,
}] }],
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { this.button_group.on(Controller.EVENT_CHANGE, () => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...arguments);
}); });
this.button_group.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) { this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
self.fireEvent(BI.Panel.EVENT_CHANGE, value, obj); this.fireEvent(Panel.EVENT_CHANGE, value, obj);
}); });
return { return {
// el: { // el: {
type: "bi.left_right_vertical_adapt", type: "bi.left_right_vertical_adapt",
cls: "panel-title bi-header-background bi-border-bottom", cls: "panel-title bi-header-background bi-border-bottom",
height: BI.toPix(o.titleHeight, 1), height: toPix(o.titleHeight, 1),
items: { items: {
left: [this.text], left: [this.text],
right: [this.button_group] right: [this.button_group],
}, },
lhgap: 10, lhgap: 10,
rhgap: 10 rhgap: 10,
// }, // },
// height: BI.toPix(o.titleHeight, 1) // height: toPix(o.titleHeight, 1)
}; };
}, }
setTitle: function (title) { setTitle(title) {
this.text.setValue(title); this.text.setValue(title);
} }
}); }
BI.Panel.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.panel", BI.Panel);

53
src/case/linearsegment/button.linear.segment.js
Unescape View File

@ -1,26 +1,28 @@
BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
props: { import { shortcut, toPix } from "@/core";
extraCls: "bi-line-segment-button bi-list-item-effect", import { BasicButton } from "@/base";
once: true,
readonly: true,
hgap: 10,
height: 24
},
render: function () { @shortcut()
var self = this, o = this.options; export class LinearSegmentButton extends BasicButton {
static xtype = "bi.linear_segment_button"
props = { extraCls:"bi-line-segment-button bi-list-item-effect", once:true, readonly:true, hgap:10, height:24 };
render () {
const o = this.options;
return [{ return [{
type: "bi.label", type: "bi.label",
text: o.text, text: o.text,
height: o.height, height: o.height,
textHeight: BI.toPix(o.height, 2), textHeight: toPix(o.height, 2),
value: o.value, value: o.value,
hgap: o.hgap, hgap: o.hgap,
ref: function () { ref : _ref => {
self.text = this; this.text = _ref;
} },
}, { }, {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
@ -28,28 +30,27 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
type: "bi.layout", type: "bi.layout",
cls: "line-segment-button-line", cls: "line-segment-button-line",
height: 2, height: 2,
ref: function () { ref : _ref => {
self.line = this; this.line = _ref;
} },
}, },
left: 0, left: 0,
right: 0, right: 0,
bottom: 0 bottom: 0,
}] }],
}]; }];
}, }
setSelected: function (v) { setSelected (v) {
BI.LinearSegmentButton.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (v) { if (v) {
this.line.element.addClass("bi-high-light-background"); this.line.element.addClass("bi-high-light-background");
} else { } else {
this.line.element.removeClass("bi-high-light-background"); this.line.element.removeClass("bi-high-light-background");
} }
}, }
setText: function (text) { setText (text) {
this.text.setText(text); this.text.setText(text);
} }
}); }
BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);

2
src/case/linearsegment/index.js
Unescape View File

@ -0,0 +1,2 @@
export { LinearSegmentButton } from "./button.linear.segment";
export { LinearSegment } from "./linear.segment";

74
src/case/linearsegment/linear.segment.js
Unescape View File

@ -1,60 +1,62 @@
BI.LinearSegment = BI.inherit(BI.Widget, {
props: { import { shortcut, Widget, createItems, makeArrayByArray } from "@/core";
baseCls: "bi-linear-segment",
items: [], @shortcut()
height: 30 export class LinearSegment extends Widget {
}, static xtype = "bi.linear_segment"
props = { baseCls:"bi-linear-segment", items:[], height:30 };
render () {
const o = this.options;
render: function () {
var self = this, o = this.options;
return { return {
type: "bi.button_group", type: "bi.button_group",
items: [BI.createItems(o.items, { items: [createItems(o.items, {
type: "bi.linear_segment_button", type: "bi.linear_segment_button",
height: o.height height: o.height,
})], })],
layouts: [{ layouts: [{
type: "bi.table", type: "bi.table",
columnSize: BI.makeArrayByArray(o.items, "fill"), columnSize: makeArrayByArray(o.items, "fill"),
}], }],
value: o.value, value: o.value,
listeners: [{ listeners: [{
eventName: "__EVENT_CHANGE__", eventName: "__EVENT_CHANGE__",
action: function () { action () {
self.fireEvent("__EVENT_CHANGE__", arguments); this.fireEvent("__EVENT_CHANGE__", arguments);
} },
}, { }, {
eventName: "EVENT_CHANGE", eventName: "EVENT_CHANGE",
action: function () { action () {
self.fireEvent("EVENT_CHANGE"); this.fireEvent("EVENT_CHANGE");
} },
}], }],
ref: function () { ref: _ref => {
self.buttonGroup = this; this.buttonGroup = _ref;
} },
}; };
}, }
setValue: function (v) { setValue (v) {
this.buttonGroup.setValue(v); this.buttonGroup.setValue(v);
}, }
setEnabledValue: function (v) { setEnabledValue (v) {
this.buttonGroup.setEnabledValue(v); this.buttonGroup.setEnabledValue(v);
}, }
getValue: function () { getValue () {
return this.buttonGroup.getValue(); return this.buttonGroup.getValue();
}, }
populate: function (buttons) { populate (buttons) {
var o = this.options; const o = this.options;
this.buttonGroup.populate([BI.createItems(buttons, { this.buttonGroup.populate([createItems(buttons, {
type: "bi.linear_segment_button", type: "bi.linear_segment_button",
height: o.height height: o.height,
})]) })]);
}, }
}); }
BI.shortcut("bi.linear_segment", BI.LinearSegment);

249
src/case/list/list.select.js
Unescape View File

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

8
src/core/utils/dom.js
Unescape View File

@ -265,12 +265,12 @@ export function _getLeftAlignPosition(combo, popup, extraWidth, container) {
} }
export function getLeftAlignPosition(combo, popup, extraWidth, container) { export function getLeftAlignPosition(combo, popup, extraWidth, container) {
let left = this._getLeftAlignPosition(combo, popup, extraWidth, container); let left = _getLeftAlignPosition(combo, popup, extraWidth, container);
let dir = ""; let dir = "";
// 如果放不下，优先使用RightAlign, 如果RightAlign也放不下, 再使用left=0 // 如果放不下，优先使用RightAlign, 如果RightAlign也放不下, 再使用left=0
const containerRect = container ? container.getBoundingClientRect() : { left: 0 }; const containerRect = container ? container.getBoundingClientRect() : { left: 0 };
if (left + containerRect.left < 0) { if (left + containerRect.left < 0) {
left = this._getRightAlignPosition(combo, popup, extraWidth); left = _getRightAlignPosition(combo, popup, extraWidth);
dir = "left"; dir = "left";
} }
if (left + containerRect.left < 0) { if (left + containerRect.left < 0) {
@ -302,11 +302,11 @@ export function _getRightAlignPosition(combo, popup, extraWidth, container) {
} }
export function getRightAlignPosition(combo, popup, extraWidth, container) { export function getRightAlignPosition(combo, popup, extraWidth, container) {
let left = this._getRightAlignPosition(combo, popup, extraWidth, container); let left = _getRightAlignPosition(combo, popup, extraWidth, container);
let dir = ""; let dir = "";
// 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0 // 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0
if (left < 0) { if (left < 0) {
left = this._getLeftAlignPosition(combo, popup, extraWidth, container); left = _getLeftAlignPosition(combo, popup, extraWidth, container);
dir = "right"; dir = "right";
} }
if (left < 0) { if (left < 0) {

Write Preview
Loading…
Cancel
Save