Browse Source

Merge remote-tracking branch 'origin/es6' into es6

es6
crawford.zhou 2 years ago
parent
commit
c7a0a5bad6
  1. 134
      es6.js
  2. 2
      src/base/0.base.js
  3. 70
      src/case/calendar/calendar.date.item.js
  4. 255
      src/case/calendar/calendar.js
  5. 198
      src/case/calendar/calendar.year.js
  6. 3
      src/case/calendar/index.js
  7. 230
      src/case/editor/editor.clear.js
  8. 304
      src/case/editor/editor.defaulttext.js
  9. 304
      src/case/editor/editor.shelter.js
  10. 313
      src/case/editor/editor.sign.js
  11. 338
      src/case/editor/editor.state.js
  12. 312
      src/case/editor/editor.state.simple.js
  13. 6
      src/case/editor/index.js
  14. 10
      src/case/index.js
  15. 3
      src/case/pager/index.js
  16. 206
      src/case/pager/pager.all.count.js
  17. 260
      src/case/pager/pager.detail.js
  18. 167
      src/case/pager/pager.direction.js
  19. 100
      src/core/wrapper/layout/fill/auto.vtape.js
  20. 9
      src/core/wrapper/layout/fill/fill.horizontal.js
  21. 9
      src/core/wrapper/layout/fill/fill.vertical.js
  22. 147
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  23. 4
      src/core/wrapper/layout/fill/index.js
  24. 49
      src/core/wrapper/layout/flex/flex.center.js
  25. 55
      src/core/wrapper/layout/flex/flex.horizontal.center.js
  26. 72
      src/core/wrapper/layout/flex/flex.horizontal.js
  27. 96
      src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
  28. 55
      src/core/wrapper/layout/flex/flex.vertical.center.js
  29. 68
      src/core/wrapper/layout/flex/flex.vertical.js
  30. 7
      src/core/wrapper/layout/flex/index.js
  31. 49
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
  32. 55
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
  33. 83
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  34. 55
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
  35. 83
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
  36. 5
      src/core/wrapper/layout/flex/wrapper/index.js
  37. 46
      src/core/wrapper/layout/float/float.absolute.center.js
  38. 66
      src/core/wrapper/layout/float/float.absolute.horizontal.js
  39. 178
      src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
  40. 66
      src/core/wrapper/layout/float/float.absolute.vertical.js
  41. 68
      src/core/wrapper/layout/float/float.horizontal.js
  42. 5
      src/core/wrapper/layout/float/index.js
  43. 6
      src/core/wrapper/layout/index.js
  44. 4
      src/core/wrapper/layout/middle/index.js
  45. 76
      src/core/wrapper/layout/middle/middle.center.js
  46. 83
      src/core/wrapper/layout/middle/middle.float.center.js
  47. 77
      src/core/wrapper/layout/middle/middle.horizontal.js
  48. 68
      src/core/wrapper/layout/middle/middle.vertical.js
  49. 3
      src/core/wrapper/layout/responsive/index.js
  50. 68
      src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
  51. 72
      src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
  52. 50
      src/core/wrapper/layout/responsive/responsive.inline..js
  53. 58
      src/core/wrapper/layout/responsive/responsive.inline.js
  54. 2
      src/core/wrapper/layout/sticky/index.js
  55. 42
      src/core/wrapper/layout/sticky/sticky.horizontal.js
  56. 42
      src/core/wrapper/layout/sticky/sticky.vertical.js

134
es6.js

@ -0,0 +1,134 @@
const fs = require("fs");
const srcName = process.argv[2];
const sourceCode = fs.readFileSync(srcName).toString();
const clzName = /BI\.(.*?)\s\=\sBI\.inherit\(/.exec(sourceCode)[1];
const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1];
// const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1];
const collection = {
"static": {},
attr: {},
};
const BI = {
inherit(_, options) {
collection.methods = Object.keys(options)
.filter(key => typeof options[key] === "function")
.map(key => options[key]);
Object.keys(options)
.filter(key => typeof options[key] !== "function")
.forEach(key => {
collection.attr[key] = options[key];
});
return collection.static;
},
shortcut(xtype) {
collection.xtype = xtype;
},
};
eval(sourceCode);
let M = "";
let E = "";
let I = "";
let A = "";
const coreImport = {
shortcut: true,
};
if (superName === "Widget") {
coreImport.Widget = true;
}
Object.keys(collection.attr).forEach(key => {
A = `${key} = ${JSON.stringify(collection.attr[key])};`;
});
// 静态方法
Object.keys(collection.static).forEach(key => {
E += `\tstatic ${key} = "${collection.static[key]}"\n`;
});
// 对函数进行替换
collection.methods.forEach(el => {
let f = `${el.toString().replace(/^function/, el.name)}\n`;
// 换 BI.Button.superclass
f = f.replace(`BI.${clzName}.superclass`, "super");
// 换 super._defaultConfig
f = f.replace(
`super\._defaultConfig\.apply\(this\,\sarguments\)`,
"super._defaultConfig(arguments)"
);
// 换 super.xxx.apply
f = f.replace(/super\.(.*?)\.apply\(this\,\sarguments\)/, a => {
const f = /super\.(.*?)\.apply\(this\,\sarguments\)/.exec(a);
return `super.${f[1]}(...arguments)`;
});
const target = [
"isNull",
"toPix",
"isKey",
"isObject",
"map",
"extend",
"isFunction",
"isEmptyArray",
"isArray",
"Controller",
clzName,
"createWidget",
"Events",
"emptyFn",
"nextTick",
"bind",
"i18nText",
"isNotNull",
"isString",
"isNumber",
"isEmpty",
];
target.forEach(t => {
const arr = f.split(`BI.${t}`);
// nodejs 低版本没有 replaceAll
if (arr.length > 1) {
if (t !== clzName) coreImport[t] = true;
f = arr.join(t);
}
});
M += `${f}\n`;
});
Object.keys(coreImport).forEach(el => {
I += `${el},`;
});
const outputCode = `
import {${I}} from "@/core"
@shortcut()
export class ${clzName} extends ${superName} {
\tstatic xtype = "${collection.xtype}"
${A}
${E}
${M}
}
`;
// fs.writeFileSync(`${srcName}.js.raw`, sourceCode);
fs.writeFileSync(srcName, outputCode);

2
src/base/0.base.js

@ -7,7 +7,7 @@ import {
PopoverController, PopoverController,
ResizeController, ResizeController,
TooltipsController, TooltipsController,
StyleLoaderManager, StyleLoaderManager
} from "../core"; } from "../core";
const Resizers = new ResizeController(); const Resizers = new ResizeController();

70
src/case/calendar/calendar.date.item.js

@ -1,16 +1,23 @@
/** /**
* 专门为calendar的视觉加的button作为私有button,不能配置任何属性也不要用这个玩意 * 专门为calendar的视觉加的button作为私有button,不能配置任何属性也不要用这个玩意
*/ */
BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
props: function() { import { shortcut } from "@/core";
import { BasicButton } from "@/base";
@shortcut()
export class CalendarDateItem extends BasicButton {
props() {
return { return {
baseCls: "bi-calendar-date-item", baseCls: "bi-calendar-date-item",
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
} };
}, }
static xtype = "bi.calendar_date_item";
render () {
const { text, value, lgap, rgap, tgap, bgap } = this.options;
render: function () {
var self = this, o = this.options;
return { return {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
@ -18,41 +25,40 @@ BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
type: "bi.text_item", type: "bi.text_item",
cls: "bi-border-radius bi-list-item-select", cls: "bi-border-radius bi-list-item-select",
textAlign: "center", textAlign: "center",
text: o.text, text,
value: o.value, value,
ref: function () { ref: _ref => {
self.text = this; this.text = _ref;
} },
}, },
left: o.lgap, left: lgap,
right: o.rgap, right: rgap,
top: o.tgap, top: tgap,
bottom: o.bgap bottom: bgap,
}] }],
}; };
}, }
doHighLight: function () { doHighLight () {
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight () {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
setValue: function () { setValue () {
if (!this.isReadOnly()) { if (!this.isReadOnly()) {
this.text.setValue.apply(this.text, arguments); this.text.setValue(...arguments);
} }
}, }
setSelected: function (b) { setSelected (b) {
BI.CalendarDateItem.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
this.text.setSelected(b); this.text.setSelected(b);
}, }
getValue: function () { getValue () {
return this.text.getValue(); return this.text.getValue();
} }
}); }
BI.shortcut("bi.calendar_date_item", BI.CalendarDateItem);

255
src/case/calendar/calendar.js

@ -3,32 +3,36 @@
* @class BI.Calendar * @class BI.Calendar
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Calendar = BI.inherit(BI.Widget, { import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core";
_defaultConfig: function () { @shortcut()
var conf = BI.Calendar.superclass._defaultConfig.apply(this, arguments); export class Calendar extends Widget {
return BI.extend(conf, { static xtype = "bi.calendar";
_defaultConfig () {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: "bi-calendar", baseCls: "bi-calendar",
logic: { logic: {
dynamic: false dynamic: false,
}, },
min: "1900-01-01", // 最小日期 min: "1900-01-01", // 最小日期
max: "2099-12-31", // 最大日期 max: "2099-12-31", // 最大日期
year: 2015, year: 2015,
month: 8, month: 8,
day: 25 day: 25,
}); });
}, }
_dateCreator (Y, M, D) {
_dateCreator: function (Y, M, D) { const { min, max } = this.options, log = {}, De = getDate();
var self = this, o = this.options, log = {}, De = BI.getDate(); const mins = min.match(/\d+/g);
var mins = o.min.match(/\d+/g); const maxs = max.match(/\d+/g);
var maxs = o.max.match(/\d+/g);
De.setFullYear(Y, M, D); De.setFullYear(Y, M, D);
log.ymd = [De.getFullYear(), De.getMonth(), De.getDate()]; log.ymd = [De.getFullYear(), De.getMonth(), De.getDate()];
var MD = BI.Date._MD.slice(0); const MD = Date._MD.slice(0);
MD[1] = BI.isLeapYear(log.ymd[0]) ? 29 : 28; MD[1] = isLeapYear(log.ymd[0]) ? 29 : 28;
// 日期所在月第一天 // 日期所在月第一天
De.setFullYear(log.ymd[0], log.ymd[1], 1); De.setFullYear(log.ymd[0], log.ymd[1], 1);
@ -36,15 +40,16 @@ BI.Calendar = BI.inherit(BI.Widget, {
log.FDay = De.getDay(); log.FDay = De.getDay();
// 当前BI.StartOfWeek与周日对齐后的FDay是周几 // 当前BI.StartOfWeek与周日对齐后的FDay是周几
var offSetFDay = (7 - BI.StartOfWeek + log.FDay) % 7; const offSetFDay = (7 - StartOfWeek + log.FDay) % 7;
// 当前月页第一天是几号 // 当前月页第一天是几号
log.PDay = MD[M === 0 ? 11 : M - 1] - offSetFDay + 1; log.PDay = MD[M === 0 ? 11 : M - 1] - offSetFDay + 1;
log.NDay = 1; log.NDay = 1;
var items = []; const items = [];
BI.each(BI.range(42), function (i) { each(range(42), i => {
var td = {}, YY = log.ymd[0], MM = log.ymd[1] + 1, DD; const td = {};
let YY = log.ymd[0], MM = log.ymd[1] + 1, DD;
// 上个月的日期 // 上个月的日期
if (i < offSetFDay) { if (i < offSetFDay) {
td.lastMonth = true; td.lastMonth = true;
@ -63,89 +68,92 @@ BI.Calendar = BI.inherit(BI.Widget, {
MM === 12 && (YY += 1); MM === 12 && (YY += 1);
MM = MM === 12 ? 1 : MM + 1; MM = MM === 12 ? 1 : MM + 1;
} }
if (BI.checkDateVoid(YY, MM, DD, mins, maxs)[0]) { if (checkDateVoid(YY, MM, DD, mins, maxs)[0]) {
td.disabled = true; td.disabled = true;
} }
td.text = DD; td.text = DD;
items.push(td); items.push(td);
}); });
return items; return items;
}, }
_init: function () { _init () {
BI.Calendar.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const { year, month, day, logic } = this.options;
var items = BI.map(this._getWeekLabel(), function (i, value) { const items = map(this._getWeekLabel(), (i, value) => {
return { return {
type: "bi.label", type: "bi.label",
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
text: value text: value,
}; };
}); });
var title = BI.createWidget({ const title = createWidget({
type: "bi.button_group", type: "bi.button_group",
height: 44, height: 44,
items: items, items,
layouts: [{ layouts: [{
type: "bi.center", type: "bi.center",
hgap: 5, hgap: 5,
vgap: 10 vgap: 10,
}] }],
}); });
this.days = BI.createWidget({ this.days = createWidget({
type: "bi.button_group", type: "bi.button_group",
items: BI.createItems(this._getItems(), {}), items: createItems(this._getItems(), {}),
value: o.year + "-" + o.month + "-" + o.day, value: `${year}-${month}-${day}`,
layouts: [BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, { layouts: [LogicFactory.createLogic("table", extend({}, logic, {
columns: 7, columns: 7,
rows: 6, rows: 6,
columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7], columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7],
rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8 rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
}))] }))],
}); });
this.days.on(BI.Controller.EVENT_CHANGE, function () { this.days.on(Controller.EVENT_CHANGE, () => {
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("vertical", BI.extend({}, o.logic, { }, LogicFactory.createLogic("vertical", extend({}, logic, {
items: BI.LogicFactory.createLogicItemsByDirection("top", title, { items: LogicFactory.createLogicItemsByDirection("top", title, {
el: this.days, el: this.days,
tgap: -5 tgap: -5,
}) }),
})))); }))));
}, }
_getWeekLabel: function () { _getWeekLabel () {
return BI.map(BI.range(0, 7), function (idx, v) { return map(range(0, 7), (idx, v) => getShortDayName((v + StartOfWeek) % 7));
return BI.getShortDayName((v + BI.StartOfWeek) % 7); }
});
},
isFrontDate: function () { isFrontDate () {
var o = this.options, c = this._const; const { year, month, min, max } = this.options;
var Y = o.year, M = o.month, De = BI.getDate(), day = De.getDay(); let Y = year;
const M = month, De = getDate(), day = De.getDay();
Y = Y | 0; Y = Y | 0;
De.setFullYear(Y, M, 1); De.setFullYear(Y, M, 1);
var newDate = BI.getOffsetDate(De, -1 * (day + 1)); const newDate = getOffsetDate(De, -1 * (day + 1));
return !!BI.checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), o.min, o.max)[0];
}, return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0];
}
isFinalDate: function () { isFinalDate () {
var o = this.options, c = this._const; const { year, month, min, max } = this.options;
var Y = o.year, M = o.month, De = BI.getDate(), day = De.getDay(); let Y = year;
const M = month, De = getDate(), day = De.getDay();
Y = Y | 0; Y = Y | 0;
De.setFullYear(Y, M, 1); De.setFullYear(Y, M, 1);
var newDate = BI.getOffsetDate(De, 42 - day); const newDate = getOffsetDate(De, 42 - day);
return !!BI.checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), o.min, o.max)[0];
},
_getItems: function () { return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0];
var o = this.options; }
var days = this._dateCreator(o.year, o.month - 1, o.day);
var items = []; _getItems () {
const o = this.options;
const days = this._dateCreator(o.year, o.month - 1, o.day);
const items = [];
items.push(days.slice(0, 7)); items.push(days.slice(0, 7));
items.push(days.slice(7, 14)); items.push(days.slice(7, 14));
items.push(days.slice(14, 21)); items.push(days.slice(14, 21));
@ -153,93 +161,94 @@ BI.Calendar = BI.inherit(BI.Widget, {
items.push(days.slice(28, 35)); items.push(days.slice(28, 35));
items.push(days.slice(35, 42)); items.push(days.slice(35, 42));
return BI.map(items, function (i, item) { return map(items, (i, item) => map(item, (j, td) => {
return BI.map(item, function (j, td) { let month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month);
var month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month); let year = o.year;
var year = o.year; if (month > 12) {
if (month > 12) { month = 1;
month = 1; year++;
year++; } else if (month < 1) {
} else if (month < 1) { month = 12;
month = 12; year--;
year--; }
}
return BI.extend(td, { return extend(td, {
type: "bi.calendar_date_item", type: "bi.calendar_date_item",
once: false, once: false,
forceSelected: true, forceSelected: true,
value: year + "-" + month + "-" + td.text, value: `${year}-${month}-${td.text}`,
disabled: td.disabled, disabled: td.disabled,
cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", cls: td.lastMonth || td.nextMonth ? "bi-tips" : "",
lgap: 2, lgap: 2,
rgap: 2, rgap: 2,
tgap: 4, tgap: 4,
bgap: 4 bgap: 4,
// selected: td.currentDay // selected: td.currentDay
});
}); });
}); }));
}, }
_populate: function() { _populate() {
this.days.populate(this._getItems()); this.days.populate(this._getItems());
}, }
setMinDate: function (minDate) { setMinDate (minDate) {
var o = this.options; const o = this.options;
if (BI.isNotEmptyString(o.min)) { if (isNotEmptyString(o.min)) {
o.min = minDate; o.min = minDate;
this._populate(); this._populate();
} }
}, }
setMaxDate: function (maxDate) { setMaxDate (maxDate) {
var o = this.options; const o = this.options;
if (BI.isNotEmptyString(o.max)) { if (isNotEmptyString(o.max)) {
o.max = maxDate; o.max = maxDate;
this._populate(); this._populate();
} }
}, }
setValue: function (ob) { setValue (ob) {
this.days.setValue([ob.year + "-" + ob.month + "-" + ob.day]); this.days.setValue([`${ob.year}-${ob.month}-${ob.day}`]);
}, }
getValue () {
const date = this.days.getValue()[0].match(/\d+/g);
getValue: function () {
var date = this.days.getValue()[0].match(/\d+/g);
return { return {
year: date[0] | 0, year: date[0] | 0,
month: date[1] | 0, month: date[1] | 0,
day: date[2] | 0 day: date[2] | 0,
}; };
} }
}); }
BI.extend(BI.Calendar, { extend(Calendar, {
getPageByDateJSON: function (json) { getPageByDateJSON (json) {
var year = BI.getDate().getFullYear(); const year = getDate().getFullYear();
var month = BI.getDate().getMonth(); const month = getDate().getMonth();
var page = (json.year - year) * 12; let page = (json.year - year) * 12;
page += json.month - 1 - month; page += json.month - 1 - month;
return page; return page;
}, },
getDateJSONByPage: function (v) { getDateJSONByPage (v) {
var months = BI.getDate().getMonth(); const months = getDate().getMonth();
var page = v; let page = v;
// 对当前page做偏移,使到当前年初 // 对当前page做偏移,使到当前年初
page = page + months; page = page + months;
var year = BI.parseInt(page / 12); let year = parseInt(page / 12);
if(page < 0 && page % 12 !== 0) { if (page < 0 && page % 12 !== 0) {
year--; year--;
} }
var month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12); const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12);
return { return {
year: BI.getDate().getFullYear() + year, year: getDate().getFullYear() + year,
month: month + 1 month: month + 1,
}; };
} },
}); });
BI.shortcut("bi.calendar", BI.Calendar);

