diff --git a/es6.js b/es6.js new file mode 100644 index 000000000..9c0b18bf4 --- /dev/null +++ b/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); diff --git a/src/base/0.base.js b/src/base/0.base.js index e4daef1cf..a2cffed9b 100644 --- a/src/base/0.base.js +++ b/src/base/0.base.js @@ -7,7 +7,7 @@ import { PopoverController, ResizeController, TooltipsController, - StyleLoaderManager, + StyleLoaderManager } from "../core"; const Resizers = new ResizeController(); @@ -20,7 +20,7 @@ const Drawers = new DrawerController(); const Broadcasts = new BroadcastController(); const StyleLoaders = new StyleLoaderManager(); -export { +export { Resizers, Layers, Maskers, diff --git a/src/case/calendar/calendar.date.item.js b/src/case/calendar/calendar.date.item.js index 3b2d865a0..3322de754 100644 --- a/src/case/calendar/calendar.date.item.js +++ b/src/case/calendar/calendar.date.item.js @@ -1,16 +1,23 @@ /** * 专门为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 { baseCls: "bi-calendar-date-item", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, - } - }, + }; + } + + static xtype = "bi.calendar_date_item"; - render: function () { - var self = this, o = this.options; + render () { + const { text, value, lgap, rgap, tgap, bgap } = this.options; + return { type: "bi.absolute", items: [{ @@ -18,41 +25,40 @@ BI.CalendarDateItem = BI.inherit(BI.BasicButton, { type: "bi.text_item", cls: "bi-border-radius bi-list-item-select", textAlign: "center", - text: o.text, - value: o.value, - ref: function () { - self.text = this; - } + text, + value, + ref: _ref => { + this.text = _ref; + }, }, - left: o.lgap, - right: o.rgap, - top: o.tgap, - bottom: o.bgap - }] + left: lgap, + right: rgap, + top: tgap, + bottom: bgap, + }], }; - }, + } - doHighLight: function () { - this.text.doHighLight.apply(this.text, arguments); - }, + doHighLight () { + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight () { + this.text.unHighLight(...arguments); + } - setValue: function () { + setValue () { if (!this.isReadOnly()) { - this.text.setValue.apply(this.text, arguments); + this.text.setValue(...arguments); } - }, + } - setSelected: function (b) { - BI.CalendarDateItem.superclass.setSelected.apply(this, arguments); + setSelected (b) { + super.setSelected(...arguments); this.text.setSelected(b); - }, + } - getValue: function () { + getValue () { return this.text.getValue(); } -}); -BI.shortcut("bi.calendar_date_item", BI.CalendarDateItem); +} diff --git a/src/case/calendar/calendar.js b/src/case/calendar/calendar.js index 5645fb1f5..da9a41442 100644 --- a/src/case/calendar/calendar.js +++ b/src/case/calendar/calendar.js @@ -3,32 +3,36 @@ * @class BI.Calendar * @extends BI.Widget */ -BI.Calendar = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.Calendar.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core"; +@shortcut() +export class Calendar extends Widget { + static xtype = "bi.calendar"; + + _defaultConfig () { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-calendar", logic: { - dynamic: false + dynamic: false, }, min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 year: 2015, month: 8, - day: 25 + day: 25, }); - }, - - _dateCreator: function (Y, M, D) { - var self = this, o = this.options, log = {}, De = BI.getDate(); - var mins = o.min.match(/\d+/g); - var maxs = o.max.match(/\d+/g); + } + _dateCreator (Y, M, D) { + const { min, max } = this.options, log = {}, De = getDate(); + const mins = min.match(/\d+/g); + const maxs = max.match(/\d+/g); De.setFullYear(Y, M, D); log.ymd = [De.getFullYear(), De.getMonth(), De.getDate()]; - var MD = BI.Date._MD.slice(0); - MD[1] = BI.isLeapYear(log.ymd[0]) ? 29 : 28; + const MD = Date._MD.slice(0); + MD[1] = isLeapYear(log.ymd[0]) ? 29 : 28; // 日期所在月第一天 De.setFullYear(log.ymd[0], log.ymd[1], 1); @@ -36,15 +40,16 @@ BI.Calendar = BI.inherit(BI.Widget, { log.FDay = De.getDay(); // 当前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.NDay = 1; - var items = []; - BI.each(BI.range(42), function (i) { - var td = {}, YY = log.ymd[0], MM = log.ymd[1] + 1, DD; + const items = []; + each(range(42), i => { + const td = {}; + let YY = log.ymd[0], MM = log.ymd[1] + 1, DD; // 上个月的日期 if (i < offSetFDay) { td.lastMonth = true; @@ -63,89 +68,92 @@ BI.Calendar = BI.inherit(BI.Widget, { MM === 12 && (YY += 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.text = DD; items.push(td); }); + return items; - }, + } - _init: function () { - BI.Calendar.superclass._init.apply(this, arguments); - var self = this, o = this.options; - var items = BI.map(this._getWeekLabel(), function (i, value) { + _init () { + super._init(...arguments); + const { year, month, day, logic } = this.options; + const items = map(this._getWeekLabel(), (i, value) => { return { type: "bi.label", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - text: value + text: value, }; }); - var title = BI.createWidget({ + const title = createWidget({ type: "bi.button_group", height: 44, - items: items, + items, layouts: [{ type: "bi.center", hgap: 5, - vgap: 10 - }] + vgap: 10, + }], }); - this.days = BI.createWidget({ + this.days = createWidget({ type: "bi.button_group", - items: BI.createItems(this._getItems(), {}), - value: o.year + "-" + o.month + "-" + o.day, - layouts: [BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, { + items: createItems(this._getItems(), {}), + value: `${year}-${month}-${day}`, + layouts: [LogicFactory.createLogic("table", extend({}, logic, { columns: 7, rows: 6, 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 () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.days.on(Controller.EVENT_CHANGE, () => { + this.fireEvent(Controller.EVENT_CHANGE, arguments); }); - BI.createWidget(BI.extend({ - element: this + createWidget(extend({ + element: this, - }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection("top", title, { + }, LogicFactory.createLogic("vertical", extend({}, logic, { + items: LogicFactory.createLogicItemsByDirection("top", title, { el: this.days, - tgap: -5 - }) + tgap: -5, + }), })))); - }, + } - _getWeekLabel: function () { - return BI.map(BI.range(0, 7), function (idx, v) { - return BI.getShortDayName((v + BI.StartOfWeek) % 7); - }); - }, + _getWeekLabel () { + return map(range(0, 7), (idx, v) => getShortDayName((v + StartOfWeek) % 7)); + } - isFrontDate: function () { - var o = this.options, c = this._const; - var Y = o.year, M = o.month, De = BI.getDate(), day = De.getDay(); + isFrontDate () { + const { year, month, min, max } = this.options; + let Y = year; + const M = month, De = getDate(), day = De.getDay(); Y = Y | 0; De.setFullYear(Y, M, 1); - var newDate = BI.getOffsetDate(De, -1 * (day + 1)); - return !!BI.checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), o.min, o.max)[0]; - }, + const newDate = getOffsetDate(De, -1 * (day + 1)); + + return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0]; + } - isFinalDate: function () { - var o = this.options, c = this._const; - var Y = o.year, M = o.month, De = BI.getDate(), day = De.getDay(); + isFinalDate () { + const { year, month, min, max } = this.options; + let Y = year; + const M = month, De = getDate(), day = De.getDay(); Y = Y | 0; De.setFullYear(Y, M, 1); - var newDate = BI.getOffsetDate(De, 42 - day); - return !!BI.checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), o.min, o.max)[0]; - }, + const newDate = getOffsetDate(De, 42 - day); + + return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0]; + } - _getItems: function () { - 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(7, 14)); 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(35, 42)); - return BI.map(items, function (i, item) { - return BI.map(item, function (j, td) { - var month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month); - var year = o.year; - if (month > 12) { - month = 1; - year++; - } else if (month < 1) { - month = 12; - year--; - } - return BI.extend(td, { - type: "bi.calendar_date_item", - once: false, - forceSelected: true, - value: year + "-" + month + "-" + td.text, - disabled: td.disabled, - cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", - lgap: 2, - rgap: 2, - tgap: 4, - bgap: 4 - // selected: td.currentDay - }); + return map(items, (i, item) => map(item, (j, td) => { + let month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month); + let year = o.year; + if (month > 12) { + month = 1; + year++; + } else if (month < 1) { + month = 12; + year--; + } + + return extend(td, { + type: "bi.calendar_date_item", + once: false, + forceSelected: true, + value: `${year}-${month}-${td.text}`, + disabled: td.disabled, + cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", + lgap: 2, + rgap: 2, + tgap: 4, + bgap: 4, + // selected: td.currentDay }); - }); - }, + })); + } - _populate: function() { + _populate() { this.days.populate(this._getItems()); - }, + } - setMinDate: function (minDate) { - var o = this.options; - if (BI.isNotEmptyString(o.min)) { + setMinDate (minDate) { + const o = this.options; + if (isNotEmptyString(o.min)) { o.min = minDate; this._populate(); } - }, + } - setMaxDate: function (maxDate) { - var o = this.options; - if (BI.isNotEmptyString(o.max)) { + setMaxDate (maxDate) { + const o = this.options; + if (isNotEmptyString(o.max)) { o.max = maxDate; this._populate(); } - }, + } - setValue: function (ob) { - this.days.setValue([ob.year + "-" + ob.month + "-" + ob.day]); - }, + setValue (ob) { + this.days.setValue([`${ob.year}-${ob.month}-${ob.day}`]); + } - getValue: function () { - var date = this.days.getValue()[0].match(/\d+/g); + getValue () { + const date = this.days.getValue()[0].match(/\d+/g); + return { year: date[0] | 0, month: date[1] | 0, - day: date[2] | 0 + day: date[2] | 0, }; } -}); +} -BI.extend(BI.Calendar, { - getPageByDateJSON: function (json) { - var year = BI.getDate().getFullYear(); - var month = BI.getDate().getMonth(); - var page = (json.year - year) * 12; +extend(Calendar, { + getPageByDateJSON (json) { + const year = getDate().getFullYear(); + const month = getDate().getMonth(); + let page = (json.year - year) * 12; page += json.month - 1 - month; + return page; }, - getDateJSONByPage: function (v) { - var months = BI.getDate().getMonth(); - var page = v; + getDateJSONByPage (v) { + const months = getDate().getMonth(); + let page = v; // 对当前page做偏移,使到当前年初 page = page + months; - var year = BI.parseInt(page / 12); - if(page < 0 && page % 12 !== 0) { + let year = parseInt(page / 12); + if (page < 0 && page % 12 !== 0) { year--; } - var month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12); + const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12); + return { - year: BI.getDate().getFullYear() + year, - month: month + 1 + year: getDate().getFullYear() + year, + month: month + 1, }; - } + }, }); -BI.shortcut("bi.calendar", BI.Calendar); diff --git a/src/case/calendar/calendar.year.js b/src/case/calendar/calendar.year.js index 95fcaccdb..4c782da5b 100644 --- a/src/case/calendar/calendar.year.js +++ b/src/case/calendar/calendar.year.js @@ -3,99 +3,104 @@ * @class BI.YearCalendar * @extends BI.Widget */ -BI.YearCalendar = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - var conf = BI.YearCalendar.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core"; +@shortcut() +export class YearCalendar extends Widget { + static xtype = "bi.year_calendar"; + _defaultConfig () { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-year-calendar", behaviors: {}, logic: { - dynamic: false + dynamic: false, }, min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 - year: null + year: null, }); - }, + } - _yearCreator: function (Y) { - var o = this.options; + _yearCreator (Y) { + const { min, max } = this.options; Y = Y | 0; - var start = BI.YearCalendar.getStartYear(Y); - var items = []; + const start = YearCalendar.getStartYear(Y); + const items = []; // 对于年控件来说，只要传入的minDate和maxDate的year区间包含v就是合法的 - var startDate = BI.parseDateTime(o.min, "%Y-%X-%d"); - var endDate = BI.parseDateTime(o.max, "%Y-%X-%d"); - BI.each(BI.range(BI.YearCalendar.INTERVAL), function (i) { - var 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]) { + const startDate = parseDateTime(min, "%Y-%X-%d"); + const endDate = parseDateTime(max, "%Y-%X-%d"); + each(range(YearCalendar.INTERVAL), i => { + const td = {}; + 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.text = start + i; items.push(td); }); + return items; - }, - - _init: function () { - BI.YearCalendar.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.currentYear = BI.getDate().getFullYear(); + } + _init () { + super._init(...arguments); + const { behaviors, logic } = this.options; + this.currentYear = getDate().getFullYear(); - this.years = BI.createWidget({ + this.years = createWidget({ type: "bi.button_group", - behaviors: o.behaviors, - items: BI.createItems(this._getItems(), {}), - layouts: [BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, { + behaviors, + items: createItems(this._getItems(), {}), + layouts: [LogicFactory.createLogic("table", extend({}, logic, { columns: 2, rows: 6, columnSize: [1 / 2, 1 / 2], rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, })), { type: "bi.center_adapt", - vgap: 2 - }] + vgap: 2, + }], }); - this.years.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.years.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, { + createWidget(extend({ + element: this, + }, LogicFactory.createLogic("vertical", extend({}, logic, { scrolly: true, vgap: 5, hgap: 6, - items: BI.LogicFactory.createLogicItemsByDirection("top", this.years) + items: LogicFactory.createLogicItemsByDirection("top", this.years), })))); - }, + } - isFrontYear: function () { - var o = this.options; - var Y = o.year; + isFrontYear () { + const { min, max } = this.options; + let Y = this.options.year; Y = Y | 0; - return !!BI.checkDateVoid(BI.YearCalendar.getStartYear(Y) - 1, 1, 1, o.min, o.max)[0]; - }, + + return !!checkDateVoid(YearCalendar.getStartYear(Y) - 1, 1, 1, min, max)[0]; + } - isFinalYear: function () { - 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; - return !!BI.checkDateVoid(BI.YearCalendar.getEndYear(Y) + 1, 1, 1, o.min, o.max)[0]; - }, + + return !!checkDateVoid(YearCalendar.getEndYear(Y) + 1, 1, 1, min, max)[0]; + } - _getItems: function () { - 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, ""); - var map = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11]; - BI.each(years, function (i, y) { - tyears[i] = years[map[i]]; + const len = years.length, tyears = makeArray(len, ""); + const mapArr = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11]; + each(years, (i, y) => { + tyears[i] = years[mapArr[i]]; }); - var items = []; + const items = []; items.push(tyears.slice(0, 2)); items.push(tyears.slice(2, 4)); 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(10, 12)); - return BI.map(items, function (i, item) { - return BI.map(item, function (j, td) { - return BI.extend(td, { - type: "bi.text_item", - cls: "bi-list-item-select bi-border-radius", - textAlign: "center", - whiteSpace: "normal", - once: false, - forceSelected: true, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - width: 45, - value: td.text, - disabled: td.disabled - }); - }); - }); - }, + return map(items, (i, item) => map(item, (j, td) => extend(td, { + type: "bi.text_item", + cls: "bi-list-item-select bi-border-radius", + textAlign: "center", + whiteSpace: "normal", + once: false, + forceSelected: true, + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + width: 45, + value: td.text, + disabled: td.disabled, + }))); + } - _populate: function () { + _populate () { this.years.populate(this._getItems()); - }, + } - setMinDate: function (minDate) { - var o = this.options; - if (BI.isNotEmptyString(o.min)) { + setMinDate (minDate) { + const o = this.options; + if (isNotEmptyString(o.min)) { o.min = minDate; this._populate(); } - }, + } - setMaxDate: function (maxDate) { - var o = this.options; - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate (maxDate) { + const o = this.options; + if (isNotEmptyString(this.options.max)) { o.max = maxDate; this._populate(); } - }, + } - setValue: function (val) { + setValue (val) { this.years.setValue([val]); - }, + } - getValue: function () { + getValue () { return this.years.getValue()[0]; } -}); +} + // 类方法 -BI.extend(BI.YearCalendar, { +extend(YearCalendar, { INTERVAL: 12, // 获取显示的第一年 - getStartYear: function (year) { - var cur = BI.getDate().getFullYear(); - return year - ((year - cur + 3) % BI.YearCalendar.INTERVAL + 12) % BI.YearCalendar.INTERVAL; + getStartYear (year) { + const cur = getDate().getFullYear(); + + return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL; }, - getEndYear: function (year) { - return BI.YearCalendar.getStartYear(year) + BI.YearCalendar.INTERVAL - 1; + getEndYear (year) { + return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1; }, - getPageByYear: function (year) { - var cur = BI.getDate().getFullYear(); - year = BI.YearCalendar.getStartYear(year); - return (year - cur + 3) / BI.YearCalendar.INTERVAL; - } + getPageByYear (year) { + const cur = getDate().getFullYear(); + year = YearCalendar.getStartYear(year); + + return (year - cur + 3) / YearCalendar.INTERVAL; + }, }); -BI.shortcut("bi.year_calendar", BI.YearCalendar); + diff --git a/src/case/calendar/index.js b/src/case/calendar/index.js new file mode 100644 index 000000000..17c7f5fac --- /dev/null +++ b/src/case/calendar/index.js @@ -0,0 +1,3 @@ +export { CalendarDateItem } from "./calendar.date.item"; +export { Calendar } from "./calendar"; +export { YearCalendar } from "./calendar.year"; diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js index e18ab9599..c536e3ec1 100644 --- a/src/case/editor/editor.clear.js +++ b/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. - * @class BI.SmallTextEditor - * @extends BI.SearchEditor + * @class ClearEditor + * @extends Widget */ -BI.ClearEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.ClearEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +@shortcut() +export class ClearEditor extends Widget { + static xtype = "bi.clear_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_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", height: 24, errorText: "", watermark: "", - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn - }); - }, - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + validationChecker: emptyFn, + quitChecker: emptyFn, + }); + } + + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.ClearEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -34,150 +62,128 @@ BI.ClearEditor = BI.inherit(BI.Widget, { value: o.value, autoTrim: o.autoTrim, }); - this.clear = BI.createWidget({ + this.clear = createWidget({ type: "bi.icon_button", stopEvent: true, - invisible: !BI.isKey(o.value), - cls: "search-close-h-font" + invisible: !isKey(o.value), + cls: "search-close-h-font", }); - this.clear.on(BI.IconButton.EVENT_CHANGE, function () { - self.setValue(""); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT); - self.fireEvent(BI.ClearEditor.EVENT_CLEAR); + this.clear.on(IconButton.EVENT_CHANGE, () => { + this.setValue(""); + this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT); + this.fireEvent(ClearEditor.EVENT_CLEAR); }); - BI.createWidget({ + createWidget({ element: this, type: "bi.htape", - items: [ - { - el: this.editor - }, - { - el: this.clear, - width: 24 - } - ] - }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + items: [{ + el: this.editor, + }, + { + el: this.clear, + width: 24, + } + ], + }); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.ClearEditor.EVENT_FOCUS); + this.editor.on(Editor.EVENT_FOCUS, () => { + this.fireEvent(ClearEditor.EVENT_FOCUS); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.ClearEditor.EVENT_BLUR); + this.editor.on(Editor.EVENT_BLUR, () => { + this.fireEvent(ClearEditor.EVENT_BLUR); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.ClearEditor.EVENT_CLICK); + this.editor.on(Editor.EVENT_CLICK, () => { + this.fireEvent(ClearEditor.EVENT_CLICK); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self._checkClear(); - self.fireEvent(BI.ClearEditor.EVENT_CHANGE); + this.editor.on(Editor.EVENT_CHANGE, () => { + this._checkClear(); + this.fireEvent(ClearEditor.EVENT_CHANGE); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.ClearEditor.EVENT_KEY_DOWN, v); + this.editor.on(Editor.EVENT_KEY_DOWN, v => { + this.fireEvent(ClearEditor.EVENT_KEY_DOWN, v); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.ClearEditor.EVENT_SPACE); + this.editor.on(Editor.EVENT_SPACE, () => { + this.fireEvent(ClearEditor.EVENT_SPACE); }); - this.editor.on(BI.Editor.EVENT_BACKSPACE, function () { - self.fireEvent(BI.ClearEditor.EVENT_BACKSPACE); + this.editor.on(Editor.EVENT_BACKSPACE, () => { + this.fireEvent(ClearEditor.EVENT_BACKSPACE); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.ClearEditor.EVENT_VALID); + this.editor.on(Editor.EVENT_VALID, () => { + this.fireEvent(ClearEditor.EVENT_VALID); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.ClearEditor.EVENT_ERROR); + this.editor.on(Editor.EVENT_ERROR, () => { + this.fireEvent(ClearEditor.EVENT_ERROR); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.ClearEditor.EVENT_ENTER); + this.editor.on(Editor.EVENT_ENTER, () => { + this.fireEvent(ClearEditor.EVENT_ENTER); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.ClearEditor.EVENT_RESTRICT); + this.editor.on(Editor.EVENT_RESTRICT, () => { + this.fireEvent(ClearEditor.EVENT_RESTRICT); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self._checkClear(); - self.fireEvent(BI.ClearEditor.EVENT_EMPTY); + this.editor.on(Editor.EVENT_EMPTY, () => { + this._checkClear(); + this.fireEvent(ClearEditor.EVENT_EMPTY); }); - this.editor.on(BI.Editor.EVENT_REMOVE, function () { - self.fireEvent(BI.ClearEditor.EVENT_REMOVE); + this.editor.on(Editor.EVENT_REMOVE, () => { + this.fireEvent(ClearEditor.EVENT_REMOVE); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self.fireEvent(BI.ClearEditor.EVENT_CONFIRM); + this.editor.on(Editor.EVENT_CONFIRM, () => { + this.fireEvent(ClearEditor.EVENT_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self.fireEvent(BI.ClearEditor.EVENT_CHANGE_CONFIRM); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => { + this.fireEvent(ClearEditor.EVENT_CHANGE_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.ClearEditor.EVENT_START); + this.editor.on(Editor.EVENT_START, () => { + this.fireEvent(ClearEditor.EVENT_START); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.ClearEditor.EVENT_PAUSE); + this.editor.on(Editor.EVENT_PAUSE, () => { + this.fireEvent(ClearEditor.EVENT_PAUSE); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.ClearEditor.EVENT_STOP); + this.editor.on(Editor.EVENT_STOP, () => { + this.fireEvent(ClearEditor.EVENT_STOP); }); - }, + } - _checkClear: function () { + _checkClear() { if (!this.getValue()) { this.clear.invisible(); } else { this.clear.visible(); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - getValue: function () { + getValue() { if (this.isValid()) { return this.editor.getValue(); } - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - if (BI.isKey(v)) { + if (isKey(v)) { this.clear.visible(); } - }, + } - isValid: function () { + 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); +} diff --git a/src/case/editor/editor.defaulttext.js b/src/case/editor/editor.defaulttext.js index fe88d27bb..7597347d7 100644 --- a/src/case/editor/editor.defaulttext.js +++ b/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 * 有默认提示文字的输入框 - * @class BI.DefaultTextEditor - * @extends BI.Widget + * @class DefaultTextEditor + * @extends Widget */ -BI.DefaultTextEditor = BI.inherit(BI.Widget, { - props: function () { +@shortcut() +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 { baseCls: "bi-default-text-editor", hgap: 4, @@ -14,21 +39,21 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, defaultText: "", // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 text: "", // 显示值 - el: {} + el: {}, }; - }, + } - render: function () { - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + render() { + const o = this.options; + this.editor = createWidget(o.el, { type: "bi.editor", simple: o.simple, height: o.height, @@ -48,239 +73,218 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { 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", - 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", height: o.height, text: showText || o.defaultText, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); }, title: o.title, warningTitle: o.warningTitle, - tipType: o.tipType + tipType: o.tipType, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(DefaultTextEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.DefaultTextEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.DefaultTextEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(DefaultTextEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(DefaultTextEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_EMPTY, ...args); }); return { type: "bi.absolute", - items: [ - { - el: this.editor, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - } - ] + items: [{ + el: this.editor, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], }; - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - _setText: function (v) { + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { - var o = this.options; - if (BI.isKey(v)) { + setState(v) { + const o = this.options; + if (isKey(v)) { this.text.setText(v); this.text.element.removeClass("bi-water-mark"); + return; } this.text.setText(o.defaultText); this.text.element.addClass("bi-water-mark"); - }, + } - setTipType: function (v) { + setTipType(v) { this.text.options.tipType = v; - }, + } - getText: function () { + 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); +} diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js index 4cb8e4d75..7517c6320 100644 --- a/src/case/editor/editor.shelter.js +++ b/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. - * @class BI.ShelterEditor - * @extends BI.Widget + * @class ShelterEditor + * @extends Widget */ -BI.ShelterEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.ShelterEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-shelter-editor", +@shortcut() +export class ShelterEditor extends Widget { + static xtype = "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, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, - textAlign: "left" + textAlign: "left", }); - }, - - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + } + + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.ShelterEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -49,7 +74,7 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "shelter-editor-text", title: o.title, @@ -57,92 +82,90 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { tipType: o.tipType, textAlign: o.textAlign, height: o.height, - hgap: o.hgap + 2 + hgap: o.hgap + 2, }); - this.text.on(BI.Controller.EVENT_CHANGE, function () { - arguments[2] = self; - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.text.on(Controller.EVENT_CHANGE, (...args) => { + args[2] = this; + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + this.fireEvent(ShelterEditor.EVENT_CLICK_LABEL); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.ShelterEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(ShelterEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.ShelterEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(ShelterEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(ShelterEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.ShelterEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(ShelterEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.ShelterEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(ShelterEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.ShelterEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(ShelterEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.ShelterEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(ShelterEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.ShelterEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(ShelterEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.ShelterEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(ShelterEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.ShelterEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - self._checkText(); - }, - - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { + this._checkText(); + } + + _checkText() { + const o = this.options; + nextTick(bind(function () { if (this.editor.getValue() === "") { this.text.setValue(o.watermark || ""); 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.element.removeClass("bi-water-mark"); } - BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); + isKey(o.keyword) && this.text.doRedMark(o.keyword); }, this)); - }, - - _showInput: function () { + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, - - _showHint: function () { + } + + _showHint() { this.editor.invisible(); this.text.visible(); - }, - - setWaterMark: function (v) { + } + + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, - - setTitle: function (title) { + } + + setTitle(title) { this.text.setTitle(title); - }, - - setWarningTitle: function (title) { + } + + setWarningTitle(title) { this.text.setWarningTitle(title); - }, - - focus: function () { + } + + focus() { this._showInput(); this.editor.focus(); - }, - - blur: function () { + } + + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, - - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + } + + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, - - isValid: function () { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } + + isValid() { return this.editor.isValid(); - }, - - setErrorText: function (text) { + } + + setErrorText(text) { this.editor.setErrorText(text); - }, - - getErrorText: function () { + } + + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, - - getLastValidValue: function () { + } + + getLastValidValue() { return this.editor.getLastValidValue(); - }, - - getLastChangedValue: function () { + } + + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, - - setTextStyle: function (style) { + } + + setTextStyle(style) { this.text.setStyle(style); - }, - - setValue: function (k) { - var o = this.options; + } + + setValue(k) { this.editor.setValue(k); this._checkText(); - }, - - getValue: function () { + } + + getValue() { return this.editor.getValue(); - }, - - getState: function () { + } + + getState() { return this.text.getValue(); - }, - - setState: function (v) { + } + + setState(v) { this._showHint(); 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); +} diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js index a624d78a2..08feca088 100644 --- a/src/case/editor/editor.sign.js +++ b/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. - * @class BI.SignEditor - * @extends BI.Widget + * @class SignEditor + * @extends Widget */ -BI.SignEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SignEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-sign-editor", +@shortcut() +export class SignEditor extends Widget { + static xtype = "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, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", textAlign: "left", - height: 24 + height: 24, }); - }, + } - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.SignEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -49,7 +75,7 @@ BI.SignEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "sign-editor-text", title: o.title, @@ -58,229 +84,206 @@ BI.SignEditor = BI.inherit(BI.Widget, { textAlign: o.textAlign, height: o.height, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.selectAll(); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.selectAll(); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SignEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SignEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SignEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(SignEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SignEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(SignEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SignEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(SignEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.SignEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(SignEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SignEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(SignEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_QUICK_DOWN, function () { - self.fireEvent(BI.SignEditor.EVENT_QUICK_DOWN, arguments); + this.editor.on(Editor.EVENT_QUICK_DOWN, (...args) => { + this.fireEvent(SignEditor.EVENT_QUICK_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SignEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(SignEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SignEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(SignEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SignEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(SignEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SignEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(SignEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SignEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(SignEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this._checkText(); + this.fireEvent(SignEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SignEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(SignEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SignEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(SignEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.SignEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(SignEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - self._checkText(); - }, + this._checkText(); + } - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { + _checkText() { + const o = this.options; + nextTick(bind(function () { if (this.editor.getValue() === "") { this.text.setValue(o.watermark || ""); this.text.element.addClass("bi-water-mark"); } else { this.text.setValue(this.editor.getValue()); 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)); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setTipType: function (v) { + setTipType(v) { this.text.setTipType(v); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this._checkText(); this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); this._checkText(); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { + setState(v) { this._showHint(); 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); +} diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js index 9c3f340f9..d11dc059d 100644 --- a/src/case/editor/editor.state.js +++ b/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 * 记录状态的输入框 - * @class BI.StateEditor - * @extends BI.Single + * @class StateEditor + * @extends Single */ -BI.StateEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.StateEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-state-editor", +@shortcut() +export class StateEditor extends Widget { + static xtype = "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, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, - defaultText: BI.i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 + defaultText: i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 text: "", // 显示值 - el: {} + el: {}, }); - }, - - _init: function () { - BI.StateEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + } + + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.el, { type: "bi.editor", simple: o.simple, height: o.height, @@ -48,262 +73,243 @@ BI.StateEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "bi-water-mark tip-text-style", textAlign: "left", height: o.height, text: o.text, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); }, - title: BI.isNotNull(o.tipText) ? o.tipText : function () { - var title = ""; - if (BI.isString(self.stateValue)) { - title = self.stateValue; + title: isNotNull(o.tipText) ? o.tipText : () => { + let title = ""; + if (isString(this.stateValue)) { + title = this.stateValue; } - if (BI.isArray(self.stateValue) && self.stateValue.length === 1) { - title = self.stateValue[0]; + if (isArray(this.stateValue) && this.stateValue.length === 1) { + title = this.stateValue[0]; } + return title; }, warningTitle: o.warningTitle, - tipType: o.tipType + tipType: o.tipType, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.StateEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(StateEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.StateEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(StateEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.StateEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(StateEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.StateEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(StateEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.StateEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(StateEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.StateEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(StateEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.StateEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(StateEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.StateEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(StateEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.StateEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(StateEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.StateEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(StateEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.StateEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(StateEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.StateEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(StateEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.StateEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(StateEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.StateEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(StateEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.StateEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(StateEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.StateEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(StateEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.StateEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(StateEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - if (BI.isNotNull(o.text)) { + if (isNotNull(o.text)) { this.setState(o.text); } - }, - - setWaterMark: function (v) { + } + + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, - - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + } + + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, - - focus: function () { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } + + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } - }, - - blur: function () { + } + + blur() { this.editor.blur(); this._showHint(); - }, - - _showInput: function () { + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, - - _showHint: function () { + } + + _showHint() { this.editor.invisible(); this.text.visible(); - }, - - _setText: function (v) { + } + + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, - - isValid: function () { + } + + isValid() { return this.editor.isValid(); - }, - - setErrorText: function (text) { + } + + setErrorText(text) { this.editor.setErrorText(text); - }, - - getErrorText: function () { + } + + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, - - getLastValidValue: function () { + } + + getLastValidValue() { return this.editor.getLastValidValue(); - }, - - getLastChangedValue: function () { + } + + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, - - setValue: function (k) { + } + + setValue(k) { this.editor.setValue(k); - }, - - getValue: function () { + } + + getValue() { return this.editor.getValue(); - }, - - getState: function () { + } + + getState() { return this.editor.getValue().match(/[^\s]+/g); - }, - - setState: function (v) { - var o = this.options; - var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - BI.StateEditor.superclass.setValue.apply(this, arguments); + } + + setState(v) { + const o = this.options; + const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; + super.setValue(...arguments); this.stateValue = v; - if (BI.isNumber(v)) { - if (v === BI.Selection.All) { - this._setText(BI.i18nText("BI-Select_All")); + if (isNumber(v)) { + if (v === Selection.All) { + this._setText(i18nText("BI-Select_All")); this.text.element.removeClass("bi-water-mark"); - } else if (v === BI.Selection.Multi) { - this._setText(BI.i18nText("BI-Select_Part")); + } else if (v === Selection.Multi) { + this._setText(i18nText("BI-Select_Part")); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); - BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + this._setText(isKey(defaultText) ? defaultText : o.text); + isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); } + return; } - if (BI.isString(v)) { + if (isString(v)) { this._setText(v); // 配置了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; } - if (BI.isArray(v)) { - if (BI.isEmpty(v)) { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); - BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + if (isArray(v)) { + if (isEmpty(v)) { + this._setText(isKey(defaultText) ? defaultText : o.text); + isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); } else if (v.length === 1) { this._setText(v[0]); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.i18nText("BI-Select_Part")); + this._setText(i18nText("BI-Select_Part")); this.text.element.removeClass("bi-water-mark"); } } - }, - - setTipType: function (v) { + } + + setTipType(v) { this.text.options.tipType = v; - }, - - getText: function () { + } + + 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); +} diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js index 96be87aa1..807a8c158 100644 --- a/src/case/editor/editor.state.simple.js +++ b/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. - * @class BI.SimpleStateEditor - * @extends BI.Single + * @class SimpleStateEditor + * @extends Single */ -BI.SimpleStateEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SimpleStateEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-simple-state-editor", +@shortcut() +export class SimpleStateEditor extends Widget { + static xtype = "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, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, mouseOut: false, allowBlank: true, watermark: "", errorText: "", height: 24, text: "", - defaultText: BI.i18nText("BI-Basic_Unrestricted"), + defaultText: i18nText("BI-Basic_Unrestricted"), }); - }, + } - _init: function () { - BI.SimpleStateEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -48,241 +73,220 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "bi-water-mark", textAlign: "left", text: o.text, height: o.height, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SimpleStateEditor.EVENT_CLICK_LABEL); }); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - } - ] + items: [{ + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SimpleStateEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.SimpleStateEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(SimpleStateEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(SimpleStateEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.vertical", scrolly: false, element: this, - items: [this.editor] + items: [this.editor], }); this._showHint(); - if (BI.isNotNull(o.text)) { + if (isNotNull(o.text)) { this.setState(o.text); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - _setText: function (v) { + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.editor.getValue().match(/[^\s]+/g); - }, + } - setState: function (v) { - var o = this.options; - BI.SimpleStateEditor.superclass.setValue.apply(this, arguments); - var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - if (BI.isNumber(v)) { - if (v === BI.Selection.All) { - this._setText(BI.i18nText("BI-Already_Selected")); + setState(v) { + const o = this.options; + super.setValue(...arguments); + const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; + if (isNumber(v)) { + if (v === Selection.All) { + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); - } else if (v === BI.Selection.Multi) { - this._setText(BI.i18nText("BI-Already_Selected")); + } else if (v === Selection.Multi) { + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); + this._setText(isKey(defaultText) ? defaultText : o.text); this.text.element.addClass("bi-water-mark"); } + return; } - if (!BI.isArray(v) || v.length === 1) { + if (!isArray(v) || v.length === 1) { this._setText(v); this.text.element.removeClass("bi-water-mark"); - } else if (BI.isEmpty(v)) { + } else if (isEmpty(v)) { this._setText(o.text); this.text.element.addClass("bi-water-mark"); } else { - this._setText(BI.i18nText("BI-Already_Selected")); + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); } - }, + } - getText: function () { + 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); +} diff --git a/src/case/editor/index.js b/src/case/editor/index.js new file mode 100644 index 000000000..487c0f3f6 --- /dev/null +++ b/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"; diff --git a/src/case/index.js b/src/case/index.js index 5e8b11baf..1b8b33c0b 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -1,7 +1,17 @@ import * as button from "./button"; +import * as calendarItem from "./calendar"; +import * as pager from "./pager"; +import * as editor from "./editor"; Object.assign(BI, { ...button, + ...calendarItem, + ...pager, + ...editor, }); export * from "./button"; +export * from "./calendar"; +export * from "./pager"; +export * from "./editor"; + diff --git a/src/case/pager/index.js b/src/case/pager/index.js new file mode 100644 index 000000000..ec62a806d --- /dev/null +++ b/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"; diff --git a/src/case/pager/pager.all.count.js b/src/case/pager/pager.all.count.js index 8e03d57ca..2dfdc0c3c 100644 --- a/src/case/pager/pager.all.count.js +++ b/src/case/pager/pager.all.count.js @@ -2,10 +2,15 @@ * 有总页数和总行数的分页控件 * Created by Young's on 2016/10/13. */ -BI.AllCountPager = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.AllCountPager.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, isPositiveInteger, createWidget, parseInt, HorizontalAlign, isNotEmptyObject } from "@/core"; +// import { TextEditor } from "@/widget/editor/editor.text"; +import { Pager } from "@/base"; +@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", pagerDirection: "vertical", // 翻页按钮方向，可选值：vertical/horizontal height: 24, @@ -16,36 +21,36 @@ BI.AllCountPager = BI.inherit(BI.Widget, { showRowCount: true, showRowInfo: true, }); - }, - _init: function () { - BI.AllCountPager.superclass._init.apply(this, arguments); - var self = this, o = this.options, pagerIconCls = this._getPagerIconCls(); - this.editor = BI.createWidget({ + } + _init () { + super._init(...arguments); + const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, pagerIconCls = this._getPagerIconCls(); + this.editor = createWidget({ type: "bi.small_text_editor", cls: "pager-editor bi-border-radius", - validationChecker: function (v) { - return (o.pages === 0 && v === "0") || BI.isPositiveInteger(v); + validationChecker (v) { + return (pages === 0 && v === "0") || isPositiveInteger(v); }, hgap: 4, vgap: 0, - value: o.curr, + value: curr, errorText: BI.i18nText("BI-Please_Input_Positive_Integer"), width: 40, height: 24, - invisible: o.pages <= 1 + invisible: pages <= 1, }); - this.pager = BI.createWidget({ + this.pager = createWidget({ type: "bi.pager", width: 58, layouts: [{ type: "bi.horizontal", - lgap: 5 + lgap: 5, }], dynamicShow: false, - pages: o.pages, - curr: o.curr, + pages, + curr, groups: 0, first: false, @@ -57,7 +62,7 @@ BI.AllCountPager = BI.inherit(BI.Widget, { warningTitle: BI.i18nText("BI-Current_Is_First_Page"), height: 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: { type: "bi.icon_button", @@ -66,42 +71,43 @@ BI.AllCountPager = BI.inherit(BI.Widget, { warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), height: 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, - hasNext: o.hasNext, - firstPage: o.firstPage, - lastPage: o.lastPage, - invisible: o.pages <= 1 + hasPrev, + hasNext, + firstPage, + lastPage, + invisible: pages <= 1, }); - this.editor.on(BI.TextEditor.EVENT_CONFIRM, function () { - self.pager.setValue(BI.parseInt(self.editor.getValue())); - self.fireEvent(BI.AllCountPager.EVENT_CHANGE); + // TODO:需等到TextEditor 完成es6化后才可替换BI.TextEditor + this.editor.on(BI.TextEditor.EVENT_CONFIRM, () => { + this.pager.setValue(parseInt(this.editor.getValue())); + this.fireEvent(AllCountPager.EVENT_CHANGE); }); - this.pager.on(BI.Pager.EVENT_CHANGE, function () { - self.fireEvent(BI.AllCountPager.EVENT_CHANGE); + this.pager.on(Pager.EVENT_CHANGE, () => { + this.fireEvent(AllCountPager.EVENT_CHANGE); }); - this.pager.on(BI.Pager.EVENT_AFTER_POPULATE, function () { - self.editor.setValue(self.pager.getCurrentPage()); + this.pager.on(Pager.EVENT_AFTER_POPULATE, () => { + this.editor.setValue(this.pager.getCurrentPage()); }); - this.allPages = BI.createWidget({ + this.allPages = createWidget({ type: "bi.label", - title: o.pages, - height: o.height, - text: "/" + o.pages, + title: pages, + height, + text: `/${pages}`, lgap: 5, - invisible: o.pages <= 1 + invisible: pages <= 1, }); - BI.createWidget(o.showRowCount ? { + createWidget(showRowCount ? { type: "bi.vertical_adapt", element: this, scrollx: false, columnSize: ["fill", ""], - horizontalAlign: BI.HorizontalAlign.Right, + horizontalAlign: HorizontalAlign.Right, items: [ this._getRowCountObject(), this.editor, this.allPages, this.pager @@ -109,126 +115,124 @@ BI.AllCountPager = BI.inherit(BI.Widget, { } : { type: "bi.vertical_adapt", element: this, - items: [this.editor, this.allPages, this.pager] + items: [this.editor, this.allPages, this.pager], }); - }, - - _getPagerIconCls: function () { - var o = this.options; - switch (o.pagerDirection) { - case "horizontal": - return { - preCls: "row-pre-page-h-font ", - nextCls: "row-next-page-h-font " - }; - case "vertical": - default: - return { - preCls: "column-pre-page-h-font ", - nextCls: "column-next-page-h-font " - }; + } + + _getPagerIconCls () { + const { pagerDirection } = this.options; + switch (pagerDirection) { + case "horizontal": + return { + preCls: "row-pre-page-h-font ", + nextCls: "row-next-page-h-font ", + }; + case "vertical": + default: + return { + preCls: "column-pre-page-h-font ", + nextCls: "column-next-page-h-font ", + }; } - }, + } - _getRowCountObject: function() { - var self = this, o = this.options; + _getRowCountObject() { + const { height, count, rowInfoObject } = this.options; return { type: "bi.left", - height: o.height, + height, scrollable: false, - ref: function (_ref) { - self.rowCountObject = _ref; + ref: _ref => { + this.rowCountObject = _ref; }, items: [{ type: "bi.label", - height: o.height, + height, text: BI.i18nText("BI-Basic_Total"), - ref: function (_ref) { - self.prevText = _ref; - } + ref: _ref => { + this.prevText = _ref; + }, }, { el: { type: "bi.label", - ref: function (_ref) { - self.rowCount = _ref; + ref: _ref => { + this.rowCount = _ref; }, cls: "row-count", - height: o.height, - text: o.count, - title: o.count + height, + text: count, + title: count, }, hgap: 5, }, { type: "bi.label", - height: o.height, + height, text: BI.i18nText("BI-Tiao_Data"), - textAlign: "left" - }, BI.isNotEmptyObject(o.rowInfoObject) ? o.rowInfoObject : null] + textAlign: "left", + }, isNotEmptyObject(rowInfoObject) ? rowInfoObject : null], }; - }, + } - setAllPages: function (v) { - this.allPages.setText("/" + v); + setAllPages (v) { + this.allPages.setText(`/${v}`); this.allPages.setTitle(v); this.options.pages = v; this.pager.setAllPages(v); this.editor.setEnable(v >= 1); this.setPagerVisible(v > 1); - }, + } - setShowRowInfo: function (b) { + setShowRowInfo (b) { this.options.showRowInfo = b; this.rowCountObject.setVisible(b); - }, + } - setValue: function (v) { + setValue (v) { this.pager.setValue(v); - }, + } - setVPage: function (v) { + setVPage (v) { this.pager.setValue(v); - }, + } - setCount: function (count) { + setCount (count) { if (this.options.showRowCount) { this.rowCount.setText(count); this.rowCount.setTitle(count); } - }, + } - setCountPrevText: function (text) { + setCountPrevText (text) { if (this.options.showRowCount) { this.prevText.setText(text); } - }, + } - getCurrentPage: function () { + getCurrentPage () { return this.pager.getCurrentPage(); - }, + } - hasPrev: function () { + hasPrev () { return this.pager.hasPrev(); - }, + } - hasNext: function () { + hasNext () { return this.pager.hasNext(); - }, + } - isShowPager: function () { + isShowPager () { return this.options.showRowInfo || this.options.pages > 1; - }, + } - setPagerVisible: function (b) { + setPagerVisible (b) { this.editor.setVisible(b); this.allPages.setVisible(b); this.pager.setVisible(b); - }, + } - populate: function () { + populate () { this.pager.populate(); this.setPagerVisible(this.options.pages > 1); } -}); -BI.AllCountPager.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.all_count_pager", BI.AllCountPager); \ No newline at end of file +} diff --git a/src/case/pager/pager.detail.js b/src/case/pager/pager.detail.js index 36e8392f6..37e56edc5 100644 --- a/src/case/pager/pager.detail.js +++ b/src/case/pager/pager.detail.js @@ -5,9 +5,15 @@ * @class BI.DetailPager * @extends BI.Widget */ -BI.DetailPager = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.DetailPager.superclass._defaultConfig.apply(this, arguments), { + +import { shortcut, Widget, extend, emptyFn, result, debounce, isKey, createWidget, createItems, Controller, Events, MIN, MAX } from "@/core"; +@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", behaviors: {}, layouts: [{ @@ -19,11 +25,11 @@ BI.DetailPager = BI.inherit(BI.Widget, { dynamicShowFirstLast: false, // 是否动态显示首页、尾页 dynamicShowPrevNext: false, // 是否动态显示上一页、下一页 pages: false, // 总页数 - curr: function () { + curr () { return 1; }, // 初始化当前页 groups: 0, // 连续显示分页数 - jump: BI.emptyFn, // 分页的回调函数 + jump: emptyFn, // 分页的回调函数 first: false, // 是否显示首页 last: false, // 是否显示尾页 @@ -31,35 +37,34 @@ BI.DetailPager = BI.inherit(BI.Widget, { next: "下一页", firstPage: 1, - lastPage: function () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 + lastPage () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 return 1; }, - hasPrev: BI.emptyFn, // pages不可用时有效 - hasNext: BI.emptyFn // pages不可用时有效 + hasPrev: emptyFn, // pages不可用时有效 + hasNext: emptyFn, // pages不可用时有效 }); - }, - _init: function () { - BI.DetailPager.superclass._init.apply(this, arguments); - var self = this; - this.currPage = BI.result(this.options, "curr"); + } + _init () { + super._init(...arguments); + this.currPage = result(this.options, "curr"); // 翻页太灵敏 this._lock = false; - this._debouce = BI.debounce(function () { - self._lock = false; + this._debouce = debounce(() => { + this._lock = false; }, 300); this._populate(); - }, - - _populate: function () { - var self = this, o = this.options, view = [], dict = {}; + } + _populate () { + const o = this.options, view = [], dict = {}; + const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options; this.empty(); - var pages = BI.result(o, "pages"); - var curr = BI.result(this, "currPage"); - var groups = BI.result(o, "groups"); - var first = BI.result(o, "first"); - var last = BI.result(o, "last"); - var prev = BI.result(o, "prev"); - var next = BI.result(o, "next"); + const pages = result(o, "pages"); + const curr = result(this, "currPage"); + let groups = result(o, "groups"); + let first = result(o, "first"); + let last = result(o, "last"); + const prev = result(o, "prev"); + const next = result(o, "next"); if (pages === false) { 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)); // 当前页非首页，则输出上一页 - if (((!o.dynamicShow && !o.dynamicShowPrevNext) || curr > 1) && prev !== false) { - if (BI.isKey(prev)) { + if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) { + if (isKey(prev)) { view.push({ text: 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 { - view.push(BI.extend({ - disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false) + view.push(extend({ + disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), }, prev)); } } // 当前组非首组，则输出首页 - if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) { + if (((!dynamicShow && !dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) { view.push({ text: first, value: "first", - disabled: !(dict.index > 1 && groups !== 0) + disabled: !(dict.index > 1 && groups !== 0), }); if (dict.index > 1 && groups !== 0) { view.push({ type: "bi.label", 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.start = dict.index > 1 ? curr - dict.poor : 1; 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; }()) : groups; if (dict.end - dict.start < 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)) { s++; e--; @@ -123,164 +129,166 @@ BI.DetailPager = BI.inherit(BI.Widget, { view.push({ text: s, value: s, - selected: true + selected: true, }); } else { view.push({ 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) { view.push({ type: "bi.label", cls: "page-ellipsis", - text: "\u2026" + text: "\u2026", }); } view.push({ text: last, value: "last", - disabled: !(pages > groups && dict.end < pages && groups !== 0) + disabled: !(pages > groups && dict.end < pages && 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 () { - if (BI.isKey(next)) { + if (isKey(next)) { 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) ? - {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) + + 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", element: this, - items: BI.createItems(view, { + items: createItems(view, { cls: "page-item bi-border bi-list-item-active", - height: 23 + height: 23, }), - behaviors: o.behaviors, - layouts: o.layouts + behaviors, + layouts, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - if (self._lock === true) { + this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + if (this._lock === true) { return; } - self._lock = true; - self._debouce(); - if (type === BI.Events.CLICK) { - var v = self.button_group.getValue()[0]; + this._lock = true; + this._debouce(); + if (type === Events.CLICK) { + const v = this.button_group.getValue()[0]; switch (v) { - case "first": - self.currPage = 1; - break; - case "last": - self.currPage = pages; - break; - case "prev": - self.currPage--; - break; - case "next": - self.currPage++; - break; - default: - self.currPage = v; - break; + case "first": + this.currPage = 1; + break; + case "last": + this.currPage = pages; + break; + case "prev": + this.currPage--; + break; + case "next": + this.currPage++; + break; + default: + this.currPage = v; + break; } - o.jump.apply(self, [{ - pages: pages, - curr: self.currPage + jump.apply(this, [{ + pages, + curr: this.currPage, }]); - self._populate(); - self.fireEvent(BI.DetailPager.EVENT_CHANGE, obj); + this._populate(); + 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; - }, + } - setAllPages: function (pages) { + setAllPages (pages) { this.options.pages = pages; this._populate(); - }, + } - hasPrev: function (v) { + hasPrev (v) { v || (v = 1); - var o = this.options; - var pages = this.options.pages; - return pages === false ? o.hasPrev(v) : v > 1; - }, + const { hasPrev } = this.options; + const pages = this.options.pages; + + return pages === false ? hasPrev(v) : v > 1; + } - hasNext: function (v) { + hasNext (v) { v || (v = 1); - var o = this.options; - var pages = this.options.pages; - return pages === false ? o.hasNext(v) : v < pages; - }, + const { hasNext } = this.options; + const pages = this.options.pages; + + return pages === false ? hasNext(v) : v < pages; + } - setValue: function (v) { - var o = this.options; + setValue (v) { + const o = this.options; + const { pages } = this.options; v = v || 0; v = v < 1 ? 1 : v; - if (o.pages === false) { - var lastPage = BI.result(o, "lastPage"), firstPage = 1; - this.currPage = v > lastPage ? lastPage : ((firstPage = BI.result(o, "firstPage")), (v < firstPage ? firstPage : v)); + if (pages === false) { + const lastPage = result(o, "lastPage"); + let firstPage = 1; + this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v)); } else { - v = v > o.pages ? o.pages : v; + v = v > pages ? pages : v; this.currPage = v; } this._populate(); - }, + } - getValue: function () { - var val = this.button_group.getValue()[0]; + getValue () { + const val = this.button_group.getValue()[0]; switch (val) { - case "prev": - return -1; - case "next": - return 1; - case "first": - return BI.MIN; - case "last": - return BI.MAX; - default : - return val; + case "prev": + return -1; + case "next": + return 1; + case "first": + return MIN; + case "last": + return MAX; + default : + return val; } - }, + } - attr: function (key, value) { - BI.DetailPager.superclass.attr.apply(this, arguments); + attr (key, value) { + super.attr(...arguments); if (key === "curr") { - this.currPage = BI.result(this.options, "curr"); + this.currPage = result(this.options, "curr"); } - }, + } - populate: function () { + populate () { this._populate(); } -}); -BI.DetailPager.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DetailPager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE"; -BI.shortcut("bi.detail_pager", BI.DetailPager); +} diff --git a/src/case/pager/pager.direction.js b/src/case/pager/pager.direction.js index dcc0ab96b..512b2cc20 100644 --- a/src/case/pager/pager.direction.js +++ b/src/case/pager/pager.direction.js @@ -5,80 +5,83 @@ * @class BI.DirectionPager * @extends BI.Widget */ -BI.DirectionPager = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.DirectionPager.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +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", height: 24, horizontal: { pages: false, // 总页数 curr: 1, // 初始化当前页， pages为数字时可用 - hasPrev: BI.emptyFn, - hasNext: BI.emptyFn, + hasPrev: emptyFn, + hasNext: emptyFn, firstPage: 1, - lastPage: BI.emptyFn + lastPage: emptyFn, }, vertical: { pages: false, // 总页数 curr: 1, // 初始化当前页， pages为数字时可用 - hasPrev: BI.emptyFn, - hasNext: BI.emptyFn, + hasPrev: emptyFn, + hasNext: emptyFn, firstPage: 1, - lastPage: BI.emptyFn - } + lastPage: emptyFn, + }, }); - }, - _init: function () { - BI.DirectionPager.superclass._init.apply(this, arguments); - var self = this, o = this.options; - var v = o.vertical, h = o.horizontal; + } + _init () { + super._init(...arguments); this._createVPager(); this._createHPager(); - this.layout = BI.createWidget({ + this.layout = createWidget({ type: "bi.absolute", scrollable: false, element: this, items: [{ el: this.vpager, top: 0, - right: 86 + right: 86, }, { el: this.vlabel, top: 0, - right: 110 + right: 110, }, { el: this.hpager, top: 0, - right: 0 + right: 0, }, { el: this.hlabel, top: 0, - right: 24 - }] + right: 24, + }], }); - }, + } - _createVPager: function () { - var self = this, o = this.options; - var v = o.vertical; - this.vlabel = BI.createWidget({ + _createVPager () { + const v = this.options.vertical; + this.vlabel = createWidget({ type: "bi.label", width: 24, height: 24, value: v.curr, title: v.curr, - invisible: true + invisible: true, }); - this.vpager = BI.createWidget({ + this.vpager = createWidget({ type: "bi.pager", width: 72, layouts: [{ type: "bi.horizontal", scrollx: false, - rgap: 24 + rgap: 24, }], invisible: true, @@ -96,7 +99,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, { warningTitle: BI.i18nText("BI-Current_Is_First_Page"), height: 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: { type: "bi.icon_button", @@ -105,42 +108,40 @@ BI.DirectionPager = BI.inherit(BI.Widget, { warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), height: 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, hasNext: v.hasNext, firstPage: v.firstPage, - lastPage: v.lastPage + lastPage: v.lastPage, }); - this.vpager.on(BI.Pager.EVENT_CHANGE, function () { - self.fireEvent(BI.DirectionPager.EVENT_CHANGE); + this.vpager.on(Pager.EVENT_CHANGE, () => { + this.fireEvent(DirectionPager.EVENT_CHANGE); }); - this.vpager.on(BI.Pager.EVENT_AFTER_POPULATE, function () { - self.vlabel.setValue(this.getCurrentPage()); - self.vlabel.setTitle(this.getCurrentPage()); + this.vpager.on(Pager.EVENT_AFTER_POPULATE, () => { + this.vlabel.setValue(this.vpager.getCurrentPage()); + this.vlabel.setTitle(this.vpager.getCurrentPage()); }); - }, - - _createHPager: function () { - var self = this, o = this.options; - var h = o.horizontal; - this.hlabel = BI.createWidget({ + } + _createHPager () { + const h = this.options.horizontal; + this.hlabel = createWidget({ type: "bi.label", width: 24, height: 24, value: h.curr, title: h.curr, - invisible: true + invisible: true, }); - this.hpager = BI.createWidget({ + this.hpager = createWidget({ type: "bi.pager", width: 72, layouts: [{ type: "bi.horizontal", scrollx: false, - rgap: 24 + rgap: 24, }], invisible: true, @@ -158,7 +159,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, { warningTitle: BI.i18nText("BI-Current_Is_First_Page"), height: 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: { type: "bi.icon_button", @@ -167,74 +168,74 @@ BI.DirectionPager = BI.inherit(BI.Widget, { warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), height: 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, hasNext: h.hasNext, firstPage: h.firstPage, - lastPage: h.lastPage + lastPage: h.lastPage, }); - this.hpager.on(BI.Pager.EVENT_CHANGE, function () { - self.fireEvent(BI.DirectionPager.EVENT_CHANGE); + this.hpager.on(Pager.EVENT_CHANGE, () => { + this.fireEvent(DirectionPager.EVENT_CHANGE); }); - this.hpager.on(BI.Pager.EVENT_AFTER_POPULATE, function () { - self.hlabel.setValue(this.getCurrentPage()); - self.hlabel.setTitle(this.getCurrentPage()); + this.hpager.on(Pager.EVENT_AFTER_POPULATE, () => { + this.hlabel.setValue(this.hpager.getCurrentPage()); + this.hlabel.setTitle(this.hpager.getCurrentPage()); }); - }, + } - getVPage: function () { + getVPage () { return this.vpager.getCurrentPage(); - }, + } - getHPage: function () { + getHPage () { return this.hpager.getCurrentPage(); - }, + } - setVPage: function (v) { + setVPage (v) { this.vpager.setValue(v); this.vlabel.setValue(v); this.vlabel.setTitle(v); - }, + } - setHPage: function (v) { + setHPage (v) { this.hpager.setValue(v); this.hlabel.setValue(v); this.hlabel.setTitle(v); - }, + } - hasVNext: function () { + hasVNext () { return this.vpager.hasNext(); - }, + } - hasHNext: function () { + hasHNext () { return this.hpager.hasNext(); - }, + } - hasVPrev: function () { + hasVPrev () { return this.vpager.hasPrev(); - }, + } - hasHPrev: function () { + hasHPrev () { return this.hpager.hasPrev(); - }, + } - setHPagerVisible: function (b) { + setHPagerVisible (b) { this.hpager.setVisible(b); this.hlabel.setVisible(b); - }, + } - setVPagerVisible: function (b) { + setVPagerVisible (b) { this.vpager.setVisible(b); this.vlabel.setVisible(b); - }, + } - populate: function () { + populate () { this.vpager.populate(); this.hpager.populate(); - var vShow = false, hShow = false; + let vShow = false, hShow = false; if (!this.hasHNext() && !this.hasHPrev()) { this.setHPagerVisible(false); } else { @@ -248,8 +249,8 @@ BI.DirectionPager = BI.inherit(BI.Widget, { vShow = true; } this.setVisible(hShow || vShow); - var num = [86, 110, 0, 24]; - var items = this.layout.attr("items"); + const num = [86, 110, 0, 24]; + const items = this.layout.attr("items"); if (vShow === true && hShow === true) { items[0].right = num[0]; @@ -265,12 +266,10 @@ BI.DirectionPager = BI.inherit(BI.Widget, { } this.layout.attr("items", items); this.layout.resize(); - }, + } - clear: function () { + clear () { this.vpager.attr("curr", 1); this.hpager.attr("curr", 1); } -}); -BI.DirectionPager.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.direction_pager", BI.DirectionPager); \ No newline at end of file +} diff --git a/src/core/wrapper/layout/fill/auto.vtape.js b/src/core/wrapper/layout/fill/auto.vtape.js index efc784f5d..aa6c2eb9b 100644 --- a/src/core/wrapper/layout/fill/auto.vtape.js +++ b/src/core/wrapper/layout/fill/auto.vtape.js @@ -1,9 +1,17 @@ -BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, any, isEmptyObject, isNull, backAny } from "@/core/2.base"; +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", - horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, hgap: 0, vgap: 0, lgap: 0, @@ -11,16 +19,17 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { tgap: 0, bgap: 0, rowSize: [], - items: [] + items: [], }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.vtape", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: o.items, horizontalAlign: o.horizontalAlign, @@ -35,65 +44,65 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - _handleResize: function () { - var self = this, o = this.options; - var items = o.items; - var top = {}, bottom = {}; + _handleResize() { + const o = this.options; + const items = o.items; + const top = {}, bottom = {}; top[0] = o.innerVgap; bottom[items.length - 1] = o.innerVgap; - BI.any(items, function (i, item) { - if (BI.isEmptyObject(item)) { + any(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var w = self.layout.getWidgetByName(self._getChildName(i)); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + const w = this.layout.getWidgetByName(this._getChildName(i)); + let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; if (o.rowSize.length > 0) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { rowSize = item.height; } } - if (BI.isNull(top[i])) { - var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; + if (isNull(top[i])) { + let preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; 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({ - 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") { return true; } }); - BI.backAny(items, function (i, item) { - if (BI.isEmptyObject(item)) { + backAny(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var w = self.layout.getWidgetByName(self._getChildName(i)); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; - if (BI.isNull(bottom[i])) { - var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; + const w = this.layout.getWidgetByName(this._getChildName(i)); + const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + if (isNull(bottom[i])) { + let nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; 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({ - 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") { return true; } }); - }, + } - mounted: function () { + mounted() { if (window.ResizeObserver) { this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this)); this.resizeObserver.observe(this.element[0]); @@ -103,23 +112,22 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { this.mutationObserver.observe(this.element[0], { attributes: true, childList: true, - subtree: true + subtree: true, }); } this._handleResize(); - }, + } - destroyed: function () { + destroyed() { this.resizeObserver && this.resizeObserver.unobserve(this.element[0]); this.mutationObserver && this.mutationObserver.disconnect(); - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.vtape_auto", BI.AutoVerticalTapeLayout); +} diff --git a/src/core/wrapper/layout/fill/fill.horizontal.js b/src/core/wrapper/layout/fill/fill.horizontal.js index 72ce8d393..88cc76e7d 100644 --- a/src/core/wrapper/layout/fill/fill.horizontal.js +++ b/src/core/wrapper/layout/fill/fill.horizontal.js @@ -1,6 +1,9 @@ +import { shortcut } from "@/core/decorator"; + /** * 横向填满布局 */ -BI.HorizontalFillLayout = function () { -}; -BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout); +@shortcut() +export class HorizontalFillLayout { + static xtype = "bi.horizontal_fill"; +} diff --git a/src/core/wrapper/layout/fill/fill.vertical.js b/src/core/wrapper/layout/fill/fill.vertical.js index 9acd9c307..66fbafa7d 100644 --- a/src/core/wrapper/layout/fill/fill.vertical.js +++ b/src/core/wrapper/layout/fill/fill.vertical.js @@ -1,6 +1,9 @@ +import { shortcut } from "@/core/decorator"; + /** * 纵向填满布局 */ -BI.VerticalFillLayout = function () { -}; -BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout); +@shortcut() +export class VerticalFillLayout { + static xtype = "bi.vertical_fill"; +} diff --git a/src/core/wrapper/layout/fill/float.fill.horizontal.js b/src/core/wrapper/layout/fill/float.fill.horizontal.js index 512ffb627..cd3475ad8 100644 --- a/src/core/wrapper/layout/fill/float.fill.horizontal.js +++ b/src/core/wrapper/layout/fill/float.fill.horizontal.js @@ -1,9 +1,18 @@ -BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, any, isEmptyObject, isNull, backAny, isFunction, compact, each } from "@/core/2.base"; +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", - horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, hgap: 0, vgap: 0, lgap: 0, @@ -11,134 +20,136 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { tgap: 0, bgap: 0, columnSize: [], - items: [] + items: [], }); - }, - render: function () { - BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (items) { - var self = this, o = this.options; - items = BI.compact(items); - var rank = 0; + stroke(items) { + const o = this.options; + items = compact(items); + let rank = 0; - function createWidget (i, item, desc) { - if (o.verticalAlign !== BI.VerticalAlign.Stretch) { - var w = BI._lazyCreateWidget({ + const createWidget = (i, item, desc) => { + let w; + if (o.verticalAlign !== VerticalAlign.Stretch) { + w = _lazyCreateWidget({ type: "bi.vertical_adapt", - horizontalAlign: BI.HorizontalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, verticalAlign: o.verticalAlign, columnSize: ["fill"], - items: [item] + items: [item], }); } 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({ - "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 (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({ - "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({ - "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 { - 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({ - "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({ - "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({ - "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), - bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); - if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { + const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), + bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); + if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) { w.element.css({ - height: "calc(100% - " + self._optimiseGap(top + bottom) + ")" + height: `calc(100% - ${this._optimiseGap(top + bottom)})`, }); } w.element.css({ - position: "relative" + position: "relative", }); + return w; - } + }; - BI.any(items, function (i, item) { - if (BI.isEmptyObject(item)) { + any(items, (i, item) => { + if (isEmptyObject(item)) { 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") { return true; } - var w = createWidget(i, item); - self.addWidget(self._getChildName(rank++), w); + const w = createWidget(i, item); + this.addWidget(this._getChildName(rank++), w); w.element.css({ - float: "left" + "float": "left", }); }); - BI.backAny(items, function (i, item) { - if (BI.isEmptyObject(item)) { + backAny(items, (i, item) => { + if (isEmptyObject(item)) { 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") { return true; } - var w = createWidget(i, item, true); - self.addWidget(self._getChildName(rank++), w); + const w = createWidget(i, item, true); + this.addWidget(this._getChildName(rank++), w); w.element.css({ - float: "right" + "float": "right", }); }); - BI.each(items, function (i, item) { - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + each(items, (i, item) => { + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize === "fill") { - var w = createWidget(i, item); - self.addWidget(self._getChildName(rank++), w); + const w = createWidget(i, item); + this.addWidget(this._getChildName(rank++), w); } }); - }, + } - resize: function () { + resize() { // console.log("填充布局不需要resize"); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.horizontal_float_fill", BI.FloatHorizontalFillLayout); +} diff --git a/src/core/wrapper/layout/fill/index.js b/src/core/wrapper/layout/fill/index.js new file mode 100644 index 000000000..aefc020d1 --- /dev/null +++ b/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"; diff --git a/src/core/wrapper/layout/flex/flex.center.js b/src/core/wrapper/layout/flex/flex.center.js index 8944b3add..caec5842e 100644 --- a/src/core/wrapper/layout/flex/flex.center.js +++ b/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. * - * @class BI.FlexCenterLayout - * @extends BI.Layout + * @class FlexCenterLayout + * @extends Layout */ -BI.FlexCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexCenterLayout extends Layout { + static xtype = "bi.flex_center_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-c", - verticalAlign: BI.VerticalAlign.Middle, - horizontalAlign: BI.HorizontalAlign.Center, + verticalAlign: VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Center, hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var self = this, o = this.options; + } + + render() { + const o = this.options; + return { type: "bi.flex_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -39,16 +49,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, { bgap: o.bgap, innerHgap: o.innerHgap, innerVgap: o.innerVgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout); +} diff --git a/src/core/wrapper/layout/flex/flex.horizontal.center.js b/src/core/wrapper/layout/flex/flex.horizontal.center.js index 220f1f394..ffc0d6aac 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.center.js +++ b/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. * - * @class BI.FlexHorizontalCenter - * @extends BI.Layout + * @class FlexHorizontalCenter + * @extends Layout */ -BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexHorizontalCenter extends Layout { + static xtype = "bi.flex_horizontal_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-h-c", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, rowSize: [], scrolly: false, hgap: 0, @@ -17,15 +25,17 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var self = this, o = this.options; + } + + render() { + const o = this.options; + return { type: "bi.flex_vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -40,17 +50,20 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { bgap: o.bgap, innerHgap: o.innerHgap, innerVgap: o.innerVgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + 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"; +} diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index 75326335b..7489d30a7 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/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. * - * @class BI.FlexHorizontalLayout - * @extends BI.Layout + * @class FlexHorizontalLayout + * @extends Layout */ -BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexHorizontalLayout extends Layout { + static xtype = "bi.flex_horizontal"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-h", - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch + verticalAlign: VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch columnSize: [], scrollx: true, hgap: 0, @@ -18,52 +26,54 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); + } + + render() { + super.render(...arguments); + const o = this.options; + this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); if (o.scrollable === true || o.scrollx === true) { this.element.addClass("f-scroll-x"); } if (o.scrollable === true || o.scrolly === true) { this.element.addClass("f-scroll-y"); } - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _hasFill: function () { - var o = this.options; + _hasFill() { + const o = this.options; if (o.columnSize.length > 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") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (o.columnSize.length > 0) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { columnSize = null; } } w.element.css({ - position: "relative" + position: "relative", }); if (columnSize !== "auto") { if (columnSize === "fill" || columnSize === "") { - if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { + if (o.horizontalAlign !== HorizontalAlign.Stretch) { if (o.scrollable === true || o.scrollx === true) { w.element.addClass("f-s-n"); } @@ -93,12 +103,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, i); + return w; - }, + } - populate: function (items) { - BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout); +} diff --git a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js index b52b1e456..db2aeadc7 100644 --- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js +++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js @@ -1,6 +1,13 @@ -BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, isArray, each, map, stripEL } from "@/core/2.base"; +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", columnSize: [], items: {}, @@ -15,33 +22,35 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rhgap: 0, rtgap: 0, rbgap: 0, - rvgap: 0 + rvgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); - var items = this._formatItems(o.items); + } + + render() { + const o = this.options; + super.render(...arguments); + const items = this._formatItems(o.items); + return { type: "bi.flex_vertical_adapt", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []), - items: items, + items, scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, innerHgap: o.innerHgap, - innerVgap: o.innerVgap + innerVgap: o.innerVgap, }; - }, + } - _formatItems: function (items) { - var self = this, o = this.options; - var left, right; - if (BI.isArray(items)) { - BI.each(items, function (i, item) { + _formatItems(items) { + const o = this.options; + let left, right; + if (isArray(items)) { + each(items, (i, item) => { if (item.left) { left = item.left; } @@ -50,32 +59,34 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { } }); } - var leftItems = left || items.left || []; - var rightItems = right || items.right || []; - leftItems = BI.map(leftItems, function (i, item) { - var json = { - el: BI.stripEL(item) + let leftItems = left || items.left || []; + const rightItems = right || items.right || []; + leftItems = map(leftItems, (i, item) => { + const json = { + el: stripEL(item), }; - if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { - json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item); + if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { + json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); } - if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { - json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); + if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + 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) { - json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); + if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } - if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { - json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); + if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { + json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); } + return json; }); + return leftItems.concat({ el: { type: "bi.flex_vertical_adapt", columnSize: o.columnSize.slice(leftItems.length), css: { - "margin-left": "auto" + "margin-left": "auto", }, hgap: o.rhgap, vgap: o.rvgap, @@ -83,22 +94,21 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rgap: o.rrgap, tgap: o.rtgap, bgap: o.rbgap, - items: rightItems - } + items: rightItems, + }, }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/flex/flex.vertical.center.js b/src/core/wrapper/layout/flex/flex.vertical.center.js index cf2e55077..a4a830862 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.center.js +++ b/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. * - * @class BI.FlexVerticalCenter - * @extends BI.Layout + * @class FlexVerticalCenter + * @extends Layout */ -BI.FlexVerticalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexVerticalCenter extends Layout { + static xtype = "bi.flex_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-v-c", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, hgap: 0, @@ -18,15 +26,17 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var self = this, o = this.options; + } + + render() { + const o = this.options; + return { type: "bi.flex_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, horizontalAlign: o.horizontalAlign, @@ -41,17 +51,20 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, { hgap: o.hgap, innerHgap: o.innerHgap, innerVgap: o.innerVgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + 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" +} diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index 1c56586cc..7847d7009 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/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. * - * @class BI.FlexVerticalLayout - * @extends BI.Layout + * @class FlexVerticalLayout + * @extends Layout */ -BI.FlexVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexVerticalLayout extends Layout { + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-v", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, rowSize: [], scrolly: true, hgap: 0, @@ -17,52 +23,54 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexVerticalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); + } + + render() { + super.render(...arguments); + const self = this, o = this.options; + this.element.addClass(`h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`); if (o.scrollable === true || o.scrollx === true) { this.element.addClass("f-scroll-x"); } if (o.scrollable === true || o.scrolly === true) { 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); }) : o.items; this.populate(items); - }, + } - _hasFill: function () { - var o = this.options; + _hasFill() { + const o = this.options; if (o.rowSize.length > 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") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + _addElement(i, item) { + const o = this.options; + const w = super._addElement.apply(this, arguments); + let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; if (o.rowSize.length > 0) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { rowSize = null; } } w.element.css({ - position: "relative" + position: "relative", }); if (rowSize !== "auto") { if (rowSize === "fill" || rowSize === "") { - if (o.verticalAlign !== BI.VerticalAlign.Stretch) { + if (o.verticalAlign !== VerticalAlign.Stretch) { if (o.scrollable === true || o.scrolly === true) { w.element.addClass("f-s-n"); } @@ -92,12 +100,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, null, i); + return w; - }, + } - populate: function (items) { - BI.FlexVerticalLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate.apply(this, arguments); this._mount(); } -}); -BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout); +} diff --git a/src/core/wrapper/layout/flex/index.js b/src/core/wrapper/layout/flex/index.js new file mode 100644 index 000000000..1625f8ad0 --- /dev/null +++ b/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"; diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js index ee44e9823..347ab62a9 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js +++ b/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. * - * @class BI.FlexWrapperCenterLayout - * @extends BI.Layout + * @class FlexWrapperCenterLayout + * @extends Layout */ -BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperCenterLayout extends Layout { + static xtype = "bi.flex_scrollable_center_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-c", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, scrollable: true, @@ -19,15 +27,17 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var self = this, o = this.options; + } + + render() { + const o = this.options; + return { type: "bi.flex_scrollable_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -40,16 +50,15 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout); +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js index 1735c25ff..c15e28369 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js +++ b/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. * - * @class BI.FlexVerticalCenter - * @extends BI.Layout + * @class FlexVerticalCenter + * @extends Layout */ -BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperHorizontalCenter extends Layout { + static xtype = "bi.flex_scrollable_horizontal_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-v-c", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, rowSize: [], scrollable: true, scrolly: false, @@ -19,15 +27,17 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var self = this, o = this.options; + } + + render() { + const o = this.options; + return { type: "bi.flex_scrollable_vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -40,17 +50,20 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { vgap: o.vgap, tgap: o.tgap, bgap: o.bgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + 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"; +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index fa90b0543..4e3cee14a 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/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. * - * @class BI.FlexHorizontalLayout - * @extends BI.Layout + * @class FlexHorizontalLayout + * @extends Layout */ -BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperHorizontalLayout extends Layout { + static xtype = "bi.flex_scrollable_horizontal"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-h", - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, columnSize: [], scrollable: null, scrollx: true, @@ -19,47 +28,49 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); - this.$wrapper = BI.Widget._renderEngine.createElement("
").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); + this.$wrapper = Widget._renderEngine.createElement("
").addClass(`f-s-h-w v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _hasFill: function () { - var o = this.options; + _hasFill() { + const o = this.options; if (o.columnSize.length > 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") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (o.columnSize.length > 0) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { columnSize = null; } } w.element.css({ - position: "relative" + position: "relative", }); if (columnSize !== "auto") { if (columnSize === "fill" || columnSize === "") { - if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { + if (o.horizontalAlign !== HorizontalAlign.Stretch) { if (o.scrollable === true || o.scrollx === true) { w.element.addClass("f-s-n"); } @@ -91,21 +102,21 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, i); + return w; - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.$wrapper.append(frag); this.element.append(this.$wrapper); - }, + } - _getWrapper: function () { + _getWrapper() { return this.$wrapper; - }, + } - populate: function (items) { - BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout); +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js index 5b9e7e11d..98c340452 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js +++ b/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. * - * @class BI.FlexVerticalCenter - * @extends BI.Layout + * @class FlexVerticalCenter + * @extends Layout */ -BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperVerticalCenter extends Layout { + static xtype = "bi.flex_scrollable_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-v-c", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, scrollable: true, @@ -19,15 +27,17 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var self = this, o = this.options; + } + + render() { + const o = this.options; + return { type: "bi.flex_scrollable_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, horizontalAlign: o.horizontalAlign, @@ -40,17 +50,20 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + 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"; +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index 76beeb601..f557ba543 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/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. * - * @class BI.FlexWrapperVerticalLayout - * @extends BI.Layout + * @class FlexWrapperVerticalLayout + * @extends Layout */ -BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperVerticalLayout extends Layout { + static xtype = "bi.flex_scrollable_vertical"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-v", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, rowSize: [], scrollable: null, scrolly: true, @@ -19,47 +28,49 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); - this.$wrapper = BI.Widget._renderEngine.createElement("
").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); + this.$wrapper = Widget._renderEngine.createElement("
").addClass(`f-s-v-w h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _hasFill: function () { - var o = this.options; + _hasFill() { + const o = this.options; if (o.rowSize.length > 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") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; if (o.rowSize.length > 0) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { rowSize = null; } } w.element.css({ - position: "relative" + position: "relative", }); if (rowSize !== "auto") { if (rowSize === "fill" || rowSize === "") { - if (o.verticalAlign !== BI.VerticalAlign.Stretch) { + if (o.verticalAlign !== VerticalAlign.Stretch) { if (o.scrollable === true || o.scrolly === true) { w.element.addClass("f-s-n"); } @@ -91,21 +102,21 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, null, i); + return w; - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.$wrapper.append(frag); this.element.append(this.$wrapper); - }, + } - _getWrapper: function () { + _getWrapper() { return this.$wrapper; - }, + } - populate: function (items) { - BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout); +} diff --git a/src/core/wrapper/layout/flex/wrapper/index.js b/src/core/wrapper/layout/flex/wrapper/index.js new file mode 100644 index 000000000..5257a1b70 --- /dev/null +++ b/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"; diff --git a/src/core/wrapper/layout/float/float.absolute.center.js b/src/core/wrapper/layout/float/float.absolute.center.js index 08cc5b326..6aefbc1ac 100644 --- a/src/core/wrapper/layout/float/float.absolute.center.js +++ b/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实现的居中布局 - * @class BI.FloatAbsoluteCenterLayout - * @extends BI.Layout + * @class FloatAbsoluteCenterLayout + * @extends Layout */ -BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatAbsoluteCenterLayout extends Layout { + static xtype = "bi.absolute_center_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-c-fl", }); - }, + } - render: function () { - BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const w = super._addElement(...arguments); w.element.addClass("bi-abs-c-item").css({ position: "absolute", }); + return w; - }, + } - populate: function (items) { - BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout); +} diff --git a/src/core/wrapper/layout/float/float.absolute.horizontal.js b/src/core/wrapper/layout/float/float.absolute.horizontal.js index b9aae3708..8d2757217 100644 --- a/src/core/wrapper/layout/float/float.absolute.horizontal.js +++ b/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实现的居中布局 - * @class BI.FloatAbsoluteHorizontalLayout - * @extends BI.Layout + * @class FloatAbsoluteHorizontalLayout + * @extends Layout */ -BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatAbsoluteHorizontalLayout extends Layout { + static xtype = "bi.absolute_horizontal_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-h-fl", - horizontalAlign: BI.HorizontalAlign.Center, + horizontalAlign: HorizontalAlign.Center, rowSize: [], vgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.vtape", horizontalAlign: o.horizontalAlign, @@ -26,8 +35,8 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, hgap: "50%", vgap: o.vgap, @@ -39,34 +48,35 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - _formatItems: function (items) { - var o = this.options; - if (o.horizontalAlign === BI.HorizontalAlign.Left) { + _formatItems(items) { + const o = this.options; + if (o.horizontalAlign === HorizontalAlign.Left) { return items; } - var cls = o.horizontalAlign === BI.HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item"; - return BI.map(items, function (i, item) { - if (!item || BI.isEmptyObject(item)) { + const cls = o.horizontalAlign === HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item"; + + return map(items, (i, item) => { + if (!item || isEmptyObject(item)) { return item; } - var el = BI.stripEL(item); - if (BI.isWidget(el)) { + const el = stripEL(item); + if (isWidget(el)) { el.element.addClass(cls); } else { el.cls = (el.cls || "") + cls; } + return item; }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout); +} diff --git a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js index 9de105651..0b545c822 100644 --- a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js +++ b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js @@ -1,8 +1,16 @@ -BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, map, isEmptyObject, stripEL, isWidget, isArray, each } from "@/core/2.base"; +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", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, items: {}, llgap: 0, lrgap: 0, @@ -15,16 +23,18 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rhgap: 0, rtgap: 0, rbgap: 0, - rvgap: 0 + rvgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + } + + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, items: this._formatItems(o.items), @@ -33,15 +43,15 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { innerVgap: o.innerVgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - _formatItems: function (items) { - var self = this, o = this.options; - var left, right; - if (BI.isArray(items)) { - BI.each(items, function (i, item) { + _formatItems(items) { + const o = this.options; + let left, right; + if (isArray(items)) { + each(items, (i, item) => { if (item.left) { left = item.left; } @@ -50,98 +60,105 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { } }); } - var leftItems = left || items.left || []; - var rightItems = right || items.right || []; - leftItems = BI.map(leftItems, function (i, item) { - var el = BI.stripEL(item); - if (o.verticalAlign === BI.VerticalAlign.Middle) { - if (BI.isWidget(el)) { + let leftItems = left || items.left || []; + let rightItems = right || items.right || []; + leftItems = map(leftItems, (i, item) => { + const el = stripEL(item); + if (o.verticalAlign === VerticalAlign.Middle) { + if (isWidget(el)) { el.element.addClass("bi-abs-c-y-item"); } else { - el.cls = (el.cls || "") + "bi-abs-c-y-item"; + el.cls = `${el.cls || ""}bi-abs-c-y-item`; } } - var json = { - el: el, - width: item.width + const json = { + el, + width: item.width, }; // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 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) { - json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); + if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + 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) { - json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); + if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } // if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); // } + return json; }); - rightItems = BI.map(rightItems, function (i, item) { - var el = BI.stripEL(item); - if (o.verticalAlign === BI.VerticalAlign.Middle) { - if (BI.isWidget(el)) { + rightItems = map(rightItems, (i, item) => { + const el = stripEL(item); + if (o.verticalAlign === VerticalAlign.Middle) { + if (isWidget(el)) { el.element.addClass("bi-abs-c-y-item"); } else { - el.cls = (el.cls || "") + "bi-abs-c-y-item"; + el.cls = `${el.cls || ""}bi-abs-c-y-item`; } } - var json = { - el: el, - width: item.width + const json = { + el, + width: item.width, }; // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 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) { - json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); + if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + 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) { - json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); + if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } // if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); // } + return json; }); + return leftItems.concat({}, rightItems); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { + populate(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: function () { - return BI.extend(BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-r-v-fl", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, items: [], lgap: 0, rgap: 0, - hgap: 0 + hgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + } + + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, items: [{}].concat(this._formatItems(o.items)), @@ -151,39 +168,40 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { vgap: "50%", scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - _formatItems: function (items) { - if (this.options.verticalAlign !== BI.VerticalAlign.Middle) { + _formatItems(items) { + if (this.options.verticalAlign !== VerticalAlign.Middle) { 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; } - var el = BI.stripEL(item); - if (BI.isWidget(el)) { + const el = stripEL(item); + if (isWidget(el)) { el.element.addClass("bi-abs-c-y-item"); } else { - el.cls = (el.cls || "") + "bi-abs-c-y-item"; + el.cls = `${el.cls || ""}bi-abs-c-y-item`; } + return item; }); - }, + } - resize: function () { + resize() { this.layout.stroke([{}].concat(this._formatItems(this.options.items))); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { + populate(items) { this.layout.populate([{}].concat(this._formatItems(items))); } -}); -BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/float/float.absolute.vertical.js b/src/core/wrapper/layout/float/float.absolute.vertical.js index 01b949b06..d55dba779 100644 --- a/src/core/wrapper/layout/float/float.absolute.vertical.js +++ b/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实现的居中布局 - * @class BI.FloatAbsoluteVerticalLayout - * @extends BI.Layout + * @class FloatAbsoluteVerticalLayout + * @extends Layout */ -BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatAbsoluteVerticalLayout extends Layout { + static xtype = "bi.absolute_vertical_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-h-fl", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, columnSize: [], hgap: 0, lgap: 0, - rgap: 0 + rgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", verticalAlign: o.verticalAlign, @@ -26,8 +35,8 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, vgap: "50%", hgap: o.hgap, @@ -39,34 +48,35 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - _formatItems: function (items) { - var o = this.options; - if (o.verticalAlign === BI.VerticalAlign.Top) { + _formatItems(items) { + const o = this.options; + if (o.verticalAlign === VerticalAlign.Top) { return items; } - var cls = o.verticalAlign === BI.VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item"; - return BI.map(items, function (i, item) { - if (!item || BI.isEmptyObject(item)) { + const cls = o.verticalAlign === VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item"; + + return map(items, (i, item) => { + if (!item || isEmptyObject(item)) { return item; } - var el = BI.stripEL(item); - if (BI.isWidget(el)) { + const el = stripEL(item); + if (isWidget(el)) { el.element.addClass(cls); } else { el.cls = (el.cls || "") + cls; } + return item; }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout); +} diff --git a/src/core/wrapper/layout/float/float.horizontal.js b/src/core/wrapper/layout/float/float.horizontal.js index 97ac66b49..9b3da1f9d 100644 --- a/src/core/wrapper/layout/float/float.horizontal.js +++ b/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 () { - return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-fl", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, rowSize: [], hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - if (o.verticalAlign === BI.VerticalAlign.Top) { + render() { + const o = this.options; + if (o.verticalAlign === VerticalAlign.Top) { return { type: "bi.vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: this._formatItems(o.items), vgap: o.vgap, @@ -32,22 +39,23 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { bgap: o.bgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; } + return { type: "bi.inline", items: [{ el: { type: "bi.vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: this._formatItems(o.items), vgap: o.vgap, tgap: o.tgap, - bgap: o.bgap - } + bgap: o.bgap, + }, }], horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -55,13 +63,14 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { innerVgap: o.innerVgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - _formatItems: function (items) { - var o = this.options; - return BI.map(items, function (i, item) { + _formatItems(items) { + const o = this.options; + + return map(items, (i, item) => { return { el: { type: "bi.inline_horizontal_adapt", @@ -69,18 +78,17 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { items: [item], hgap: o.hgap, lgap: o.lgap, - rgap: o.rgap - } + rgap: o.rgap, + }, }; }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout); +} diff --git a/src/core/wrapper/layout/float/index.js b/src/core/wrapper/layout/float/index.js new file mode 100644 index 000000000..97d5b1ff2 --- /dev/null +++ b/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"; diff --git a/src/core/wrapper/layout/index.js b/src/core/wrapper/layout/index.js index 03bd1cf74..9fd652878 100644 --- a/src/core/wrapper/layout/index.js +++ b/src/core/wrapper/layout/index.js @@ -15,3 +15,9 @@ export { TdLayout } from "./layout.td"; export { VerticalLayout } from "./layout.vertical"; export { WindowLayout } from "./layout.window"; export * from "./adapt"; +export * from "./fill"; +export * from "./flex"; +export * from "./float"; +export * from "./middle"; +export * from "./responsive"; +export * from "./sticky"; diff --git a/src/core/wrapper/layout/middle/index.js b/src/core/wrapper/layout/middle/index.js new file mode 100644 index 000000000..c564fe1a6 --- /dev/null +++ b/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"; diff --git a/src/core/wrapper/layout/middle/middle.center.js b/src/core/wrapper/layout/middle/middle.center.js index 9d80a094f..039d90a19 100644 --- a/src/core/wrapper/layout/middle/middle.center.js +++ b/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 - * @extends BI.Layout + * @class CenterLayout + * @extends Layout */ -BI.CenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class CenterLayout extends Layout { + static xtype = "bi.center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - BI.CenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var list = [], items = o.items; - BI.each(items, function (i) { + render() { + super.render(...arguments); + const o = this.options; + const list = [], items = o.items; + each(items, i => { list.push({ column: i, row: 0, - el: BI._lazyCreateWidget({ + el: _lazyCreateWidget({ 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) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", - left: self._optimiseGap(o.hgap + o.lgap), - right: self._optimiseGap(o.hgap + o.rgap), - top: self._optimiseGap(o.vgap + o.tgap), - bottom: self._optimiseGap(o.vgap + o.bgap), + left: this._optimiseGap(o.hgap + o.lgap), + right: this._optimiseGap(o.hgap + o.rgap), + top: this._optimiseGap(o.vgap + o.tgap), + bottom: this._optimiseGap(o.vgap + o.bgap), width: "auto", - height: "auto" + height: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.grid", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columns: list.length, rows: 1, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("center布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.center", BI.CenterLayout); +} diff --git a/src/core/wrapper/layout/middle/middle.float.center.js b/src/core/wrapper/layout/middle/middle.float.center.js index d1e2a4695..63b6f157d 100644 --- a/src/core/wrapper/layout/middle/middle.float.center.js +++ b/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 - * @extends BI.Layout + * @class FloatCenterLayout + * @extends Layout */ -BI.FloatCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatCenterLayout extends Layout { + static xtype = "bi.float_center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-float-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FloatCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options, items = o.items; - var list = [], width = 100 / items.length; - BI.each(items, function (i) { - var widget = BI._lazyCreateWidget({ - type: "bi.default" + } + + render() { + super.render(...arguments); + const o = this.options, items = o.items; + const list = [], width = 100 / items.length; + each(items, i => { + const widget = _lazyCreateWidget({ + type: "bi.default", }); - widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({ - width: width + "%", - height: "100%" + widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({ + width: `${width}%`, + height: "100%", }); list.push({ - el: widget + el: widget, }); }); - BI.each(items, function (i, item) { + each(items, (i, item) => { if (item) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", - left: self._optimiseGap(o.hgap + o.lgap), - right: self._optimiseGap(o.hgap + o.rgap), - top: self._optimiseGap(o.vgap + o.tgap), - bottom: self._optimiseGap(o.vgap + o.bgap), + left: this._optimiseGap(o.hgap + o.lgap), + right: this._optimiseGap(o.hgap + o.rgap), + top: this._optimiseGap(o.vgap + o.tgap), + bottom: this._optimiseGap(o.vgap + o.bgap), width: "auto", - height: "auto" + height: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.left", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("floatcenter布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.float_center", BI.FloatCenterLayout); +} diff --git a/src/core/wrapper/layout/middle/middle.horizontal.js b/src/core/wrapper/layout/middle/middle.horizontal.js index c42fde9c0..b6fff379c 100644 --- a/src/core/wrapper/layout/middle/middle.horizontal.js +++ b/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 - * @extends BI.Layout + * @class HorizontalCenterLayout + * @extends Layout */ -BI.HorizontalCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class HorizontalCenterLayout extends Layout { + static xtype = "bi.horizontal_center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.HorizontalCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options, items = o.items; - var list = []; - BI.each(items, function (i) { + } + + render() { + super.render(...arguments); + const o = this.options, items = o.items; + const list = []; + each(items, i => { list.push({ column: i, row: 0, - el: BI._lazyCreateWidget({ + el: _lazyCreateWidget({ 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) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", - left: self._optimiseGap(o.hgap + o.lgap), - right: self._optimiseGap(o.hgap + o.rgap), - top: self._optimiseGap(o.vgap + o.tgap), - bottom: self._optimiseGap(o.vgap + o.bgap), - width: "auto" + left: this._optimiseGap(o.hgap + o.lgap), + right: this._optimiseGap(o.hgap + o.rgap), + top: this._optimiseGap(o.vgap + o.tgap), + bottom: this._optimiseGap(o.vgap + o.bgap), + width: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.grid", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columns: list.length, rows: 1, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("horizontal_center布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout); +} diff --git a/src/core/wrapper/layout/middle/middle.vertical.js b/src/core/wrapper/layout/middle/middle.vertical.js index b835bc4f6..a203e205f 100644 --- a/src/core/wrapper/layout/middle/middle.vertical.js +++ b/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 - * @extends BI.Layout + * @class VerticalCenterLayout + * @extends Layout */ -BI.VerticalCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class VerticalCenterLayout extends Layout { + static xtype = "bi.vertical_center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-v-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - BI.VerticalCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options, items = o.items; - var list = []; - BI.each(items, function (i) { + render() { + super.render(...arguments); + const self = this, o = this.options, items = o.items; + const list = []; + each(items, i => { list.push({ column: 0, row: i, - el: BI._lazyCreateWidget({ + el: _lazyCreateWidget({ 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) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", left: self._optimiseGap(o.hgap + o.lgap), right: self._optimiseGap(o.hgap + o.rgap), top: self._optimiseGap(o.vgap + o.tgap), bottom: self._optimiseGap(o.vgap + o.bgap), - height: "auto" + height: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.grid", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columns: 1, rows: list.length, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("vertical_center布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout); +} diff --git a/src/core/wrapper/layout/responsive/index.js b/src/core/wrapper/layout/responsive/index.js new file mode 100644 index 000000000..89f0bb09d --- /dev/null +++ b/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"; diff --git a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js index 592d50641..7cfceede4 100644 --- a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js +++ b/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. * - * @class BI.ResponsiveFlexHorizontalLayout - * @extends BI.FlexHorizontalLayout + * @class ResponsiveFlexHorizontalLayout + * @extends FlexHorizontalLayout */ -BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { - // props: function () { - // return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { - // // extraCls: "bi-responsive-f-h" - // }); - // }, +@shortcut() +export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout { + static xtype = "bi.responsive_flex_horizontal"; - mounted: function () { - var self = this, o = this.options; - if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + mounted() { + const o = this.options; + if (o.horizontalAlign !== HorizontalAlign.Center) { return; } - var defaultResize = function () { + const defaultResize = () => { if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.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); + each(this._children, (i, child) => { + this._clearGap(child); + 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(); if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { if (clientWidth > 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - }) - self.resize(); - self.element.css("flex-direction", "row"); + each(this._children, (i, child) => { + this._clearGap(child); + }); + this.resize(); + this.element.css("flex-direction", "row"); } } } - } - this.unResize = BI.Resizers.add(this.getName(), resize); + }; + this.unResize = Resizers.add(this.getName(), resize); defaultResize(); - }, + } - destroyed: function () { + destroyed() { this.unResize?.(); } -}); -BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); +} diff --git a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js index 5e8fcfd95..90677598a 100644 --- a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js +++ b/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. * - * @class BI.ResponsiveFlexWrapperHorizontalLayout - * @extends BI.FlexWrapperHorizontalLayout + * @class ResponsiveFlexWrapperHorizontalLayout + * @extends FlexWrapperHorizontalLayout */ -BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { - // props: function () { - // return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { - // extraCls: "bi-responsive-f-h" - // }); - // }, +@shortcut() +export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout { + static xtype = "bi.responsive_flex_scrollable_horizontal"; - mounted: function () { - var self = this, o = this.options; - if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + mounted() { + const o = this.options; + if (o.horizontalAlign !== HorizontalAlign.Center) { return; } - var defaultResize = function () { + const defaultResize = () => { if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.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); + each(this._children, (i, child) => { + this._clearGap(child); + this._handleReverseGap(child, o.items[i], i | 0); }); - self.element.css("flex-direction", "column"); - self.$wrapper.element.css("flex-direction", "column"); + this.element.css("flex-direction", "column"); + this.$wrapper.element.css("flex-direction", "column"); } } } - } - var resize = function () { + }; + const resize = () => { defaultResize(); if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { if (clientWidth > 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - }) - self.resize(); - self.element.css("flex-direction", "row"); - self.$wrapper.element.css("flex-direction", "row"); + each(this._children, (i, child) => { + this._clearGap(child); + }); + this.resize(); + this.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(); - }, + } - destroyed: function () { + destroyed() { this.unResize(); } -}); -BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); +} diff --git a/src/core/wrapper/layout/responsive/responsive.inline..js b/src/core/wrapper/layout/responsive/responsive.inline..js deleted file mode 100644 index 08f27fcfc..000000000 --- a/src/core/wrapper/layout/responsive/responsive.inline..js +++ /dev/null @@ -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); diff --git a/src/core/wrapper/layout/responsive/responsive.inline.js b/src/core/wrapper/layout/responsive/responsive.inline.js new file mode 100644 index 000000000..747a9d9cf --- /dev/null +++ b/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(); + } +} diff --git a/src/core/wrapper/layout/sticky/index.js b/src/core/wrapper/layout/sticky/index.js new file mode 100644 index 000000000..e4d9a91be --- /dev/null +++ b/src/core/wrapper/layout/sticky/index.js @@ -0,0 +1,2 @@ +export { HorizontalStickyLayout } from "./sticky.horizontal"; +export { VerticalStickyLayout } from "./sticky.vertical"; diff --git a/src/core/wrapper/layout/sticky/sticky.horizontal.js b/src/core/wrapper/layout/sticky/sticky.horizontal.js index d88f28b6d..d4b15cd66 100644 --- a/src/core/wrapper/layout/sticky/sticky.horizontal.js +++ b/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, { - props: function () { - return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class HorizontalStickyLayout extends FlexHorizontalLayout { + static xtype = "bi.horizontal_sticky"; + + props() { + return extend(super.props(...arguments), { extraCls: "bi-h-sticky", scrollx: true, - // horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch + // horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.HorizontalStickyLayout.superclass._addElement.apply(this, arguments); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (o.columnSize.length > 0) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { columnSize = null; } } if (columnSize !== "fill") { - var fillIndex; - BI.count(0, o.items.length, index => { - if (BI.isNotNull(fillIndex)) { + let fillIndex; + count(0, o.items.length, index => { + if (isNotNull(fillIndex)) { return; } if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) { @@ -41,15 +49,15 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, { w.element.css({ position: "sticky", zIndex: 1, - right: 0 + right: 0, }); } } else { w.element.css({ - overflow: "" + overflow: "", }); } + return w; } -}); -BI.shortcut("bi.horizontal_sticky", BI.HorizontalStickyLayout); +} diff --git a/src/core/wrapper/layout/sticky/sticky.vertical.js b/src/core/wrapper/layout/sticky/sticky.vertical.js index 71dc3ed8c..7a05bb78b 100644 --- a/src/core/wrapper/layout/sticky/sticky.vertical.js +++ b/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, { - props: function () { - return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class VerticalStickyLayout extends FlexVerticalLayout { + static xtype = "bi.vertical_sticky"; + + props() { + return extend(super.props(...arguments), { extraCls: "bi-v-sticky", scrolly: true, - horizontalAlign: BI.HorizontalAlign.Stretch, - // verticalAlign: BI.VerticalAlign.Stretch + horizontalAlign: HorizontalAlign.Stretch, + // verticalAlign: VerticalAlign.Stretch }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.VerticalStickyLayout.superclass._addElement.apply(this, arguments); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; if (o.rowSize.length > 0) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { rowSize = null; } } if (rowSize !== "fill") { - var fillIndex; - BI.count(0, o.items.length, index => { - if (BI.isNotNull(fillIndex)) { + let fillIndex; + count(0, o.items.length, index => { + if (isNotNull(fillIndex)) { return; } if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) { @@ -41,15 +49,15 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, { w.element.css({ position: "sticky", zIndex: 1, - bottom: 0 + bottom: 0, }); } } else { w.element.css({ - overflow: "" + overflow: "", }); } + return w; } -}); -BI.shortcut("bi.vertical_sticky", BI.VerticalStickyLayout); +}