198
src/case/calendar/calendar.year.js

@ -3,99 +3,104 @@
* @class BI.YearCalendar * @class BI.YearCalendar
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.YearCalendar = BI.inherit(BI.Widget, { import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core";
@shortcut()
_defaultConfig: function () { export class YearCalendar extends Widget {
var conf = BI.YearCalendar.superclass._defaultConfig.apply(this, arguments); static xtype = "bi.year_calendar";
return BI.extend(conf, { _defaultConfig () {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: "bi-year-calendar", baseCls: "bi-year-calendar",
behaviors: {}, behaviors: {},
logic: { logic: {
dynamic: false dynamic: false,
}, },
min: "1900-01-01", // 最小日期 min: "1900-01-01", // 最小日期
max: "2099-12-31", // 最大日期 max: "2099-12-31", // 最大日期
year: null year: null,
}); });
}, }
_yearCreator: function (Y) { _yearCreator (Y) {
var o = this.options; const { min, max } = this.options;
Y = Y | 0; Y = Y | 0;
var start = BI.YearCalendar.getStartYear(Y); const start = YearCalendar.getStartYear(Y);
var items = []; const items = [];
// 对于年控件来说,只要传入的minDate和maxDate的year区间包含v就是合法的 // 对于年控件来说,只要传入的minDate和maxDate的year区间包含v就是合法的
var startDate = BI.parseDateTime(o.min, "%Y-%X-%d"); const startDate = parseDateTime(min, "%Y-%X-%d");
var endDate = BI.parseDateTime(o.max, "%Y-%X-%d"); const endDate = parseDateTime(max, "%Y-%X-%d");
BI.each(BI.range(BI.YearCalendar.INTERVAL), function (i) { each(range(YearCalendar.INTERVAL), i => {
var td = {}; const td = {};
if (BI.checkDateVoid(start + i, 1, 1, BI.print(BI.getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), BI.print(BI.getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) { if (checkDateVoid(start + i, 1, 1, print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) {
td.disabled = true; td.disabled = true;
} }
td.text = start + i; td.text = start + i;
items.push(td); items.push(td);
}); });
return items;
},
_init: function () { return items;
BI.YearCalendar.superclass._init.apply(this, arguments); }
var self = this, o = this.options; _init () {
this.currentYear = BI.getDate().getFullYear(); super._init(...arguments);
const { behaviors, logic } = this.options;
this.currentYear = getDate().getFullYear();
this.years = BI.createWidget({ this.years = createWidget({
type: "bi.button_group", type: "bi.button_group",
behaviors: o.behaviors, behaviors,
items: BI.createItems(this._getItems(), {}), items: createItems(this._getItems(), {}),
layouts: [BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, { layouts: [LogicFactory.createLogic("table", extend({}, logic, {
columns: 2, columns: 2,
rows: 6, rows: 6,
columnSize: [1 / 2, 1 / 2], columnSize: [1 / 2, 1 / 2],
rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
})), { })), {
type: "bi.center_adapt", type: "bi.center_adapt",
vgap: 2 vgap: 2,
}] }],
}); });
this.years.on(BI.Controller.EVENT_CHANGE, function () { this.years.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
BI.createWidget(BI.extend({ createWidget(extend({
element: this element: this,
}, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, { }, LogicFactory.createLogic("vertical", extend({}, logic, {
scrolly: true, scrolly: true,
vgap: 5, vgap: 5,
hgap: 6, hgap: 6,
items: BI.LogicFactory.createLogicItemsByDirection("top", this.years) items: LogicFactory.createLogicItemsByDirection("top", this.years),
})))); }))));
}, }
isFrontYear: function () { isFrontYear () {
var o = this.options; const { min, max } = this.options;
var Y = o.year; let Y = this.options.year;
Y = Y | 0; Y = Y | 0;
return !!BI.checkDateVoid(BI.YearCalendar.getStartYear(Y) - 1, 1, 1, o.min, o.max)[0];
},
isFinalYear: function () { return !!checkDateVoid(YearCalendar.getStartYear(Y) - 1, 1, 1, min, max)[0];
var o = this.options, c = this._const; }
var Y = o.year;
isFinalYear () {
const { min, max } = this.options;
let Y = this.options.year;
Y = Y | 0; Y = Y | 0;
return !!BI.checkDateVoid(BI.YearCalendar.getEndYear(Y) + 1, 1, 1, o.min, o.max)[0];
},
_getItems: function () { return !!checkDateVoid(YearCalendar.getEndYear(Y) + 1, 1, 1, min, max)[0];
var o = this.options; }
var years = this._yearCreator(o.year || this.currentYear);
_getItems () {
const { year } = this.options;
const years = this._yearCreator(year || this.currentYear);
// 纵向排列年 // 纵向排列年
var len = years.length, tyears = BI.makeArray(len, ""); const len = years.length, tyears = makeArray(len, "");
var map = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11]; const mapArr = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11];
BI.each(years, function (i, y) { each(years, (i, y) => {
tyears[i] = years[map[i]]; tyears[i] = years[mapArr[i]];
}); });
var items = []; const items = [];
items.push(tyears.slice(0, 2)); items.push(tyears.slice(0, 2));
items.push(tyears.slice(2, 4)); items.push(tyears.slice(2, 4));
items.push(tyears.slice(4, 6)); items.push(tyears.slice(4, 6));
@ -103,71 +108,70 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
items.push(tyears.slice(8, 10)); items.push(tyears.slice(8, 10));
items.push(tyears.slice(10, 12)); items.push(tyears.slice(10, 12));
return BI.map(items, function (i, item) { return map(items, (i, item) => map(item, (j, td) => extend(td, {
return BI.map(item, function (j, td) { type: "bi.text_item",
return BI.extend(td, { cls: "bi-list-item-select bi-border-radius",
type: "bi.text_item", textAlign: "center",
cls: "bi-list-item-select bi-border-radius", whiteSpace: "normal",
textAlign: "center", once: false,
whiteSpace: "normal", forceSelected: true,
once: false, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
forceSelected: true, width: 45,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, value: td.text,
width: 45, disabled: td.disabled,
value: td.text, })));
disabled: td.disabled }
});
});
});
},
_populate: function () { _populate () {
this.years.populate(this._getItems()); this.years.populate(this._getItems());
}, }
setMinDate: function (minDate) { setMinDate (minDate) {
var o = this.options; const o = this.options;
if (BI.isNotEmptyString(o.min)) { if (isNotEmptyString(o.min)) {
o.min = minDate; o.min = minDate;
this._populate(); this._populate();
} }
}, }
setMaxDate: function (maxDate) { setMaxDate (maxDate) {
var o = this.options; const o = this.options;
if (BI.isNotEmptyString(this.options.max)) { if (isNotEmptyString(this.options.max)) {
o.max = maxDate; o.max = maxDate;
this._populate(); this._populate();
} }
}, }
setValue: function (val) { setValue (val) {
this.years.setValue([val]); this.years.setValue([val]);
}, }
getValue: function () { getValue () {
return this.years.getValue()[0]; return this.years.getValue()[0];
} }
}); }
// 类方法 // 类方法
BI.extend(BI.YearCalendar, { extend(YearCalendar, {
INTERVAL: 12, INTERVAL: 12,
// 获取显示的第一年 // 获取显示的第一年
getStartYear: function (year) { getStartYear (year) {
var cur = BI.getDate().getFullYear(); const cur = getDate().getFullYear();
return year - ((year - cur + 3) % BI.YearCalendar.INTERVAL + 12) % BI.YearCalendar.INTERVAL;
return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL;
}, },
getEndYear: function (year) { getEndYear (year) {
return BI.YearCalendar.getStartYear(year) + BI.YearCalendar.INTERVAL - 1; return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1;
}, },
getPageByYear: function (year) { getPageByYear (year) {
var cur = BI.getDate().getFullYear(); const cur = getDate().getFullYear();
year = BI.YearCalendar.getStartYear(year); year = YearCalendar.getStartYear(year);
return (year - cur + 3) / BI.YearCalendar.INTERVAL;
} return (year - cur + 3) / YearCalendar.INTERVAL;
},
}); });
BI.shortcut("bi.year_calendar", BI.YearCalendar);

3
src/case/calendar/index.js

@ -0,0 +1,3 @@
export { CalendarDateItem } from "./calendar.date.item";
export { Calendar } from "./calendar";
export { YearCalendar } from "./calendar.year";

230
src/case/editor/editor.clear.js

@ -1,28 +1,56 @@
import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core";
import { Editor, IconButton } from "@/base";
/** /**
* 有清楚按钮的文本框 * 有清按钮的文本框
* Created by GUY on 2015/9/29. * Created by GUY on 2015/9/29.
* @class BI.SmallTextEditor * @class ClearEditor
* @extends BI.SearchEditor * @extends Widget
*/ */
BI.ClearEditor = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class ClearEditor extends Widget {
var conf = BI.ClearEditor.superclass._defaultConfig.apply(this, arguments); static xtype = "bi.clear_editor"
return BI.extend(conf, {
static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_SPACE = "EVENT_SPACE"
static EVENT_BACKSPACE = "EVENT_BACKSPACE"
static EVENT_CLEAR = "EVENT_CLEAR"
static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_REMOVE = "EVENT_REMOVE"
static EVENT_EMPTY = "EVENT_EMPTY"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: "bi-clear-editor", baseCls: "bi-clear-editor",
height: 24, height: 24,
errorText: "", errorText: "",
watermark: "", watermark: "",
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn quitChecker: emptyFn,
}); });
}, }
_init: function () {
var self = this, o = this.options; _init() {
o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { const o = this.options;
self.setValue(newValue); o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
this.setValue(newValue);
}) : o.value; }) : o.value;
BI.ClearEditor.superclass._init.apply(this, arguments); super._init(...arguments);
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.editor", type: "bi.editor",
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
@ -34,150 +62,128 @@ BI.ClearEditor = BI.inherit(BI.Widget, {
value: o.value, value: o.value,
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
this.clear = BI.createWidget({ this.clear = createWidget({
type: "bi.icon_button", type: "bi.icon_button",
stopEvent: true, stopEvent: true,
invisible: !BI.isKey(o.value), invisible: !isKey(o.value),
cls: "search-close-h-font" cls: "search-close-h-font",
}); });
this.clear.on(BI.IconButton.EVENT_CHANGE, function () { this.clear.on(IconButton.EVENT_CHANGE, () => {
self.setValue(""); this.setValue("");
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT); this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT);
self.fireEvent(BI.ClearEditor.EVENT_CLEAR); this.fireEvent(ClearEditor.EVENT_CLEAR);
}); });
BI.createWidget({ createWidget({
element: this, element: this,
type: "bi.htape", type: "bi.htape",
items: [ items: [{
{ el: this.editor,
el: this.editor },
}, {
{ el: this.clear,
el: this.clear, width: 24,
width: 24 }
} ],
] });
}); this.editor.on(Controller.EVENT_CHANGE, (...args) => {
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.fireEvent(Controller.EVENT_CHANGE, ...args);
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, () => {
self.fireEvent(BI.ClearEditor.EVENT_FOCUS); this.fireEvent(ClearEditor.EVENT_FOCUS);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, () => {
self.fireEvent(BI.ClearEditor.EVENT_BLUR); this.fireEvent(ClearEditor.EVENT_BLUR);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, () => {
self.fireEvent(BI.ClearEditor.EVENT_CLICK); this.fireEvent(ClearEditor.EVENT_CLICK);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, () => {
self._checkClear(); this._checkClear();
self.fireEvent(BI.ClearEditor.EVENT_CHANGE); this.fireEvent(ClearEditor.EVENT_CHANGE);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, v => {
self.fireEvent(BI.ClearEditor.EVENT_KEY_DOWN, v); this.fireEvent(ClearEditor.EVENT_KEY_DOWN, v);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function () { this.editor.on(Editor.EVENT_SPACE, () => {
self.fireEvent(BI.ClearEditor.EVENT_SPACE); this.fireEvent(ClearEditor.EVENT_SPACE);
}); });
this.editor.on(BI.Editor.EVENT_BACKSPACE, function () { this.editor.on(Editor.EVENT_BACKSPACE, () => {
self.fireEvent(BI.ClearEditor.EVENT_BACKSPACE); this.fireEvent(ClearEditor.EVENT_BACKSPACE);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, () => {
self.fireEvent(BI.ClearEditor.EVENT_VALID); this.fireEvent(ClearEditor.EVENT_VALID);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, () => {
self.fireEvent(BI.ClearEditor.EVENT_ERROR); this.fireEvent(ClearEditor.EVENT_ERROR);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, () => {
self.fireEvent(BI.ClearEditor.EVENT_ENTER); this.fireEvent(ClearEditor.EVENT_ENTER);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, () => {
self.fireEvent(BI.ClearEditor.EVENT_RESTRICT); this.fireEvent(ClearEditor.EVENT_RESTRICT);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, () => {
self._checkClear(); this._checkClear();
self.fireEvent(BI.ClearEditor.EVENT_EMPTY); this.fireEvent(ClearEditor.EVENT_EMPTY);
}); });
this.editor.on(BI.Editor.EVENT_REMOVE, function () { this.editor.on(Editor.EVENT_REMOVE, () => {
self.fireEvent(BI.ClearEditor.EVENT_REMOVE); this.fireEvent(ClearEditor.EVENT_REMOVE);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, () => {
self.fireEvent(BI.ClearEditor.EVENT_CONFIRM); this.fireEvent(ClearEditor.EVENT_CONFIRM);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => {
self.fireEvent(BI.ClearEditor.EVENT_CHANGE_CONFIRM); this.fireEvent(ClearEditor.EVENT_CHANGE_CONFIRM);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, () => {
self.fireEvent(BI.ClearEditor.EVENT_START); this.fireEvent(ClearEditor.EVENT_START);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, () => {
self.fireEvent(BI.ClearEditor.EVENT_PAUSE); this.fireEvent(ClearEditor.EVENT_PAUSE);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, () => {
self.fireEvent(BI.ClearEditor.EVENT_STOP); this.fireEvent(ClearEditor.EVENT_STOP);
}); });
}, }
_checkClear: function () { _checkClear() {
if (!this.getValue()) { if (!this.getValue()) {
this.clear.invisible(); this.clear.invisible();
} else { } else {
this.clear.visible(); this.clear.visible();
} }
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
getValue: function () { getValue() {
if (this.isValid()) { if (this.isValid()) {
return this.editor.getValue(); return this.editor.getValue();
} }
}, }
setValue: function (v) { setValue(v) {
this.editor.setValue(v); this.editor.setValue(v);
if (BI.isKey(v)) { if (isKey(v)) {
this.clear.visible(); this.clear.visible();
} }
}, }
isValid: function () { isValid() {
return this.editor.isValid(); return this.editor.isValid();
} }
}); }
BI.ClearEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.ClearEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.ClearEditor.EVENT_BLUR = "EVENT_BLUR";
BI.ClearEditor.EVENT_CLICK = "EVENT_CLICK";
BI.ClearEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.ClearEditor.EVENT_SPACE = "EVENT_SPACE";
BI.ClearEditor.EVENT_BACKSPACE = "EVENT_BACKSPACE";
BI.ClearEditor.EVENT_CLEAR = "EVENT_CLEAR";
BI.ClearEditor.EVENT_START = "EVENT_START";
BI.ClearEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.ClearEditor.EVENT_STOP = "EVENT_STOP";
BI.ClearEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.ClearEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.ClearEditor.EVENT_VALID = "EVENT_VALID";
BI.ClearEditor.EVENT_ERROR = "EVENT_ERROR";
BI.ClearEditor.EVENT_ENTER = "EVENT_ENTER";
BI.ClearEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.ClearEditor.EVENT_REMOVE = "EVENT_REMOVE";
BI.ClearEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.clear_editor", BI.ClearEditor);

304
src/case/editor/editor.defaulttext.js

@ -1,11 +1,36 @@
import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core";
import { Editor, TextButton } from "@/base";
/** /**
* dailer * dailer
* 有默认提示文字的输入框 * 有默认提示文字的输入框
* @class BI.DefaultTextEditor * @class DefaultTextEditor
* @extends BI.Widget * @extends Widget
*/ */
BI.DefaultTextEditor = BI.inherit(BI.Widget, { @shortcut()
props: function () { export class DefaultTextEditor extends Widget {
static xtype = "bi.default_text_editor"
static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_SPACE = "EVENT_SPACE"
static EVENT_EMPTY = "EVENT_EMPTY"
props() {
return { return {
baseCls: "bi-default-text-editor", baseCls: "bi-default-text-editor",
hgap: 4, hgap: 4,
@ -14,21 +39,21 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, {
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn, quitChecker: emptyFn,
allowBlank: true, allowBlank: true,
watermark: "", watermark: "",
errorText: "", errorText: "",
height: 24, height: 24,
defaultText: "", // 默认显示值,默认显示值与显示值的区别是默认显示值标记灰色 defaultText: "", // 默认显示值,默认显示值与显示值的区别是默认显示值标记灰色
text: "", // 显示值 text: "", // 显示值
el: {} el: {},
}; };
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
this.editor = BI.createWidget(o.el, { this.editor = createWidget(o.el, {
type: "bi.editor", type: "bi.editor",
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
@ -48,239 +73,218 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, {
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
var showText = BI.isFunction(o.text) ? o.text() : o.text; const showText = isFunction(o.text) ? o.text() : o.text;
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.text_button", type: "bi.text_button",
cls: BI.isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style",
textAlign: "left", textAlign: "left",
height: o.height, height: o.height,
text: showText || o.defaultText, text: showText || o.defaultText,
hgap: o.hgap + 2, hgap: o.hgap + 2,
handler: function () { handler: () => {
self._showInput(); this._showInput();
self.editor.focus(); this.editor.focus();
self.editor.setValue(""); this.editor.setValue("");
}, },
title: o.title, title: o.title,
warningTitle: o.warningTitle, warningTitle: o.warningTitle,
tipType: o.tipType tipType: o.tipType,
}); });
this.text.on(BI.TextButton.EVENT_CHANGE, function () { this.text.on(TextButton.EVENT_CHANGE, () => {
BI.nextTick(function () { nextTick(() => {
self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK_LABEL); this.fireEvent(DefaultTextEditor.EVENT_CLICK_LABEL);
}); });
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_FOCUS, arguments); this.fireEvent(DefaultTextEditor.EVENT_FOCUS, ...args);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_BLUR, arguments); this.fireEvent(DefaultTextEditor.EVENT_BLUR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK, arguments); this.fireEvent(DefaultTextEditor.EVENT_CLICK, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE, arguments); this.fireEvent(DefaultTextEditor.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_KEY_DOWN, arguments); this.fireEvent(DefaultTextEditor.EVENT_KEY_DOWN, ...args);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_VALID, arguments); this.fireEvent(DefaultTextEditor.EVENT_VALID, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self.fireEvent(BI.DefaultTextEditor.EVENT_CONFIRM, arguments); this.fireEvent(DefaultTextEditor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(DefaultTextEditor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_START, arguments); this.fireEvent(DefaultTextEditor.EVENT_START, ...args);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_PAUSE, arguments); this.fireEvent(DefaultTextEditor.EVENT_PAUSE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_STOP, arguments); this.fireEvent(DefaultTextEditor.EVENT_STOP, ...args);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function () { this.editor.on(Editor.EVENT_SPACE, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_SPACE, arguments); this.fireEvent(DefaultTextEditor.EVENT_SPACE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_ERROR, arguments); this.fireEvent(DefaultTextEditor.EVENT_ERROR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_ENTER, arguments); this.fireEvent(DefaultTextEditor.EVENT_ENTER, ...args);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_RESTRICT, arguments); this.fireEvent(DefaultTextEditor.EVENT_RESTRICT, ...args);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, (...args) => {
self.fireEvent(BI.DefaultTextEditor.EVENT_EMPTY, arguments); this.fireEvent(DefaultTextEditor.EVENT_EMPTY, ...args);
}); });
return { return {
type: "bi.absolute", type: "bi.absolute",
items: [ items: [{
{ el: this.editor,
el: this.editor, left: 0,
left: 0, right: 0,
right: 0, top: 0,
top: 0, bottom: 0,
bottom: 0 }, {
}, { el: this.text,
el: this.text, left: 0,
left: 0, right: 0,
right: 0, top: 0,
top: 0, bottom: 0,
bottom: 0 }],
}
]
}; };
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
setTitle: function (title) { setTitle(title) {
this.text.setTitle(title); this.text.setTitle(title);
}, }
setWarningTitle: function (title) { setWarningTitle(title) {
this.text.setWarningTitle(title); this.text.setWarningTitle(title);
}, }
doRedMark: function () { doRedMark() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
focus: function () { focus() {
if (this.options.disabled === false) { if (this.options.disabled === false) {
this._showInput(); this._showInput();
this.editor.focus(); this.editor.focus();
} }
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
this._showHint(); this._showHint();
}, }
_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();
}, }
_setText: function (v) { _setText(v) {
this.text.setText(v); this.text.setText(v);
this.text.setTitle(v); this.text.setTitle(v);
}, }
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 (k) { setValue(k) {
this.editor.setValue(k); this.editor.setValue(k);
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.text.getValue(); return this.text.getValue();
}, }
setState: function (v) { setState(v) {
var o = this.options; const o = this.options;
if (BI.isKey(v)) { if (isKey(v)) {
this.text.setText(v); this.text.setText(v);
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
return; return;
} }
this.text.setText(o.defaultText); this.text.setText(o.defaultText);
this.text.element.addClass("bi-water-mark"); this.text.element.addClass("bi-water-mark");
}, }
setTipType: function (v) { setTipType(v) {
this.text.options.tipType = v; this.text.options.tipType = v;
}, }
getText: function () { getText() {
return this.text.getText(); return this.text.getText();
} }
}); }
BI.DefaultTextEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.DefaultTextEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.DefaultTextEditor.EVENT_BLUR = "EVENT_BLUR";
BI.DefaultTextEditor.EVENT_CLICK = "EVENT_CLICK";
BI.DefaultTextEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.DefaultTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
BI.DefaultTextEditor.EVENT_START = "EVENT_START";
BI.DefaultTextEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.DefaultTextEditor.EVENT_STOP = "EVENT_STOP";
BI.DefaultTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.DefaultTextEditor.EVENT_VALID = "EVENT_VALID";
BI.DefaultTextEditor.EVENT_ERROR = "EVENT_ERROR";
BI.DefaultTextEditor.EVENT_ENTER = "EVENT_ENTER";
BI.DefaultTextEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.DefaultTextEditor.EVENT_SPACE = "EVENT_SPACE";
BI.DefaultTextEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.default_text_editor", BI.DefaultTextEditor);

304
src/case/editor/editor.shelter.js

@ -1,37 +1,62 @@
import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core";
import { Editor, TextButton } from "@/base";
/** /**
* 带标记的文本框 * 带标记的文本框
* Created by GUY on 2016/1/25. * Created by GUY on 2016/1/25.
* @class BI.ShelterEditor * @class ShelterEditor
* @extends BI.Widget * @extends Widget
*/ */
BI.ShelterEditor = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class ShelterEditor extends Widget {
var conf = BI.ShelterEditor.superclass._defaultConfig.apply(this, arguments); static xtype = "bi.shelter_editor"
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-shelter-editor", static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_SPACE = "EVENT_SPACE"
static EVENT_EMPTY = "EVENT_EMPTY"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-shelter-editor`,
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn, quitChecker: emptyFn,
allowBlank: true, allowBlank: true,
watermark: "", watermark: "",
errorText: "", errorText: "",
height: 24, height: 24,
textAlign: "left" textAlign: "left",
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const o = this.options;
o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
self.setValue(newValue); this.setValue(newValue);
}) : o.value; }) : o.value;
BI.ShelterEditor.superclass._init.apply(this, arguments); super._init(...arguments);
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.editor", type: "bi.editor",
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
@ -49,7 +74,7 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
errorText: o.errorText, errorText: o.errorText,
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.text_button", type: "bi.text_button",
cls: "shelter-editor-text", cls: "shelter-editor-text",
title: o.title, title: o.title,
@ -57,92 +82,90 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
tipType: o.tipType, tipType: o.tipType,
textAlign: o.textAlign, textAlign: o.textAlign,
height: o.height, height: o.height,
hgap: o.hgap + 2 hgap: o.hgap + 2,
}); });
this.text.on(BI.Controller.EVENT_CHANGE, function () { this.text.on(Controller.EVENT_CHANGE, (...args) => {
arguments[2] = self; args[2] = this;
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.text.on(BI.TextButton.EVENT_CHANGE, function () { this.text.on(TextButton.EVENT_CHANGE, () => {
self.fireEvent(BI.ShelterEditor.EVENT_CLICK_LABEL); this.fireEvent(ShelterEditor.EVENT_CLICK_LABEL);
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_FOCUS, arguments); this.fireEvent(ShelterEditor.EVENT_FOCUS, ...args);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_BLUR, arguments); this.fireEvent(ShelterEditor.EVENT_BLUR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_CLICK, arguments); this.fireEvent(ShelterEditor.EVENT_CLICK, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_CHANGE, arguments); this.fireEvent(ShelterEditor.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_KEY_DOWN, arguments); this.fireEvent(ShelterEditor.EVENT_KEY_DOWN, ...args);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_VALID, arguments); this.fireEvent(ShelterEditor.EVENT_VALID, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self._checkText(); this._checkText();
self.fireEvent(BI.ShelterEditor.EVENT_CONFIRM, arguments); this.fireEvent(ShelterEditor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self._checkText(); this._checkText();
self.fireEvent(BI.ShelterEditor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(ShelterEditor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_START, arguments); this.fireEvent(ShelterEditor.EVENT_START, ...args);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_PAUSE, arguments); this.fireEvent(ShelterEditor.EVENT_PAUSE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_STOP, arguments); this.fireEvent(ShelterEditor.EVENT_STOP, ...args);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function () { this.editor.on(Editor.EVENT_SPACE, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_SPACE, arguments); this.fireEvent(ShelterEditor.EVENT_SPACE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, (...args) => {
self._checkText(); this._checkText();
self.fireEvent(BI.ShelterEditor.EVENT_ERROR, arguments); this.fireEvent(ShelterEditor.EVENT_ERROR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_ENTER, arguments); this.fireEvent(ShelterEditor.EVENT_ENTER, ...args);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_RESTRICT, arguments); this.fireEvent(ShelterEditor.EVENT_RESTRICT, ...args);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, (...args) => {
self.fireEvent(BI.ShelterEditor.EVENT_EMPTY, arguments); this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args);
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [ items: [{
{ el: this.text,
el: this.text, inset: 0,
inset: 0, }, {
}, { el: this.editor,
el: this.editor, inset: 0,
inset: 0, }],
}
]
}); });
this._showHint(); this._showHint();
self._checkText(); this._checkText();
}, }
_checkText: function () { _checkText() {
var o = this.options; const o = this.options;
BI.nextTick(BI.bind(function () { nextTick(bind(function () {
if (this.editor.getValue() === "") { if (this.editor.getValue() === "") {
this.text.setValue(o.watermark || ""); this.text.setValue(o.watermark || "");
this.text.element.addClass("bi-water-mark"); this.text.element.addClass("bi-water-mark");
@ -150,130 +173,109 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
this.text.setValue(this.editor.getValue()); this.text.setValue(this.editor.getValue());
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} }
BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); isKey(o.keyword) && this.text.doRedMark(o.keyword);
}, this)); }, this));
}, }
_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();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
setTitle: function (title) { setTitle(title) {
this.text.setTitle(title); this.text.setTitle(title);
}, }
setWarningTitle: function (title) { setWarningTitle(title) {
this.text.setWarningTitle(title); this.text.setWarningTitle(title);
}, }
focus: function () { focus() {
this._showInput(); this._showInput();
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
this._showHint(); this._showHint();
this._checkText(); this._checkText();
}, }
doRedMark: function () { doRedMark() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
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();
}, }
setTextStyle: function (style) { setTextStyle(style) {
this.text.setStyle(style); this.text.setStyle(style);
}, }
setValue: function (k) { setValue(k) {
var o = this.options;
this.editor.setValue(k); this.editor.setValue(k);
this._checkText(); this._checkText();
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.text.getValue(); return this.text.getValue();
}, }
setState: function (v) { setState(v) {
this._showHint(); this._showHint();
this.text.setValue(v); this.text.setValue(v);
} }
}); }
BI.ShelterEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.ShelterEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.ShelterEditor.EVENT_BLUR = "EVENT_BLUR";
BI.ShelterEditor.EVENT_CLICK = "EVENT_CLICK";
BI.ShelterEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.ShelterEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
BI.ShelterEditor.EVENT_START = "EVENT_START";
BI.ShelterEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.ShelterEditor.EVENT_STOP = "EVENT_STOP";
BI.ShelterEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.ShelterEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.ShelterEditor.EVENT_VALID = "EVENT_VALID";
BI.ShelterEditor.EVENT_ERROR = "EVENT_ERROR";
BI.ShelterEditor.EVENT_ENTER = "EVENT_ENTER";
BI.ShelterEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.ShelterEditor.EVENT_SPACE = "EVENT_SPACE";
BI.ShelterEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.shelter_editor", BI.ShelterEditor);

313
src/case/editor/editor.sign.js

@ -1,37 +1,63 @@
import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core";
import { Editor, TextButton } from "@/base";
/** /**
* 带标记的文本框 * 带标记的文本框
* Created by GUY on 2015/8/28. * Created by GUY on 2015/8/28.
* @class BI.SignEditor * @class SignEditor
* @extends BI.Widget * @extends Widget
*/ */
BI.SignEditor = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class SignEditor extends Widget {
var conf = BI.SignEditor.superclass._defaultConfig.apply(this, arguments); static xtype = "bi.sign_editor"
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-sign-editor", static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"
static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_SPACE = "EVENT_SPACE"
static EVENT_EMPTY = "EVENT_EMPTY"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-sign-editor`,
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn, quitChecker: emptyFn,
allowBlank: true, allowBlank: true,
watermark: "", watermark: "",
errorText: "", errorText: "",
textAlign: "left", textAlign: "left",
height: 24 height: 24,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const o = this.options;
o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
self.setValue(newValue); this.setValue(newValue);
}) : o.value; }) : o.value;
BI.SignEditor.superclass._init.apply(this, arguments); super._init(...arguments);
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.editor", type: "bi.editor",
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
@ -49,7 +75,7 @@ BI.SignEditor = BI.inherit(BI.Widget, {
errorText: o.errorText, errorText: o.errorText,
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.text_button", type: "bi.text_button",
cls: "sign-editor-text", cls: "sign-editor-text",
title: o.title, title: o.title,
@ -58,229 +84,206 @@ BI.SignEditor = BI.inherit(BI.Widget, {
textAlign: o.textAlign, textAlign: o.textAlign,
height: o.height, height: o.height,
hgap: o.hgap + 2, hgap: o.hgap + 2,
handler: function () { handler: () => {
self._showInput(); this._showInput();
self.editor.focus(); this.editor.focus();
self.editor.selectAll(); this.editor.selectAll();
} },
}); });
this.text.on(BI.TextButton.EVENT_CHANGE, function () { this.text.on(TextButton.EVENT_CHANGE, () => {
BI.nextTick(function () { nextTick(() => {
self.fireEvent(BI.SignEditor.EVENT_CLICK_LABEL); this.fireEvent(SignEditor.EVENT_CLICK_LABEL);
}); });
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_FOCUS, arguments); this.fireEvent(SignEditor.EVENT_FOCUS, ...args);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_BLUR, arguments); this.fireEvent(SignEditor.EVENT_BLUR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_CLICK, arguments); this.fireEvent(SignEditor.EVENT_CLICK, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_CHANGE, arguments); this.fireEvent(SignEditor.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_KEY_DOWN, arguments); this.fireEvent(SignEditor.EVENT_KEY_DOWN, ...args);
}); });
this.editor.on(BI.Editor.EVENT_QUICK_DOWN, function () { this.editor.on(Editor.EVENT_QUICK_DOWN, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_QUICK_DOWN, arguments); this.fireEvent(SignEditor.EVENT_QUICK_DOWN, ...args);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_VALID, arguments); this.fireEvent(SignEditor.EVENT_VALID, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self._checkText(); this._checkText();
self.fireEvent(BI.SignEditor.EVENT_CONFIRM, arguments); this.fireEvent(SignEditor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self._checkText(); this._checkText();
self.fireEvent(BI.SignEditor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(SignEditor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_START, arguments); this.fireEvent(SignEditor.EVENT_START, ...args);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_PAUSE, arguments); this.fireEvent(SignEditor.EVENT_PAUSE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_STOP, arguments); this.fireEvent(SignEditor.EVENT_STOP, ...args);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function () { this.editor.on(Editor.EVENT_SPACE, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_SPACE, arguments); this.fireEvent(SignEditor.EVENT_SPACE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, (...args) => {
self._checkText(); this._checkText();
self.fireEvent(BI.SignEditor.EVENT_ERROR, arguments); this.fireEvent(SignEditor.EVENT_ERROR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_ENTER, arguments); this.fireEvent(SignEditor.EVENT_ENTER, ...args);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_RESTRICT, arguments); this.fireEvent(SignEditor.EVENT_RESTRICT, ...args);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, (...args) => {
self.fireEvent(BI.SignEditor.EVENT_EMPTY, arguments); this.fireEvent(SignEditor.EVENT_EMPTY, ...args);
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [ items: [{
{ el: this.text,
el: this.text, inset: 0,
inset: 0, }, {
}, { el: this.editor,
el: this.editor, inset: 0,
inset: 0, }],
}
]
}); });
this._showHint(); this._showHint();
self._checkText(); this._checkText();
}, }
_checkText: function () { _checkText() {
var o = this.options; const o = this.options;
BI.nextTick(BI.bind(function () { nextTick(bind(function () {
if (this.editor.getValue() === "") { if (this.editor.getValue() === "") {
this.text.setValue(o.watermark || ""); this.text.setValue(o.watermark || "");
this.text.element.addClass("bi-water-mark"); this.text.element.addClass("bi-water-mark");
} else { } else {
this.text.setValue(this.editor.getValue()); this.text.setValue(this.editor.getValue());
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); isKey(o.keyword) && this.text.doRedMark(o.keyword);
} }
}, this)); }, this));
}, }
_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();
}, }
setTitle: function (title) { setTitle(title) {
this.text.setTitle(title); this.text.setTitle(title);
}, }
setTipType: function (v) { setTipType(v) {
this.text.setTipType(v); this.text.setTipType(v);
}, }
setWarningTitle: function (title) { setWarningTitle(title) {
this.text.setWarningTitle(title); this.text.setWarningTitle(title);
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this._checkText(); this._checkText();
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
focus: function () { focus() {
this._showInput(); this._showInput();
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
this._showHint(); this._showHint();
this._checkText(); this._checkText();
}, }
doRedMark: function () { doRedMark() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
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 (k) { setValue(k) {
this.editor.setValue(k); this.editor.setValue(k);
this._checkText(); this._checkText();
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.text.getValue(); return this.text.getValue();
}, }
setState: function (v) { setState(v) {
this._showHint(); this._showHint();
this.text.setValue(v); this.text.setValue(v);
} }
}); }
BI.SignEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.SignEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.SignEditor.EVENT_BLUR = "EVENT_BLUR";
BI.SignEditor.EVENT_CLICK = "EVENT_CLICK";
BI.SignEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.SignEditor.EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN";
BI.SignEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
BI.SignEditor.EVENT_START = "EVENT_START";
BI.SignEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.SignEditor.EVENT_STOP = "EVENT_STOP";
BI.SignEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.SignEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.SignEditor.EVENT_VALID = "EVENT_VALID";
BI.SignEditor.EVENT_ERROR = "EVENT_ERROR";
BI.SignEditor.EVENT_ENTER = "EVENT_ENTER";
BI.SignEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.SignEditor.EVENT_SPACE = "EVENT_SPACE";
BI.SignEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.sign_editor", BI.SignEditor);

338
src/case/editor/editor.state.js

@ -1,36 +1,61 @@
import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core";
import { TextButton, Editor } from "@/base";
/** /**
* guy * guy
* 记录状态的输入框 * 记录状态的输入框
* @class BI.StateEditor * @class StateEditor
* @extends BI.Single * @extends Single
*/ */
BI.StateEditor = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class StateEditor extends Widget {
var conf = BI.StateEditor.superclass._defaultConfig.apply(this, arguments); static xtype = "bi.state_editor"
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-state-editor", static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_SPACE = "EVENT_SPACE"
static EVENT_EMPTY = "EVENT_EMPTY"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-state-editor`,
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn, quitChecker: emptyFn,
allowBlank: true, allowBlank: true,
watermark: "", watermark: "",
errorText: "", errorText: "",
height: 24, height: 24,
defaultText: BI.i18nText("BI-Basic_Unrestricted"), // 默认显示值,默认显示值与显示值的区别是默认显示值标记灰色 defaultText: i18nText("BI-Basic_Unrestricted"), // 默认显示值,默认显示值与显示值的区别是默认显示值标记灰色
text: "", // 显示值 text: "", // 显示值
el: {} el: {},
}); });
}, }
_init: function () { _init() {
BI.StateEditor.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.editor = BI.createWidget(o.el, { this.editor = createWidget(o.el, {
type: "bi.editor", type: "bi.editor",
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
@ -48,262 +73,243 @@ BI.StateEditor = BI.inherit(BI.Widget, {
errorText: o.errorText, errorText: o.errorText,
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.text_button", type: "bi.text_button",
cls: "bi-water-mark tip-text-style", cls: "bi-water-mark tip-text-style",
textAlign: "left", textAlign: "left",
height: o.height, height: o.height,
text: o.text, text: o.text,
hgap: o.hgap + 2, hgap: o.hgap + 2,
handler: function () { handler: () => {
self._showInput(); this._showInput();
self.editor.focus(); this.editor.focus();
self.editor.setValue(""); this.editor.setValue("");
}, },
title: BI.isNotNull(o.tipText) ? o.tipText : function () { title: isNotNull(o.tipText) ? o.tipText : () => {
var title = ""; let title = "";
if (BI.isString(self.stateValue)) { if (isString(this.stateValue)) {
title = self.stateValue; title = this.stateValue;
} }
if (BI.isArray(self.stateValue) && self.stateValue.length === 1) { if (isArray(this.stateValue) && this.stateValue.length === 1) {
title = self.stateValue[0]; title = this.stateValue[0];
} }
return title; return title;
}, },
warningTitle: o.warningTitle, warningTitle: o.warningTitle,
tipType: o.tipType tipType: o.tipType,
}); });
this.text.on(BI.TextButton.EVENT_CHANGE, function () { this.text.on(TextButton.EVENT_CHANGE, () => {
BI.nextTick(function () { nextTick(() => {
self.fireEvent(BI.StateEditor.EVENT_CLICK_LABEL); this.fireEvent(StateEditor.EVENT_CLICK_LABEL);
}); });
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_FOCUS, arguments); this.fireEvent(StateEditor.EVENT_FOCUS, ...args);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_BLUR, arguments); this.fireEvent(StateEditor.EVENT_BLUR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_CLICK, arguments); this.fireEvent(StateEditor.EVENT_CLICK, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_CHANGE, arguments); this.fireEvent(StateEditor.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_KEY_DOWN, arguments); this.fireEvent(StateEditor.EVENT_KEY_DOWN, ...args);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_VALID, arguments); this.fireEvent(StateEditor.EVENT_VALID, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self.fireEvent(BI.StateEditor.EVENT_CONFIRM, arguments); this.fireEvent(StateEditor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self.fireEvent(BI.StateEditor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(StateEditor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_START, arguments); this.fireEvent(StateEditor.EVENT_START, ...args);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_PAUSE, arguments); this.fireEvent(StateEditor.EVENT_PAUSE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_STOP, arguments); this.fireEvent(StateEditor.EVENT_STOP, ...args);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function () { this.editor.on(Editor.EVENT_SPACE, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_SPACE, arguments); this.fireEvent(StateEditor.EVENT_SPACE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_ERROR, arguments); this.fireEvent(StateEditor.EVENT_ERROR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_ENTER, arguments); this.fireEvent(StateEditor.EVENT_ENTER, ...args);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_RESTRICT, arguments); this.fireEvent(StateEditor.EVENT_RESTRICT, ...args);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, (...args) => {
self.fireEvent(BI.StateEditor.EVENT_EMPTY, arguments); this.fireEvent(StateEditor.EVENT_EMPTY, ...args);
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [ items: [{
{ el: this.text,
el: this.text, inset: 0,
inset: 0, }, {
}, { el: this.editor,
el: this.editor, inset: 0,
inset: 0, }],
}
]
}); });
this._showHint(); this._showHint();
if (BI.isNotNull(o.text)) { if (isNotNull(o.text)) {
this.setState(o.text); this.setState(o.text);
} }
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
doRedMark: function () { doRedMark() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
focus: function () { focus() {
if (this.options.disabled === false) { if (this.options.disabled === false) {
this._showInput(); this._showInput();
this.editor.focus(); this.editor.focus();
} }
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
this._showHint(); this._showHint();
}, }
_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();
}, }
_setText: function (v) { _setText(v) {
this.text.setText(v); this.text.setText(v);
this.text.setTitle(v); this.text.setTitle(v);
}, }
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 (k) { setValue(k) {
this.editor.setValue(k); this.editor.setValue(k);
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.editor.getValue().match(/[^\s]+/g); return this.editor.getValue().match(/[^\s]+/g);
}, }
setState: function (v) { setState(v) {
var o = this.options; const o = this.options;
var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
BI.StateEditor.superclass.setValue.apply(this, arguments); super.setValue(...arguments);
this.stateValue = v; this.stateValue = v;
if (BI.isNumber(v)) { if (isNumber(v)) {
if (v === BI.Selection.All) { if (v === Selection.All) {
this._setText(BI.i18nText("BI-Select_All")); this._setText(i18nText("BI-Select_All"));
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} else if (v === BI.Selection.Multi) { } else if (v === Selection.Multi) {
this._setText(BI.i18nText("BI-Select_Part")); this._setText(i18nText("BI-Select_Part"));
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} else { } else {
this._setText(BI.isKey(defaultText) ? defaultText : o.text); this._setText(isKey(defaultText) ? defaultText : o.text);
BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
} }
return; return;
} }
if (BI.isString(v)) { if (isString(v)) {
this._setText(v); this._setText(v);
// 配置了defaultText才判断标灰,其他情况不标灰 // 配置了defaultText才判断标灰,其他情况不标灰
(BI.isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); (isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
return; return;
} }
if (BI.isArray(v)) { if (isArray(v)) {
if (BI.isEmpty(v)) { if (isEmpty(v)) {
this._setText(BI.isKey(defaultText) ? defaultText : o.text); this._setText(isKey(defaultText) ? defaultText : o.text);
BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
} else if (v.length === 1) { } else if (v.length === 1) {
this._setText(v[0]); this._setText(v[0]);
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} else { } else {
this._setText(BI.i18nText("BI-Select_Part")); this._setText(i18nText("BI-Select_Part"));
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} }
} }
}, }
setTipType: function (v) { setTipType(v) {
this.text.options.tipType = v; this.text.options.tipType = v;
}, }
getText: function () { getText() {
return this.text.getText(); return this.text.getText();
} }
}); }
BI.StateEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.StateEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.StateEditor.EVENT_BLUR = "EVENT_BLUR";
BI.StateEditor.EVENT_CLICK = "EVENT_CLICK";
BI.StateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.StateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
BI.StateEditor.EVENT_START = "EVENT_START";
BI.StateEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.StateEditor.EVENT_STOP = "EVENT_STOP";
BI.StateEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.StateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.StateEditor.EVENT_VALID = "EVENT_VALID";
BI.StateEditor.EVENT_ERROR = "EVENT_ERROR";
BI.StateEditor.EVENT_ENTER = "EVENT_ENTER";
BI.StateEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.StateEditor.EVENT_SPACE = "EVENT_SPACE";
BI.StateEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.state_editor", BI.StateEditor);

312
src/case/editor/editor.state.simple.js

@ -1,36 +1,61 @@
import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core";
import { Editor, TextButton } from "@/base";
/** /**
* 无限制-已选择状态输入框 * 无限制-已选择状态输入框
* Created by GUY on 2016/5/18. * Created by GUY on 2016/5/18.
* @class BI.SimpleStateEditor * @class SimpleStateEditor
* @extends BI.Single * @extends Single
*/ */
BI.SimpleStateEditor = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class SimpleStateEditor extends Widget {
var conf = BI.SimpleStateEditor.superclass._defaultConfig.apply(this, arguments); static xtype = "bi.simple_state_editor"
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-simple-state-editor", static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_SPACE = "EVENT_SPACE"
static EVENT_EMPTY = "EVENT_EMPTY"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-simple-state-editor`,
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn, quitChecker: emptyFn,
mouseOut: false, mouseOut: false,
allowBlank: true, allowBlank: true,
watermark: "", watermark: "",
errorText: "", errorText: "",
height: 24, height: 24,
text: "", text: "",
defaultText: BI.i18nText("BI-Basic_Unrestricted"), defaultText: i18nText("BI-Basic_Unrestricted"),
}); });
}, }
_init: function () { _init() {
BI.SimpleStateEditor.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.editor", type: "bi.editor",
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
@ -48,241 +73,220 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, {
errorText: o.errorText, errorText: o.errorText,
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.text_button", type: "bi.text_button",
cls: "bi-water-mark", cls: "bi-water-mark",
textAlign: "left", textAlign: "left",
text: o.text, text: o.text,
height: o.height, height: o.height,
hgap: o.hgap + 2, hgap: o.hgap + 2,
handler: function () { handler: () => {
self._showInput(); this._showInput();
self.editor.focus(); this.editor.focus();
self.editor.setValue(""); this.editor.setValue("");
} },
}); });
this.text.on(BI.TextButton.EVENT_CHANGE, function () { this.text.on(TextButton.EVENT_CHANGE, () => {
BI.nextTick(function () { nextTick(() => {
self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK_LABEL); this.fireEvent(SimpleStateEditor.EVENT_CLICK_LABEL);
}); });
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [ items: [{
{ el: this.text,
el: this.text, left: 0,
left: 0, right: 0,
right: 0, top: 0,
top: 0, bottom: 0,
bottom: 0 }],
}
]
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_FOCUS, arguments); this.fireEvent(SimpleStateEditor.EVENT_FOCUS, ...args);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_BLUR, arguments); this.fireEvent(SimpleStateEditor.EVENT_BLUR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK, arguments); this.fireEvent(SimpleStateEditor.EVENT_CLICK, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE, arguments); this.fireEvent(SimpleStateEditor.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_KEY_DOWN, arguments); this.fireEvent(SimpleStateEditor.EVENT_KEY_DOWN, ...args);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_VALID, arguments); this.fireEvent(SimpleStateEditor.EVENT_VALID, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self.fireEvent(BI.SimpleStateEditor.EVENT_CONFIRM, arguments); this.fireEvent(SimpleStateEditor.EVENT_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
self._showHint(); this._showHint();
self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM, arguments); this.fireEvent(SimpleStateEditor.EVENT_CHANGE_CONFIRM, ...args);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_START, arguments); this.fireEvent(SimpleStateEditor.EVENT_START, ...args);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_PAUSE, arguments); this.fireEvent(SimpleStateEditor.EVENT_PAUSE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_STOP, arguments); this.fireEvent(SimpleStateEditor.EVENT_STOP, ...args);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function () { this.editor.on(Editor.EVENT_SPACE, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_SPACE, arguments); this.fireEvent(SimpleStateEditor.EVENT_SPACE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_ERROR, arguments); this.fireEvent(SimpleStateEditor.EVENT_ERROR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_ENTER, arguments); this.fireEvent(SimpleStateEditor.EVENT_ENTER, ...args);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_RESTRICT, arguments); this.fireEvent(SimpleStateEditor.EVENT_RESTRICT, ...args);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, (...args) => {
self.fireEvent(BI.SimpleStateEditor.EVENT_EMPTY, arguments); this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args);
}); });
BI.createWidget({ createWidget({
type: "bi.vertical", type: "bi.vertical",
scrolly: false, scrolly: false,
element: this, element: this,
items: [this.editor] items: [this.editor],
}); });
this._showHint(); this._showHint();
if (BI.isNotNull(o.text)) { if (isNotNull(o.text)) {
this.setState(o.text); this.setState(o.text);
} }
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
doRedMark: function () { doRedMark() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
return; return;
} }
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
focus: function () { focus() {
this._showInput(); this._showInput();
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
this._showHint(); this._showHint();
}, }
_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();
}, }
_setText: function (v) { _setText(v) {
this.text.setText(v); this.text.setText(v);
this.text.setTitle(v); this.text.setTitle(v);
}, }
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 (k) { setValue(k) {
this.editor.setValue(k); this.editor.setValue(k);
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.editor.getValue().match(/[^\s]+/g); return this.editor.getValue().match(/[^\s]+/g);
}, }
setState: function (v) { setState(v) {
var o = this.options; const o = this.options;
BI.SimpleStateEditor.superclass.setValue.apply(this, arguments); super.setValue(...arguments);
var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
if (BI.isNumber(v)) { if (isNumber(v)) {
if (v === BI.Selection.All) { if (v === Selection.All) {
this._setText(BI.i18nText("BI-Already_Selected")); this._setText(i18nText("BI-Already_Selected"));
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} else if (v === BI.Selection.Multi) { } else if (v === Selection.Multi) {
this._setText(BI.i18nText("BI-Already_Selected")); this._setText(i18nText("BI-Already_Selected"));
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} else { } else {
this._setText(BI.isKey(defaultText) ? defaultText : o.text); this._setText(isKey(defaultText) ? defaultText : o.text);
this.text.element.addClass("bi-water-mark"); this.text.element.addClass("bi-water-mark");
} }
return; return;
} }
if (!BI.isArray(v) || v.length === 1) { if (!isArray(v) || v.length === 1) {
this._setText(v); this._setText(v);
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} else if (BI.isEmpty(v)) { } else if (isEmpty(v)) {
this._setText(o.text); this._setText(o.text);
this.text.element.addClass("bi-water-mark"); this.text.element.addClass("bi-water-mark");
} else { } else {
this._setText(BI.i18nText("BI-Already_Selected")); this._setText(i18nText("BI-Already_Selected"));
this.text.element.removeClass("bi-water-mark"); this.text.element.removeClass("bi-water-mark");
} }
}, }
getText: function () { getText() {
return this.text.getText(); return this.text.getText();
} }
}); }
BI.SimpleStateEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.SimpleStateEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.SimpleStateEditor.EVENT_BLUR = "EVENT_BLUR";
BI.SimpleStateEditor.EVENT_CLICK = "EVENT_CLICK";
BI.SimpleStateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.SimpleStateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
BI.SimpleStateEditor.EVENT_START = "EVENT_START";
BI.SimpleStateEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.SimpleStateEditor.EVENT_STOP = "EVENT_STOP";
BI.SimpleStateEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.SimpleStateEditor.EVENT_VALID = "EVENT_VALID";
BI.SimpleStateEditor.EVENT_ERROR = "EVENT_ERROR";
BI.SimpleStateEditor.EVENT_ENTER = "EVENT_ENTER";
BI.SimpleStateEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.SimpleStateEditor.EVENT_SPACE = "EVENT_SPACE";
BI.SimpleStateEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.simple_state_editor", BI.SimpleStateEditor);

6
src/case/editor/index.js

@ -0,0 +1,6 @@
export { ClearEditor } from "./editor.clear";
export { DefaultTextEditor } from "./editor.defaulttext";
export { ShelterEditor } from "./editor.shelter";
export { SignEditor } from "./editor.sign";
export { StateEditor } from "./editor.state";
export { SimpleStateEditor } from "./editor.state.simple";

10
src/case/index.js

@ -1,7 +1,17 @@
import * as button from "./button"; import * as button from "./button";
import * as calendarItem from "./calendar";
import * as pager from "./pager";
import * as editor from "./editor";
Object.assign(BI, { Object.assign(BI, {
...button, ...button,
...calendarItem,
...pager,
...editor,
}); });
export * from "./button"; export * from "./button";
export * from "./calendar";
export * from "./pager";
export * from "./editor";

3
src/case/pager/index.js

@ -0,0 +1,3 @@
export { AllCountPager } from "./pager.all.count";
export { DetailPager } from "./pager.detail";
export { DirectionPager } from "./pager.direction";

206
src/case/pager/pager.all.count.js

@ -2,10 +2,15 @@
* 有总页数和总行数的分页控件 * 有总页数和总行数的分页控件
* Created by Young's on 2016/10/13. * Created by Young's on 2016/10/13.
*/ */
BI.AllCountPager = BI.inherit(BI.Widget, { import { shortcut, Widget, extend, isPositiveInteger, createWidget, parseInt, HorizontalAlign, isNotEmptyObject } from "@/core";
// import { TextEditor } from "@/widget/editor/editor.text";
_defaultConfig: function () { import { Pager } from "@/base";
return BI.extend(BI.AllCountPager.superclass._defaultConfig.apply(this, arguments), { @shortcut()
export class AllCountPager extends Widget {
static xtype = "bi.all_count_pager";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig () {
return extend(super._defaultConfig(...arguments), {
extraCls: "bi-all-count-pager", extraCls: "bi-all-count-pager",
pagerDirection: "vertical", // 翻页按钮方向,可选值:vertical/horizontal pagerDirection: "vertical", // 翻页按钮方向,可选值:vertical/horizontal
height: 24, height: 24,
@ -16,36 +21,36 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
showRowCount: true, showRowCount: true,
showRowInfo: true, showRowInfo: true,
}); });
}, }
_init: function () { _init () {
BI.AllCountPager.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options, pagerIconCls = this._getPagerIconCls(); const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, pagerIconCls = this._getPagerIconCls();
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.small_text_editor", type: "bi.small_text_editor",
cls: "pager-editor bi-border-radius", cls: "pager-editor bi-border-radius",
validationChecker: function (v) { validationChecker (v) {
return (o.pages === 0 && v === "0") || BI.isPositiveInteger(v); return (pages === 0 && v === "0") || isPositiveInteger(v);
}, },
hgap: 4, hgap: 4,
vgap: 0, vgap: 0,
value: o.curr, value: curr,
errorText: BI.i18nText("BI-Please_Input_Positive_Integer"), errorText: BI.i18nText("BI-Please_Input_Positive_Integer"),
width: 40, width: 40,
height: 24, height: 24,
invisible: o.pages <= 1 invisible: pages <= 1,
}); });
this.pager = BI.createWidget({ this.pager = createWidget({
type: "bi.pager", type: "bi.pager",
width: 58, width: 58,
layouts: [{ layouts: [{
type: "bi.horizontal", type: "bi.horizontal",
lgap: 5 lgap: 5,
}], }],
dynamicShow: false, dynamicShow: false,
pages: o.pages, pages,
curr: o.curr, curr,
groups: 0, groups: 0,
first: false, first: false,
@ -57,7 +62,7 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
warningTitle: BI.i18nText("BI-Current_Is_First_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
height: 22, height: 22,
width: 22, width: 22,
cls: "bi-border bi-border-radius all-pager-prev bi-list-item-select2 " + pagerIconCls.preCls cls: `bi-border bi-border-radius all-pager-prev bi-list-item-select2 ${pagerIconCls.preCls}`,
}, },
next: { next: {
type: "bi.icon_button", type: "bi.icon_button",
@ -66,42 +71,43 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
height: 22, height: 22,
width: 22, width: 22,
cls: "bi-border bi-border-radius all-pager-next bi-list-item-select2 " + pagerIconCls.nextCls cls: `bi-border bi-border-radius all-pager-next bi-list-item-select2 ${pagerIconCls.nextCls}`,
}, },
hasPrev: o.hasPrev, hasPrev,
hasNext: o.hasNext, hasNext,
firstPage: o.firstPage, firstPage,
lastPage: o.lastPage, lastPage,
invisible: o.pages <= 1 invisible: pages <= 1,
}); });
this.editor.on(BI.TextEditor.EVENT_CONFIRM, function () { // TODO:需等到TextEditor 完成es6化后才可替换BI.TextEditor
self.pager.setValue(BI.parseInt(self.editor.getValue())); this.editor.on(BI.TextEditor.EVENT_CONFIRM, () => {
self.fireEvent(BI.AllCountPager.EVENT_CHANGE); this.pager.setValue(parseInt(this.editor.getValue()));
this.fireEvent(AllCountPager.EVENT_CHANGE);
}); });
this.pager.on(BI.Pager.EVENT_CHANGE, function () { this.pager.on(Pager.EVENT_CHANGE, () => {
self.fireEvent(BI.AllCountPager.EVENT_CHANGE); this.fireEvent(AllCountPager.EVENT_CHANGE);
}); });
this.pager.on(BI.Pager.EVENT_AFTER_POPULATE, function () { this.pager.on(Pager.EVENT_AFTER_POPULATE, () => {
self.editor.setValue(self.pager.getCurrentPage()); this.editor.setValue(this.pager.getCurrentPage());
}); });
this.allPages = BI.createWidget({ this.allPages = createWidget({
type: "bi.label", type: "bi.label",
title: o.pages, title: pages,
height: o.height, height,
text: "/" + o.pages, text: `/${pages}`,
lgap: 5, lgap: 5,
invisible: o.pages <= 1 invisible: pages <= 1,
}); });
BI.createWidget(o.showRowCount ? { createWidget(showRowCount ? {
type: "bi.vertical_adapt", type: "bi.vertical_adapt",
element: this, element: this,
scrollx: false, scrollx: false,
columnSize: ["fill", ""], columnSize: ["fill", ""],
horizontalAlign: BI.HorizontalAlign.Right, horizontalAlign: HorizontalAlign.Right,
items: [ items: [
this._getRowCountObject(), this._getRowCountObject(),
this.editor, this.allPages, this.pager this.editor, this.allPages, this.pager
@ -109,126 +115,124 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
} : { } : {
type: "bi.vertical_adapt", type: "bi.vertical_adapt",
element: this, element: this,
items: [this.editor, this.allPages, this.pager] items: [this.editor, this.allPages, this.pager],
}); });
}, }
_getPagerIconCls: function () { _getPagerIconCls () {
var o = this.options; const { pagerDirection } = this.options;
switch (o.pagerDirection) { switch (pagerDirection) {
case "horizontal": case "horizontal":
return { return {
preCls: "row-pre-page-h-font ", preCls: "row-pre-page-h-font ",
nextCls: "row-next-page-h-font " nextCls: "row-next-page-h-font ",
}; };
case "vertical": case "vertical":
default: default:
return { return {
preCls: "column-pre-page-h-font ", preCls: "column-pre-page-h-font ",
nextCls: "column-next-page-h-font " nextCls: "column-next-page-h-font ",
}; };
} }
}, }
_getRowCountObject: function() { _getRowCountObject() {
var self = this, o = this.options; const { height, count, rowInfoObject } = this.options;
return { return {
type: "bi.left", type: "bi.left",
height: o.height, height,
scrollable: false, scrollable: false,
ref: function (_ref) { ref: _ref => {
self.rowCountObject = _ref; this.rowCountObject = _ref;
}, },
items: [{ items: [{
type: "bi.label", type: "bi.label",
height: o.height, height,
text: BI.i18nText("BI-Basic_Total"), text: BI.i18nText("BI-Basic_Total"),
ref: function (_ref) { ref: _ref => {
self.prevText = _ref; this.prevText = _ref;
} },
}, { }, {
el: { el: {
type: "bi.label", type: "bi.label",
ref: function (_ref) { ref: _ref => {
self.rowCount = _ref; this.rowCount = _ref;
}, },
cls: "row-count", cls: "row-count",
height: o.height, height,
text: o.count, text: count,
title: o.count title: count,
}, },
hgap: 5, hgap: 5,
}, { }, {
type: "bi.label", type: "bi.label",
height: o.height, height,
text: BI.i18nText("BI-Tiao_Data"), text: BI.i18nText("BI-Tiao_Data"),
textAlign: "left" textAlign: "left",
}, BI.isNotEmptyObject(o.rowInfoObject) ? o.rowInfoObject : null] }, isNotEmptyObject(rowInfoObject) ? rowInfoObject : null],
}; };
}, }
setAllPages: function (v) { setAllPages (v) {
this.allPages.setText("/" + v); this.allPages.setText(`/${v}`);
this.allPages.setTitle(v); this.allPages.setTitle(v);
this.options.pages = v; this.options.pages = v;
this.pager.setAllPages(v); this.pager.setAllPages(v);
this.editor.setEnable(v >= 1); this.editor.setEnable(v >= 1);
this.setPagerVisible(v > 1); this.setPagerVisible(v > 1);
}, }
setShowRowInfo: function (b) { setShowRowInfo (b) {
this.options.showRowInfo = b; this.options.showRowInfo = b;
this.rowCountObject.setVisible(b); this.rowCountObject.setVisible(b);
}, }
setValue: function (v) { setValue (v) {
this.pager.setValue(v); this.pager.setValue(v);
}, }
setVPage: function (v) { setVPage (v) {
this.pager.setValue(v); this.pager.setValue(v);
}, }
setCount: function (count) { setCount (count) {
if (this.options.showRowCount) { if (this.options.showRowCount) {
this.rowCount.setText(count); this.rowCount.setText(count);
this.rowCount.setTitle(count); this.rowCount.setTitle(count);
} }
}, }
setCountPrevText: function (text) { setCountPrevText (text) {
if (this.options.showRowCount) { if (this.options.showRowCount) {
this.prevText.setText(text); this.prevText.setText(text);
} }
}, }
getCurrentPage: function () { getCurrentPage () {
return this.pager.getCurrentPage(); return this.pager.getCurrentPage();
}, }
hasPrev: function () { hasPrev () {
return this.pager.hasPrev(); return this.pager.hasPrev();
}, }
hasNext: function () { hasNext () {
return this.pager.hasNext(); return this.pager.hasNext();
}, }
isShowPager: function () { isShowPager () {
return this.options.showRowInfo || this.options.pages > 1; return this.options.showRowInfo || this.options.pages > 1;
}, }
setPagerVisible: function (b) { setPagerVisible (b) {
this.editor.setVisible(b); this.editor.setVisible(b);
this.allPages.setVisible(b); this.allPages.setVisible(b);
this.pager.setVisible(b); this.pager.setVisible(b);
}, }
populate: function () { populate () {
this.pager.populate(); this.pager.populate();
this.setPagerVisible(this.options.pages > 1); this.setPagerVisible(this.options.pages > 1);
} }
}); }
BI.AllCountPager.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.all_count_pager", BI.AllCountPager);

260
src/case/pager/pager.detail.js

@ -5,9 +5,15 @@
* @class BI.DetailPager * @class BI.DetailPager
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.DetailPager = BI.inherit(BI.Widget, {
_defaultConfig: function () { import { shortcut, Widget, extend, emptyFn, result, debounce, isKey, createWidget, createItems, Controller, Events, MIN, MAX } from "@/core";
return BI.extend(BI.DetailPager.superclass._defaultConfig.apply(this, arguments), { @shortcut()
export class DetailPager extends Widget {
static xtype = "bi.detail_pager";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
_defaultConfig () {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-detail-pager", baseCls: "bi-detail-pager",
behaviors: {}, behaviors: {},
layouts: [{ layouts: [{
@ -19,11 +25,11 @@ BI.DetailPager = BI.inherit(BI.Widget, {
dynamicShowFirstLast: false, // 是否动态显示首页、尾页 dynamicShowFirstLast: false, // 是否动态显示首页、尾页
dynamicShowPrevNext: false, // 是否动态显示上一页、下一页 dynamicShowPrevNext: false, // 是否动态显示上一页、下一页
pages: false, // 总页数 pages: false, // 总页数
curr: function () { curr () {
return 1; return 1;
}, // 初始化当前页 }, // 初始化当前页
groups: 0, // 连续显示分页数 groups: 0, // 连续显示分页数
jump: BI.emptyFn, // 分页的回调函数 jump: emptyFn, // 分页的回调函数
first: false, // 是否显示首页 first: false, // 是否显示首页
last: false, // 是否显示尾页 last: false, // 是否显示尾页
@ -31,35 +37,34 @@ BI.DetailPager = BI.inherit(BI.Widget, {
next: "下一页", next: "下一页",
firstPage: 1, firstPage: 1,
lastPage: function () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 lastPage () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法
return 1; return 1;
}, },
hasPrev: BI.emptyFn, // pages不可用时有效 hasPrev: emptyFn, // pages不可用时有效
hasNext: BI.emptyFn // pages不可用时有效 hasNext: emptyFn, // pages不可用时有效
}); });
}, }
_init: function () { _init () {
BI.DetailPager.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this; this.currPage = result(this.options, "curr");
this.currPage = BI.result(this.options, "curr");
// 翻页太灵敏 // 翻页太灵敏
this._lock = false; this._lock = false;
this._debouce = BI.debounce(function () { this._debouce = debounce(() => {
self._lock = false; this._lock = false;
}, 300); }, 300);
this._populate(); this._populate();
}, }
_populate () {
_populate: function () { const o = this.options, view = [], dict = {};
var self = this, o = this.options, view = [], dict = {}; const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options;
this.empty(); this.empty();
var pages = BI.result(o, "pages"); const pages = result(o, "pages");
var curr = BI.result(this, "currPage"); const curr = result(this, "currPage");
var groups = BI.result(o, "groups"); let groups = result(o, "groups");
var first = BI.result(o, "first"); let first = result(o, "first");
var last = BI.result(o, "last"); let last = result(o, "last");
var prev = BI.result(o, "prev"); const prev = result(o, "prev");
var next = BI.result(o, "next"); const next = result(o, "next");
if (pages === false) { if (pages === false) {
groups = 0; groups = 0;
@ -73,32 +78,32 @@ BI.DetailPager = BI.inherit(BI.Widget, {
dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups)); dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups));
// 当前页非首页,则输出上一页 // 当前页非首页,则输出上一页
if (((!o.dynamicShow && !o.dynamicShowPrevNext) || curr > 1) && prev !== false) { if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) {
if (BI.isKey(prev)) { if (isKey(prev)) {
view.push({ view.push({
text: prev, text: prev,
value: "prev", value: "prev",
disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false) disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
}); });
} else { } else {
view.push(BI.extend({ view.push(extend({
disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false) disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
}, prev)); }, prev));
} }
} }
// 当前组非首组,则输出首页 // 当前组非首组,则输出首页
if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) { if (((!dynamicShow && !dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) {
view.push({ view.push({
text: first, text: first,
value: "first", value: "first",
disabled: !(dict.index > 1 && groups !== 0) disabled: !(dict.index > 1 && groups !== 0),
}); });
if (dict.index > 1 && groups !== 0) { if (dict.index > 1 && groups !== 0) {
view.push({ view.push({
type: "bi.label", type: "bi.label",
cls: "page-ellipsis", cls: "page-ellipsis",
text: "\u2026" text: "\u2026",
}); });
} }
} }
@ -107,13 +112,14 @@ BI.DetailPager = BI.inherit(BI.Widget, {
dict.poor = Math.floor((groups - 1) / 2); dict.poor = Math.floor((groups - 1) / 2);
dict.start = dict.index > 1 ? curr - dict.poor : 1; dict.start = dict.index > 1 ? curr - dict.poor : 1;
dict.end = dict.index > 1 ? (function () { dict.end = dict.index > 1 ? (function () {
var max = curr + (groups - dict.poor - 1); const max = curr + (groups - dict.poor - 1);
return max > pages ? pages : max; return max > pages ? pages : max;
}()) : groups; }()) : groups;
if (dict.end - dict.start < groups - 1) { // 最后一组状态 if (dict.end - dict.start < groups - 1) { // 最后一组状态
dict.start = dict.end - groups + 1; dict.start = dict.end - groups + 1;
} }
var s = dict.start, e = dict.end; let s = dict.start, e = dict.end;
if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) { if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) {
s++; s++;
e--; e--;
@ -123,164 +129,166 @@ BI.DetailPager = BI.inherit(BI.Widget, {
view.push({ view.push({
text: s, text: s,
value: s, value: s,
selected: true selected: true,
}); });
} else { } else {
view.push({ view.push({
text: s, text: s,
value: s value: s,
}); });
} }
} }
// 总页数大于连续分页数,且当前组最大页小于总页,输出尾页 // 总页数大于连续分页数,且当前组最大页小于总页,输出尾页
if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) { if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) {
if (pages > groups && dict.end < pages && groups !== 0) { if (pages > groups && dict.end < pages && groups !== 0) {
view.push({ view.push({
type: "bi.label", type: "bi.label",
cls: "page-ellipsis", cls: "page-ellipsis",
text: "\u2026" text: "\u2026",
}); });
} }
view.push({ view.push({
text: last, text: last,
value: "last", value: "last",
disabled: !(pages > groups && dict.end < pages && groups !== 0) disabled: !(pages > groups && dict.end < pages && groups !== 0),
}); });
} }
// 当前页不为尾页时,输出下一页 // 当前页不为尾页时,输出下一页
dict.flow = !prev && groups === 0; dict.flow = !prev && groups === 0;
if (((!o.dynamicShow && !o.dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) { if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
view.push((function () { view.push((function () {
if (BI.isKey(next)) { if (isKey(next)) {
if (pages === false) { if (pages === false) {
return {text: next, value: "next", disabled: o.hasNext(curr) === false}; return { text: next, value: "next", disabled: hasNext(curr) === false };
} }
return (dict.flow && curr === pages) return (dict.flow && curr === pages)
? ?
{text: next, value: "next", disabled: true} { text: next, value: "next", disabled: true }
: :
{text: next, value: "next", disabled: !(curr !== pages && next || dict.flow)}; { text: next, value: "next", disabled: !(curr !== pages && next || dict.flow) };
} }
return BI.extend({
disabled: pages === false ? o.hasNext(curr) === false : !(curr !== pages && next || dict.flow)
}, next);
return extend({
disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow),
}, next);
}())); }()));
} }
this.button_group = BI.createWidget({ this.button_group = createWidget({
type: "bi.button_group", type: "bi.button_group",
element: this, element: this,
items: BI.createItems(view, { items: createItems(view, {
cls: "page-item bi-border bi-list-item-active", cls: "page-item bi-border bi-list-item-active",
height: 23 height: 23,
}), }),
behaviors: o.behaviors, behaviors,
layouts: o.layouts layouts,
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
if (self._lock === true) { if (this._lock === true) {
return; return;
} }
self._lock = true; this._lock = true;
self._debouce(); this._debouce();
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
var v = self.button_group.getValue()[0]; const v = this.button_group.getValue()[0];
switch (v) { switch (v) {
case "first": case "first":
self.currPage = 1; this.currPage = 1;
break; break;
case "last": case "last":
self.currPage = pages; this.currPage = pages;
break; break;
case "prev": case "prev":
self.currPage--; this.currPage--;
break; break;
case "next": case "next":
self.currPage++; this.currPage++;
break; break;
default: default:
self.currPage = v; this.currPage = v;
break; break;
} }
o.jump.apply(self, [{ jump.apply(this, [{
pages: pages, pages,
curr: self.currPage curr: this.currPage,
}]); }]);
self._populate(); this._populate();
self.fireEvent(BI.DetailPager.EVENT_CHANGE, obj); this.fireEvent(DetailPager.EVENT_CHANGE, obj);
} }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
}); });
this.fireEvent(BI.DetailPager.EVENT_AFTER_POPULATE); this.fireEvent(DetailPager.EVENT_AFTER_POPULATE);
}, }
getCurrentPage: function () { getCurrentPage () {
return this.currPage; return this.currPage;
}, }
setAllPages: function (pages) { setAllPages (pages) {
this.options.pages = pages; this.options.pages = pages;
this._populate(); this._populate();
}, }
hasPrev: function (v) { hasPrev (v) {
v || (v = 1); v || (v = 1);
var o = this.options; const { hasPrev } = this.options;
var pages = this.options.pages; const pages = this.options.pages;
return pages === false ? o.hasPrev(v) : v > 1;
}, return pages === false ? hasPrev(v) : v > 1;
}
hasNext: function (v) { hasNext (v) {
v || (v = 1); v || (v = 1);
var o = this.options; const { hasNext } = this.options;
var pages = this.options.pages; const pages = this.options.pages;
return pages === false ? o.hasNext(v) : v < pages;
}, return pages === false ? hasNext(v) : v < pages;
}
setValue: function (v) { setValue (v) {
var o = this.options; const o = this.options;
const { pages } = this.options;
v = v || 0; v = v || 0;
v = v < 1 ? 1 : v; v = v < 1 ? 1 : v;
if (o.pages === false) { if (pages === false) {
var lastPage = BI.result(o, "lastPage"), firstPage = 1; const lastPage = result(o, "lastPage");
this.currPage = v > lastPage ? lastPage : ((firstPage = BI.result(o, "firstPage")), (v < firstPage ? firstPage : v)); let firstPage = 1;
this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v));
} else { } else {
v = v > o.pages ? o.pages : v; v = v > pages ? pages : v;
this.currPage = v; this.currPage = v;
} }
this._populate(); this._populate();
}, }
getValue: function () { getValue () {
var val = this.button_group.getValue()[0]; const val = this.button_group.getValue()[0];
switch (val) { switch (val) {
case "prev": case "prev":
return -1; return -1;
case "next": case "next":
return 1; return 1;
case "first": case "first":
return BI.MIN; return MIN;
case "last": case "last":
return BI.MAX; return MAX;
default : default :
return val; return val;
} }
}, }
attr: function (key, value) { attr (key, value) {
BI.DetailPager.superclass.attr.apply(this, arguments); super.attr(...arguments);
if (key === "curr") { if (key === "curr") {
this.currPage = BI.result(this.options, "curr"); this.currPage = result(this.options, "curr");
} }
}, }
populate: function () { populate () {
this._populate(); this._populate();
} }
}); }
BI.DetailPager.EVENT_CHANGE = "EVENT_CHANGE";
BI.DetailPager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
BI.shortcut("bi.detail_pager", BI.DetailPager);

167
src/case/pager/pager.direction.js

@ -5,80 +5,83 @@
* @class BI.DirectionPager * @class BI.DirectionPager
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.DirectionPager = BI.inherit(BI.Widget, {
_defaultConfig: function () { import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core";
return BI.extend(BI.DirectionPager.superclass._defaultConfig.apply(this, arguments), { import { Pager } from "@/base";
@shortcut()
export class DirectionPager extends Widget {
static EVENT_CHANGE = "EVENT_CHANGE";
static xtype = "bi.direction_pager";
_defaultConfig () {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-direction-pager", baseCls: "bi-direction-pager",
height: 24, height: 24,
horizontal: { horizontal: {
pages: false, // 总页数 pages: false, // 总页数
curr: 1, // 初始化当前页, pages为数字时可用 curr: 1, // 初始化当前页, pages为数字时可用
hasPrev: BI.emptyFn, hasPrev: emptyFn,
hasNext: BI.emptyFn, hasNext: emptyFn,
firstPage: 1, firstPage: 1,
lastPage: BI.emptyFn lastPage: emptyFn,
}, },
vertical: { vertical: {
pages: false, // 总页数 pages: false, // 总页数
curr: 1, // 初始化当前页, pages为数字时可用 curr: 1, // 初始化当前页, pages为数字时可用
hasPrev: BI.emptyFn, hasPrev: emptyFn,
hasNext: BI.emptyFn, hasNext: emptyFn,
firstPage: 1, firstPage: 1,
lastPage: BI.emptyFn lastPage: emptyFn,
} },
}); });
}, }
_init: function () { _init () {
BI.DirectionPager.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options;
var v = o.vertical, h = o.horizontal;
this._createVPager(); this._createVPager();
this._createHPager(); this._createHPager();
this.layout = BI.createWidget({ this.layout = createWidget({
type: "bi.absolute", type: "bi.absolute",
scrollable: false, scrollable: false,
element: this, element: this,
items: [{ items: [{
el: this.vpager, el: this.vpager,
top: 0, top: 0,
right: 86 right: 86,
}, { }, {
el: this.vlabel, el: this.vlabel,
top: 0, top: 0,
right: 110 right: 110,
}, { }, {
el: this.hpager, el: this.hpager,
top: 0, top: 0,
right: 0 right: 0,
}, { }, {
el: this.hlabel, el: this.hlabel,
top: 0, top: 0,
right: 24 right: 24,
}] }],
}); });
}, }
_createVPager: function () { _createVPager () {
var self = this, o = this.options; const v = this.options.vertical;
var v = o.vertical; this.vlabel = createWidget({
this.vlabel = BI.createWidget({
type: "bi.label", type: "bi.label",
width: 24, width: 24,
height: 24, height: 24,
value: v.curr, value: v.curr,
title: v.curr, title: v.curr,
invisible: true invisible: true,
}); });
this.vpager = BI.createWidget({ this.vpager = createWidget({
type: "bi.pager", type: "bi.pager",
width: 72, width: 72,
layouts: [{ layouts: [{
type: "bi.horizontal", type: "bi.horizontal",
scrollx: false, scrollx: false,
rgap: 24 rgap: 24,
}], }],
invisible: true, invisible: true,
@ -96,7 +99,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
warningTitle: BI.i18nText("BI-Current_Is_First_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
height: 22, height: 22,
width: 22, width: 22,
cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2" cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
}, },
next: { next: {
type: "bi.icon_button", type: "bi.icon_button",
@ -105,42 +108,40 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
height: 22, height: 22,
width: 22, width: 22,
cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2" cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
}, },
hasPrev: v.hasPrev, hasPrev: v.hasPrev,
hasNext: v.hasNext, hasNext: v.hasNext,
firstPage: v.firstPage, firstPage: v.firstPage,
lastPage: v.lastPage lastPage: v.lastPage,
}); });
this.vpager.on(BI.Pager.EVENT_CHANGE, function () { this.vpager.on(Pager.EVENT_CHANGE, () => {
self.fireEvent(BI.DirectionPager.EVENT_CHANGE); this.fireEvent(DirectionPager.EVENT_CHANGE);
}); });
this.vpager.on(BI.Pager.EVENT_AFTER_POPULATE, function () { this.vpager.on(Pager.EVENT_AFTER_POPULATE, () => {
self.vlabel.setValue(this.getCurrentPage()); this.vlabel.setValue(this.vpager.getCurrentPage());
self.vlabel.setTitle(this.getCurrentPage()); this.vlabel.setTitle(this.vpager.getCurrentPage());
}); });
}, }
_createHPager () {
_createHPager: function () { const h = this.options.horizontal;
var self = this, o = this.options; this.hlabel = createWidget({
var h = o.horizontal;
this.hlabel = BI.createWidget({
type: "bi.label", type: "bi.label",
width: 24, width: 24,
height: 24, height: 24,
value: h.curr, value: h.curr,
title: h.curr, title: h.curr,
invisible: true invisible: true,
}); });
this.hpager = BI.createWidget({ this.hpager = createWidget({
type: "bi.pager", type: "bi.pager",
width: 72, width: 72,
layouts: [{ layouts: [{
type: "bi.horizontal", type: "bi.horizontal",
scrollx: false, scrollx: false,
rgap: 24 rgap: 24,
}], }],
invisible: true, invisible: true,
@ -158,7 +159,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
warningTitle: BI.i18nText("BI-Current_Is_First_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
height: 22, height: 22,
width: 22, width: 22,
cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2" cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
}, },
next: { next: {
type: "bi.icon_button", type: "bi.icon_button",
@ -167,74 +168,74 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
height: 22, height: 22,
width: 22, width: 22,
cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2" cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
}, },
hasPrev: h.hasPrev, hasPrev: h.hasPrev,
hasNext: h.hasNext, hasNext: h.hasNext,
firstPage: h.firstPage, firstPage: h.firstPage,
lastPage: h.lastPage lastPage: h.lastPage,
}); });
this.hpager.on(BI.Pager.EVENT_CHANGE, function () { this.hpager.on(Pager.EVENT_CHANGE, () => {
self.fireEvent(BI.DirectionPager.EVENT_CHANGE); this.fireEvent(DirectionPager.EVENT_CHANGE);
}); });
this.hpager.on(BI.Pager.EVENT_AFTER_POPULATE, function () { this.hpager.on(Pager.EVENT_AFTER_POPULATE, () => {
self.hlabel.setValue(this.getCurrentPage()); this.hlabel.setValue(this.hpager.getCurrentPage());
self.hlabel.setTitle(this.getCurrentPage()); this.hlabel.setTitle(this.hpager.getCurrentPage());
}); });
}, }
getVPage: function () { getVPage () {
return this.vpager.getCurrentPage(); return this.vpager.getCurrentPage();
}, }
getHPage: function () { getHPage () {
return this.hpager.getCurrentPage(); return this.hpager.getCurrentPage();
}, }
setVPage: function (v) { setVPage (v) {
this.vpager.setValue(v); this.vpager.setValue(v);
this.vlabel.setValue(v); this.vlabel.setValue(v);
this.vlabel.setTitle(v); this.vlabel.setTitle(v);
}, }
setHPage: function (v) { setHPage (v) {
this.hpager.setValue(v); this.hpager.setValue(v);
this.hlabel.setValue(v); this.hlabel.setValue(v);
this.hlabel.setTitle(v); this.hlabel.setTitle(v);
}, }
hasVNext: function () { hasVNext () {
return this.vpager.hasNext(); return this.vpager.hasNext();
}, }
hasHNext: function () { hasHNext () {
return this.hpager.hasNext(); return this.hpager.hasNext();
}, }
hasVPrev: function () { hasVPrev () {
return this.vpager.hasPrev(); return this.vpager.hasPrev();
}, }
hasHPrev: function () { hasHPrev () {
return this.hpager.hasPrev(); return this.hpager.hasPrev();
}, }
setHPagerVisible: function (b) { setHPagerVisible (b) {
this.hpager.setVisible(b); this.hpager.setVisible(b);
this.hlabel.setVisible(b); this.hlabel.setVisible(b);
}, }
setVPagerVisible: function (b) { setVPagerVisible (b) {
this.vpager.setVisible(b); this.vpager.setVisible(b);
this.vlabel.setVisible(b); this.vlabel.setVisible(b);
}, }
populate: function () { populate () {
this.vpager.populate(); this.vpager.populate();
this.hpager.populate(); this.hpager.populate();
var vShow = false, hShow = false; let vShow = false, hShow = false;
if (!this.hasHNext() && !this.hasHPrev()) { if (!this.hasHNext() && !this.hasHPrev()) {
this.setHPagerVisible(false); this.setHPagerVisible(false);
} else { } else {
@ -248,8 +249,8 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
vShow = true; vShow = true;
} }
this.setVisible(hShow || vShow); this.setVisible(hShow || vShow);
var num = [86, 110, 0, 24]; const num = [86, 110, 0, 24];
var items = this.layout.attr("items"); const items = this.layout.attr("items");
if (vShow === true && hShow === true) { if (vShow === true && hShow === true) {
items[0].right = num[0]; items[0].right = num[0];
@ -265,12 +266,10 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
} }
this.layout.attr("items", items); this.layout.attr("items", items);
this.layout.resize(); this.layout.resize();
}, }
clear: function () { clear () {
this.vpager.attr("curr", 1); this.vpager.attr("curr", 1);
this.hpager.attr("curr", 1); this.hpager.attr("curr", 1);
} }
}); }
BI.DirectionPager.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.direction_pager", BI.DirectionPager);

100
src/core/wrapper/layout/fill/auto.vtape.js

@ -1,9 +1,17 @@
BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, any, isEmptyObject, isNull, backAny } from "@/core/2.base";
return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), { import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
@shortcut()
export class AutoVerticalTapeLayout extends Layout {
static xtype = "bi.vtape_auto";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-auto-htape", baseCls: "bi-auto-htape",
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -11,16 +19,17 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
rowSize: [], rowSize: [],
items: [] items: [],
}); });
}, }
render() {
const o = this.options;
render: function () {
var self = this, o = this.options;
return { return {
type: "bi.vtape", type: "bi.vtape",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: o.items, items: o.items,
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -35,65 +44,65 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
}; };
}, }
_handleResize: function () { _handleResize() {
var self = this, o = this.options; const o = this.options;
var items = o.items; const items = o.items;
var top = {}, bottom = {}; const top = {}, bottom = {};
top[0] = o.innerVgap; top[0] = o.innerVgap;
bottom[items.length - 1] = o.innerVgap; bottom[items.length - 1] = o.innerVgap;
BI.any(items, function (i, item) { any(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var w = self.layout.getWidgetByName(self._getChildName(i)); const w = this.layout.getWidgetByName(this._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = item.height; rowSize = item.height;
} }
} }
if (BI.isNull(top[i])) { if (isNull(top[i])) {
var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; let preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
if (preRowSize === "") { if (preRowSize === "") {
preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height(); preRowSize = this.layout.getWidgetByName(this._getChildName(i - 1)).element.height();
} }
top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap; top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap) top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap),
}); });
if (rowSize === "fill") { if (rowSize === "fill") {
return true; return true;
} }
}); });
BI.backAny(items, function (i, item) { backAny(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var w = self.layout.getWidgetByName(self._getChildName(i)); const w = this.layout.getWidgetByName(this._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (BI.isNull(bottom[i])) { if (isNull(bottom[i])) {
var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; let nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
if (nextRowSize === "") { if (nextRowSize === "") {
nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height(); nextRowSize = this.layout.getWidgetByName(this._getChildName(i + 1)).element.height();
} }
bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap; bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap), bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap),
}); });
if (rowSize === "fill") { if (rowSize === "fill") {
return true; return true;
} }
}); });
}, }
mounted: function () { mounted() {
if (window.ResizeObserver) { if (window.ResizeObserver) {
this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this)); this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this));
this.resizeObserver.observe(this.element[0]); this.resizeObserver.observe(this.element[0]);
@ -103,23 +112,22 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
this.mutationObserver.observe(this.element[0], { this.mutationObserver.observe(this.element[0], {
attributes: true, attributes: true,
childList: true, childList: true,
subtree: true subtree: true,
}); });
} }
this._handleResize(); this._handleResize();
}, }
destroyed: function () { destroyed() {
this.resizeObserver && this.resizeObserver.unobserve(this.element[0]); this.resizeObserver && this.resizeObserver.unobserve(this.element[0]);
this.mutationObserver && this.mutationObserver.disconnect(); this.mutationObserver && this.mutationObserver.disconnect();
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(...args) {
this.layout.populate.apply(this.layout, arguments); this.layout.populate(...args);
} }
}); }
BI.shortcut("bi.vtape_auto", BI.AutoVerticalTapeLayout);

9
src/core/wrapper/layout/fill/fill.horizontal.js

@ -1,6 +1,9 @@
import { shortcut } from "@/core/decorator";
/** /**
* 横向填满布局 * 横向填满布局
*/ */
BI.HorizontalFillLayout = function () { @shortcut()
}; export class HorizontalFillLayout {
BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout); static xtype = "bi.horizontal_fill";
}

9
src/core/wrapper/layout/fill/fill.vertical.js

@ -1,6 +1,9 @@
import { shortcut } from "@/core/decorator";
/** /**
* 纵向填满布局 * 纵向填满布局
*/ */
BI.VerticalFillLayout = function () { @shortcut()
}; export class VerticalFillLayout {
BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout); static xtype = "bi.vertical_fill";
}

147
src/core/wrapper/layout/fill/float.fill.horizontal.js

@ -1,9 +1,18 @@
BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, any, isEmptyObject, isNull, backAny, isFunction, compact, each } from "@/core/2.base";
return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), { import { _lazyCreateWidget } from "@/core/5.inject";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
@shortcut()
export class FloatHorizontalFillLayout extends Layout {
static xtype = "bi.horizontal_float_fill";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-h-float-fill clearfix", baseCls: "bi-h-float-fill clearfix",
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -11,134 +20,136 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
columnSize: [], columnSize: [],
items: [] items: [],
}); });
}, }
render: function () {
BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { const o = this.options;
self.populate(newValue); const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
addItem: function (item) { addItem(item) {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
stroke: function (items) { stroke(items) {
var self = this, o = this.options; const o = this.options;
items = BI.compact(items); items = compact(items);
var rank = 0; let rank = 0;
function createWidget (i, item, desc) { const createWidget = (i, item, desc) => {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) { let w;
var w = BI._lazyCreateWidget({ if (o.verticalAlign !== VerticalAlign.Stretch) {
w = _lazyCreateWidget({
type: "bi.vertical_adapt", type: "bi.vertical_adapt",
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
columnSize: ["fill"], columnSize: ["fill"],
items: [item] items: [item],
}); });
} else { } else {
var w = BI._lazyCreateWidget(item); w = _lazyCreateWidget(item);
} }
if (o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-top": self._optimiseGap(o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item)) "margin-top": this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
}); });
} }
if (desc) { if (desc) {
if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item)) "margin-right": this._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
}); });
} }
if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-left": self._optimiseGap(o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item)) "margin-left": this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
}); });
} }
} else { } else {
if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item)) "margin-left": this._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
}); });
} }
if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-right": self._optimiseGap(o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item)) "margin-right": this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
}); });
} }
} }
if (o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-bottom": self._optimiseGap(o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item)) "margin-bottom": this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
}); });
} }
var top = o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item), const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
w.element.css({ w.element.css({
height: "calc(100% - " + self._optimiseGap(top + bottom) + ")" height: `calc(100% - ${this._optimiseGap(top + bottom)})`,
}); });
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
return w; return w;
} };
BI.any(items, function (i, item) { any(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
return true; return true;
} }
var w = createWidget(i, item); const w = createWidget(i, item);
self.addWidget(self._getChildName(rank++), w); this.addWidget(this._getChildName(rank++), w);
w.element.css({ w.element.css({
float: "left" "float": "left",
}); });
}); });
BI.backAny(items, function (i, item) { backAny(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
return true; return true;
} }
var w = createWidget(i, item, true); const w = createWidget(i, item, true);
self.addWidget(self._getChildName(rank++), w); this.addWidget(this._getChildName(rank++), w);
w.element.css({ w.element.css({
float: "right" "float": "right",
}); });
}); });
BI.each(items, function (i, item) { each(items, (i, item) => {
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
var w = createWidget(i, item); const w = createWidget(i, item);
self.addWidget(self._getChildName(rank++), w); this.addWidget(this._getChildName(rank++), w);
} }
}); });
}, }
resize: function () { resize() {
// console.log("填充布局不需要resize"); // console.log("填充布局不需要resize");
}, }
update: function (opt) { update(opt) {
return this.forceUpdate(opt); return this.forceUpdate(opt);
}, }
populate: function (items) { populate(...args) {
BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments); super.populate(...args);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.horizontal_float_fill", BI.FloatHorizontalFillLayout);

4
src/core/wrapper/layout/fill/index.js

@ -0,0 +1,4 @@
export { AutoVerticalTapeLayout } from "./auto.vtape";
export { HorizontalFillLayout } from "./fill.horizontal";
export { VerticalFillLayout } from "./fill.vertical";
export { FloatHorizontalFillLayout } from "./float.fill.horizontal";

49
src/core/wrapper/layout/flex/flex.center.js

@ -1,30 +1,40 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexCenterLayout * @class FlexCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexCenterLayout extends Layout {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_center_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-c", baseCls: "bi-f-c",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_horizontal", type: "bi.flex_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -39,16 +49,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
bgap: o.bgap, bgap: o.bgap,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);

55
src/core/wrapper/layout/flex/flex.horizontal.center.js

@ -1,15 +1,23 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexHorizontalCenter * @class FlexHorizontalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexHorizontalCenter extends Layout {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_horizontal_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-h-c", baseCls: "bi-f-h-c",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrolly: false, scrolly: false,
hgap: 0, hgap: 0,
@ -17,15 +25,17 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_vertical", type: "bi.flex_vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -40,17 +50,20 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
bgap: o.bgap, bgap: o.bgap,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_center_adapt", BI.FlexHorizontalCenter); @shortcut()
export class FlexHorizontalCenterAdapt extends FlexHorizontalCenter {
static xtype = "bi.flex_horizontal_center_adapt";
}

72
src/core/wrapper/layout/flex/flex.horizontal.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexHorizontalLayout * @class FlexHorizontalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexHorizontalLayout extends Layout {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_horizontal";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-h", baseCls: "bi-f-h",
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch horizontalAlign: HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [], columnSize: [],
scrollx: true, scrollx: true,
hgap: 0, hgap: 0,
@ -18,52 +26,54 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); const o = this.options;
this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x"); this.element.addClass("f-scroll-x");
} }
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y"); this.element.addClass("f-scroll-y");
} }
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
self.populate(newValue); this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0; return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.width === "fill" || item.width === "auto") { if (item.width === "fill" || item.width === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null; columnSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (columnSize !== "auto") { if (columnSize !== "auto") {
if (columnSize === "fill" || columnSize === "") { if (columnSize === "fill" || columnSize === "") {
if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { if (o.horizontalAlign !== HorizontalAlign.Stretch) {
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -93,12 +103,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, i); this._handleGap(w, item, i);
return w; return w;
}, }
populate: function (items) { populate(...args) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments); super.populate(...args);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);

96
src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@ -1,6 +1,13 @@
BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, isArray, each, map, stripEL } from "@/core/2.base";
return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { import { Layout } from "../../layout";
@shortcut()
export class FlexLeftRightVerticalAdaptLayout extends Layout {
static xtype = "bi.flex_left_right_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-lr-v-c", baseCls: "bi-f-lr-v-c",
columnSize: [], columnSize: [],
items: {}, items: {},
@ -15,33 +22,35 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rhgap: 0, rhgap: 0,
rtgap: 0, rtgap: 0,
rbgap: 0, rbgap: 0,
rvgap: 0 rvgap: 0,
}); });
}, }
render: function () {
var o = this.options, self = this; render() {
BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); const o = this.options;
var items = this._formatItems(o.items); super.render(...arguments);
const items = this._formatItems(o.items);
return { return {
type: "bi.flex_vertical_adapt", type: "bi.flex_vertical_adapt",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []), columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []),
items: items, items,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable, scrollable: o.scrollable,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap innerVgap: o.innerVgap,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var self = this, o = this.options; const o = this.options;
var left, right; let left, right;
if (BI.isArray(items)) { if (isArray(items)) {
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item.left) { if (item.left) {
left = item.left; left = item.left;
} }
@ -50,32 +59,34 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
} }
}); });
} }
var leftItems = left || items.left || []; let leftItems = left || items.left || [];
var rightItems = right || items.right || []; const rightItems = right || items.right || [];
leftItems = BI.map(leftItems, function (i, item) { leftItems = map(leftItems, (i, item) => {
var json = { const json = {
el: BI.stripEL(item) el: stripEL(item),
}; };
if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item); json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
} }
if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
} }
return json; return json;
}); });
return leftItems.concat({ return leftItems.concat({
el: { el: {
type: "bi.flex_vertical_adapt", type: "bi.flex_vertical_adapt",
columnSize: o.columnSize.slice(leftItems.length), columnSize: o.columnSize.slice(leftItems.length),
css: { css: {
"margin-left": "auto" "margin-left": "auto",
}, },
hgap: o.rhgap, hgap: o.rhgap,
vgap: o.rvgap, vgap: o.rvgap,
@ -83,22 +94,21 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rgap: o.rrgap, rgap: o.rrgap,
tgap: o.rtgap, tgap: o.rtgap,
bgap: o.rbgap, bgap: o.rbgap,
items: rightItems items: rightItems,
} },
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
addItem: function () { addItem() {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout);

55
src/core/wrapper/layout/flex/flex.vertical.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalCenter * @class FlexVerticalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexVerticalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexVerticalCenter extends Layout {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-v-c", baseCls: "bi-f-v-c",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
scrollx: false, scrollx: false,
hgap: 0, hgap: 0,
@ -18,15 +26,17 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_horizontal", type: "bi.flex_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -41,17 +51,20 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
hgap: o.hgap, hgap: o.hgap,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter); @shortcut()
export class FlexVerticalCenterAdapt extends FlexVerticalCenter {
static xtype = "bi.flex_vertical_center_adapt"
}

68
src/core/wrapper/layout/flex/flex.vertical.js

@ -1,15 +1,21 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalLayout * @class FlexVerticalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexVerticalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexVerticalLayout extends Layout {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), { props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-v", baseCls: "bi-f-v",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrolly: true, scrolly: true,
hgap: 0, hgap: 0,
@ -17,52 +23,54 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); const self = this, o = this.options;
this.element.addClass(`h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x"); this.element.addClass("f-scroll-x");
} }
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y"); this.element.addClass("f-scroll-y");
} }
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
self.populate(newValue); self.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0; return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.height === "fill" || item.height === "auto") { if (item.height === "fill" || item.height === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement.apply(this, arguments);
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = null; rowSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (rowSize !== "auto") { if (rowSize !== "auto") {
if (rowSize === "fill" || rowSize === "") { if (rowSize === "fill" || rowSize === "") {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) { if (o.verticalAlign !== VerticalAlign.Stretch) {
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -92,12 +100,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, null, i); this._handleGap(w, item, null, i);
return w; return w;
}, }
populate: function (items) { populate(items) {
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments); super.populate.apply(this, arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);

7
src/core/wrapper/layout/flex/index.js

@ -0,0 +1,7 @@
export { FlexCenterLayout } from "./flex.center";
export { FlexHorizontalCenter, FlexHorizontalCenterAdapt } from "./flex.horizontal.center";
export { FlexHorizontalLayout } from "./flex.horizontal";
export { FlexLeftRightVerticalAdaptLayout } from "./flex.leftrightvertical.center";
export { FlexVerticalCenter, FlexVerticalCenterAdapt } from "./flex.vertical.center";
export { FlexVerticalLayout } from "./flex.vertical";
export * from "./wrapper";

49
src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexWrapperCenterLayout * @class FlexWrapperCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperCenterLayout extends Layout {
return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_center_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-c", baseCls: "bi-f-s-c",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
scrollx: false, scrollx: false,
scrollable: true, scrollable: true,
@ -19,15 +27,17 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_scrollable_horizontal", type: "bi.flex_scrollable_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -40,16 +50,15 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
vgap: o.vgap, vgap: o.vgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap, rgap: o.rgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout);

55
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalCenter * @class FlexVerticalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperHorizontalCenter extends Layout {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_horizontal_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-v-c", baseCls: "bi-f-s-v-c",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrollable: true, scrollable: true,
scrolly: false, scrolly: false,
@ -19,15 +27,17 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_scrollable_vertical", type: "bi.flex_scrollable_vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -40,17 +50,20 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
vgap: o.vgap, vgap: o.vgap,
tgap: o.tgap, tgap: o.tgap,
bgap: o.bgap, bgap: o.bgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter); @shortcut()
export class FlexWrapperHorizontalCenterAdapt extends FlexWrapperHorizontalCenter {
static xtype = "bi.flex_scrollable_horizontal_center_adapt";
}

83
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@ -1,16 +1,25 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { Widget } from "@/core/4.widget";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexHorizontalLayout * @class FlexHorizontalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperHorizontalLayout extends Layout {
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_horizontal";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-h", baseCls: "bi-f-s-h",
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
columnSize: [], columnSize: [],
scrollable: null, scrollable: null,
scrollx: true, scrollx: true,
@ -19,47 +28,49 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); const o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-h-w v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
self.populate(newValue); const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0; return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.width === "fill" || item.width === "auto") { if (item.width === "fill" || item.width === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null; columnSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (columnSize !== "auto") { if (columnSize !== "auto") {
if (columnSize === "fill" || columnSize === "") { if (columnSize === "fill" || columnSize === "") {
if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { if (o.horizontalAlign !== HorizontalAlign.Stretch) {
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -91,21 +102,21 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, i); this._handleGap(w, item, i);
return w; return w;
}, }
appendFragment: function (frag) { appendFragment(frag) {
this.$wrapper.append(frag); this.$wrapper.append(frag);
this.element.append(this.$wrapper); this.element.append(this.$wrapper);
}, }
_getWrapper: function () { _getWrapper() {
return this.$wrapper; return this.$wrapper;
}, }
populate: function (items) { populate(items) {
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments); super.populate(...arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);

55
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalCenter * @class FlexVerticalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperVerticalCenter extends Layout {
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-v-c", baseCls: "bi-f-s-v-c",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
scrollx: false, scrollx: false,
scrollable: true, scrollable: true,
@ -19,15 +27,17 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_scrollable_horizontal", type: "bi.flex_scrollable_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -40,17 +50,20 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
vgap: o.vgap, vgap: o.vgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap, rgap: o.rgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter); @shortcut()
export class FlexWrapperVerticalCenterAdapt extends FlexWrapperVerticalCenter {
static xtype = "bi.flex_scrollable_vertical_center_adapt";
}

83
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@ -1,16 +1,25 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { Widget } from "@/core/4.widget";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexWrapperVerticalLayout * @class FlexWrapperVerticalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperVerticalLayout extends Layout {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_vertical";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-v", baseCls: "bi-f-s-v",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrollable: null, scrollable: null,
scrolly: true, scrolly: true,
@ -19,47 +28,49 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); const o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-v-w h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
self.populate(newValue); const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0; return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.height === "fill" || item.height === "auto") { if (item.height === "fill" || item.height === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = null; rowSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (rowSize !== "auto") { if (rowSize !== "auto") {
if (rowSize === "fill" || rowSize === "") { if (rowSize === "fill" || rowSize === "") {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) { if (o.verticalAlign !== VerticalAlign.Stretch) {
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -91,21 +102,21 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, null, i); this._handleGap(w, item, null, i);
return w; return w;
}, }
appendFragment: function (frag) { appendFragment(frag) {
this.$wrapper.append(frag); this.$wrapper.append(frag);
this.element.append(this.$wrapper); this.element.append(this.$wrapper);
}, }
_getWrapper: function () { _getWrapper() {
return this.$wrapper; return this.$wrapper;
}, }
populate: function (items) { populate(items) {
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments); super.populate(...arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);

5
src/core/wrapper/layout/flex/wrapper/index.js

@ -0,0 +1,5 @@
export { FlexWrapperCenterLayout } from "./flex.wrapper.center";
export { FlexWrapperHorizontalCenter, FlexWrapperHorizontalCenterAdapt } from "./flex.wrapper.horizontal.center";
export { FlexWrapperHorizontalLayout } from "./flex.wrapper.horizontal";
export { FlexWrapperVerticalCenter, FlexWrapperVerticalCenterAdapt } from "./flex.wrapper.vertical.center";
export { FlexWrapperVerticalLayout } from "./flex.wrapper.vertical";

46
src/core/wrapper/layout/float/float.absolute.center.js

@ -1,36 +1,42 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction } from "@/core/2.base";
import { Layout } from "../../layout";
/** /**
* absolute实现的居中布局 * absolute实现的居中布局
* @class BI.FloatAbsoluteCenterLayout * @class FloatAbsoluteCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FloatAbsoluteCenterLayout extends Layout {
return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.absolute_center_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-c-fl", baseCls: "bi-abs-c-fl",
}); });
}, }
render: function () { render() {
BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); super.render(...arguments);
var self = this, o = this.options; const o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
self.populate(newValue); this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const w = super._addElement(...arguments);
var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
w.element.addClass("bi-abs-c-item").css({ w.element.addClass("bi-abs-c-item").css({
position: "absolute", position: "absolute",
}); });
return w; return w;
}, }
populate: function (items) { populate(items) {
BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); super.populate(...arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout);

66
src/core/wrapper/layout/float/float.absolute.horizontal.js

@ -1,23 +1,32 @@
import { shortcut } from "@/core/decorator";
import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* absolute实现的居中布局 * absolute实现的居中布局
* @class BI.FloatAbsoluteHorizontalLayout * @class FloatAbsoluteHorizontalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FloatAbsoluteHorizontalLayout extends Layout {
return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.absolute_horizontal_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-h-fl", baseCls: "bi-abs-h-fl",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
rowSize: [], rowSize: [],
vgap: 0, vgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render() {
const o = this.options;
super.render(...arguments);
render: function () {
var self = this, o = this.options;
BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
return { return {
type: "bi.vtape", type: "bi.vtape",
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -26,8 +35,8 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable, scrollable: o.scrollable,
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
hgap: "50%", hgap: "50%",
vgap: o.vgap, vgap: o.vgap,
@ -39,34 +48,35 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var o = this.options; const o = this.options;
if (o.horizontalAlign === BI.HorizontalAlign.Left) { if (o.horizontalAlign === HorizontalAlign.Left) {
return items; return items;
} }
var cls = o.horizontalAlign === BI.HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item"; const cls = o.horizontalAlign === HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item";
return BI.map(items, function (i, item) {
if (!item || BI.isEmptyObject(item)) { return map(items, (i, item) => {
if (!item || isEmptyObject(item)) {
return item; return item;
} }
var el = BI.stripEL(item); const el = stripEL(item);
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass(cls); el.element.addClass(cls);
} else { } else {
el.cls = (el.cls || "") + cls; el.cls = (el.cls || "") + cls;
} }
return item; return item;
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout);

178
src/core/wrapper/layout/float/float.absolute.leftrightvertical.js

@ -1,8 +1,16 @@
BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, map, isEmptyObject, stripEL, isWidget, isArray, each } from "@/core/2.base";
return BI.extend(BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { import { VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
@shortcut()
export class FloatAbsoluteLeftRightVerticalAdaptLayout extends Layout {
static xtype = "bi.absolute_left_right_vertical_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-lr-v-fl", baseCls: "bi-abs-lr-v-fl",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
items: {}, items: {},
llgap: 0, llgap: 0,
lrgap: 0, lrgap: 0,
@ -15,16 +23,18 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rhgap: 0, rhgap: 0,
rtgap: 0, rtgap: 0,
rbgap: 0, rbgap: 0,
rvgap: 0 rvgap: 0,
}); });
}, }
render: function () {
var o = this.options, self = this; render() {
BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); const o = this.options;
super.render(...arguments);
return { return {
type: "bi.htape", type: "bi.htape",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
items: this._formatItems(o.items), items: this._formatItems(o.items),
@ -33,15 +43,15 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var self = this, o = this.options; const o = this.options;
var left, right; let left, right;
if (BI.isArray(items)) { if (isArray(items)) {
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item.left) { if (item.left) {
left = item.left; left = item.left;
} }
@ -50,98 +60,105 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
} }
}); });
} }
var leftItems = left || items.left || []; let leftItems = left || items.left || [];
var rightItems = right || items.right || []; let rightItems = right || items.right || [];
leftItems = BI.map(leftItems, function (i, item) { leftItems = map(leftItems, (i, item) => {
var el = BI.stripEL(item); const el = stripEL(item);
if (o.verticalAlign === BI.VerticalAlign.Middle) { if (o.verticalAlign === VerticalAlign.Middle) {
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass("bi-abs-c-y-item"); el.element.addClass("bi-abs-c-y-item");
} else { } else {
el.cls = (el.cls || "") + "bi-abs-c-y-item"; el.cls = `${el.cls || ""}bi-abs-c-y-item`;
} }
} }
var json = { const json = {
el: el, el,
width: item.width width: item.width,
}; };
// if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
// json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); // json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0);
// } // }
if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
// if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
// json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); // json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0);
// } // }
return json; return json;
}); });
rightItems = BI.map(rightItems, function (i, item) { rightItems = map(rightItems, (i, item) => {
var el = BI.stripEL(item); const el = stripEL(item);
if (o.verticalAlign === BI.VerticalAlign.Middle) { if (o.verticalAlign === VerticalAlign.Middle) {
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass("bi-abs-c-y-item"); el.element.addClass("bi-abs-c-y-item");
} else { } else {
el.cls = (el.cls || "") + "bi-abs-c-y-item"; el.cls = `${el.cls || ""}bi-abs-c-y-item`;
} }
} }
var json = { const json = {
el: el, el,
width: item.width width: item.width,
}; };
// if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
// json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); // json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0);
// } // }
if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
// if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
// json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); // json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0);
// } // }
return json; return json;
}); });
return leftItems.concat({}, rightItems); return leftItems.concat({}, rightItems);
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
addItem: function () { addItem() {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.absolute_left_right_vertical_float", BI.FloatAbsoluteLeftRightVerticalAdaptLayout);
@shortcut()
export class FloatAbsoluteRightVerticalAdaptLayout extends Layout {
static xtype = "bi.absolute_right_vertical_float";
BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { props() {
props: function () { return extend(super.props(...arguments), {
return BI.extend(BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-abs-r-v-fl", baseCls: "bi-abs-r-v-fl",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
items: [], items: [],
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
hgap: 0 hgap: 0,
}); });
}, }
render: function () {
var o = this.options, self = this; render() {
BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments); const o = this.options;
super.render(...arguments);
return { return {
type: "bi.htape", type: "bi.htape",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
items: [{}].concat(this._formatItems(o.items)), items: [{}].concat(this._formatItems(o.items)),
@ -151,39 +168,40 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
vgap: "50%", vgap: "50%",
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
if (this.options.verticalAlign !== BI.VerticalAlign.Middle) { if (this.options.verticalAlign !== VerticalAlign.Middle) {
return items; return items;
} }
return BI.map(items, function (i, item) {
if (!item || BI.isEmptyObject(item)) { return map(items, (i, item) => {
if (!item || isEmptyObject(item)) {
return item; return item;
} }
var el = BI.stripEL(item); const el = stripEL(item);
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass("bi-abs-c-y-item"); el.element.addClass("bi-abs-c-y-item");
} else { } else {
el.cls = (el.cls || "") + "bi-abs-c-y-item"; el.cls = `${el.cls || ""}bi-abs-c-y-item`;
} }
return item; return item;
}); });
}, }
resize: function () { resize() {
this.layout.stroke([{}].concat(this._formatItems(this.options.items))); this.layout.stroke([{}].concat(this._formatItems(this.options.items)));
}, }
addItem: function () { addItem() {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate([{}].concat(this._formatItems(items))); this.layout.populate([{}].concat(this._formatItems(items)));
} }
}); }
BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout);

66
src/core/wrapper/layout/float/float.absolute.vertical.js

@ -1,23 +1,32 @@
import { shortcut } from "@/core/decorator";
import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
import { VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* absolute实现的居中布局 * absolute实现的居中布局
* @class BI.FloatAbsoluteVerticalLayout * @class FloatAbsoluteVerticalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FloatAbsoluteVerticalLayout extends Layout {
return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.absolute_vertical_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-h-fl", baseCls: "bi-abs-h-fl",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
hgap: 0, hgap: 0,
lgap: 0, lgap: 0,
rgap: 0 rgap: 0,
}); });
}, }
render() {
const o = this.options;
super.render(...arguments);
render: function () {
var self = this, o = this.options;
BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments);
return { return {
type: "bi.htape", type: "bi.htape",
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -26,8 +35,8 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable, scrollable: o.scrollable,
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
vgap: "50%", vgap: "50%",
hgap: o.hgap, hgap: o.hgap,
@ -39,34 +48,35 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var o = this.options; const o = this.options;
if (o.verticalAlign === BI.VerticalAlign.Top) { if (o.verticalAlign === VerticalAlign.Top) {
return items; return items;
} }
var cls = o.verticalAlign === BI.VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item"; const cls = o.verticalAlign === VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item";
return BI.map(items, function (i, item) {
if (!item || BI.isEmptyObject(item)) { return map(items, (i, item) => {
if (!item || isEmptyObject(item)) {
return item; return item;
} }
var el = BI.stripEL(item); const el = stripEL(item);
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass(cls); el.element.addClass(cls);
} else { } else {
el.cls = (el.cls || "") + cls; el.cls = (el.cls || "") + cls;
} }
return item; return item;
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout);

68
src/core/wrapper/layout/float/float.horizontal.js

@ -1,30 +1,37 @@
import { shortcut } from "@/core/decorator";
import { extend, map } from "@/core/2.base";
import { VerticalAlign, HorizontalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* 浮动的水平居中布局 * 浮动的水平居中布局
*/ */
BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
export class FloatHorizontalLayout extends Layout {
static xtype = "bi.horizontal_float";
props: function () { props() {
return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { return extend(super.props(...arguments), {
baseCls: "bi-h-fl", baseCls: "bi-h-fl",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
if (o.verticalAlign === BI.VerticalAlign.Top) { if (o.verticalAlign === VerticalAlign.Top) {
return { return {
type: "bi.vertical", type: "bi.vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: this._formatItems(o.items), items: this._formatItems(o.items),
vgap: o.vgap, vgap: o.vgap,
@ -32,22 +39,23 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
bgap: o.bgap, bgap: o.bgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
} }
return { return {
type: "bi.inline", type: "bi.inline",
items: [{ items: [{
el: { el: {
type: "bi.vertical", type: "bi.vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: this._formatItems(o.items), items: this._formatItems(o.items),
vgap: o.vgap, vgap: o.vgap,
tgap: o.tgap, tgap: o.tgap,
bgap: o.bgap bgap: o.bgap,
} },
}], }],
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -55,13 +63,14 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var o = this.options; const o = this.options;
return BI.map(items, function (i, item) {
return map(items, (i, item) => {
return { return {
el: { el: {
type: "bi.inline_horizontal_adapt", type: "bi.inline_horizontal_adapt",
@ -69,18 +78,17 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
items: [item], items: [item],
hgap: o.hgap, hgap: o.hgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap rgap: o.rgap,
} },
}; };
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);

5
src/core/wrapper/layout/float/index.js

@ -0,0 +1,5 @@
export { FloatAbsoluteCenterLayout } from "./float.absolute.center";
export { FloatAbsoluteHorizontalLayout } from "./float.absolute.horizontal";
export { FloatAbsoluteLeftRightVerticalAdaptLayout, FloatAbsoluteRightVerticalAdaptLayout } from "./float.absolute.leftrightvertical";
export { FloatAbsoluteVerticalLayout } from "./float.absolute.vertical";
export { FloatHorizontalLayout } from "./float.horizontal";

6
src/core/wrapper/layout/index.js

@ -15,3 +15,9 @@ export { TdLayout } from "./layout.td";
export { VerticalLayout } from "./layout.vertical"; export { VerticalLayout } from "./layout.vertical";
export { WindowLayout } from "./layout.window"; export { WindowLayout } from "./layout.window";
export * from "./adapt"; export * from "./adapt";
export * from "./fill";
export * from "./flex";
export * from "./float";
export * from "./middle";
export * from "./responsive";
export * from "./sticky";

4
src/core/wrapper/layout/middle/index.js

@ -0,0 +1,4 @@
export { CenterLayout } from "./middle.center";
export { FloatCenterLayout } from "./middle.float.center";
export { HorizontalCenterLayout } from "./middle.horizontal";
export { VerticalCenterLayout } from "./middle.vertical";

76
src/core/wrapper/layout/middle/middle.center.js

@ -1,72 +1,80 @@
import { shortcut } from "@/core/decorator";
import { extend, each } from "@/core/2.base";
import { _lazyCreateWidget } from "@/core/5.inject";
import { Layout } from "../../layout";
/** /**
* 水平和垂直方向都居中容器, 非自适应用于宽度高度固定的面板 * 水平和垂直方向都居中容器, 非自适应用于宽度高度固定的面板
* @class BI.CenterLayout * @class CenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.CenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class CenterLayout extends Layout {
return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.center";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-center", baseCls: "bi-center",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () { render() {
BI.CenterLayout.superclass.render.apply(this, arguments); super.render(...arguments);
var self = this, o = this.options; const o = this.options;
var list = [], items = o.items; const list = [], items = o.items;
BI.each(items, function (i) { each(items, i => {
list.push({ list.push({
column: i, column: i,
row: 0, row: 0,
el: BI._lazyCreateWidget({ el: _lazyCreateWidget({
type: "bi.default", type: "bi.default",
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
}) }),
}); });
}); });
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item) { if (item) {
var w = BI._lazyCreateWidget(item); const w = _lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: self._optimiseGap(o.hgap + o.lgap), left: this._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap), right: this._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap), top: this._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap), bottom: this._optimiseGap(o.vgap + o.bgap),
width: "auto", width: "auto",
height: "auto" height: "auto",
}); });
list[i].el.addItem(w); list[i].el.addItem(w);
} }
}); });
return { return {
type: "bi.grid", type: "bi.grid",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
columns: list.length, columns: list.length,
rows: 1, rows: 1,
items: list items: list,
}; };
}, }
resize: function () { resize() {
// console.log("center布局不需要resize"); // console.log("center布局不需要resize");
}, }
addItem: function (item) { addItem(item) {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate.apply(this.layout, arguments); this.layout.populate(...arguments);
} }
}); }
BI.shortcut("bi.center", BI.CenterLayout);

83
src/core/wrapper/layout/middle/middle.float.center.js

@ -1,71 +1,80 @@
import { shortcut } from "@/core/decorator";
import { extend, each } from "@/core/2.base";
import { _lazyCreateWidget } from "@/core/5.inject";
import { Layout } from "../../layout";
/** /**
* 浮动布局实现的居中容器 * 浮动布局实现的居中容器
* @class BI.FloatCenterLayout * @class FloatCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FloatCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FloatCenterLayout extends Layout {
return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.float_center";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-float-center", baseCls: "bi-float-center",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FloatCenterLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options, items = o.items; super.render(...arguments);
var list = [], width = 100 / items.length; const o = this.options, items = o.items;
BI.each(items, function (i) { const list = [], width = 100 / items.length;
var widget = BI._lazyCreateWidget({ each(items, i => {
type: "bi.default" const widget = _lazyCreateWidget({
type: "bi.default",
}); });
widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({ widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({
width: width + "%", width: `${width}%`,
height: "100%" height: "100%",
}); });
list.push({ list.push({
el: widget el: widget,
}); });
}); });
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item) { if (item) {
var w = BI._lazyCreateWidget(item); const w = _lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: self._optimiseGap(o.hgap + o.lgap), left: this._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap), right: this._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap), top: this._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap), bottom: this._optimiseGap(o.vgap + o.bgap),
width: "auto", width: "auto",
height: "auto" height: "auto",
}); });
list[i].el.addItem(w); list[i].el.addItem(w);
} }
}); });
return { return {
type: "bi.left", type: "bi.left",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: list items: list,
}; };
}, }
resize: function () { resize() {
// console.log("floatcenter布局不需要resize"); // console.log("floatcenter布局不需要resize");
}, }
addItem: function (item) { addItem(item) {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate.apply(this.layout, arguments); this.layout.populate(...arguments);
} }
}); }
BI.shortcut("bi.float_center", BI.FloatCenterLayout);

77
src/core/wrapper/layout/middle/middle.horizontal.js

@ -1,70 +1,79 @@
import { shortcut } from "@/core/decorator";
import { extend, each } from "@/core/2.base";
import { _lazyCreateWidget } from "@/core/5.inject";
import { Layout } from "../../layout";
/** /**
* 水平和垂直方向都居中容器, 非自适应用于宽度高度固定的面板 * 水平和垂直方向都居中容器, 非自适应用于宽度高度固定的面板
* @class BI.HorizontalCenterLayout * @class HorizontalCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.HorizontalCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class HorizontalCenterLayout extends Layout {
return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.horizontal_center";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-h-center", baseCls: "bi-h-center",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.HorizontalCenterLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options, items = o.items; super.render(...arguments);
var list = []; const o = this.options, items = o.items;
BI.each(items, function (i) { const list = [];
each(items, i => {
list.push({ list.push({
column: i, column: i,
row: 0, row: 0,
el: BI._lazyCreateWidget({ el: _lazyCreateWidget({
type: "bi.default", type: "bi.default",
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
}) }),
}); });
}); });
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item) { if (item) {
var w = BI._lazyCreateWidget(item); const w = _lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: self._optimiseGap(o.hgap + o.lgap), left: this._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap), right: this._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap), top: this._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap), bottom: this._optimiseGap(o.vgap + o.bgap),
width: "auto" width: "auto",
}); });
list[i].el.addItem(w); list[i].el.addItem(w);
} }
}); });
return { return {
type: "bi.grid", type: "bi.grid",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
columns: list.length, columns: list.length,
rows: 1, rows: 1,
items: list items: list,
}; };
}, }
resize: function () { resize() {
// console.log("horizontal_center布局不需要resize"); // console.log("horizontal_center布局不需要resize");
}, }
addItem: function (item) { addItem(item) {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate.apply(this.layout, arguments); this.layout.populate(...arguments);
} }
}); }
BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout);

68
src/core/wrapper/layout/middle/middle.vertical.js

@ -1,71 +1,79 @@
import { shortcut } from "@/core/decorator";
import { extend, each } from "@/core/2.base";
import { _lazyCreateWidget } from "@/core/5.inject";
import { Layout } from "../../layout";
/** /**
* 垂直方向都居中容器, 非自适应用于高度不固定的面板 * 垂直方向都居中容器, 非自适应用于高度不固定的面板
* @class BI.VerticalCenterLayout * @class VerticalCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.VerticalCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class VerticalCenterLayout extends Layout {
return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.vertical_center";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-v-center", baseCls: "bi-v-center",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () { render() {
BI.VerticalCenterLayout.superclass.render.apply(this, arguments); super.render(...arguments);
var self = this, o = this.options, items = o.items; const self = this, o = this.options, items = o.items;
var list = []; const list = [];
BI.each(items, function (i) { each(items, i => {
list.push({ list.push({
column: 0, column: 0,
row: i, row: i,
el: BI._lazyCreateWidget({ el: _lazyCreateWidget({
type: "bi.default", type: "bi.default",
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
}) }),
}); });
}); });
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item) { if (item) {
var w = BI._lazyCreateWidget(item); const w = _lazyCreateWidget(item);
w.element.css({ w.element.css({
position: "absolute", position: "absolute",
left: self._optimiseGap(o.hgap + o.lgap), left: self._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap), right: self._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap), top: self._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap), bottom: self._optimiseGap(o.vgap + o.bgap),
height: "auto" height: "auto",
}); });
list[i].el.addItem(w); list[i].el.addItem(w);
} }
}); });
return { return {
type: "bi.grid", type: "bi.grid",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
columns: 1, columns: 1,
rows: list.length, rows: list.length,
items: list items: list,
}; };
}, }
resize: function () { resize() {
// console.log("vertical_center布局不需要resize"); // console.log("vertical_center布局不需要resize");
}, }
addItem: function (item) { addItem(item) {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate.apply(this.layout, arguments); this.layout.populate(...arguments);
} }
}); }
BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout);

3
src/core/wrapper/layout/responsive/index.js

@ -0,0 +1,3 @@
export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal";
export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal";
export { ResponsiveInlineLayout } from "./responsive.inline";

68
src/core/wrapper/layout/responsive/responsive.flex.horizontal.js

@ -1,57 +1,59 @@
import { shortcut } from "@/core/decorator";
import { each } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { Resizers } from "@/base";
import { FlexHorizontalLayout } from "../flex";
/** /**
* 横向响应式布局 * 横向响应式布局
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.ResponsiveFlexHorizontalLayout * @class ResponsiveFlexHorizontalLayout
* @extends BI.FlexHorizontalLayout * @extends FlexHorizontalLayout
*/ */
BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { @shortcut()
// props: function () { export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout {
// return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.responsive_flex_horizontal";
// // extraCls: "bi-responsive-f-h"
// });
// },
mounted: function () { mounted() {
var self = this, o = this.options; const o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ if (o.horizontalAlign !== HorizontalAlign.Center) {
return; return;
} }
var defaultResize = function () { const defaultResize = () => {
if (o.scrollable !== true && o.scrollx !== true) { if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth; const clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){ if (this.element.width() > 2 / 3 * clientWidth) {
if (clientWidth <= 768) { if (clientWidth <= 768) {
BI.each(self._children, function (i, child) { each(this._children, (i, child) => {
self._clearGap(child); this._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0); this._handleReverseGap(child, o.items[i], i | 0);
}); });
self.element.css("flex-direction", "column"); this.element.css("flex-direction", "column");
} }
} }
} }
} };
var resize = function () { const resize = () => {
defaultResize(); defaultResize();
if (o.scrollable !== true && o.scrollx !== true) { if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth; const clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){ if (this.element.width() > 2 / 3 * clientWidth) {
if (clientWidth > 768) { if (clientWidth > 768) {
BI.each(self._children, function (i, child) { each(this._children, (i, child) => {
self._clearGap(child); this._clearGap(child);
}) });
self.resize(); this.resize();
self.element.css("flex-direction", "row"); this.element.css("flex-direction", "row");
} }
} }
} }
} };
this.unResize = BI.Resizers.add(this.getName(), resize); this.unResize = Resizers.add(this.getName(), resize);
defaultResize(); defaultResize();
}, }
destroyed: function () { destroyed() {
this.unResize?.(); this.unResize?.();
} }
}); }
BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout);

72
src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js

@ -1,59 +1,61 @@
import { shortcut } from "@/core/decorator";
import { each } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { Resizers } from "@/base";
import { FlexWrapperHorizontalLayout } from "../flex";
/** /**
* 横向响应式布局 * 横向响应式布局
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.ResponsiveFlexWrapperHorizontalLayout * @class ResponsiveFlexWrapperHorizontalLayout
* @extends BI.FlexWrapperHorizontalLayout * @extends FlexWrapperHorizontalLayout
*/ */
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { @shortcut()
// props: function () { export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout {
// return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.responsive_flex_scrollable_horizontal";
// extraCls: "bi-responsive-f-h"
// });
// },
mounted: function () { mounted() {
var self = this, o = this.options; const o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ if (o.horizontalAlign !== HorizontalAlign.Center) {
return; return;
} }
var defaultResize = function () { const defaultResize = () => {
if (o.scrollable !== true && o.scrollx !== true) { if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth; const clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){ if (this.element.width() > 2 / 3 * clientWidth) {
if (clientWidth <= 768) { if (clientWidth <= 768) {
BI.each(self._children, function (i, child) { each(this._children, (i, child) => {
self._clearGap(child); this._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0); this._handleReverseGap(child, o.items[i], i | 0);
}); });
self.element.css("flex-direction", "column"); this.element.css("flex-direction", "column");
self.$wrapper.element.css("flex-direction", "column"); this.$wrapper.element.css("flex-direction", "column");
} }
} }
} }
} };
var resize = function () { const resize = () => {
defaultResize(); defaultResize();
if (o.scrollable !== true && o.scrollx !== true) { if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth; const clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){ if (this.element.width() > 2 / 3 * clientWidth) {
if (clientWidth > 768) { if (clientWidth > 768) {
BI.each(self._children, function (i, child) { each(this._children, (i, child) => {
self._clearGap(child); this._clearGap(child);
}) });
self.resize(); this.resize();
self.element.css("flex-direction", "row"); this.element.css("flex-direction", "row");
self.$wrapper.element.css("flex-direction", "row"); this.$wrapper.element.css("flex-direction", "row");
} }
} }
} }
} };
this.unResize = BI.Resizers.add(this.getName(), resize); this.unResize = Resizers.add(this.getName(), resize);
defaultResize(); defaultResize();
}, }
destroyed: function () { destroyed() {
this.unResize(); this.unResize();
} }
}); }
BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout);

50
src/core/wrapper/layout/responsive/responsive.inline..js

@ -1,50 +0,0 @@
/**
* 横向响应式布局
* Created by GUY on 2016/12/2.
*
* @class BI.ResponsiveInlineLayout
* @extends BI.InlineLayout
*/
BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, {
mounted: function () {
var self = this, o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){
return;
}
var defaultResize = function () {
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth <= 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0);
child.elemenet.css("display", "");
});
}
}
}
}
var resize = function () {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
}
}
}
}
this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
},
destroyed: function () {
this.unResize();
}
});
BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout);

58
src/core/wrapper/layout/responsive/responsive.inline.js

@ -0,0 +1,58 @@
import { shortcut } from "@/core/decorator";
import { each } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { Resizers } from "@/base";
import { InlineLayout } from "../layout.inline";
/**
* 横向响应式布局
* Created by GUY on 2016/12/2.
*
* @class ResponsiveInlineLayout
* @extends InlineLayout
*/
@shortcut()
export class ResponsiveInlineLayout extends InlineLayout {
static xtype = "bi.responsive_inline";
mounted() {
const o = this.options;
if (o.horizontalAlign !== HorizontalAlign.Center) {
return;
}
const defaultResize = () => {
if (o.scrollable !== true && o.scrollx !== true) {
const clientWidth = document.body.clientWidth;
if (this.element.width() > 2 / 3 * clientWidth) {
if (clientWidth <= 768) {
each(this._children, (i, child) => {
this._clearGap(child);
this._handleReverseGap(child, o.items[i], i | 0);
child.element.css("display", "");
});
}
}
}
};
const resize = () => {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
const clientWidth = document.body.clientWidth;
if (this.element.width() > 2 / 3 * clientWidth) {
if (clientWidth > 768) {
each(this._children, (i, child) => {
this._clearGap(child);
});
this.resize();
}
}
}
};
this.unResize = Resizers.add(this.getName(), resize);
defaultResize();
}
destroyed() {
this.unResize();
}
}

2
src/core/wrapper/layout/sticky/index.js

@ -0,0 +1,2 @@
export { HorizontalStickyLayout } from "./sticky.horizontal";
export { VerticalStickyLayout } from "./sticky.vertical";

42
src/core/wrapper/layout/sticky/sticky.horizontal.js

@ -1,29 +1,37 @@
import { shortcut } from "@/core/decorator";
import { extend, count, isNotNull } from "@/core/2.base";
import { VerticalAlign } from "@/core/constant";
import { FlexHorizontalLayout } from "../flex";
/** /**
* 横向黏性布局 * 横向黏性布局
*/ */
BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, { @shortcut()
props: function () { export class HorizontalStickyLayout extends FlexHorizontalLayout {
return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), { static xtype = "bi.horizontal_sticky";
props() {
return extend(super.props(...arguments), {
extraCls: "bi-h-sticky", extraCls: "bi-h-sticky",
scrollx: true, scrollx: true,
// horizontalAlign: BI.HorizontalAlign.Stretch, // horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch verticalAlign: VerticalAlign.Stretch,
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.HorizontalStickyLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null; columnSize = null;
} }
} }
if (columnSize !== "fill") { if (columnSize !== "fill") {
var fillIndex; let fillIndex;
BI.count(0, o.items.length, index => { count(0, o.items.length, index => {
if (BI.isNotNull(fillIndex)) { if (isNotNull(fillIndex)) {
return; return;
} }
if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) { if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) {
@ -41,15 +49,15 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
w.element.css({ w.element.css({
position: "sticky", position: "sticky",
zIndex: 1, zIndex: 1,
right: 0 right: 0,
}); });
} }
} else { } else {
w.element.css({ w.element.css({
overflow: "" overflow: "",
}); });
} }
return w; return w;
} }
}); }
BI.shortcut("bi.horizontal_sticky", BI.HorizontalStickyLayout);

42
src/core/wrapper/layout/sticky/sticky.vertical.js

@ -1,29 +1,37 @@
import { shortcut } from "@/core/decorator";
import { extend, count, isNotNull } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { FlexVerticalLayout } from "../flex";
/** /**
* 纵向黏性布局 * 纵向黏性布局
*/ */
BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, { @shortcut()
props: function () { export class VerticalStickyLayout extends FlexVerticalLayout {
return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), { static xtype = "bi.vertical_sticky";
props() {
return extend(super.props(...arguments), {
extraCls: "bi-v-sticky", extraCls: "bi-v-sticky",
scrolly: true, scrolly: true,
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
// verticalAlign: BI.VerticalAlign.Stretch // verticalAlign: VerticalAlign.Stretch
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.VerticalStickyLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = null; rowSize = null;
} }
} }
if (rowSize !== "fill") { if (rowSize !== "fill") {
var fillIndex; let fillIndex;
BI.count(0, o.items.length, index => { count(0, o.items.length, index => {
if (BI.isNotNull(fillIndex)) { if (isNotNull(fillIndex)) {
return; return;
} }
if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) { if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) {
@ -41,15 +49,15 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
w.element.css({ w.element.css({
position: "sticky", position: "sticky",
zIndex: 1, zIndex: 1,
bottom: 0 bottom: 0,
}); });
} }
} else { } else {
w.element.css({ w.element.css({
overflow: "" overflow: "",
}); });
} }
return w; return w;
} }
}); }
BI.shortcut("bi.vertical_sticky", BI.VerticalStickyLayout);

Loading…
Cancel
Save